import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { supabase } from '../lib/supabase';

// Tablero de las laptops (cerebritos) de los locales: quien esta viva, su
// version y su carga. La RPC solo responde al fundador/admin.

interface FilaCerebrito {
  restaurante: string;
  visto_en: string;
  version: string | null;
  detalle: { ventas_por_subir?: number; mesas_abiertas?: number; ip?: string } | null;
}

function TableroCerebritos() {
  const { data } = useQuery({
    queryKey: ['ceo-cerebritos'],
    refetchInterval: 60000,
    queryFn: async () => {
      const { data, error } = await supabase.rpc('fn_cerebritos_tablero');
      if (error) throw error;
      // detalle llega como Json generico; la forma real la conoce este tablero.
      return (data ?? []) as FilaCerebrito[];
    },
  });
  const filas = data ?? [];
  return (
    <Seccion titulo="Cerebritos (las laptops de los locales)">
      {filas.length === 0 ? (
        <p className="text-sm text-niebla">Ningún local ha conectado su cerebrito todavía.</p>
      ) : (
        <div className="space-y-2">
          {filas.map((c) => {
            const min = (Date.now() - new Date(c.visto_en).getTime()) / 60000;
            const vivo = min < 2;
            const tibio = min < 10;
            return (
              <div
                key={c.restaurante}
                className="flex flex-wrap items-center justify-between gap-2 rounded-xl bg-white/5 px-3 py-2 text-sm"
              >
                <span className="font-semibold">{c.restaurante}</span>
                <span className="flex flex-wrap items-center gap-2 text-xs">
                  {c.detalle?.mesas_abiertas != null && (
                    <span className="text-niebla">
                      {c.detalle.mesas_abiertas} mesa{c.detalle.mesas_abiertas === 1 ? '' : 's'} ·{' '}
                      {c.detalle.ventas_por_subir ?? 0} por subir
                    </span>
                  )}
                  {c.version && <span className="text-niebla">v{c.version}</span>}
                  <span
                    className={`rounded-full px-2 py-0.5 font-bold ${
                      vivo
                        ? 'bg-green-500/15 text-green-400'
                        : tibio
                          ? 'bg-dorado/15 text-dorado'
                          : 'bg-red-500/15 text-red-400'
                    }`}
                  >
                    {vivo ? 'en línea' : `hace ${Math.round(min)} min`}
                  </span>
                </span>
              </div>
            );
          })}
        </div>
      )}
    </Seccion>
  );
}

interface Stats {
  total_restaurantes: number;
  publicados: number;
  borradores: number;
  duenos: number;
  repartidores: number;
  nuevos_30d: number;
  por_estado: { estado: string; n: number }[];
  por_rubro: { rubro: string; n: number }[];
  por_mes: { mes: string; n: number }[];
  recientes: { nombre: string; estado: string | null; municipio: string | null; creado_en: string; publicado: boolean }[];
}

const MESES = ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'];

