import { useEffect, useMemo, useRef, useState } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { estadoTienda, formatUsd, bsDesdeUsd, formatBs, type Restaurante } from '@gustito/shared';
import { useAuth } from '../lib/auth';
import { supabase } from '../lib/supabase';
import { generarReportePDF } from '../lib/reporte';
import Pedidos from './Pedidos';
import Cocina from './Cocina';
import Mesas from './Mesas';
import Menu from './Menu';
import Caja from './Caja';
import Inventario from './Inventario';
import Costos from './Costos';
import Clientes from './Clientes';
import Estadisticas from './Estadisticas';
import PuntoDeVenta from './PuntoDeVenta';
import PasoPerfil from './wizard/PasoPerfil';
import PasoPagos from './wizard/PasoPagos';
import PasoDelivery from './wizard/PasoDelivery';
import CompartirTienda from './CompartirTienda';
import MesasQR from './MesasQR';
import AlertaPagosMesa from './AlertaPagosMesa';
import AlertaLlamadas from '../components/AlertaLlamadas';
import ModoLocal from '../components/ModoLocal';
import AlertaPagosPorRevisar from '../components/AlertaPagosPorRevisar';
import IndicadorConexion from '../components/IndicadorConexion';
import { useCambiosRestaurante, fijarRolTiempoReal } from '../lib/tiemporeal';
import Repartidores from './Repartidores';
import Meseros from './Meseros';
import PuestosImpresion from './PuestosImpresion';

