import { useEffect, useState } from 'react'
import { apiFetch } from '../../lib/auth'
import { useCountdown } from '../../hooks/useCountdown'
import { useStatusTap, type StatusColor } from '../../hooks/useStatusTap'
import { SessionInfo, type SessionInfoData } from './SessionInfo'
import { StatusButtons } from './StatusButtons'
import { CountdownTimer } from './CountdownTimer'

interface StatusBoardProps {
  participantId: string
}

export function StatusBoard({ participantId }: StatusBoardProps) {
  const [info, setInfo] = useState<SessionInfoData | null>(null)
  const [infoError, setInfoError] = useState<string | null>(null)
  const [currentStatus, setCurrentStatus] = useState<StatusColor | null>(null)
  const [tapCounter, setTapCounter] = useState(0)

  const { secondsLeft } = useCountdown(tapCounter)
  const { sending, error, submit } = useStatusTap({
    participantId,
    onStatusChange: (status) => {
      setCurrentStatus(status)
      setTapCounter((counter) => counter + 1)
    },
  })

  useEffect(() => {
    if (secondsLeft === 0) setCurrentStatus(null)
  }, [secondsLeft])

  useEffect(() => {
    const load = async () => {
      try {
        const data = await apiFetch<{ session_info: SessionInfoData; current_status: StatusColor | null }>(
          `/api/status-info/${participantId}`,
        )
        setInfo(data.session_info)
        setCurrentStatus(data.current_status)
      } catch (e) {
          setInfoError(e instanceof Error ? e.message : 'Session gagal dimuat.')
      }
    }
    load()
  }, [participantId])

  const handleTap = async (color: StatusColor) => {
    await submit(color)
  }

  if (infoError) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-cream p-4">
        <div className="rounded-xl border border-red bg-red-soft px-6 py-4 text-center text-sm text-red">
          {infoError}
        </div>
      </div>
    )
  }

  return (
    <div className="flex min-h-screen flex-col bg-cream">
      <main className="mx-auto flex w-full max-w-3xl flex-1 flex-col items-center justify-center gap-7 px-4 py-10 sm:gap-9">
        {info ? (
          <SessionInfo info={info} />
        ) : (
          <p className="text-sm text-muted">Memuat session…</p>
        )}

        {info && <div className="text-center"><p className="text-3xl font-bold tracking-tight text-ink sm:text-4xl">Bagaimana kondisi belajar Anda?</p><p className="mt-2 text-sm text-body">Pilih warna yang paling sesuai dengan kondisi Anda saat ini.</p></div>}

        <StatusButtons
          currentStatus={currentStatus}
          sending={sending}
          onTap={handleTap}
        />

        {error && (
          <div className="rounded-lg bg-red-soft px-4 py-3 text-center text-sm text-red">
            {error}
          </div>
        )}

        <CountdownTimer secondsLeft={secondsLeft} />

        {currentStatus && (
          <p className="text-sm font-medium text-body">
            Status Anda:{' '}
            <span className="font-semibold capitalize text-ink">{currentStatus}</span>
          </p>
        )}
      </main>
    </div>
  )
}