export default function CeoPortal({ salir }: { salir: () => void }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['ceo-stats'],
    queryFn: async () => {
      const { data, error } = await supabase.rpc('ceo_estadisticas');
      if (error) throw error;
      return data as unknown as Stats;
    },
    refetchInterval: 60000,
  });

  if (isLoading) return <Centro>Cargando estadísticas...</Centro>;
  if (error || !data) return <Centro>{(error as Error)?.message ?? 'Error'}</Centro>;
  const s = data;

  const mesMax = Math.max(1, ...s.por_mes.map((m) => m.n));
  const estMax = Math.max(1, ...s.por_estado.map((e) => e.n));
  const fmtMes = (m: string) => {
    const [y, mm] = m.split('-');
    return `${MESES[Number(mm) - 1] ?? mm} ${y.slice(2)}`;
  };
  const fecha = (d: string) => new Date(d).toLocaleDateString('es-VE', { day: '2-digit', month: 'short', year: 'numeric' });

  return (
    <div className="min-h-full bg-noche text-white">
      <header className="sticky top-0 z-10 border-b border-white/10 bg-superficie/95 px-5 py-4 backdrop-blur">
        <div className="mx-auto flex max-w-5xl items-center justify-between">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-dorado">Gustito Xpress</p>
            <h1 className="text-xl font-extrabold">Panel del Fundador</h1>
          </div>
          <button onClick={salir} className="text-sm text-niebla hover:text-white">
            Salir
          </button>
        </div>
      </header>

      <main className="mx-auto max-w-5xl space-y-5 p-5">
        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
          <Kpi label="Restaurantes" valor={s.total_restaurantes} sub={`${s.publicados} publicados`} destacado />
          <Kpi label="Publicados" valor={s.publicados} />
          <Kpi label="Borradores" valor={s.borradores} />
          <Kpi label="Dueños" valor={s.duenos} />
          <Kpi label="Repartidores" valor={s.repartidores} />
        </div>

        <div className="rounded-2xl bg-dorado/10 px-4 py-3 text-sm font-semibold text-dorado ring-1 ring-dorado/20">
          📈 {s.nuevos_30d} restaurante{s.nuevos_30d === 1 ? '' : 's'} nuevo{s.nuevos_30d === 1 ? '' : 's'} en los últimos 30 días
        </div>

        <TableroCerebritos />

        <EmbudoWeb />

        <Seccion titulo="Registros por mes">
          {s.por_mes.length === 0 ? (
            <Vacio />
          ) : (
            <div className="flex h-[170px] items-end gap-3 overflow-x-auto pb-1">
              {s.por_mes.map((m) => (
                <div
                  key={m.mes}
                  className="flex h-full shrink-0 flex-col items-center justify-end gap-1.5"
                  style={{ width: 52 }}
                >
                  <span className="text-sm font-extrabold text-dorado">{m.n}</span>
                  <div
                    className="w-9 rounded-t-lg bg-gradient-to-t from-dorado-oscuro to-dorado"
                    style={{ height: `${Math.max(10, (m.n / mesMax) * 110)}px` }}
                  />
                  <span className="text-[10px] font-medium text-niebla">{fmtMes(m.mes)}</span>
                </div>
              ))}
            </div>
          )}
        </Seccion>

        <div className="grid gap-4 lg:grid-cols-2">
          <Seccion titulo="¿De dónde se registran? (por estado)">
            {s.por_estado.length === 0 ? (
              <Vacio />
            ) : (
              <div className="space-y-2.5">
                {s.por_estado.map((e) => (
                  <div key={e.estado}>
                    <div className="mb-0.5 flex justify-between text-sm">
                      <span className="font-semibold">{e.estado}</span>
                      <span className="text-niebla">{e.n}</span>
                    </div>
                    <div className="h-2 rounded-full bg-white/10">
                      <div className="h-2 rounded-full bg-dorado" style={{ width: `${(e.n / estMax) * 100}%` }} />
                    </div>
                  </div>
                ))}
              </div>
            )}
          </Seccion>

          <Seccion titulo="Por tipo de negocio">
            {s.por_rubro.length === 0 ? (
              <Vacio />
            ) : (
              <div className="flex flex-wrap gap-2">
                {s.por_rubro.map((r) => (
                  <span key={r.rubro} className="rounded-full bg-superficie-2 px-3 py-1.5 text-sm ring-1 ring-white/10">
                    {r.rubro} <b className="text-dorado">{r.n}</b>
                  </span>
                ))}
              </div>
            )}
          </Seccion>
        </div>

        <Seccion titulo="Últimos registros">
          {s.recientes.length === 0 ? (
            <Vacio />
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="text-left text-xs uppercase text-niebla">
                    <th className="pb-2 pr-3">Restaurante</th>
                    <th className="pb-2 pr-3">Estado</th>
                    <th className="pb-2 pr-3">Municipio</th>
                    <th className="pb-2 pr-3">Registro</th>
                    <th className="pb-2">Estatus</th>
                  </tr>
                </thead>
                <tbody>
                  {s.recientes.map((r, i) => (
                    <tr key={i} className="border-t border-white/5">
                      <td className="py-2 pr-3 font-semibold">{r.nombre}</td>
                      <td className="py-2 pr-3 text-niebla">{r.estado ?? '—'}</td>
                      <td className="py-2 pr-3 text-niebla">{r.municipio ?? '—'}</td>
                      <td className="py-2 pr-3 text-niebla">{fecha(r.creado_en)}</td>
                      <td className="py-2">
                        <span
                          className={`rounded-full px-2 py-0.5 text-xs font-bold ${
                            r.publicado ? 'bg-verde/15 text-verde' : 'bg-white/10 text-niebla'
                          }`}
                        >
                          {r.publicado ? 'Publicado' : 'Borrador'}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </Seccion>

        <p className="pt-1 text-center text-xs text-niebla">
          Solo estadísticas de plataforma. No se muestran ventas ni productos de los negocios.
        </p>
      </main>
    </div>
  );
}

// ---- Embudo de la landing: visitas -> clicks -> cuentas -> publicados ----
interface Embudo {
  dias: number;
  visitas: number;
  click_registro: number;
  click_entrar: number;
  click_vitrina: number;
  click_whatsapp: number;
  click_demo: number;
  cuentas_creadas: number;
  negocios_creados: number;
  negocios_publicados: number;
  origenes: { origen: string; n: number }[];
}

function EmbudoWeb() {
  const [dias, setDias] = useState<7 | 30>(7);
  const { data } = useQuery({
    queryKey: ['ceo-embudo', dias],
    queryFn: async () => {
      const { data, error } = await supabase.rpc('ceo_embudo_web', { p_dias: dias });
      if (error) throw error;
      return data as unknown as Embudo;
    },
  });
  if (!data) return null;
  const e = data;
  const pct = (parte: number, todo: number) => (todo > 0 ? ` (${Math.round((parte / todo) * 100)}%)` : '');
  return (
    <section className="rounded-2xl bg-superficie p-4 ring-1 ring-white/10">
      <div className="mb-3 flex items-center justify-between">
        <h2 className="font-bold text-white">Embudo de la landing</h2>
        <div className="flex gap-1.5">
          {([7, 30] as const).map((d) => (
            <button
              key={d}
              onClick={() => setDias(d)}
              className={`rounded-lg px-3 py-1 text-xs font-bold ${
                dias === d ? 'bg-dorado text-noche' : 'bg-white/5 text-niebla hover:text-white'
              }`}
            >
              {d} días
            </button>
          ))}
        </div>
      </div>
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
        <Kpi label="Visitas" valor={e.visitas} destacado />
        <Kpi label="Tocaron Registro" valor={e.click_registro} sub={pct(e.click_registro, e.visitas).trim() || undefined} />
        <Kpi label="Cuentas creadas" valor={e.cuentas_creadas} sub={pct(e.cuentas_creadas, e.visitas).trim() || undefined} />
        <Kpi label="Negocios publicados" valor={e.negocios_publicados} sub={`${e.negocios_creados} creados`} />
      </div>
      <div className="mt-3 flex flex-wrap gap-x-5 gap-y-1 text-xs font-semibold text-niebla">
        <span>🌽 Vitrina: <b className="text-white">{e.click_vitrina}</b></span>
        <span>🎪 Tienda demo: <b className="text-white">{e.click_demo}</b></span>
        <span>💬 WhatsApp: <b className="text-white">{e.click_whatsapp}</b></span>
        <span>🔑 Entrar: <b className="text-white">{e.click_entrar}</b></span>
      </div>
      {e.origenes.length > 0 && (
        <div className="mt-3 border-t border-white/10 pt-3">
          <p className="mb-1.5 text-xs font-bold uppercase tracking-wide text-niebla">De dónde llegan las visitas</p>
          <div className="flex flex-wrap gap-1.5">
            {e.origenes.map((o) => (
              <span key={o.origen} className="rounded-full bg-white/5 px-2.5 py-1 text-xs font-semibold text-white/80">
                {o.origen.replace(/^https?:\/\//, '').slice(0, 40)} · {o.n}
              </span>
            ))}
          </div>
        </div>
      )}
    </section>
  );
}

function Kpi({ label, valor, sub, destacado }: { label: string; valor: number; sub?: string; destacado?: boolean }) {
  return (
    <div className={`rounded-2xl p-4 ring-1 ${destacado ? 'bg-dorado ring-dorado' : 'bg-superficie ring-white/10'}`}>
      <p className={`text-3xl font-extrabold ${destacado ? 'text-noche' : 'text-white'}`}>{valor}</p>
      <p className={`text-xs font-semibold ${destacado ? 'text-noche/70' : 'text-niebla'}`}>{label}</p>
      {sub && <p className={`mt-0.5 text-[11px] ${destacado ? 'text-noche/60' : 'text-niebla'}`}>{sub}</p>}
    </div>
  );
}

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

function Vacio() {
  return <p className="text-sm text-niebla">Sin datos todavía.</p>;
}

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