'use client'

import { useEffect, Suspense } from 'react'
import { useSearchParams } from 'next/navigation'
import Nav from './components/Nav'
import Drop from './components/Drop'
import InfoBox from './components/InfoBox'
import Signup from './components/Signup'
import PastDrops from './components/PastDrops'
import Footer from './components/Footer'
import UnlockBar from './components/UnlockBar'
import { useI18n } from '@/lib/i18n'

function PaymentHandler() {
  const searchParams = useSearchParams()
  const { t } = useI18n()

  useEffect(() => {
    const payment = searchParams.get('payment')
    const orderId = searchParams.get('order_id')

    if (payment === 'success' && orderId) {
      // Clean up URL - IPN is handled by external service
      window.history.replaceState({}, '', window.location.pathname)
    } else if (payment === 'cancelled') {
      alert(t('payment.cancelled'))
      // Clean up URL
      window.history.replaceState({}, '', window.location.pathname)
    }
  }, [searchParams, t])

  return null
}

export default function Home() {
  const { t } = useI18n()

  return (
    <>
      <Suspense fallback={null}>
        <PaymentHandler />
      </Suspense>
      <Nav />
      <UnlockBar />
      <header className="container">
        <h1>{t('header.title')}</h1>
        <p>{t('header.subtitle')}</p>
      </header>

      <section className="container" id="drop">
        <Drop />
        <InfoBox />
      </section>

      <section className="container" id="community">
        <Signup />
      </section>

      <section className="container" id="past">
        <h2>{t('pastDrops.title')}</h2>
        <PastDrops limit={3} showMoreLink={true} />
      </section>

      <Footer />
    </>
  )
}