import type { Tendencia } from "./tendencia";
import { mediaMovilCentrada, mediaMovilConExtremos, regresionLineal, leerTendencia } from "./tendencia";
export { regresionLineal, leerTendencia, mediaMovilCentrada, mediaMovilConExtremos };
export type { Tendencia };
import {
  Area,
  Bar,
  ReferenceArea,
  Scatter,
  ScatterChart,
  BarChart,
  CartesianGrid,
  Cell,
  ComposedChart,
  LabelList,
  Line,
  LineChart,
  ReferenceLine,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
  ZAxis,
} from "recharts";

/* Slots categóricos en orden fijo — nunca se ciclan ni se reasignan por ranking.
   El color sigue a la entidad: un mapa serie→slot estable evita que al filtrar
   se repinten las series sobrevivientes. */
export const SLOTS = [
  "var(--series-1)",
  "var(--series-2)",
  "var(--series-3)",
  "var(--series-4)",
  "var(--series-5)",
  "var(--series-6)",
];
export const OTROS = "var(--series-other)";

export function colorDe(serie: string, orden: string[]) {
  if (serie === "Otros") return OTROS;
  const i = orden.indexOf(serie);
  return i >= 0 && i < SLOTS.length ? SLOTS[i] : OTROS;
}

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

export function etiquetaMes(m: string) {
  const [a, mm] = m.split("-");
  return `${MESES[+mm - 1]} ${a.slice(2)}`;
}

export function mesLargo(m: string) {
  const [a, mm] = m.split("-");
  return `${MESES[+mm - 1]} ${a}`;
}

export const nf = new Intl.NumberFormat("es-PE");

const ejeComun = {
  stroke: "var(--axis)",
  tick: { fill: "var(--text-muted)", fontSize: 11 },
  tickLine: false,
};

/* ── Tooltips ─────────────────────────────────────────────────────────── */

function TooltipSerie({ active, payload, label, parcial }: any) {
  if (!active || !payload?.length) return null;
  const filas = [...payload].filter((p) => p.value != null).sort((a, b) => b.value - a.value);
  const total = filas.reduce((s, p) => s + p.value, 0);
  return (
    <div className="tt">
      <div className="tt-h">{mesLargo(label)}</div>
      {filas.map((p) => (
        <div className="tt-r" key={p.dataKey}>
          <span className="swatch" style={{ background: p.stroke || p.fill }} />
          {p.dataKey}
          <b>{nf.format(p.value)}</b>
        </div>
      ))}
      {filas.length > 1 && (
        <div className="tt-r" style={{ marginTop: 4, borderTop: "1px solid var(--grid)", paddingTop: 4 }}>
          Total<b>{nf.format(total)}</b>
        </div>
      )}
      {label === parcial && <div className="tt-p">Mes en curso — registro incompleto</div>}
    </div>
  );
}

function TooltipBarra({ active, payload, unidad }: any) {
  if (!active || !payload?.length) return null;
  const p = payload[0];
  return (
    <div className="tt">
      <div className="tt-h">{p.payload.categoria ?? p.payload.x}</div>
      <div className="tt-r">
        {unidad}
        <b>{nf.format(p.value)}</b>
      </div>
      {p.payload.pct != null && <div className="tt-p">{p.payload.pct}% del total filtrado</div>}
    </div>
  );
}

/* ── Línea de tendencia ───────────────────────────────────────────────── */

/* ── Serie mensual ────────────────────────────────────────────────────── */

