"use client"

/**
 * Pantalla fija de la BARRA: lo que hay que servir, en el segundo en que el
 * mesero confirma la ronda. Mira NUESTRO KDS (el mismo canal que la pantalla
 * de cocina) y muestra solo los ítems de barra (`lib/kds-estaciones.ts`).
 *
 * Por qué existe (2026-09-02): la barra no tiene pantalla y depende del papel
 * de INVU, que en órdenes mixtas comida + bebida no salió 3 de 4 veces (la
 * gaseosa de la mesa 1 llegó a INVU y quedó sin «Tiempo Comanda»). Con esto el
 * bartender se entera aunque INVU no imprima.
 *
 * «Servido» es POR APARATO (localStorage): la barra tiene un solo aparato y
 * así no se toca el estado del ticket de cocina. El ticket también desaparece
 * solo cuando cocina lo entrega o la cuenta se cierra (status delivered).
 */

import { useCallback, useEffect, useMemo, useRef, useState } from "react"
import { useRouter } from "next/navigation"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Wine, Loader2, Volume2, VolumeX, Wifi, WifiOff, Maximize, LogOut, RefreshCw, Check, Undo2 } from "lucide-react"
import { cn } from "@/lib/utils"
import { useSede } from "@/lib/sede-context"
import { useAuthStore } from "@/lib/auth-store"
import { useKDSStore, type KDSOrder } from "@/lib/kds-store"
import { useKitchenAlerts } from "@/hooks/use-realtime"
import { usePageVisibility } from "@/hooks/use-page-visibility"
import { playKDSAlert } from "@/lib/kds-config"
import { itemsParaBarra, nombresDeModificadores } from "@/lib/barra-ticket"
import { toast } from "@/hooks/use-toast"

const CLAVE_SERVIDOS = "barra-servidos"
const HORAS_VISIBLES = 6

function leerServidos(): Record<string, number> {
  try {
    return JSON.parse(localStorage.getItem(CLAVE_SERVIDOS) || "{}")
  } catch {
    return {}
  }
}

const modificadoresDe = nombresDeModificadores

