import { useEffect, useState } from 'react';
import { useEstadoTiempoReal } from '../lib/tiemporeal';

/**
 * Indicador honesto de conexion para las pantallas que pasan el dia abiertas
 * (cocina, panel). El peligro real de un KDS no es caerse: es quedarse CIEGO
 * viendose normal. Esto lo hace visible:
 *  - Nada cuando el canal esta en vivo (no estorba).
 *  - "Reconectando" (ambar) si el canal en vivo se cayo y estamos volviendo.
 *  - "Sin internet" (rojo) si el equipo perdio la red.
 * Espera unos segundos antes de aparecer para no parpadear en micro-cortes.
 */
export default function IndicadorConexion({ restauranteId }: { restauranteId: string }) {
  const estado = useEstadoTiempoReal(restauranteId);
  const [sinRed, setSinRed] = useState(() => typeof navigator !== 'undefined' && !navigator.onLine);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const conRed = () => setSinRed(false);
    const perdioRed = () => setSinRed(true);
    window.addEventListener('online', conRed);
    window.addEventListener('offline', perdioRed);
    return () => {
      window.removeEventListener('online', conRed);
      window.removeEventListener('offline', perdioRed);
    };
  }, []);

  const enProblemas = sinRed || estado !== 'en_vivo';
  useEffect(() => {
    if (!enProblemas) {
      setVisible(false);
      return;
    }
    const t = setTimeout(() => setVisible(true), 4000);
    return () => clearTimeout(t);
  }, [enProblemas]);

  if (!visible) return null;

  const rojo = sinRed;
  return (
    <span
      className={`inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-bold ring-1 ${
        rojo ? 'bg-red-500/15 text-red-300 ring-red-400/40' : 'bg-amber-400/15 text-amber-300 ring-amber-400/40'
      }`}
      role="status"
    >
      <span className={`h-2 w-2 animate-pulse rounded-full ${rojo ? 'bg-red-400' : 'bg-amber-300'}`} aria-hidden />
      {rojo ? 'Sin internet · mostrando lo último' : 'Reconectando…'}
    </span>
  );
}