export function SerieMensual({
  datos,
  series,
  parcial,
  mostrarMedia = false,
  mostrarRecta = false,
  tendencia = null,
}: {
  datos: any[];
  series: string[];
  parcial: string | null;
  mostrarMedia?: boolean;
  mostrarRecta?: boolean;
  tendencia?: Tendencia | null;
}) {
  // Con 3 años son 36 puntos; más allá se ralean los ticks para que las
  // etiquetas no colisionen.
  const intervalo = Math.max(0, Math.ceil(datos.length / 14) - 1);

  // Las capas de tendencia solo aplican a una serie: superpuestas sobre varias
  // el gráfico se vuelve ilegible.
  const unaSerie = series.length === 1;
  const clave = series[0];

  let filas = datos;
  if (unaSerie && (mostrarMedia || mostrarRecta)) {
    const valores = datos.map((d) => d[clave] ?? 0);
    const mm = mostrarMedia ? mediaMovilConExtremos(valores) : null;

    // El tramo firme y el provisional van en dos series para poder dibujarlos
    // distinto. Comparten el punto de unión para que la línea no se rompa.
    filas = datos.map((d, i) => {
      const p = mm?.[i];
      const vecinoFirme =
        mm && ((mm[i - 1] && !mm[i - 1].provisional) || (mm[i + 1] && !mm[i + 1].provisional));
      return {
        ...d,
        media: p && !p.provisional ? p.valor : undefined,
        mediaProv: p && p.valor != null && (p.provisional || vecinoFirme) ? p.valor : undefined,
        recta:
          mostrarRecta && tendencia
            ? tendencia.intercepto + tendencia.pendiente * i
            : undefined,
      };
    });
  }

  return (
    <ResponsiveContainer width="100%" height={320}>
      <LineChart data={filas} margin={{ top: 8, right: 16, left: 0, bottom: 4 }}>
        <CartesianGrid stroke="var(--grid)" strokeDasharray="0" vertical={false} />
        <XAxis dataKey="mes" tickFormatter={etiquetaMes} interval={intervalo} {...ejeComun} />
        <YAxis allowDecimals={false} width={48} {...ejeComun} axisLine={false} />
        <Tooltip
          content={<TooltipSerie parcial={parcial} />}
          cursor={{ stroke: "var(--axis)", strokeWidth: 1 }}
        />
        {series.map((s) => (
          <Line
            key={s}
            type="monotone"
            dataKey={s}
            stroke={colorDe(s, series)}
            strokeWidth={2}
            dot={false}
            activeDot={{ r: 4.5, strokeWidth: 2, stroke: "var(--surface-1)" }}
            connectNulls
          />
        ))}
        {unaSerie && mostrarRecta && (
          // Recta de regresión: el equivalente a la línea de tendencia de Excel.
          <Line
            dataKey="recta"
            stroke="var(--text-muted)"
            strokeWidth={1.5}
            strokeDasharray="6 4"
            dot={false}
            activeDot={false}
            isAnimationActive={false}
            connectNulls
          />
        )}
        {unaSerie && mostrarMedia && (
          <>
            {/* Extremos con ventana recortada: se recalculan al llegar meses
                nuevos, así que van punteados para no leerse como definitivos. */}
            <Line
              dataKey="mediaProv"
              stroke="var(--series-2)"
              strokeWidth={2.5}
              strokeDasharray="4 3"
              strokeOpacity={0.75}
              dot={false}
              activeDot={false}
              isAnimationActive={false}
              connectNulls={false}
            />
            {/* Media móvil por encima de la recta: es la lectura principal. */}
            <Line
              dataKey="media"
              stroke="var(--series-2)"
              strokeWidth={2.5}
              dot={false}
              activeDot={false}
              isAnimationActive={false}
              connectNulls
            />
          </>
        )}
      </LineChart>
    </ResponsiveContainer>
  );
}

/* ── Barras por año ───────────────────────────────────────────────────── */

export function BarrasAnuales({ datos, anioCurso }: { datos: any[]; anioCurso: string }) {
  return (
    <ResponsiveContainer width="100%" height={260}>
      <BarChart data={datos} margin={{ top: 16, right: 12, left: 0, bottom: 4 }}>
        <CartesianGrid stroke="var(--grid)" vertical={false} />
        <XAxis dataKey="categoria" {...ejeComun} />
        <YAxis allowDecimals={false} width={48} {...ejeComun} axisLine={false} />
        <Tooltip content={<TooltipBarra unidad="Defunciones" />} cursor={{ fill: "var(--hover-wash)" }} />
        <Bar dataKey="n" radius={[4, 4, 0, 0]} maxBarSize={54} isAnimationActive={false}>
          {datos.map((d) => (
            // El año en curso va en gris: es un dato parcial, no una caída real.
            <Cell key={d.categoria} fill={d.categoria === anioCurso ? OTROS : "var(--series-1)"} />
          ))}
        </Bar>
      </BarChart>
    </ResponsiveContainer>
  );
}

/* ── Comparación interanual (mismo mes / acumulado) ───────────────────── */