export default function BarraDisplayPage() {
  const router = useRouter()
  const { sede, sedeId, isLoading: sedeLoading } = useSede()
  const { isAuthenticated, user, logout } = useAuthStore()
  const isVisible = usePageVisibility()
  const { orders, isLoading, fetchOrders } = useKDSStore()
  const [now, setNow] = useState(new Date())
  const [soundEnabled, setSoundEnabled] = useState(true)
  const [servidos, setServidos] = useState<Record<string, number>>({})
  const [mostrarServidos, setMostrarServidos] = useState(false)
  const vistosRef = useRef<Set<string> | null>(null)

  const { isConnected, newTickets, clearTicketAlert } = useKitchenAlerts(String(sedeId || ""))

  useEffect(() => {
    setServidos(leerServidos())
  }, [])

  useEffect(() => {
    if (sedeId) fetchOrders(sedeId.toString())
  }, [sedeId, fetchOrders])

  useEffect(() => {
    if (!sedeId || !isVisible) return
    fetchOrders(sedeId.toString())
    const t = setInterval(() => fetchOrders(sedeId.toString()), 10000)
    return () => clearInterval(t)
  }, [sedeId, fetchOrders, isVisible])

  useEffect(() => {
    const t = setInterval(() => setNow(new Date()), 1000)
    return () => clearInterval(t)
  }, [])

  // El SSE avisa que hay ticket nuevo: recargar ya (el sonido lo decide la lista,
  // porque el evento no trae categorías).
  useEffect(() => {
    if (newTickets.length === 0) return
    if (sedeId) fetchOrders(sedeId.toString())
    clearTicketAlert(newTickets[newTickets.length - 1].ticketId)
  }, [newTickets, sedeId, fetchOrders, clearTicketAlert])

  const limite = now.getTime() - HORAS_VISIBLES * 3600_000
  const tickets = useMemo(
    () =>
      orders
        .filter((o) => o.status !== "delivered")
        .filter((o) => new Date(o.createdAt).getTime() > limite)
        .filter((o) => itemsParaBarra(o.items).length > 0)
        .map((o) => ({ ...o, items: itemsParaBarra(o.items) }))
        .sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()),
    [orders, limite]
  )
  const pendientes = tickets.filter((t) => !servidos[t.id])
  const yaServidos = tickets.filter((t) => !!servidos[t.id])

  // Sonido + aviso por cada ticket de barra que no se había visto en este aparato.
  useEffect(() => {
    if (vistosRef.current === null) {
      vistosRef.current = new Set(tickets.map((t) => t.id))
      return
    }
    const nuevos = pendientes.filter((t) => !vistosRef.current!.has(t.id))
    if (nuevos.length === 0) return
    for (const t of nuevos) vistosRef.current.add(t.id)
    if (soundEnabled) playKDSAlert("newOrder")
    const t = nuevos[nuevos.length - 1]
    toast({
      title: t.tableNumber ? `Mesa ${t.tableNumber}: bebidas` : `Pedido #${t.orderNumber}: bebidas`,
      description: t.items.map((i) => `${i.quantity}x ${i.name}`).join(", "),
    })
  }, [tickets, pendientes, soundEnabled])

  const marcar = useCallback((id: string, servido: boolean) => {
    setServidos((prev) => {
      const next = { ...prev }
      if (servido) next[id] = Date.now()
      else delete next[id]
      // Limpieza: lo de hace más de un día no vuelve a aparecer.
      for (const k of Object.keys(next)) if (Date.now() - next[k] > 24 * 3600_000) delete next[k]
      try {
        localStorage.setItem(CLAVE_SERVIDOS, JSON.stringify(next))
      } catch {
        // sin storage, el estado vive en memoria hasta recargar
      }
      return next
    })
  }, [])

  const handleFullscreen = () => {
    if (document.fullscreenElement) document.exitFullscreen()
    else document.documentElement.requestFullscreen()
  }

  if (!isAuthenticated) {
    return (
      <div className="flex items-center justify-center h-screen bg-background text-foreground">
        <div className="text-center">
          <Wine className="h-16 w-16 mx-auto mb-4 opacity-50" />
          <p className="text-lg mb-2">Acceso requerido</p>
          <a href="/admin/login" className="text-naranja-vip underline hover:no-underline">
            Iniciar sesión
          </a>
        </div>
      </div>
    )
  }
  if (sedeLoading) {
    return (
      <div className="flex items-center justify-center h-screen bg-background">
        <Loader2 className="h-12 w-12 animate-spin text-verde-neon" />
      </div>
    )
  }
  if (!sede) return null

  const minutos = (t: KDSOrder) => Math.floor((now.getTime() - new Date(t.createdAt).getTime()) / 60000)

  const Tarjeta = ({ t, servido }: { t: (typeof tickets)[number]; servido: boolean }) => {
    const min = minutos(t)
    return (
      <div
        className={cn(
          "rounded-xl border-2 p-4 flex flex-col gap-3 bg-card",
          servido ? "border-muted opacity-60" : min >= 10 ? "border-red-500 animate-pulse" : min >= 5 ? "border-amber-500" : "border-verde-neon"
        )}
      >
        <div className="flex items-center justify-between">
          <div className="text-2xl font-black">{t.tableNumber ? `MESA ${t.tableNumber}` : `#${t.orderNumber}`}</div>
          <Badge variant="outline" className={cn("text-base font-mono", min >= 10 && !servido && "bg-red-600 text-white border-red-600")}>
            {min} min
          </Badge>
        </div>
        <ul className="space-y-2">
          {t.items.map((i, idx) => {
            const mods = modificadoresDe(i.modifiers)
            return (
              <li key={idx} className="text-xl leading-tight">
                <span className="font-bold">{i.quantity}x</span> {i.name}
                {mods.length > 0 && <div className="text-base text-muted-foreground pl-6">{mods.join(" · ")}</div>}
                {i.notes && <div className="text-base text-amber-600 pl-6">“{i.notes}”</div>}
              </li>
            )
          })}
        </ul>
        {t.notes && <div className="text-sm bg-amber-100 text-amber-900 rounded p-2">Nota de la mesa: {t.notes}</div>}
        {servido ? (
          <Button variant="outline" size="lg" onClick={() => marcar(t.id, false)}>
            <Undo2 className="h-5 w-5 mr-2" /> Volver a pendientes
          </Button>
        ) : (
          <Button size="lg" className="bg-verde-neon text-verde-noche hover:bg-verde-neon/90 text-lg" onClick={() => marcar(t.id, true)}>
            <Check className="h-5 w-5 mr-2" /> Servido
          </Button>
        )}
      </div>
    )
  }

  return (
    <div className="h-screen bg-background text-foreground flex flex-col overflow-hidden">
      <header className="flex items-center justify-between px-4 py-2 bg-verde-bosque border-b flex-shrink-0">
        <div className="flex items-center gap-3">
          <Wine className="h-6 w-6 text-naranja-vip" />
          <div>
            <h1 className="text-lg font-bold text-white leading-tight">BARRA - {sede.nombreCorto}</h1>
            <div className="flex items-center gap-2 text-xs text-white/70">
              <span>{now.toLocaleTimeString("es-VE", { hour: "2-digit", minute: "2-digit", second: "2-digit" })}</span>
              <Badge
                variant="outline"
                className={cn("text-[10px] px-1.5 py-0", isConnected ? "bg-green-900/50 text-green-400 border-green-700" : "bg-red-900/50 text-red-400 border-red-700")}
              >
                {isConnected ? (
                  <>
                    <Wifi className="h-2.5 w-2.5 mr-1" /> EN VIVO
                  </>
                ) : (
                  <>
                    <WifiOff className="h-2.5 w-2.5 mr-1" /> SIN CONEXIÓN
                  </>
                )}
              </Badge>
            </div>
          </div>
        </div>
        <div className="flex items-center gap-3">
          <span className="px-2 py-0.5 rounded bg-red-600/30 text-red-300 font-mono text-sm">{pendientes.length} por servir</span>
          <div className="flex items-center gap-1 border-l border-gray-700 pl-3">
            <Label htmlFor="sound-barra" className="cursor-pointer text-gray-400">
              {soundEnabled ? <Volume2 className="h-4 w-4" /> : <VolumeX className="h-4 w-4" />}
            </Label>
            <Switch id="sound-barra" checked={soundEnabled} onCheckedChange={setSoundEnabled} className="scale-75" />
          </div>
          <Button variant="ghost" size="sm" onClick={() => setMostrarServidos((v) => !v)} className="text-white/80 hover:text-white hover:bg-white/10 h-7 text-xs">
            {mostrarServidos ? "Ocultar servidos" : `Servidos (${yaServidos.length})`}
          </Button>
          <Button variant="ghost" size="icon" onClick={() => sedeId && fetchOrders(sedeId.toString())} disabled={isLoading} className="text-white/70 hover:text-white hover:bg-white/10 h-7 w-7">
            <RefreshCw className={cn("h-3.5 w-3.5", isLoading && "animate-spin")} />
          </Button>
          <Button variant="ghost" size="icon" onClick={handleFullscreen} className="text-white/70 hover:text-white hover:bg-white/10 h-7 w-7">
            <Maximize className="h-3.5 w-3.5" />
          </Button>
          <div className="border-l border-white/30 pl-2 ml-1 flex items-center gap-1">
            {user && <span className="text-[10px] text-white/60">{user.username}</span>}
            <Button
              variant="ghost"
              size="icon"
              onClick={() => {
                logout()
                router.push("/admin/login")
              }}
              className="text-white/60 hover:text-red-400 hover:bg-white/10 h-7 w-7"
            >
              <LogOut className="h-3.5 w-3.5" />
            </Button>
          </div>
        </div>
      </header>

      <div className="flex-1 p-3 min-h-0 overflow-y-auto">
        {isLoading && orders.length === 0 ? (
          <div className="flex items-center justify-center h-full">
            <Loader2 className="h-16 w-16 text-verde-neon/50 animate-spin" />
          </div>
        ) : pendientes.length === 0 && !mostrarServidos ? (
          <div className="flex items-center justify-center h-full">
            <div className="text-center">
              <Wine className="h-20 w-20 text-muted-foreground/50 mx-auto mb-4" />
              <p className="text-xl text-muted-foreground">Nada por servir</p>
              <p className="text-sm text-muted-foreground/70 mt-1">{sede.nombreCorto}</p>
            </div>
          </div>
        ) : (
          <div className="grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            {pendientes.map((t) => (
              <Tarjeta key={t.id} t={t} servido={false} />
            ))}
            {mostrarServidos && yaServidos.map((t) => <Tarjeta key={t.id} t={t} servido />)}
          </div>
        )}
      </div>
    </div>
  )
}