import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import type { Restaurante } from '@gustito/shared';
import { useAuth } from './lib/auth';
import { useInstalarPWA } from './lib/useInstalarPWA';
import AvisosPush from './components/AvisosPush';
import { supabase } from './lib/supabase';
import Landing from './pages/Landing';
import AuthModal from './pages/AuthModal';
import RecuperarPassword from './pages/RecuperarPassword';
import { LegalModal } from './pages/Legal';
import Registro from './pages/Registro';
import Wizard from './pages/wizard/Wizard';
import Panel from './pages/Panel';
import CeoPortal from './pages/CeoPortal';
import EliminarCuenta from './pages/EliminarCuenta';
import AceptarLegal from './components/AceptarLegal';

export default function App() {
  const { session, perfil, cargando, recuperando, terminarRecuperacion, salir } = useAuth();
  const restId = perfil?.restaurante_id ?? null;

  const restQ = useQuery({
    queryKey: ['mi-restaurante', restId],
    enabled: !!restId,
    queryFn: async () => {
      const { data, error } = await supabase
        .from('restaurantes')
        .select('*')
        .eq('id', restId as string)
        .maybeSingle();
      if (error) throw error;
      return data as unknown as Restaurante;
    },
  });

  if (cargando) return <Centro>Cargando...</Centro>;
  if (window.location.pathname === '/eliminar-cuenta') return <EliminarCuenta />;
  if (recuperando) return <RecuperarPassword onListo={terminarRecuperacion} />;
  if (!session) return <Publico />;
  if (perfil?.es_fundador) return <CeoPortal salir={salir} />;
  if (!perfil || !perfil.restaurante_id) return <Registro />;
  if (restQ.isLoading) return <Centro>Cargando tu negocio...</Centro>;
  const rest = restQ.data;
  if (!rest) return <Centro>No encontramos tu negocio.</Centro>;
  if (!rest.publicado) {
    // El wizard configura el negocio: eso es del dueño, no del mesero ni del encargado.
    if (perfil?.rol === 'staff' || perfil?.rol === 'encargado')
      return <Centro>El negocio aún no está publicado. Pídele al dueño que termine la configuración.</Centro>;
    return <Wizard restaurante={rest} />;
  }
  return (
    <>
      <Panel restaurante={rest} />
      <AvisosPush contexto="negocios" />
      <BotonInstalar />
      {/* Personal creado por el dueño: acepta terminos en su primer inicio de sesion. */}
      <AceptarLegal />
    </>
  );
}

// Boton flotante para instalar el panel como app (aparece solo si el navegador lo permite).
function BotonInstalar() {
  const { instalable, instalar, instalado } = useInstalarPWA();
  if (instalado || !instalable) return null;
  return (
    <button
      onClick={instalar}
      className="fixed bottom-20 left-1/2 z-50 flex -translate-x-1/2 items-center gap-2 rounded-full bg-dorado px-4 py-2.5 text-sm font-bold text-noche shadow-glow lg:bottom-4"
    >
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" />
      </svg>
      Instalar app
    </button>
  );
}

// Vista publica (sin sesion): la landing de Gustito Xpress + el modal de entrar/registrar.
function Publico() {
  const [modal, setModal] = useState<'entrar' | 'crear' | null>(null);
  const [legal, setLegal] = useState<'terminos' | 'privacidad' | null>(null);
  return (
    <>
      <Landing onAuth={(m) => setModal(m)} onLegal={(d) => setLegal(d)} />
      {modal && <AuthModal modoInicial={modal} onCerrar={() => setModal(null)} onLegal={(d) => setLegal(d)} />}
      {legal && <LegalModal doc={legal} onCerrar={() => setLegal(null)} />}
    </>
  );
}

function Centro({ children }: { children: React.ReactNode }) {
  return <div className="min-h-full flex items-center justify-center p-8 text-niebla">{children}</div>;
}