export function BarrasComparativas({
  datos,
  campo,
  anioCurso,
  promedio,
  etiquetaPromedio,
}: {
  datos: any[];
  campo: "mes_n" | "ytd_n";
  anioCurso: string;
  promedio?: number;
  etiquetaPromedio?: string;
}) {
  return (
    <ResponsiveContainer width="100%" height={280}>
      <BarChart data={datos} margin={{ top: 22, right: 12, left: 0, bottom: 4 }}>
        <CartesianGrid stroke="var(--grid)" vertical={false} />
        <XAxis dataKey="ANIO" {...ejeComun} />
        <YAxis allowDecimals={false} width={52} {...ejeComun} axisLine={false} />
        <Tooltip content={<TooltipBarra unidad="Defunciones" />} cursor={{ fill: "var(--hover-wash)" }} />
        {promedio != null && (
          <ReferenceLine
            y={promedio}
            stroke="var(--text-muted)"
            strokeDasharray="4 4"
            label={{
              value: etiquetaPromedio ?? `promedio ${nf.format(promedio)}`,
              position: "insideTopRight",
              fill: "var(--text-muted)",
              fontSize: 11,
            }}
          />
        )}
        <Bar dataKey={campo} radius={[4, 4, 0, 0]} maxBarSize={46} isAnimationActive={false}>
          {datos.map((d) => (
            // El año en curso lleva su propio color porque es una entidad
            // distinta (periodo aún abierto), no porque encabece un ranking.
            <Cell key={d.ANIO} fill={d.ANIO === anioCurso ? "var(--series-2)" : "var(--series-1)"} />
          ))}
          <LabelList
            dataKey={campo}
            position="top"
            fill="var(--text-secondary)"
            fontSize={11}
            formatter={(v: unknown) => (typeof v === "number" ? nf.format(v) : "")}
          />
        </Bar>
      </BarChart>
    </ResponsiveContainer>
  );
}

/* ── Barras horizontales (rankings) ───────────────────────────────────── */

export function BarrasRanking({
  datos,
  alto = 300,
  unidad = "Defunciones",
}: {
  datos: any[];
  alto?: number;
  unidad?: string;
}) {
  return (
    <ResponsiveContainer width="100%" height={alto}>
      <BarChart data={datos} layout="vertical" margin={{ top: 4, right: 44, left: 4, bottom: 4 }}>
        <CartesianGrid stroke="var(--grid)" horizontal={false} />
        <XAxis type="number" allowDecimals={false} {...ejeComun} axisLine={false} />
        <YAxis
          type="category"
          dataKey="categoria"
          width={132}
          {...ejeComun}
          axisLine={false}
          tick={{ fill: "var(--text-secondary)", fontSize: 11.5 }}
        />
        <Tooltip content={<TooltipBarra unidad={unidad} />} cursor={{ fill: "var(--hover-wash)" }} />
        <Bar
          dataKey="n"
          fill="var(--series-1)"
          radius={[0, 4, 4, 0]}
          maxBarSize={18}
          isAnimationActive={false}
          label={{
            position: "right",
            fill: "var(--text-secondary)",
            fontSize: 11.5,
            formatter: (v: unknown) => (typeof v === "number" ? nf.format(v) : ""),
          }}
        />
      </BarChart>
    </ResponsiveContainer>
  );
}

/* ── Heatmap de estacionalidad ────────────────────────────────────────── */

