'use client'

import { useEffect, useState } from 'react'
import { OrgMark, PoweredBy } from '@/components/OrgBrand'

type Row = { number: number; status: string }

export default function Screen({ style, brand, minors, eventId, eventName, slug, initial, appUrl }: {
  style: React.CSSProperties; brand: { name: string; logoUrl: string | null; whiteLabel: boolean }
  minors: boolean; eventId: string; eventName: string; slug: string; initial: Row[]; appUrl: string
}) {
  const [rows, setRows] = useState<Row[]>(initial)
  const [fresh, setFresh] = useState<number | null>(null)

  useEffect(() => {
    const es = new EventSource(`/api/stream/${eventId}?scope=public`)
    es.onmessage = m => {
      try {
        const e: Row = JSON.parse(m.data)
        setRows(prev => {
          const rest = prev.filter(r => r.number !== e.number)
          return ['paid', 'preparing', 'ready'].includes(e.status) ? [...rest, e] : rest
        })
        if (e.status === 'ready') { setFresh(e.number); setTimeout(() => setFresh(n => (n === e.number ? null : n)), 6000) }
      } catch {}
    }
    return () => es.close()
  }, [eventId])

  const ready = rows.filter(r => r.status === 'ready').slice(-24).reverse()
  const cooking = rows.filter(r => r.status !== 'ready').slice(0, 30)

  return (
    <main style={style} className="flex min-h-dvh flex-col bg-ink-950 p-6 text-piedra md:p-10">
      <header className="mb-6 flex items-end justify-between">
        <div>
          <p className="flex items-center gap-3 text-sm uppercase tracking-widest text-gray-500">{eventName}{minors && <span className="badge-minors normal-case tracking-normal">● Evento sin alcohol</span>}</p>
          <h1 className="text-3xl font-bold md:text-5xl">Pedidos</h1>
        </div>
        <p className="text-right text-sm text-gray-500">Pedí sin fila en<br /><span className="font-mono text-gray-300">{appUrl.replace(/^https?:\/\//, '')}/e/{slug}</span></p>
      </header>

      <div className="grid flex-1 gap-6 md:grid-cols-[2fr_1fr]">
        <section className="rounded-card bg-ink-900 p-6">
          <h2 className="mb-5 flex items-center gap-3 text-xl font-semibold text-live md:text-2xl">
            <span className="h-3 w-3 animate-pulse-ring rounded-full bg-live" />Listos para retirar
          </h2>
          {ready.length === 0 ? <p className="text-gray-500">Aparecen acá cuando la barra los marca listos.</p> : (
            <div className="grid grid-cols-3 gap-4 md:grid-cols-4">
              {ready.map(r => (
                <div key={r.number}
                  className={`flex aspect-square animate-scale-in items-center justify-center rounded-card text-5xl font-bold tabular-nums md:text-7xl ${
                    fresh === r.number ? 'bg-live text-ink-950 shadow-mint' : 'bg-ink-700'}`}>
                  {r.number}
                </div>
              ))}
            </div>
          )}
        </section>
        <section className="rounded-card bg-ink-900 p-6">
          <h2 className="mb-5 text-xl font-semibold text-gray-400 md:text-2xl">Preparando</h2>
          <div className="flex flex-wrap gap-2">
            {cooking.map(r => <span key={r.number} className="rounded-control bg-ink-800 px-3 py-2 text-2xl font-semibold tabular-nums text-gray-300">{r.number}</span>)}
          </div>
        </section>
      </div>
      <div className="mt-6 flex items-center justify-center gap-6 opacity-80">
        {(brand.logoUrl || brand.whiteLabel) && <OrgMark brand={brand} height={28} className="text-piedra" />}
        <PoweredBy brand={brand} />
      </div>
    </main>
  )
}