import { Icono } from '@gustito/shared/iconos';
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { variablesTema } from '@gustito/shared';
import { supabase } from '../lib/supabase';
import TutorialSala from './TutorialSala';

interface ItemCola {
  cantidad: number;
  nombre: string;
}
interface Fila {
  mesa: string;
  codigo: string;
  estado: string;
  items: ItemCola[];
}
interface SalaData {
  restaurante: {
    nombre: string;
    logo_url: string | null;
    color: string;
    promedio_min: number;
    abierto: boolean;
  } | null;
  cola: Fila[];
}

// Esta pantalla vive en una TV, prendida el dia entero, sin nadie que la
// recargue si algo falla: por eso NO alcanza con refetchInterval a secas.
// - refetchIntervalInBackground: algunos navegadores/cajitas de TV tratan la
//   pestana como "background" aunque este en la pantalla, y por default React
//   Query pausa el poll ahi.
// - Vigia de frescura: si el ultimo dato tiene mas de ~4 ciclos de antiguedad,
//   algo esta trabado (red caida, poll pausado por el navegador) y lo decimos,
//   en vez de dejar la cola de pedidos viendose "normal" pero vieja.
const POLL_MS = 6000;
const FRESCURA_MAX_MS = POLL_MS * 4;

export default function SalaEspera() {
  const { slug = '' } = useParams();
  const [ahora, setAhora] = useState(() => Date.now());
  const [tutorial, setTutorial] = useState(false);
  const [sinRed, setSinRed] = useState(() => typeof navigator !== 'undefined' && !navigator.onLine);

  const { data, dataUpdatedAt, refetch } = useQuery({
    queryKey: ['sala', slug],
    queryFn: async () => {
      const { data, error } = await supabase.rpc('sala_espera', { p_slug: slug });
      if (error) throw error;
      return data as unknown as SalaData;
    },
    refetchInterval: POLL_MS,
    refetchIntervalInBackground: true,
  });

  useEffect(() => {
    const t = setInterval(() => setAhora(Date.now()), 1000);
    return () => clearInterval(t);
  }, []);

  // Al volver la pestana (o la app TV vuelve del standby), refrescar de una en
  // vez de esperar hasta el proximo tick del intervalo.
  useEffect(() => {
    const alVolver = () => {
      if (document.visibilityState === 'visible') void refetch();
    };
    const conRed = () => {
      setSinRed(false);
      void refetch();
    };
    const perdioRed = () => setSinRed(true);
    document.addEventListener('visibilitychange', alVolver);
    window.addEventListener('pageshow', alVolver);
    window.addEventListener('online', conRed);
    window.addEventListener('offline', perdioRed);
    return () => {
      document.removeEventListener('visibilitychange', alVolver);
      window.removeEventListener('pageshow', alVolver);
      window.removeEventListener('online', conRed);
      window.removeEventListener('offline', perdioRed);
    };
  }, [refetch]);

  const desactualizado = dataUpdatedAt > 0 && ahora - dataUpdatedAt > FRESCURA_MAX_MS;
  const avisoConexion = sinRed || desactualizado;

  const rest = data?.restaurante;
  const cola = data?.cola ?? [];
  const promedio = rest?.promedio_min ?? 10;
  const reloj = new Date(ahora);
  const horaTxt = `${String(reloj.getHours()).padStart(2, '0')}:${String(reloj.getMinutes()).padStart(2, '0')}`;

  return (
    <div
      className="min-h-screen bg-[#0a0a12] text-white"
      style={variablesTema(rest?.color || '#F97316') as React.CSSProperties}
    >
      {/* Cabecera */}
      <header className="flex items-center justify-between gap-4 border-b border-white/10 px-8 py-5">
        <div className="flex items-center gap-4">
          {rest?.logo_url && (
            <img src={rest.logo_url} alt="" className="h-16 w-16 rounded-2xl object-cover ring-2 ring-white/15" />
          )}
          <div>
            <h1 className="text-3xl font-black leading-none tracking-tight sm:text-4xl">{rest?.nombre ?? 'Sala de espera'}</h1>
            <p className="mt-1 text-sm font-bold uppercase tracking-[0.2em] text-amber-400">Sala de espera</p>
          </div>
        </div>
        <div className="flex items-center gap-5">
          {avisoConexion && (
            <span
              className="flex items-center gap-2 rounded-full bg-red-500/15 px-4 py-2 text-sm font-bold text-red-300 ring-1 ring-red-400/40"
              role="status"
            >
              <span className="h-2 w-2 animate-pulse rounded-full bg-red-400" aria-hidden />
              {sinRed ? 'Sin internet' : 'Reconectando'} · mostrando lo último
            </span>
          )}
          <button
            onClick={() => setTutorial(true)}
            className="rounded-2xl bg-amber-400 px-5 py-3 text-lg font-black text-black shadow-lg transition hover:scale-[1.03] active:scale-95"
          >
            ▶ ¿Cómo pedir?
          </button>
          <div className="text-right">
            <p className="font-mono text-4xl font-black tabular-nums sm:text-5xl">{horaTxt}</p>
            <p className="mt-1 text-sm font-bold text-white/50">
              Gustito <span className="text-amber-400">Xpress</span>
            </p>
          </div>
        </div>
      </header>

      {/* Cola */}
      <main className="px-6 py-6 sm:px-8">
        {cola.length === 0 ? (
          <div className="grid min-h-[60vh] place-items-center text-center">
            <div>
              <Icono nombre="plato" className="mx-auto h-24 w-24 text-white/70" grosor={1.2} />
              <p className="mt-4 text-3xl font-black">Sin pedidos en cola</p>
              <p className="mt-2 text-lg text-white/50">Los pedidos de las mesas aparecerán aquí en orden de llegada.</p>
            </div>
          </div>
        ) : (
          <div className="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-3">
            {cola.map((f, i) => {
              const preparando = i === 0 || f.estado === 'preparando';
              const min = (i + 1) * promedio;
              return (
                <article
                  key={f.codigo}
                  className={`flex items-stretch gap-3 rounded-2xl p-3 ring-1 ${
                    i === 0 ? 'bg-amber-400/10 ring-amber-400/50' : 'bg-white/5 ring-white/10'
                  }`}
                >
                  {/* Mesa */}
                  <div className="flex w-16 shrink-0 flex-col items-center justify-center rounded-xl bg-black/30 py-2">
                    <span className="text-[9px] font-bold uppercase tracking-wide text-white/50">Mesa</span>
                    <span className="text-2xl font-black leading-none text-amber-400">{f.mesa}</span>
                  </div>

                  {/* Pedido */}
                  <div className="min-w-0 flex-1">
                    <div className="mb-1 flex items-center gap-1.5">
                      <span className="font-mono text-[11px] font-bold text-white/60">{f.codigo}</span>
                      <span
                        className={`rounded-full px-2 py-0.5 text-[9px] font-black uppercase ${
                          preparando ? 'bg-amber-400 text-black' : 'bg-sky-400 text-black'
                        }`}
                      >
                        {preparando ? (
                          <span className="flex items-center gap-1">
                            <Icono nombre="cocina" className="h-2.5 w-2.5" grosor={2.2} />
                            Preparando
                          </span>
                        ) : (
                          'En cola'
                        )}
                      </span>
                    </div>
                    <ul className="space-y-0 text-sm font-bold leading-tight">
                      {f.items?.slice(0, 3).map((it, k) => (
                        <li key={k} className="truncate">
                          <span className="text-amber-400">{it.cantidad}×</span> {it.nombre}
                        </li>
                      ))}
                      {f.items && f.items.length > 3 && (
                        <li className="text-xs font-semibold text-white/50">+{f.items.length - 3} más...</li>
                      )}
                    </ul>
                  </div>

                  {/* Espera */}
                  <div className="flex w-16 shrink-0 flex-col items-center justify-center rounded-xl bg-black/20 py-2 text-center">
                    <span className="text-lg font-black leading-none">{i}</span>
                    <span className="text-[8px] font-bold uppercase tracking-wide text-white/50">adelante</span>
                    <span className="mt-1 text-base font-black leading-none text-amber-400">~{min}</span>
                    <span className="text-[8px] font-bold uppercase tracking-wide text-white/50">min</span>
                  </div>
                </article>
              );
            })}
          </div>
        )}
      </main>

      {tutorial && <TutorialSala nombre={rest?.nombre ?? ''} onCerrar={() => setTutorial(false)} />}
    </div>
  );
}