export function Heatmap({
  filas,
  mesParcial,
}: {
  filas: { ANIO: string; MES: string; n: number }[];
  mesParcial?: string | null;
}) {
  const anios = [...new Set(filas.map((f) => f.ANIO))].sort();
  const mapa = new Map(filas.map((f) => [`${f.ANIO}-${f.MES}`, f.n]));
  const max = Math.max(...filas.map((f) => f.n), 1);

  // Total por año. El año en curso queda incompleto, así que se marca: su
  // total no es comparable con el de los años cerrados.
  const totales = new Map<string, number>();
  for (const f of filas) totales.set(f.ANIO, (totales.get(f.ANIO) ?? 0) + f.n);
  const anioEnCurso = mesParcial ? mesParcial.slice(0, 4) : anios.at(-1);

  // Rampa secuencial de un solo tono: claro = cerca de cero.
  const paso = (n: number | undefined) => {
    if (n == null) return "var(--seq-0)";
    const t = n / max;
    const i = Math.min(7, Math.max(1, Math.ceil(t * 7)));
    return `var(--seq-${i})`;
  };

  return (
    <div className="heat">
      <table>
        <thead>
          <tr>
            <th />
            {MESES.map((m) => (
              <th key={m}>{m}</th>
            ))}
            <th className="th-total">total</th>
          </tr>
        </thead>
        <tbody>
          {anios.map((a) => (
            <tr key={a}>
              <th className="y">{a}</th>
              {MESES.map((_, i) => {
                const mm = String(i + 1).padStart(2, "0");
                const n = mapa.get(`${a}-${mm}`);
                const t = n ? n / max : 0;
                return (
                  <td
                    key={mm}
                    style={{
                      background: paso(n),
                      // El texto se aclara solo sobre los pasos oscuros de la rampa.
                      color: t > 0.55 ? "#fff" : "var(--text-secondary)",
                    }}
                    title={`${MESES[i]} ${a}: ${n != null ? nf.format(n) : "sin datos"}`}
                  >
                    {n != null ? nf.format(n) : ""}
                  </td>
                );
              })}
              {/* El total va fuera de la rampa de color: su magnitud es un
                  orden mayor que la de un mes y aplastaría toda la escala. */}
              <td
                className={`td-total${a === anioEnCurso ? " parcial" : ""}`}
                title={
                  a === anioEnCurso
                    ? `${a}: ${nf.format(totales.get(a) ?? 0)} — año en curso, aún incompleto`
                    : `${a}: ${nf.format(totales.get(a) ?? 0)}`
                }
              >
                {nf.format(totales.get(a) ?? 0)}
                {a === anioEnCurso && <span className="ast">*</span>}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      {anioEnCurso && (
        <p className="heat-nota">* {anioEnCurso} en curso: el total aún no es comparable con los años cerrados.</p>
      )}
    </div>
  );
}

/* ── Leyenda ──────────────────────────────────────────────────────────── */

export function Leyenda({ series }: { series: string[] }) {
  if (series.length < 2) return null; // una sola serie: el título ya la nombra
  return (
    <div className="legend">
      {series.map((s) => (
        <span key={s}>
          <i className="swatch" style={{ background: colorDe(s, series) }} />
          {s}
        </span>
      ))}
    </div>
  );
}

/* ── Proyección: observado + central + banda, mes a mes ───────────────── */

function TooltipProyeccion({ active, payload, label }: any) {
  if (!active || !payload?.length) return null;
  const d = payload[0]?.payload ?? {};
  const esProy = d.proy != null && d.obs == null;
  return (
    <div className="tt">
      <div className="tt-h">{mesLargo(label)}</div>
      {d.obs != null && (
        <div className="tt-r">
          <span className="swatch" style={{ background: "var(--series-1)" }} />
          Observado<b>{nf.format(d.obs)}</b>
        </div>
      )}
      {esProy && (
        <div className="tt-r">
          <span className="swatch" style={{ background: "var(--series-2)" }} />
          Proyectado<b>{nf.format(Math.round(d.proy))}</b>
        </div>
      )}
      {esProy && d.lo != null && (
        <div className="tt-p">
          rango 80%: {nf.format(Math.round(d.lo))} – {nf.format(Math.round(d.hi))}
        </div>
      )}
    </div>
  );
}

export function ProyeccionChart({
  historico,
  meses,
  central,
  bandas,
  mesesHistoricos = 24,
}: {
  historico: { mes: string; n: number }[];
  meses: string[];
  central: number[];
  bandas: any;
  mesesHistoricos?: number;
}) {
  // Se acota el histórico para que el tramo proyectado se lea mes a mes; con
  // los 100+ meses desde 2017 los últimos puntos quedarían aplastados.
  const hist = historico.slice(-mesesHistoricos);
  const datos: any[] = hist.map((h) => ({ mes: h.mes, obs: h.n }));

  // El último observado ancla también la serie proyectada, para que la línea
  // punteada arranque pegada y no aparezca flotando.
  if (datos.length) datos[datos.length - 1].proy = datos[datos.length - 1].obs;

  meses.forEach((m, i) => {
    datos.push({
      mes: m,
      proy: central[i],
      lo: bandas?.p10?.[i],
      hi: bandas?.p90?.[i],
      rango: bandas?.p10 ? [bandas.p10[i], bandas.p90[i]] : undefined,
    });
  });

  return (
    <ResponsiveContainer width="100%" height={360}>
      <ComposedChart data={datos} margin={{ top: 26, right: 20, left: 0, bottom: 22 }}>
        <CartesianGrid stroke="var(--grid)" vertical={false} />
        <XAxis
          dataKey="mes"
          tickFormatter={etiquetaMes}
          interval={0}
          angle={-52}
          textAnchor="end"
          height={54}
          {...ejeComun}
          tick={{ fill: "var(--text-muted)", fontSize: 10 }}
        />
        <YAxis allowDecimals={false} width={52} {...ejeComun} axisLine={false} />
        <Tooltip content={<TooltipProyeccion />} cursor={{ stroke: "var(--axis)", strokeWidth: 1 }} />
        {meses.length > 0 && (
          <ReferenceLine
            x={meses[0]}
            stroke="var(--text-muted)"
            strokeDasharray="3 3"
            label={{ value: "corte", position: "top", fill: "var(--text-muted)", fontSize: 11 }}
          />
        )}
        <Area
          dataKey="rango"
          stroke="none"
          fill="var(--series-2)"
          fillOpacity={0.16}
          isAnimationActive={false}
          connectNulls
        />
        <Line
          dataKey="obs"
          stroke="var(--series-1)"
          strokeWidth={2}
          dot={false}
          activeDot={{ r: 4.5, strokeWidth: 2, stroke: "var(--surface-1)" }}
          isAnimationActive={false}
        />
        <Line
          dataKey="proy"
          stroke="var(--series-2)"
          strokeWidth={2}
          strokeDasharray="5 4"
          dot={{ r: 3.5, fill: "var(--series-2)", strokeWidth: 0 }}
          isAnimationActive={false}
          connectNulls
        >
          {/* Cada mes proyectado lleva su valor: es la lectura que se pide. */}
          <LabelList
            dataKey="proy"
            position="top"
            fill="var(--series-2)"
            fontSize={10.5}
            offset={9}
            formatter={(v: unknown) => (typeof v === "number" ? String(Math.round(v)) : "")}
          />
        </Line>
      </ComposedChart>
    </ResponsiveContainer>
  );
}

/* ── Cierre anual: años cerrados + año en curso (observado + proyectado) ── */

function TooltipCierre({ active, payload }: any) {
  if (!active || !payload?.length) return null;
  const d = payload[0]?.payload ?? {};
  return (
    <div className="tt">
      <div className="tt-h">{d.anio}</div>
      {d.observado != null && (
        <div className="tt-r">
          <span className="swatch" style={{ background: "var(--series-1)" }} />
          Observado<b>{nf.format(Math.round(d.observado))}</b>
        </div>
      )}
      {d.proyectado ? (
        <div className="tt-r">
          <span className="swatch" style={{ background: "var(--series-2)" }} />
          Proyectado<b>{nf.format(Math.round(d.proyectado))}</b>
        </div>
      ) : null}
      {d.proyectado ? (
        <div className="tt-r" style={{ marginTop: 4, borderTop: "1px solid var(--grid)", paddingTop: 4 }}>
          Cierre estimado<b>{nf.format(Math.round(d.observado + d.proyectado))}</b>
        </div>
      ) : null}
      {d.rango && <div className="tt-p">rango 80%: {d.rango}</div>}
    </div>
  );
}

export function CierreAnual({ datos }: { datos: any[] }) {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <ComposedChart data={datos} margin={{ top: 26, right: 12, left: 0, bottom: 4 }}>
        <CartesianGrid stroke="var(--grid)" vertical={false} />
        <XAxis dataKey="anio" {...ejeComun} />
        <YAxis allowDecimals={false} width={58} {...ejeComun} axisLine={false} />
        <Tooltip content={<TooltipCierre />} cursor={{ fill: "var(--hover-wash)" }} />
        {/* Apiladas: la parte ya ocurrida y la proyectada del año en curso se
            distinguen a simple vista en lugar de esconderse en un solo total. */}
        <Bar dataKey="observado" stackId="a" fill="var(--series-1)" maxBarSize={46} isAnimationActive={false} />
        <Bar dataKey="proyectado" stackId="a" fill="var(--series-2)" radius={[4, 4, 0, 0]} maxBarSize={46} isAnimationActive={false}>
          <LabelList
            dataKey="total"
            position="top"
            fill="var(--text-secondary)"
            fontSize={11}
            formatter={(v: unknown) => (typeof v === "number" ? nf.format(Math.round(v)) : "")}
          />
        </Bar>
      </ComposedChart>
    </ResponsiveContainer>
  );
}

/* ── Cierre diario: registrado + rezago + proyección ───────────────────── */

function TooltipDiario({ active, payload, label }: any) {
  if (!active || !payload?.length) return null;
  const d = payload[0]?.payload ?? {};
  const DOW = ["lunes","martes","miércoles","jueves","viernes","sábado","domingo"];
  return (
    <div className="tt">
      <div className="tt-h">{label} · {DOW[d.dow]}</div>
      {d.tipo === "observado" ? (
        <>
          <div className="tt-r">
            <span className="swatch" style={{ background: "var(--series-1)" }} />
            Registrado<b>{d.observado}</b>
          </div>
          {d.rezago > 0.05 && (
            <div className="tt-r">
              <span className="swatch" style={{ background: "var(--seq-2)" }} />
              {/* "menos de 1" en vez de "+0": un rezago pequeño existe, y
                  mostrarlo como cero lo haría desaparecer. */}
              Rezago estimado<b>{d.rezago < 0.5 ? "menos de 1" : `+${Math.round(d.rezago)}`}</b>
            </div>
          )}
          {d.rezago > 0.05 && (
            <div className="tt-r" style={{ marginTop: 4, borderTop: "1px solid var(--grid)", paddingTop: 4 }}>
              Total estimado<b>{Math.round(d.corregido ?? 0)}</b>
            </div>
          )}
          <div className="tt-p">
            {(d.fraccion * 100).toFixed(0)}% de este día ya está registrado
            {d.observado === 0 && d.rezago > 0.05 && " — aún sin certificados cargados"}
          </div>
        </>
      ) : (
        <>
          {/* Se muestra el rango entero como dato principal: el número de
              muertes de un día es entero, y el valor esperado (decimal) es un
              promedio, no un pronóstico de lo que marcará el contador. */}
          <div className="tt-r">
            <span className="swatch" style={{ background: "var(--series-2)" }} />
            Esperado<b>{Math.round(d.proyectado ?? 0)}</b>
          </div>
          {/* El intervalo se redondea hacia afuera: con round() un rango como
              [2.6, 8.4] quedaría en [3, 8], estrechando la cobertura que se
              promete. Piso abajo y techo arriba la conservan. */}
          <div className="tt-p">
            rango probable: {Math.floor(d.lo ?? 0)} – {Math.ceil(d.hi ?? 0)} muertes
          </div>
        </>
      )}
    </div>
  );
}

export function CierreDiario({ dias }: { dias: any[] }) {
  const datos = dias.map((d) => ({
    ...d,
    dia: d.fecha.slice(8),
    // El rezago se apila encima de lo registrado: juntos son el total estimado
    // de ese día. Viene calculado del backend como μ·(1−fracción), de modo que
    // un día con cero registros igual muestra su parte pendiente.
    rezago: d.tipo === "observado" ? (d.pendiente ?? 0) : 0,
    rango: d.tipo === "proyectado" ? [d.lo, d.hi] : undefined,
  }));

  return (
    <ResponsiveContainer width="100%" height={320}>
      <ComposedChart data={datos} margin={{ top: 16, right: 16, left: 0, bottom: 4 }}>
        <CartesianGrid stroke="var(--grid)" vertical={false} />
        <XAxis dataKey="dia" interval={0} {...ejeComun} tick={{ fill: "var(--text-muted)", fontSize: 10 }} />
        <YAxis allowDecimals={false} width={40} {...ejeComun} axisLine={false} />
        <Tooltip content={<TooltipDiario />} cursor={{ fill: "var(--hover-wash)" }} />
        <Bar dataKey="observado" stackId="a" fill="var(--series-1)" maxBarSize={22} isAnimationActive={false} />
        <Bar dataKey="rezago" stackId="a" fill="var(--seq-2)" radius={[3, 3, 0, 0]} maxBarSize={22} isAnimationActive={false} />
        <Bar dataKey="proyectado" fill="var(--series-2)" radius={[3, 3, 0, 0]} maxBarSize={22} isAnimationActive={false} />
        <Line dataKey="hi" stroke="var(--series-2)" strokeWidth={1} strokeDasharray="3 3" dot={false} isAnimationActive={false} connectNulls />
        <Line dataKey="lo" stroke="var(--series-2)" strokeWidth={1} strokeDasharray="3 3" dot={false} isAnimationActive={false} connectNulls />
      </ComposedChart>
    </ResponsiveContainer>
  );
}

/* ── Curva de rezago ──────────────────────────────────────────────────── */

export function CurvaRezago({ datos }: { datos: { antiguedad: number; fraccion: number }[] }) {
  const d = datos.map((x) => ({ ...x, pct: x.fraccion * 100 }));
  return (
    <ResponsiveContainer width="100%" height={230}>
      <LineChart data={d} margin={{ top: 8, right: 16, left: 0, bottom: 18 }}>
        <CartesianGrid stroke="var(--grid)" vertical={false} />
        <XAxis
          dataKey="antiguedad"
          {...ejeComun}
          label={{ value: "días transcurridos desde la muerte", position: "insideBottom", offset: -12, fill: "var(--text-muted)", fontSize: 11 }}
        />
        <YAxis domain={[0, 100]} width={42} {...ejeComun} axisLine={false} tickFormatter={(v) => `${v}%`} />
        <Tooltip
          cursor={{ stroke: "var(--axis)" }}
          content={({ active, payload, label }: any) =>
            active && payload?.length ? (
              <div className="tt">
                <div className="tt-h">{label} días después</div>
                <div className="tt-r">Registrado<b>{payload[0].value.toFixed(1)}%</b></div>
              </div>
            ) : null
          }
        />
        <ReferenceLine y={100} stroke="var(--axis)" strokeDasharray="3 3" />
        <Line dataKey="pct" stroke="var(--series-3)" strokeWidth={2.5} dot={{ r: 2.5, fill: "var(--series-3)", strokeWidth: 0 }} isAnimationActive={false} />
      </LineChart>
    </ResponsiveContainer>
  );
}

/* ── Gestión: cuadrantes de tendencia ─────────────────────────────────── */

/* El color aquí codifica polaridad (mejoró / empeoró), no identidad, así que
   usa la paleta de estado y no los slots categóricos. */
/* Cinco niveles ordinales, de mejor a peor. La escala está validada con
   scripts/validate_palette.js en claro y oscuro: el par crítico (amarillo↔rojo)
   queda en ΔE 10.2 para daltonismo y 16.9 en visión normal sobre fondo oscuro.
   El gris es el punto neutro de la escala, no una categoría más. */
export const COLOR_VEREDICTO: Record<string, string> = {
  bajo: "var(--v-bajo)",
  freno: "var(--v-freno)",
  sigue: "var(--v-sigue)",
  empeoro: "var(--v-empeoro)",
  disparo: "var(--v-disparo)",
};

export const ETIQUETA_VEREDICTO: Record<string, string> = {
  bajo: "Bajó",
  freno: "Frenó el alza",
  sigue: "Sin cambio",
  empeoro: "Empeoró",
  disparo: "Se disparó",
};

function TooltipGestion({ active, payload }: any) {
  if (!active || !payload?.length) return null;
  const d = payload[0]?.payload ?? {};
  return (
    <div className="tt">
      <div className="tt-h">{d.territorio}{d.padre ? ` · ${d.padre}` : ""}</div>
      <div className="tt-r">Recibió<b>{d.x > 0 ? "+" : ""}{Math.round(d.x)}%/año</b></div>
      <div className="tt-r">Su gestión<b>{d.y > 0 ? "+" : ""}{Math.round(d.y)}%/año</b></div>
      <div className="tt-r" style={{ marginTop: 4, borderTop: "1px solid var(--grid)", paddingTop: 4 }}>
        2022 → últimos 12m<b>{nf.format(d.recibido ?? 0)} → {nf.format(d.actual ?? 0)}</b>
      </div>
      {d.contraf != null && (
        <div className="tt-r" style={{ color: "var(--text-muted)" }}>
          Si nada cambiaba<b>{nf.format(d.contraf)}</b>
        </div>
      )}
      <div className="tt-p">{ETIQUETA_VEREDICTO[d.veredicto] ?? d.veredicto}</div>
    </div>
  );
}

export function CuadrantesGestion({
  territorios,
  onSelect,
}: {
  territorios: any[];
  onSelect?: (t: string) => void;
}) {
  const datos = territorios
    .filter((t) => t.tend1.pct != null && t.tend2.pct != null)
    .map((t) => ({
      id: t.id, territorio: t.territorio, padre: t.padre, veredicto: t.veredicto,
      // Ejes en % anual y no en casos/año: así un punto de Lima y uno de una
      // provincia chica son comparables en la misma escala.
      // Mismos campos que usa la tabla. Antes leía anual1/anual2 (promedios
      // anualizados del periodo completo) mientras la tabla ya mostraba
      // recibido/actual, así que el tooltip y la fila decían cifras distintas
      // para el mismo territorio.
      x: t.tend1.pct, y: t.tend2.pct, recibido: t.recibido, actual: t.actual,
      contraf: t.contrafactual, z: t.n2,
    }));
  if (!datos.length) return null;

  const mx = Math.max(...datos.map((d) => Math.abs(d.x)), 1) * 1.15;
  const my = Math.max(...datos.map((d) => Math.abs(d.y)), 1) * 1.15;

  return (
    <ResponsiveContainer width="100%" height={400}>
      <ScatterChart margin={{ top: 16, right: 24, left: 8, bottom: 30 }}>
        {/* El cuadrante inferior derecho es el que responde la pregunta:
            recibió subiendo (x>0) y lo dejó bajando (y<0). */}
        <ReferenceArea x1={0} x2={mx} y1={-my} y2={0} fill="var(--good)" fillOpacity={0.07} />
        <ReferenceArea x1={0} x2={mx} y1={0} y2={my} fill="var(--critical)" fillOpacity={0.07} />
        <CartesianGrid stroke="var(--grid)" />
        <XAxis
          type="number" dataKey="x" domain={[-mx, mx]} {...ejeComun}
          tickFormatter={(v: number) => `${Math.round(v)}%`}
          label={{ value: "Tendencia que RECIBIÓ (% anual)", position: "insideBottom", offset: -18, fill: "var(--text-muted)", fontSize: 11 }}
        />
        <YAxis
          type="number" dataKey="y" domain={[-my, my]} width={54} {...ejeComun}
          tickFormatter={(v: number) => `${Math.round(v)}%`}
          label={{ value: "Tendencia de SU GESTIÓN (% anual)", angle: -90, position: "insideLeft", offset: 8, fill: "var(--text-muted)", fontSize: 11 }}
        />
        <ZAxis type="number" dataKey="z" range={[45, 420]} />
        <ReferenceLine x={0} stroke="var(--axis)" />
        <ReferenceLine y={0} stroke="var(--axis)" />
        <Tooltip content={<TooltipGestion />} cursor={{ strokeDasharray: "3 3" }} />
        <Scatter
          data={datos}
          isAnimationActive={false}
          onClick={(e: any) => onSelect?.(e?.id)}
          style={{ cursor: onSelect ? "pointer" : "default" }}
        >
          {datos.map((d, i) => (
            <Cell
              key={i}
              fill={COLOR_VEREDICTO[d.veredicto] ?? "var(--text-muted)"}
              fillOpacity={0.72}
              stroke="var(--surface-1)"
              strokeWidth={1.5}
            />
          ))}
        </Scatter>
      </ScatterChart>
    </ResponsiveContainer>
  );
}

/* ── Gestión: serie mensual de un territorio con los dos periodos ──────── */

export function SerieGestion({
  serie,
  p1,
}: {
  serie: { mes: string; n: number }[];
  p1: { desde: string; hasta: string };
}) {
  const datos = serie.map((r) => ({ ...r, periodo: r.mes <= p1.hasta ? 1 : 2 }));
  const intervalo = Math.max(0, Math.ceil(datos.length / 14) - 1);
  const corte = datos.find((d) => d.periodo === 2)?.mes;

  // Recta de mínimos cuadrados dentro de cada periodo: es lo que traduce
  // "venía subiendo" y "lo dejó bajando" en algo visible.
  const recta = (tramo: typeof datos) => {
    const n = tramo.length;
    if (n < 3) return new Map<string, number>();
    const mx = (n - 1) / 2;
    const my = tramo.reduce((s, r) => s + r.n, 0) / n;
    let sxy = 0, sxx = 0;
    tramo.forEach((r, i) => { sxy += (i - mx) * (r.n - my); sxx += (i - mx) ** 2; });
    const b = sxx ? sxy / sxx : 0;
    return new Map(tramo.map((r, i) => [r.mes, my + b * (i - mx)]));
  };
  const r1 = recta(datos.filter((d) => d.periodo === 1));
  const r2 = recta(datos.filter((d) => d.periodo === 2));
  const filas = datos.map((d) => ({ ...d, t1: r1.get(d.mes), t2: r2.get(d.mes) }));

  return (
    <ResponsiveContainer width="100%" height={300}>
      <ComposedChart data={filas} margin={{ top: 8, right: 16, left: 0, bottom: 4 }}>
        <CartesianGrid stroke="var(--grid)" vertical={false} />
        <XAxis dataKey="mes" tickFormatter={etiquetaMes} interval={intervalo} {...ejeComun} />
        <YAxis allowDecimals={false} width={44} {...ejeComun} axisLine={false} />
        <Tooltip
          cursor={{ stroke: "var(--axis)" }}
          content={({ active, payload, label }: any) =>
            active && payload?.length ? (
              <div className="tt">
                <div className="tt-h">{mesLargo(label)}</div>
                <div className="tt-r">Homicidios<b>{payload[0].payload.n}</b></div>
                <div className="tt-p">
                  {payload[0].payload.periodo === 1 ? "periodo heredado" : "periodo de gestión"}
                </div>
              </div>
            ) : null
          }
        />
        {corte && (
          <ReferenceLine
            x={corte}
            stroke="var(--text-muted)"
            strokeDasharray="4 3"
            label={{ value: "cambio de gestión", position: "top", fill: "var(--text-muted)", fontSize: 10.5 }}
          />
        )}
        <Line dataKey="n" stroke="var(--series-1)" strokeWidth={1.6} dot={false}
              activeDot={{ r: 4, strokeWidth: 2, stroke: "var(--surface-1)" }} isAnimationActive={false} />
        <Line dataKey="t1" stroke="var(--text-muted)" strokeWidth={2} strokeDasharray="5 4"
              dot={false} activeDot={false} isAnimationActive={false} connectNulls={false} />
        <Line dataKey="t2" stroke="var(--series-2)" strokeWidth={2.5}
              dot={false} activeDot={false} isAnimationActive={false} connectNulls={false} />
      </ComposedChart>
    </ResponsiveContainer>
  );
}