import { useMemo, useState } from "react";
import type { Meta } from "./api";
import { useApi } from "./api";
import {
  COLOR_VEREDICTO,
  CuadrantesGestion,
  ETIQUETA_VEREDICTO,
  SerieGestion,
  nf,
} from "./charts";

const NOMBRE_MES = [
  "enero", "febrero", "marzo", "abril", "mayo", "junio",
  "julio", "agosto", "setiembre", "octubre", "noviembre", "diciembre",
];
const mesLegible = (p: string) => {
  const [a, m] = p.split("-");
  return `${NOMBRE_MES[+m - 1]} ${a}`;
};

/**
 * Traduce el veredicto a una frase con los tres números que lo sostienen.
 * Sin esto, un territorio que bajó de verdad puede parecer que subió, porque
 * el promedio del periodo heredado arranca bajo y el de la gestión arranca ya
 * en el pico.
 */
/** Una tendencia no significativa se muestra como ≈0: su valor crudo no es
    distinguible de cero, y enseñarlo contradice la etiqueta "plano". */
function tendTxt(t: any): string {
  if (t?.pct == null) return "—";
  if (t.direccion === "estable") return "≈0%";
  return `${t.pct > 0 ? "+" : ""}${Math.round(t.pct)}%`;
}

const DIRECCION: Record<string, string> = {
  sube: "al alza",
  baja: "a la baja",
  estable: "plano",
  "sin datos": "sin datos suficientes",
};

function explicar(t: any): string {
  if (t.recibido == null || t.actual == null || t.contrafactual == null) return "";
  const d1 = DIRECCION[t.tend1.direccion] ?? t.tend1.direccion;
  const d2 = DIRECCION[t.tend2.direccion] ?? t.tend2.direccion;
  const pct1 = t.tend1.direccion === "estable" ? "" : ` (${tendTxt(t.tend1)} al año)`;
  const pct2 = t.tend2.direccion === "estable" ? "" : ` (${tendTxt(t.tend2)} al año)`;
  const verbo = t.actual < t.recibido ? "bajó a" : t.actual > t.recibido ? "subió a" : "se mantuvo en";

  const base =
    `Heredó el territorio ${d1}${pct1}: en 2022 hubo ${t.recibido} homicidios. ` +
    `En los últimos 12 meses ${verbo} ${t.actual}, y la tendencia actual es ${d2}${pct2}.`;

  if (t.contrafactual > t.actual)
    return `${base} De haber seguido la tendencia que recibió, hoy serían ${t.contrafactual}: son ${t.contrafactual - t.actual} menos.`;
  if (t.contrafactual < t.actual)
    return `${base} Con esa misma tendencia habrían sido ${t.contrafactual}: son ${t.actual - t.contrafactual} más.`;
  return base;
}

/* Orden de lectura: primero lo que revirtió el alza, al final lo que la aceleró. */
const ORDEN = ["bajo", "freno", "sigue", "empeoro", "disparo"];