// ---- Contraste: la marca del restaurante puede ser clara u oscura ----
function luminancia(hex: string): number {
  const c = hex.replace('#', '');
  if (c.length < 6) return 0.5;
  const n = [0, 2, 4].map((i) => parseInt(c.slice(i, i + 2), 16) / 255);
  const f = (v: number) => (v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
  return 0.2126 * f(n[0]) + 0.7152 * f(n[1]) + 0.0722 * f(n[2]);
}
function aclarar(hex: string, k: number): string {
  const c = hex.replace('#', '');
  if (c.length < 6) return hex;
  const p = [0, 2, 4].map((i) => {
    const v = parseInt(c.slice(i, i + 2), 16);
    return Math.round(v + (255 - v) * k);
  });
  return '#' + p.map((x) => x.toString(16).padStart(2, '0')).join('');
}
function contraste(a: number, b: number): number {
  const x = Math.max(a, b);
  const y = Math.min(a, b);
  return (x + 0.05) / (y + 0.05);
}

function beepPedido() {
  try {
    const ctx = new AudioContext();
    const play = (t: number) => {
      const o = ctx.createOscillator();
      o.frequency.value = 880;
      o.connect(ctx.destination);
      o.start(ctx.currentTime + t);
      o.stop(ctx.currentTime + t + 0.16);
    };
    play(0);
    play(0.22);
    setTimeout(() => ctx.close(), 700);
  } catch {
    /* sin audio disponible */
  }
}

type Tab = 'inicio' | 'pedidos' | 'cocina' | 'mesas' | 'caja' | 'inventario' | 'costos' | 'clientes' | 'estadisticas' | 'menu' | 'config';

const NAV: { t: Tab; label: string; icon: string }[] = [
  { t: 'inicio', label: 'Inicio', icon: 'M3 11l9-8 9 8M5 10v10h14V10' },
  { t: 'pedidos', label: 'Pedidos', icon: 'M9 5h6M9 5a2 2 0 00-2 2v12h10V7a2 2 0 00-2-2M9 9h6M9 13h6' },
  { t: 'mesas', label: 'Mesas', icon: 'M4 9h16M6 9v8M18 9v8M3 9l2-4h14l2 4' },
  { t: 'caja', label: 'Caja', icon: 'M4 6h16a1 1 0 011 1v10a1 1 0 01-1 1H4a1 1 0 01-1-1V7a1 1 0 011-1zM15 11h4v2h-4a1 1 0 010-2z' },
  { t: 'inventario', label: 'Inventario', icon: 'M20 7L12 3 4 7m16 0l-8 4-8-4m16 0v10l-8 4-8-4V7' },
  { t: 'costos', label: 'Costos', icon: 'M12 8c-2.2 0-4 .9-4 2s1.8 2 4 2 4 .9 4 2-1.8 2-4 2m0-8c1.5 0 2.8.4 3.5 1M12 8V6m0 10c-1.5 0-2.8-.4-3.5-1m3.5 1v2M21 12a9 9 0 11-18 0 9 9 0 0118 0z' },
  { t: 'clientes', label: 'Clientes', icon: 'M16 20v-1a4 4 0 00-4-4H8a4 4 0 00-4 4v1M10 11a4 4 0 100-8 4 4 0 000 8M20 20v-1a4 4 0 00-3-3.9' },
  { t: 'estadisticas', label: 'Estadísticas', icon: 'M3 3v18h18M7 14v3M12 9v8M17 5v12' },
  { t: 'menu', label: 'Menú', icon: 'M4 6h16M4 12h16M4 18h10' },
  { t: 'config', label: 'Configuración', icon: 'M12 15a3 3 0 100-6 3 3 0 000 6zM19 12a7 7 0 00-.1-1l2-1.6-2-3.4-2.4 1a7 7 0 00-1.7-1L14 3h-4l-.8 2.6a7 7 0 00-1.7 1l-2.4-1-2 3.4L3 11a7 7 0 000 2l-2 1.6 2 3.4 2.4-1a7 7 0 001.7 1L10 21h4l.8-2.6a7 7 0 001.7-1l2.4 1 2-3.4-2-1.6a7 7 0 00.1-1z' },
];

// La pantalla de Cocina salio de la navegacion (decision de Gilberto): aqui se
// trabaja con cocina de papel, el cocinero no toca pantallas. El codigo queda
// en el repo por si algun negocio sin impresora la necesita, pero nadie llega
// a ella desde el menu.
// Barra inferior (movil): las operativas + boton "Más" con el resto.
const BOTTOM: Tab[] = ['inicio', 'pedidos', 'mesas'];
const MAS: Tab[] = ['caja', 'inventario', 'costos', 'clientes', 'estadisticas', 'menu', 'config'];
const ICONO_MAS = 'M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z';

// Modo mesero (rol staff): solo la operacion de sala. Nada de cocina, caja,
// menu, estadisticas ni configuracion; eso es del dueño (la BD tambien lo bloquea).
const TABS_STAFF: Tab[] = ['mesas', 'pedidos'];
// Modo encargado: opera el negocio dia a dia (igual que el dueño en lo
// operativo, incluido el Menu), pero SIN lo gerencial/financiero ni la
// gestion de personal -- eso sigue siendo exclusivo del dueño (la BD tambien
// lo bloquea via fn_es_dueno_de puro en esas RPCs/policies).
const TABS_ENCARGADO: Tab[] = ['pedidos', 'mesas', 'menu'];
const ICONO_VENDER = 'M12 5v14M5 12h14';

function tabsDe(rol: string | undefined): Tab[] {
  if (rol === 'staff') return TABS_STAFF;
  if (rol === 'encargado') return TABS_ENCARGADO;
  return NAV.map((n) => n.t);
}

export default function Panel({ restaurante }: { restaurante: Restaurante }) {
  const { salir, perfil } = useAuth();
  const esStaff = perfil?.rol === 'staff';
  const esEncargado = perfil?.rol === 'encargado';
  const modoRestringido = esStaff || esEncargado; // ninguno de los 2 ve el menu completo de dueño
  // El cupo de conexiones en vivo se reserva para quien tiene que enterarse sin
  // estar mirando (dueño, encargado y el Cerebrito). Ver lib/tiemporeal.ts.
  fijarRolTiempoReal(perfil?.rol);
  const qc = useQueryClient();
  const [masAbierto, setMasAbierto] = useState(false);
  const [tab, setTab] = useState<Tab>(() => {
    // Recuerda la última sección abierta para no volver a Inicio al actualizar.
    try {
      const s = localStorage.getItem('gx_panel_tab');
      const permitidas = tabsDe(perfil?.rol);
      if (s && permitidas.includes(s as Tab)) return s as Tab;
    } catch {
      /* localStorage no disponible */
    }
    return modoRestringido ? tabsDe(perfil?.rol)[0] : 'inicio';
  });
  const [pos, setPos] = useState(false);
  const [confirmar, setConfirmar] = useState(false);
  const [proc, setProc] = useState<string | null>(null);
  const [aviso, setAviso] = useState<string | null>(null);
  const avisoT = useRef<ReturnType<typeof setTimeout> | null>(null);

  const marca = restaurante.color_primario || '#FBBF24';
  const lumMarca = luminancia(marca);
  // Texto legible SOBRE el color de marca: blanco o negro, el que mejor contraste dé.
  const txtMarca = contraste(1, lumMarca) >= contraste(0.02, lumMarca) ? '#FFFFFF' : '#0D0F1E';
  // Color de marca legible sobre el fondo oscuro: se aclara solo si contrasta poco.
  const acento = contraste(lumMarca, 0.02) < 3.2 ? aclarar(marca, 0.55) : marca;

  // Persistir la sección activa (sobrevive a un F5 / recarga).
  useEffect(() => {
    try {
      localStorage.setItem('gx_panel_tab', tab);
    } catch {
      /* ignore */
    }
  }, [tab]);

  // Tiempo real por el canal compartido del restaurante (Broadcast desde la BD,
  // fn_bcast_panel): un solo canal por dispositivo para todas las vistas.
  const invalidarVistas = () => {
    qc.invalidateQueries({ queryKey: ['pedidos', restaurante.id] });
    qc.invalidateQueries({ queryKey: ['cocina', restaurante.id] });
    qc.invalidateQueries({ queryKey: ['cuentas-mesa', restaurante.id] });
    qc.invalidateQueries({ queryKey: ['panel-kpis', restaurante.id] });
  };
  useCambiosRestaurante(restaurante.id, {
    onCambio: (c) => {
      if (c.tabla !== 'pedidos' || c.accion !== 'INSERT') return;
      const donde =
        c.nuevo?.tipo_entrega === 'mesa'
          ? `Mesa ${c.nuevo.mesa ?? ''}`.trim()
          : c.nuevo?.tipo_entrega === 'delivery'
            ? 'Delivery'
            : 'Para retirar';
      beepPedido();
      setAviso(`Nuevo pedido · ${donde}`);
      if (avisoT.current) clearTimeout(avisoT.current);
      avisoT.current = setTimeout(() => setAviso(null), 9000);
      invalidarVistas();
    },
    // Volvio la conexion (o desperto la pestana): re-pedir lo visible.
    onResync: invalidarVistas,
  });

  async function descargarReporte() {
    setProc('reporte');
    try {
      await generarReportePDF(restaurante.id, restaurante.nombre, restaurante.tasa_bs, restaurante.ultimo_cierre_en);
    } catch (e) {
      alert((e as Error).message);
    } finally {
      setProc(null);
    }
  }

  async function abrir() {
    setProc('abrir');
    const { error } = await supabase.from('restaurantes').update({ abierto: true }).eq('id', restaurante.id);
    setProc(null);
    if (error) alert(error.message);
    else qc.invalidateQueries({ queryKey: ['mi-restaurante'] });
  }

  async function cerrarYBorrar() {
    setProc('cerrar');
    try {
      await generarReportePDF(restaurante.id, restaurante.nombre, restaurante.tasa_bs, restaurante.ultimo_cierre_en);
      const { data } = await supabase
        .from('pedidos')
        .select('pagos(comprobante_url)')
        .eq('restaurante_id', restaurante.id);
      // Comprobantes de pagos de MESA: tambien son capturas con datos bancarios
      // del cliente y tambien se borran al cierre (la RPC luego suelta el enlace).
      const { data: deMesa } = await supabase
        .from('pagos_mesa')
        .select('comprobante_url')
        .eq('restaurante_id', restaurante.id)
        .not('comprobante_url', 'is', null);
      const paths = [
        ...((data ?? []) as unknown as { pagos: { comprobante_url: string | null }[] }[]).flatMap((p) =>
          (p.pagos ?? []).map((pg) => pg.comprobante_url),
        ),
        ...((deMesa ?? []) as { comprobante_url: string | null }[]).map((pm) => pm.comprobante_url),
      ].filter((x): x is string => !!x);
      if (paths.length) await supabase.storage.from('comprobantes').remove(paths);
      const { error } = await supabase.rpc('cerrar_negocio');
      if (error) throw error;
      // Archivar los gastos del día: la caja de mañana arranca limpia.
      await supabase.from('gastos_caja').update({ archivado: true }).eq('restaurante_id', restaurante.id).eq('archivado', false);
      qc.invalidateQueries({ queryKey: ['mi-restaurante'] });
      qc.invalidateQueries({ queryKey: ['pedidos', restaurante.id] });
      qc.invalidateQueries({ queryKey: ['gastos-caja', restaurante.id] });
      setConfirmar(false);
    } catch (e) {
      alert((e as Error).message);
    } finally {
      setProc(null);
    }
  }

  const estado = estadoTienda(restaurante);
  const inicial = (restaurante.nombre || 'G').trim().charAt(0).toUpperCase();

  return (
    <div className="min-h-full overflow-x-hidden bg-noche text-white lg:flex">
      {/* ===== Sidebar (escritorio/tablet) ===== */}
      <aside className="hidden w-56 shrink-0 flex-col bg-panel lg:flex lg:sticky lg:top-0 lg:h-screen">
        <div className="flex flex-col items-center gap-2 px-4 pt-6 pb-5 text-center">
          <div
            className="grid h-16 w-16 place-items-center overflow-hidden rounded-2xl ring-2"
            style={{ ['--tw-ring-color' as string]: marca }}
          >
            {restaurante.logo_url ? (
              <img src={restaurante.logo_url} alt="" className="h-full w-full object-cover" />
            ) : (
              <span className="grid h-full w-full place-items-center text-2xl font-black" style={{ background: marca, color: txtMarca }}>
                {inicial}
              </span>
            )}
          </div>
          <p className="text-base font-extrabold leading-tight">{restaurante.nombre}</p>
          <p className="text-[11px] font-semibold uppercase tracking-widest text-white/40">Panel de control</p>
        </div>
        <nav className="flex-1 space-y-1 px-3">
          {modoRestringido && (
            <button
              onClick={() => setPos(true)}
              className="mb-2 flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-extrabold shadow-lg"
              style={{ background: marca, color: txtMarca }}
            >
              <Icono d={ICONO_VENDER} />
              Nuevo pedido
            </button>
          )}
          {NAV.filter((n) => tabsDe(perfil?.rol).includes(n.t)).map((n) => (
            <button
              key={n.t}
              onClick={() => setTab(n.t)}
              className={`flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold transition ${
                tab === n.t ? '' : 'text-white/55 hover:bg-white/5 hover:text-white'
              }`}
              style={tab === n.t ? { background: marca, color: txtMarca } : undefined}
            >
              <Icono d={n.icon} />
              {n.label}
            </button>
          ))}
        </nav>
      </aside>

      {/* ===== Contenido ===== */}
      <div className="min-w-0 flex-1 pb-20 lg:pb-0">
        <header className="sticky top-0 z-20 border-b border-white/10 bg-noche/90 backdrop-blur">
          <div className="flex flex-wrap items-center justify-between gap-2 px-4 py-3 sm:px-6">
            <div className="flex items-center gap-3">
              <div className="grid h-10 w-10 shrink-0 place-items-center overflow-hidden rounded-xl lg:hidden" style={{ background: marca }}>
                {restaurante.logo_url ? (
                  <img src={restaurante.logo_url} alt="" className="h-full w-full object-cover" />
                ) : (
                  <span className="text-lg font-black" style={{ color: txtMarca }}>{inicial}</span>
                )}
              </div>
              <div>
                <p className="text-xs text-niebla">
                  {esStaff
                    ? `Mesero · ${perfil?.nombre || 'equipo de sala'}`
                    : esEncargado
                      ? `Encargado · ${perfil?.nombre || 'equipo'}`
                      : '¡Bienvenido!'}
                </p>
                <h1 className="text-lg font-extrabold leading-tight sm:text-xl">{restaurante.nombre}</h1>
              </div>
            </div>
            <div className="flex flex-wrap items-center gap-2">
              <IndicadorConexion restauranteId={restaurante.id} />
              <span
                className={`rounded-full px-2.5 py-1 text-xs font-bold ${
                  estado.abierto ? 'bg-green-500/15 text-green-400' : 'bg-white/10 text-niebla'
                }`}
                title={estado.detalle ?? undefined}
              >
                {estado.abierto ? '● Abierto' : '● Cerrado'}
              </span>
              {!restaurante.abierto && !modoRestringido && (
                <button
                  onClick={abrir}
                  disabled={proc === 'abrir'}
                  className="rounded-lg bg-green-600 px-3 py-1.5 text-xs font-semibold text-white"
                >
                  {proc === 'abrir' ? '...' : 'Abrir'}
                </button>
              )}
              <button
                onClick={salir}
                className="rounded-lg border border-white/10 px-3 py-1.5 text-xs font-semibold text-niebla hover:bg-white/5"
              >
                Salir
              </button>
            </div>
          </div>
          {aviso && (
            <button
              onClick={() => {
                setTab('pedidos');
                setAviso(null);
              }}
              className="flex w-full items-center justify-between gap-2 px-4 py-2 text-sm font-extrabold sm:px-6"
              style={{ background: marca, color: txtMarca }}
            >
              <span>🔔 {aviso}</span>
              <span className="rounded-lg bg-black/15 px-3 py-0.5">Ver</span>
            </button>
          )}
        </header>

        <ModoLocal restauranteId={restaurante.id} />
        <AlertaLlamadas restaurante={restaurante} marca={marca} txtMarca={txtMarca} acento={acento} />
        <AlertaPagosPorRevisar restaurante={restaurante} acento={acento} />

        {/* En Mesas no hace falta (la tarjeta de la mesa ya lo muestra); en el
            resto, Inicio incluido, el aviso abre el modal con la referencia. */}
        {tab !== 'mesas' && (
          <AlertaPagosMesa restaurante={restaurante} marca={marca} txtMarca={txtMarca} acento={acento} />
        )}

        <main className="w-full overflow-x-hidden p-4 sm:p-6 lg:px-8">
          {tab === 'inicio' && (
            <Inicio
              restaurante={restaurante}
              marca={marca}
              acento={acento}
              txtMarca={txtMarca}
              onIr={setTab}
              onReporte={descargarReporte}
              onCierre={() => setConfirmar(true)}
              procReporte={proc === 'reporte'}
              onNuevoPedido={() => setPos(true)}
            />
          )}
          {tab === 'pedidos' && (
            <Pedidos
              restauranteId={restaurante.id}
              restauranteNombre={restaurante.nombre}
              marca={marca}
              txtMarca={txtMarca}
              acento={acento}
            />
          )}
          {tab === 'cocina' && <Cocina restauranteId={restaurante.id} />}
          {tab === 'mesas' && <Mesas restaurante={restaurante} marca={marca} txtMarca={txtMarca} acento={acento} />}
          {tab === 'caja' && <Caja restaurante={restaurante} marca={marca} txtMarca={txtMarca} />}
          {tab === 'inventario' && <Inventario restauranteId={restaurante.id} marca={marca} txtMarca={txtMarca} />}
          {tab === 'costos' && <Costos restaurante={restaurante} marca={marca} txtMarca={txtMarca} />}
          {tab === 'clientes' && <Clientes restauranteId={restaurante.id} acento={acento} tasaBs={restaurante.tasa_bs} />}
          {tab === 'estadisticas' && (
            <Estadisticas restauranteId={restaurante.id} marca={marca} acento={acento} tasaBs={restaurante.tasa_bs} />
          )}
          {tab === 'menu' && <Menu restauranteId={restaurante.id} marca={marca} txtMarca={txtMarca} acento={acento} />}
          {tab === 'config' && (
            <div className="space-y-6">
              <CompartirTienda slug={restaurante.slug} nombre={restaurante.nombre} />
              <MesasQR slug={restaurante.slug} cantidad={restaurante.num_mesas} />
              <Seccion titulo="Perfil del negocio">
                <PasoPerfil restaurante={restaurante} />
              </Seccion>
              <Seccion titulo="Metodos de pago">
                <PasoPagos restaurante={restaurante} />
              </Seccion>
              <Seccion titulo="Delivery">
                <PasoDelivery restaurante={restaurante} />
              </Seccion>
              <Seccion titulo="Repartidores">
                <Repartidores restauranteId={restaurante.id} />
              </Seccion>
              <Seccion titulo="Equipo (meseros y encargados)">
                <Meseros restauranteId={restaurante.id} />
              </Seccion>
              <Seccion titulo="Comandas por puesto (impresoras)">
                <PuestosImpresion restauranteId={restaurante.id} />
              </Seccion>
              <Seccion titulo="Cuenta">
                <p className="mb-3 text-sm text-niebla">
                  Elimina tu cuenta y tus datos de forma permanente. Tu tienda dejara de operar.
                </p>
                <a
                  href="/eliminar-cuenta"
                  className="inline-block rounded-lg border border-red-500/40 px-4 py-2.5 text-sm font-semibold text-red-400 hover:bg-red-500/10"
                >
                  Eliminar cuenta
                </a>
              </Seccion>
            </div>
          )}
        </main>
      </div>

      {/* ===== Bottom nav (movil) ===== */}
      <nav className="fixed inset-x-0 bottom-0 z-30 flex border-t border-white/10 bg-panel lg:hidden">
        {(modoRestringido ? tabsDe(perfil?.rol) : BOTTOM).map((t) => {
          const n = NAV.find((x) => x.t === t)!;
          const activo = tab === t;
          return (
            <button
              key={t}
              onClick={() => setTab(t)}
              className="flex flex-1 flex-col items-center gap-1 py-2.5 text-[11px] font-semibold"
              style={{ color: activo ? acento : 'rgba(255,255,255,.5)' }}
            >
              <Icono d={n.icon} className="h-5 w-5" />
              {n.label}
            </button>
          );
        })}
        {modoRestringido ? (
          <button
            onClick={() => setPos(true)}
            className="flex flex-1 flex-col items-center gap-1 py-2.5 text-[11px] font-extrabold"
            style={{ color: acento }}
          >
            <Icono d={ICONO_VENDER} className="h-5 w-5" />
            Tomar
          </button>
        ) : (
          <button
            onClick={() => setMasAbierto(true)}
            className="flex flex-1 flex-col items-center gap-1 py-2.5 text-[11px] font-semibold"
            style={{ color: MAS.includes(tab) ? acento : 'rgba(255,255,255,.5)' }}
          >
            <Icono d={ICONO_MAS} className="h-5 w-5" />
            Más
          </button>
        )}
      </nav>

      {/* ===== Hoja "Más secciones" (movil) ===== */}
      {masAbierto && (
        <div className="fixed inset-0 z-[60] flex items-end bg-black/60 lg:hidden" onClick={() => setMasAbierto(false)}>
          <div
            className="w-full rounded-t-3xl bg-panel p-4 pb-7 ring-1 ring-white/10"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="mx-auto mb-3 h-1 w-10 rounded-full bg-white/20" />
            <p className="mb-3 text-sm font-extrabold text-white">Más secciones</p>
            <div className="grid grid-cols-3 gap-2.5">
              {MAS.map((t) => {
                const n = NAV.find((x) => x.t === t)!;
                const activo = tab === t;
                return (
                  <button
                    key={t}
                    onClick={() => {
                      setTab(t);
                      setMasAbierto(false);
                    }}
                    className="flex flex-col items-center gap-1.5 rounded-2xl bg-superficie p-3 ring-1 ring-white/10"
                    style={{ color: activo ? acento : '#FFFFFF', boxShadow: activo ? `inset 0 0 0 2px ${acento}` : undefined }}
                  >
                    <Icono d={n.icon} className="h-6 w-6" />
                    <span className="text-xs font-semibold">{n.label}</span>
                  </button>
                );
              })}
            </div>
            <button
              onClick={salir}
              className="mt-3 w-full rounded-xl border border-white/10 py-2.5 text-sm font-semibold text-niebla"
            >
              Salir
            </button>
          </div>
        </div>
      )}

      {pos && (
        <PuntoDeVenta
          restaurante={restaurante}
          marca={marca}
          txtMarca={txtMarca}
          acento={acento}
          onClose={() => setPos(false)}
        />
      )}

      {confirmar && (
        <div className="fixed inset-0 z-40 flex items-center justify-center bg-black/60 p-4">
          <div className="w-full max-w-sm rounded-2xl bg-superficie p-5 ring-1 ring-white/10">
            <h2 className="text-lg font-bold">Cerrar el negocio</h2>
            <p className="mt-2 text-sm text-niebla">
              Al cerrar se descarga tu <b>reporte de ventas</b> y se <b>ocultan los datos personales de los
              clientes</b> (nombre, telefono, cedula, direccion, comprobantes). Los pedidos quedan en tu historial
              sin datos personales.
            </p>
            <div className="mt-4 flex gap-2">
              <button
                onClick={() => setConfirmar(false)}
                className="flex-1 rounded-lg border border-white/10 py-2.5 text-sm font-semibold text-niebla"
              >
                Cancelar
              </button>
              <button
                onClick={cerrarYBorrar}
                disabled={proc === 'cerrar'}
                className="flex-1 rounded-lg bg-red-600 py-2.5 text-sm font-semibold text-white disabled:opacity-60"
              >
                {proc === 'cerrar' ? 'Cerrando...' : 'Descargar y cerrar'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ===== Dashboard de Inicio =====
function Inicio({
  restaurante,
  marca,
  acento,
  txtMarca,
  onIr,
  onReporte,
  onCierre,
  procReporte,
  onNuevoPedido,
}: {
  restaurante: Restaurante;
  marca: string;
  acento: string;
  txtMarca: string;
  onIr: (t: Tab) => void;
  onReporte: () => void;
  onCierre: () => void;
  procReporte: boolean;
  onNuevoPedido: () => void;
}) {
  const [ahora, setAhora] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setAhora(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  const { data: kpis } = useQuery({
    queryKey: ['panel-kpis', restaurante.id],
    refetchInterval: 20000,
    queryFn: async () => {
      const { data } = await supabase
        .from('pedidos')
        .select('id, tipo_entrega, mesa, estado')
        .eq('restaurante_id', restaurante.id)
        .not('estado', 'in', '(entregado,cancelado)');
      const rows = (data ?? []) as { tipo_entrega: string; mesa: string | null; estado: string }[];
      const activos = rows.length;
      const domicilios = rows.filter((r) => r.tipo_entrega === 'delivery').length;
      const mesas = new Set(rows.filter((r) => r.tipo_entrega === 'mesa' && r.mesa).map((r) => r.mesa)).size;
      return { activos, domicilios, mesas };
    },
  });

  const { data: ventas } = useQuery({
    queryKey: ['inicio-ventas-hoy', restaurante.id, restaurante.ultimo_cierre_en],
    refetchInterval: 30000,
    queryFn: async () => {
      // La jornada arranca en el ultimo cierre de caja (no a medianoche). Si
      // nunca se ha cerrado, cae al inicio del dia calendario.
      const desde = restaurante.ultimo_cierre_en ? new Date(restaurante.ultimo_cierre_en) : new Date();
      if (!restaurante.ultimo_cierre_en) desde.setHours(0, 0, 0, 0);
      const { data } = await supabase
        .from('pedidos')
        .select('total_usd')
        .eq('restaurante_id', restaurante.id)
        .eq('estado', 'entregado')
        .gte('recibido_en', desde.toISOString());
      const rows = (data ?? []) as { total_usd: number | null }[];
      const totalUsd = rows.reduce((s, r) => s + Number(r.total_usd ?? 0), 0);
      return { totalUsd, n: rows.length };
    },
  });
  const ventasUsd = ventas?.totalUsd ?? 0;
  const ventasN = ventas?.n ?? 0;
  const ticket = ventasN ? ventasUsd / ventasN : 0;
  const tasa = restaurante.tasa_bs;

  const total = restaurante.num_mesas ?? 0;
  const ocupadas = kpis?.mesas ?? 0;
  const mesasGrid = useMemo(() => Array.from({ length: total }, (_, i) => i + 1), [total]);

  const fecha = ahora.toLocaleDateString('es-VE', { day: '2-digit', month: '2-digit', year: '2-digit' });
  const hora = ahora.toLocaleTimeString('es-VE', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true });

  return (
    <div className="space-y-5">
      <div className="flex flex-wrap items-center gap-2 text-sm">
        <span className="rounded-lg bg-superficie px-3 py-1.5 font-semibold text-niebla ring-1 ring-white/10">📅 {fecha}</span>
        <span className="rounded-lg bg-superficie px-3 py-1.5 font-semibold tabular-nums text-niebla ring-1 ring-white/10">🕐 {hora}</span>
        {tasa && tasa > 0 && (
          <span
            className="rounded-lg px-3 py-1.5 font-bold tabular-nums ring-1"
            style={{ background: acento + '1f', color: acento, ['--tw-ring-color' as string]: acento + '55' }}
            title="Tasa del dólar (BCV), se actualiza sola a diario"
          >
            💵 Dólar {formatBs(tasa)}
          </span>
        )}
      </div>

      {/* Ventas de hoy: lo primero que quiere ver el dueño */}
      <section className="rounded-2xl bg-superficie p-4 ring-1 ring-white/10">
        <div className="flex items-center justify-between">
          <p className="text-xs font-semibold uppercase tracking-wide text-niebla">Ventas de hoy</p>
          <button onClick={() => onIr('estadisticas')} className="text-xs font-bold" style={{ color: acento }}>
            Ver estadísticas
          </button>
        </div>
        <p className="mt-1 text-3xl font-black tabular-nums text-green-400 sm:text-4xl">{formatUsd(ventasUsd)}</p>
        {tasa && tasa > 0 && (
          <p className="text-sm font-semibold tabular-nums text-niebla">{formatBs(bsDesdeUsd(ventasUsd, tasa))}</p>
        )}
        <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-niebla">
          <span>
            <b className="text-white">{ventasN}</b> pedido{ventasN === 1 ? '' : 's'} entregado{ventasN === 1 ? '' : 's'}
          </span>
          <span>
            Ticket promedio <b className="text-white">{formatUsd(ticket)}</b>
          </span>
        </div>
      </section>

      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
        <AccionCaja label="Gastos de caja" sub="Registrar egresos" onClick={() => onIr('caja')} tono="claro" />
        <AccionCaja label="Cierre de caja" sub="Cerrar jornada" onClick={onCierre} tono="marca" marca={marca} txt={txtMarca} />
        <AccionCaja label={procReporte ? 'Generando...' : 'Reportes'} sub="Ventas del día" onClick={onReporte} tono="rojo" />
      </div>

      <section className="rounded-2xl bg-superficie p-4 ring-1 ring-white/10">
        <div className="mb-3 flex items-center justify-between">
          <h2 className="flex items-center gap-2 text-sm font-extrabold uppercase tracking-wide text-niebla">
            <span aria-hidden>🗓️</span> Resumen del día
          </h2>
          <span className="rounded-lg bg-white/5 px-2.5 py-1 text-xs font-semibold text-niebla">Hoy</span>
        </div>
        <div className="grid grid-cols-3 gap-2 sm:gap-3">
          <Kpi valor={kpis?.domicilios ?? 0} label="Domicilios" nota="Activos" color={acento} icono="🛵" />
          <Kpi valor={ocupadas} label="Mesas" nota="Ocupadas" color="#F59E0B" icono="🍽️" />
          <Kpi valor={kpis?.activos ?? 0} label="Pedidos" nota="Activos" color="#EF4444" icono="📋" />
        </div>
      </section>

      <button
        onClick={onNuevoPedido}
        className="flex w-full items-center justify-between rounded-2xl px-5 py-4 text-left shadow-lg transition active:scale-[.99]"
        style={{ background: marca, color: txtMarca }}
      >
        <span className="flex items-center gap-3">
          <span className="grid h-9 w-9 place-items-center rounded-full bg-black/15 text-xl leading-none">+</span>
          <span>
            <span className="block font-extrabold">Nuevo pedido</span>
            <span className="block text-sm opacity-75">Tomar un pedido en caja</span>
          </span>
        </span>
        <span aria-hidden className="text-xl">🍽️</span>
      </button>

      <section>
        <div className="mb-3 flex items-center justify-between">
          <h2 className="flex items-center gap-2 text-sm font-extrabold uppercase tracking-wide text-niebla">
            <span aria-hidden>🍽️</span> Mesas del restaurante
          </h2>
          <button onClick={() => onIr('mesas')} className="text-xs font-bold" style={{ color: acento }}>
            Administrar
          </button>
        </div>
        {total === 0 ? (
          <p className="rounded-2xl border border-dashed border-white/15 bg-superficie p-6 text-center text-sm text-niebla">
            Aún no configuraste mesas. Ve a Configuración para activarlas.
          </p>
        ) : (
          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-6">
            {mesasGrid.map((n) => (
              <button
                key={n}
                onClick={() => onIr('mesas')}
                className="flex flex-col items-center gap-1.5 rounded-2xl bg-superficie p-4 ring-1 ring-white/10 transition hover:-translate-y-0.5"
              >
                <span className="grid h-11 w-11 place-items-center rounded-full bg-white/5 text-lg">🍽️</span>
                <span className="font-extrabold">Mesa {n}</span>
                <span className="text-xs font-semibold text-green-400">Libre</span>
              </button>
            ))}
          </div>
        )}
      </section>
    </div>
  );
}

function Kpi({ valor, label, nota, color, icono }: { valor: number; label: string; nota: string; color: string; icono: string }) {
  return (
    <div className="rounded-xl bg-superficie-2 p-3 text-center">
      <span className="mx-auto grid h-9 w-9 place-items-center rounded-full text-base" style={{ background: `${color}26`, color }}>
        {icono}
      </span>
      <p className="mt-1.5 text-2xl font-black leading-none">{valor}</p>
      <p className="text-xs font-semibold text-white">{label}</p>
      <p className="text-[11px] font-semibold" style={{ color }}>
        {nota}
      </p>
    </div>
  );
}

function AccionCaja({
  label,
  sub,
  onClick,
  tono,
  marca,
  txt,
}: {
  label: string;
  sub: string;
  onClick: () => void;
  tono: 'claro' | 'marca' | 'rojo';
  marca?: string;
  txt?: string;
}) {
  const base = 'flex flex-col justify-center rounded-2xl px-4 py-3 text-left shadow-sm transition active:scale-[.99]';
  if (tono === 'marca') {
    return (
      <button onClick={onClick} className={base} style={{ background: marca, color: txt }}>
        <span className="text-sm font-extrabold">{label}</span>
        <span className="text-xs opacity-75">{sub}</span>
      </button>
    );
  }
  if (tono === 'rojo') {
    return (
      <button onClick={onClick} className={`${base} bg-red-500 text-white`}>
        <span className="text-sm font-extrabold">{label}</span>
        <span className="text-xs text-white/80">{sub}</span>
      </button>
    );
  }
  return (
    <button onClick={onClick} className={`${base} bg-superficie text-white ring-1 ring-white/10`}>
      <span className="text-sm font-extrabold">{label}</span>
      <span className="text-xs text-niebla">{sub}</span>
    </button>
  );
}

function Icono({ d, className = 'h-5 w-5' }: { d: string; className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
      <path d={d} />
    </svg>
  );
}

function Seccion({ titulo, children }: { titulo: string; children: React.ReactNode }) {
  return (
    <section className="rounded-2xl bg-superficie-2 p-4 ring-1 ring-white/10">
      <h2 className="mb-3 font-bold text-white">{titulo}</h2>
      {children}
    </section>
  );
}
