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

// MODO LOCAL: cuando el internet del local se cae, el panel lo avisa y ofrece
// UN boton para seguir trabajando contra la laptop del negocio (el cerebrito),
// sin que nadie copie direcciones: mientras hay internet, el panel APRENDE
// solo donde vive la laptop (viene en su latido) y la recuerda en el
// dispositivo. El POS local devuelve solo al panel cuando el internet vuelve.

export default function ModoLocal({ restauranteId }: { restauranteId: string }) {
  const estado = useEstadoTiempoReal(restauranteId);
  const [sinRed, setSinRed] = useState(() => !navigator.onLine);
  const [canalCaido, setCanalCaido] = useState(false);
  const [urlLocal, setUrlLocal] = useState<string | null>(() => {
    try {
      return localStorage.getItem('gx_local_' + restauranteId);
    } catch {
      return null;
    }
  });

  // Mientras HAY internet: aprender (del latido) la direccion de la laptop.
  useEffect(() => {
    let vivo = true;
    async function aprender() {
      const { data } = await supabase
        .from('cerebritos')
        .select('detalle')
        .eq('restaurante_id', restauranteId)
        .maybeSingle();
      const d = (data?.detalle ?? null) as { ip?: string; pos_puerto?: number } | null;
      if (vivo && d?.ip) {
        const url = `http://${d.ip}:${d.pos_puerto ?? 8738}`;
        setUrlLocal(url);
        try {
          localStorage.setItem('gx_local_' + restauranteId, url);
        } catch {
          /* sin espacio: igual queda en memoria */
        }
      }
    }
    void aprender();
    const t = setInterval(() => {
      if (navigator.onLine) void aprender();
    }, 300_000);
    return () => {
      vivo = false;
      clearInterval(t);
    };
  }, [restauranteId]);

  // Detectar la caida: el navegador sin red, o el canal en vivo caido un buen rato.
  useEffect(() => {
    const on = () => setSinRed(false);
    const off = () => setSinRed(true);
    window.addEventListener('online', on);
    window.addEventListener('offline', off);
    return () => {
      window.removeEventListener('online', on);
      window.removeEventListener('offline', off);
    };
  }, []);
  useEffect(() => {
    if (estado !== 'reconectando') {
      setCanalCaido(false);
      return;
    }
    const t = setTimeout(() => setCanalCaido(true), 12_000);
    return () => clearTimeout(t);
  }, [estado]);

  if (!(sinRed || canalCaido) || !urlLocal) return null;
  return (
    <div className="sticky top-0 z-40 flex flex-wrap items-center gap-2 bg-amber-500 px-4 py-2.5 text-sm font-bold text-noche">
      <span className="min-w-[200px] flex-1">
        Sin conexión a internet. El salón puede seguir trabajando con el sistema local de la laptop.
      </span>
      <a href={urlLocal} className="rounded-lg bg-noche px-3 py-1.5 font-extrabold text-white">
        Trabajar sin internet
      </a>
    </div>
  );
}