export default function Gestion({ meta }: { meta: Meta }) {
  const [nivel, setNivel] = useState<"departamento" | "provincia" | "distrito">("departamento");
  const [tipo, setTipo] = useState("HOMICIDIO");
  const [sexo, setSexo] = useState("");
  const [lugar, setLugar] = useState("");
  const [p1d, setP1d] = useState("2017-01");
  const [p1h, setP1h] = useState("2022-12");
  const [p2d, setP2d] = useState("2023-01");
  const [minimo, setMinimo] = useState(10);
  const [sel, setSel] = useState<string | null>(null);
  const [filtroVeredicto, setFiltroVeredicto] = useState<string | null>(null);

  const p = new URLSearchParams({
    nivel, p1_desde: p1d, p1_hasta: p1h, p2_desde: p2d, minimo: String(minimo),
  });
  for (const [k, v] of Object.entries({ tipo, sexo, lugar })) if (v) p.set(k, v);
  const { data, error } = useApi<any>(`/api/gestion?${p}`);

  const lista = useMemo(() => {
    if (!data) return [];
    const t = filtroVeredicto
      ? data.territorios.filter((x: any) => x.veredicto === filtroVeredicto)
      : data.territorios;
    return [...t].sort(
      (a, b) => ORDEN.indexOf(a.veredicto) - ORDEN.indexOf(b.veredicto) || b.n2 - a.n2
    );
  }, [data, filtroVeredicto]);

  const resumen = useMemo(() => {
    if (!data) return {};
    const c: Record<string, number> = {};
    for (const t of data.territorios) c[t.veredicto] = (c[t.veredicto] ?? 0) + 1;
    return c;
  }, [data]);

  const detalle = useMemo(
    () => data?.territorios.find((t: any) => t.id === sel) ?? null,
    [data, sel]
  );

  return (
    <>
      <div className="filters">
        <div className="field">
          <label>Ámbito</label>
          <div className="seg">
            <button aria-pressed={nivel === "departamento"} onClick={() => { setNivel("departamento"); setSel(null); }}>
              Departamento
            </button>
            <button aria-pressed={nivel === "provincia"} onClick={() => { setNivel("provincia"); setSel(null); }}>
              Provincia
            </button>
            <button aria-pressed={nivel === "distrito"} onClick={() => { setNivel("distrito"); setSel(null); setMinimo((m) => Math.max(m, 10)); }}>
              Distrito
            </button>
          </div>
        </div>
        <div className="field">
          <label>MUERTE_VIOLENTA</label>
          <select value={tipo} onChange={(e) => setTipo(e.target.value)}>
            <option value="">(todas las defunciones)</option>
            {meta.tipos_muerte.map((t) => <option key={t} value={t}>{t}</option>)}
          </select>
        </div>
        <div className="field">
          <label>SEXO</label>
          <select value={sexo} onChange={(e) => setSexo(e.target.value)}>
            <option value="">(todos)</option>
            {meta.sexos.map((s) => <option key={s} value={s}>{s}</option>)}
          </select>
        </div>
        <div className="field">
          <label>TIPO_LUGAR</label>
          <select value={lugar} onChange={(e) => setLugar(e.target.value)}>
            <option value="">(todos)</option>
            {meta.lugares.map((l) => <option key={l} value={l}>{l}</option>)}
          </select>
        </div>
        <div className="field">
          <label>Periodo heredado</label>
          <div style={{ display: "flex", gap: 4 }}>
            <input value={p1d} onChange={(e) => setP1d(e.target.value)} style={{ minWidth: 88 }} />
            <input value={p1h} onChange={(e) => setP1h(e.target.value)} style={{ minWidth: 88 }} />
          </div>
        </div>
        <div className="field">
          <label>Inicio de gestión</label>
          <input value={p2d} onChange={(e) => setP2d(e.target.value)} style={{ minWidth: 88 }} />
        </div>
        <div className="field">
          <label>Mínimo de casos</label>
          <select value={minimo} onChange={(e) => setMinimo(+e.target.value)}>
            {[0, 5, 10, 20, 50].map((n) => <option key={n} value={n}>{n}</option>)}
          </select>
        </div>
      </div>

      {error && <div className="card err">{String(error)}</div>}
      {!data && !error && <div className="card vacio">Calculando…</div>}

      {data && (
        <>
          <div className="card" style={{ marginBottom: 16 }}>
            <header>
              <div>
                <h2>
                  {data.total} {nivel === "departamento" ? "regiones" : nivel === "provincia" ? "provincias" : "distritos"} · heredado{" "}
                  {mesLegible(data.periodo1.desde)}–{mesLegible(data.periodo1.hasta)} · gestión{" "}
                  {mesLegible(data.periodo2.desde)}–{mesLegible(data.periodo2.hasta)}
                </h2>
                <p className="note">
                  Haz clic en un veredicto para filtrar la tabla, o en un punto del gráfico para ver
                  su serie completa.
                </p>
              </div>
            </header>
            <div className="chips-veredicto">
              {ORDEN.filter((v) => resumen[v]).map((v) => (
                <button
                  key={v}
                  className={`chip-v ${filtroVeredicto === v ? "activo" : ""}`}
                  onClick={() => setFiltroVeredicto(filtroVeredicto === v ? null : v)}
                >
                  <i className="swatch" style={{ background: COLOR_VEREDICTO[v] }} />
                  {ETIQUETA_VEREDICTO[v]}
                  <b>{resumen[v]}</b>
                </button>
              ))}
            </div>
          </div>

          <div className="card" style={{ marginBottom: 16 }}>
            <header>
              <div>
                <h2>Qué recibió y qué dejó cada territorio</h2>
                <p className="note">
                  Eje horizontal: la tendencia del periodo heredado. Eje vertical: la de su gestión.
                  El tamaño del punto es el volumen de casos. El cuadrante verde (derecha abajo) es
                  el que importa: <b>recibió subiendo y lo dejó bajando</b>.
                </p>
              </div>
            </header>
            <CuadrantesGestion territorios={data.territorios} onSelect={(t) => setSel(t)} />
          </div>

          {detalle && (
            <div className="card" style={{ marginBottom: 16 }}>
              <header>
                <div>
                  <h2>
                    {detalle.territorio}
                    {detalle.padre ? ` · ${detalle.padre}` : ""}
                  </h2>
                  <p className="note">
                    Línea gris punteada: tendencia del periodo heredado. Línea naranja: tendencia de
                    la gestión actual.
                  </p>
                </div>
                <button className="icon-btn" onClick={() => setSel(null)}>Cerrar</button>
              </header>
              <p className="explica">{explicar(detalle)}</p>
              <div className="cierre-kpis">
                <div>
                  <span className="ck">Lo heredó {DIRECCION[detalle.tend1.direccion]}</span>
                  <span className="cv">{nf.format(detalle.recibido ?? 0)}</span>
                  <span className="cd">
                    casos en 2022 · tendencia previa {tendTxt(detalle.tend1)}/año
                  </span>
                </div>
                <div>
                  <span className="ck">Últimos 12 meses · {DIRECCION[detalle.tend2.direccion]}</span>
                  <span className={`cv ${detalle.var_real < 0 ? "down" : detalle.var_real > 0 ? "up" : ""}`}>
                    {nf.format(detalle.actual ?? 0)}
                  </span>
                  <span className="cd">
                    {detalle.var_real >= 0 ? "+" : ""}{detalle.var_real}% vs 2022
                  </span>
                </div>
                <div>
                  <span className="ck">Si nada hubiera cambiado</span>
                  <span className="cv" style={{ color: "var(--text-muted)" }}>
                    {nf.format(detalle.contrafactual ?? 0)}
                  </span>
                  <span className="cd">
                    {detalle.vs_contraf >= 0 ? "+" : ""}{detalle.vs_contraf}% vs ese escenario
                  </span>
                </div>
                <div>
                  <span className="ck">Tendencia heredada</span>
                  <span className="cv" style={{ fontSize: 20 }}>
                    {detalle.tend1.pct >= 0 ? "+" : ""}{Math.round(detalle.tend1.pct)}%/año
                  </span>
                  <span className="cd">{detalle.tend1.direccion}</span>
                </div>
                <div>
                  <span className="ck">Tendencia de su gestión</span>
                  <span className={`cv ${detalle.tend2.direccion === "baja" ? "down" : detalle.tend2.direccion === "sube" ? "up" : ""}`} style={{ fontSize: 20 }}>
                    {detalle.tend2.pct >= 0 ? "+" : ""}{Math.round(detalle.tend2.pct)}%/año
                  </span>
                  <span className="cd">{detalle.tend2.direccion}</span>
                </div>
                <div>
                  <span className="ck">Veredicto</span>
                  <span className="cv" style={{ fontSize: 18, color: COLOR_VEREDICTO[detalle.veredicto] }}>
                    {ETIQUETA_VEREDICTO[detalle.veredicto]}
                  </span>
                  <span className="cd">{nf.format(detalle.n1)} → {nf.format(detalle.n2)} casos</span>
                </div>
              </div>
              <SerieGestion serie={detalle.serie} p1={data.periodo1} />
            </div>
          )}

          <div className="card">
            <header>
              <div>
                <h2>Tabla comparativa</h2>
                <p className="note">
                  <b>2022</b> son los homicidios de ese año completo; <b>últimos 12 meses</b>, los
                  del año móvil más reciente ya cerrado. Ambas ventanas son de doce meses, así que
                  la estacionalidad se cancela y las cifras se pueden verificar una a una contra el
                  registro. <b>Si nada cambiaba</b> proyecta el nivel de 2022 con la tendencia previa.
                  El veredicto compara los últimos 12 meses contra esa proyección: por debajo del
                  85% es «frenó el alza» —o «bajó» si además la tendencia actual es descendente—;
                  entre 85% y 115%, «sin cambio»; por encima de 115%, «empeoró», y pasado el 150%,
                  «se disparó».
                </p>
              </div>
            </header>
            <div className="tablewrap">
              <table className="data">
                <thead>
                  <tr>
                    <th>Territorio</th>
                    {nivel !== "departamento" && <th>{nivel === "provincia" ? "Departamento" : "Provincia · Departamento"}</th>}
                    <th>Lo heredó</th><th style={{ textAlign: "right" }}>2022</th>
                    <th style={{ textAlign: "right" }}>Últimos 12m</th>
                    <th style={{ textAlign: "right" }}>Si nada cambiaba</th><th style={{ textAlign: "right" }}>Var. real</th>
                    
                    
                    <th>Veredicto</th>
                  </tr>
                </thead>
                <tbody>
                  {lista.map((t: any) => (
                    <tr
                      key={t.id}
                      onClick={() => setSel(t.id)}
                      style={{ cursor: "pointer" }}
                    >
                      <td><b>{t.territorio}</b></td>
                      {nivel !== "departamento" && (
                        <td style={{ color: "var(--text-muted)" }}>{t.padre}</td>
                      )}
                      <td>
                        <span className="dir-chip" data-dir={t.tend1.direccion}>
                          {DIRECCION[t.tend1.direccion] ?? "—"}
                        </span>
                      </td>
                      <td className="n">{t.recibido == null ? "—" : nf.format(t.recibido)}</td>
                      <td className="n">{t.actual == null ? "—" : nf.format(t.actual)}</td>
                      <td className="n" style={{ color: "var(--text-muted)" }}>
                        {t.contrafactual == null ? "—" : nf.format(t.contrafactual)}
                      </td>
                      <td className="n" style={{ color: t.var_real > 0 ? "var(--critical)" : "var(--good)" }}>
                        {t.var_real == null ? "—" : `${t.var_real > 0 ? "+" : ""}${t.var_real}%`}
                      </td>

                      <td>
                        <span className="chip-v estatico">
                          <i className="swatch" style={{ background: COLOR_VEREDICTO[t.veredicto] }} />
                          {ETIQUETA_VEREDICTO[t.veredicto]}
                        </span>
                        {/* La marca viene del backend: se calcula sobre el menor
                            de los dos extremos, no solo sobre el nivel actual. */}
                        {t.volumen_bajo && (
                          <span className="poco-vol" title="Alguno de los dos periodos tiene menos de 12 casos al año: a ese volumen, dos o tres casos cambian el veredicto.">
                            volumen bajo
                          </span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <p className="aviso">
              La Policía Nacional depende del Ministerio del Interior, no de alcaldes ni
              gobernadores. Estos indicadores describen <b>cómo evolucionó la violencia en cada
              territorio</b> durante un periodo de gestión; no atribuyen causalidad a la autoridad
              local. Lima se separa en Lima Metropolitana —cuyo alcalde ejerce además funciones
              regionales— y Lima Provincias, que tiene gobernador propio; el Callao es región y
              provincia a la vez.
            </p>
          </div>
        </>
      )}
    </>
  );
}