import { useMemo, useState } from "react";
import "./theme.css";
import type { Filtros, Meta } from "./api";
import { qs, useApi } from "./api";
import {
  BarrasAnuales,
  BarrasComparativas,
  BarrasRanking,
  Heatmap,
  Leyenda,
  SerieMensual,
  leerTendencia,
  regresionLineal,
  colorDe,
  etiquetaMes,
  mesLargo,
  nf,
} from "./charts";

const NOMBRE_MES = [
  "enero", "febrero", "marzo", "abril", "mayo", "junio",
  "julio", "agosto", "setiembre", "octubre", "noviembre", "diciembre",
];

/* La app no crea categorías: todo lo que se ve aquí es un conteo sobre las
   columnas tal como las publica MINSA. "Otros" es solo una agregación de
   presentación de las series fuera del top, no un atributo nuevo. */

const ABRIR_POR = [
  { v: "", t: "Sin abrir" },
  { v: "sexo", t: "SEXO" },
  { v: "lugar", t: "TIPO_LUGAR" },
  { v: "tipo", t: "MUERTE_VIOLENTA" },
  { v: "necropsia", t: "NECROPSIA" },
] as const;

const MAX_SERIES = 6;

export default function Dashboard({ meta }: { meta: Meta }) {

  const [tipo, setTipo] = useState("HOMICIDIO");
  const [sexo, setSexo] = useState("");
  const [departamento, setDepartamento] = useState("");
  const [lugar, setLugar] = useState("");
  const [rango, setRango] = useState<"3a" | "todo">("3a");
  const [abrirPor, setAbrirPor] = useState("");
  const [incluirParcial, setIncluirParcial] = useState(false);
  const [mostrarMedia, setMostrarMedia] = useState(true);
  const [mostrarRecta, setMostrarRecta] = useState(false);
  const [mesCorte, setMesCorte] = useState<string | null>(null);

  // "Últimos 3 años" por defecto: el año en curso y los dos anteriores.
  const desde = useMemo(() => {
    if (!meta) return undefined;
    return rango === "3a" ? String(+meta.anio_max - 2) : meta.anio_min;
  }, [meta, rango]);

  const f: Filtros = { tipo, sexo, departamento, lugar, desde };
  const listo = !!meta && !!desde;
  const query = listo ? qs(f) : "";

  const serie = useApi<{ datos: any[]; mes_parcial: string }>(
    listo ? `/api/serie-mensual?${qs(f, abrirPor ? { serie_por: abrirPor } : {})}` : null
  );
  const resumen = useApi<any>(listo ? `/api/resumen?${query}` : null);
  const deptos = useApi<any[]>(listo ? `/api/dimension/departamento?${qs(f, { limite: "12" })}` : null);
  const lugares = useApi<any[]>(listo ? `/api/dimension/lugar?${query}` : null);
  const edades = useApi<any>(listo ? `/api/edades?${query}` : null);
  const estacion = useApi<any[]>(listo ? `/api/estacionalidad?${query}` : null);

  const mesParcial = serie.data?.mes_parcial ?? null;

  /* Mes de corte de la comparación interanual: por defecto el último mes ya
     cerrado, que es el que se puede comparar de igual a igual contra los
     mismos meses de años anteriores. */
  const mesCerrado = useMemo(() => {
    if (!mesParcial) return null;
    const m = Number(mesParcial.split("-")[1]);
    return String(m === 1 ? 12 : m - 1).padStart(2, "0");
  }, [mesParcial]);

  const mesComp = mesCorte ?? mesCerrado;

  const interanual = useApi<any>(
    listo && mesComp
      ? `/api/interanual?${qs(
          { tipo, sexo, departamento, lugar },
          { mes_corte: mesComp }
        )}`
      : null
  );

  /* Pivotea la respuesta larga (mes, serie, n) a ancha para Recharts, deja las
     series en orden fijo por volumen total y agrupa la cola en "Otros". */
  const { filas, series } = useMemo(() => {
    const d = serie.data?.datos ?? [];
    const visibles = incluirParcial ? d : d.filter((r: any) => r.mes !== mesParcial);
    if (!abrirPor) {
      return {
        filas: visibles.map((r: any) => ({ mes: r.mes, Total: r.n })),
        series: ["Total"],
      };
    }
    const totales = new Map<string, number>();
    for (const r of visibles) totales.set(r.serie, (totales.get(r.serie) ?? 0) + r.n);
    const orden = [...totales.entries()].sort((a, b) => b[1] - a[1]).map(([k]) => k);
    const top = orden.slice(0, MAX_SERIES);
    const enTop = new Set(top);
    const conCola = orden.length > MAX_SERIES;

    const porMes = new Map<string, any>();
    for (const r of visibles) {
      if (!porMes.has(r.mes)) porMes.set(r.mes, { mes: r.mes });
      const fila = porMes.get(r.mes);
      const k = enTop.has(r.serie) ? r.serie : "Otros";
      fila[k] = (fila[k] ?? 0) + r.n;
    }
    return {
      filas: [...porMes.values()].sort((a, b) => a.mes.localeCompare(b.mes)),
      series: conCola ? [...top, "Otros"] : top,
    };
  }, [serie.data, abrirPor, incluirParcial, mesParcial]);

  /* Tendencia sobre la ventana que se está viendo: el veredicto tiene que
     corresponder a lo que hay en pantalla, no a toda la historia.
     Se calcula sobre los conteos crudos, nunca sobre la media móvil: suavizar
     antes de regresionar infla el R² y el estadístico t, y daría "señal
     marcada" donde no la hay. */
  const tendencia = useMemo(
    () => (series.length === 1 ? regresionLineal(filas.map((r: any) => r[series[0]] ?? 0)) : null),
    [filas, series]
  );
  const veredicto = useMemo(() => leerTendencia(tendencia), [tendencia]);

  const porAnioBarras = useMemo(
    () => (resumen.data?.por_anio ?? []).map((r: any) => ({ categoria: r.ANIO, n: r.n })),
    [resumen.data]
  );

  const conPct = (arr: any[] | null) => {
    if (!arr) return [];
    const t = arr.reduce((s, r) => s + r.n, 0) || 1;
    return arr.map((r) => ({ ...r, pct: Math.round((1000 * r.n) / t) / 10 }));
  };

  const edadBarras = useMemo(() => {
    const d = edades.data?.decadas ?? [];
    return d.map((r: any) => ({
      categoria: r.decada >= 100 ? "100+" : `${r.decada}-${r.decada + 9}`,
      n: r.n,
    }));
  }, [edades.data]);

  const picoMes = useMemo(() => {
    if (!filas.length || series.length !== 1) return null;
    return filas.reduce((a: any, b: any) => (b.Total > a.Total ? b : a));
  }, [filas, series]);

  const promedio = useMemo(() => {
    if (!filas.length) return null;
    const t = filas.reduce(
      (s: number, r: any) => s + series.reduce((x: number, k: string) => x + (r[k] ?? 0), 0),
      0
    );
    return Math.round(t / filas.length);
  }, [filas, series]);

  const v = resumen.data?.variacion;
  const etiquetaFiltro =
    [tipo || "todas las causas", sexo, lugar, departamento].filter(Boolean).join(" · ") || "sin filtros";

  return (
    <>
      <div className="filters">
        <div className="field">
          <label>Periodo</label>
          <div className="seg">
            <button aria-pressed={rango === "3a"} onClick={() => setRango("3a")}>
              Últimos 3 años
            </button>
            <button aria-pressed={rango === "todo"} onClick={() => setRango("todo")}>
              Todo ({meta.anio_min}–{meta.anio_max})
            </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>DEPARTAMENTO</label>
          <select value={departamento} onChange={(e) => setDepartamento(e.target.value)}>
            <option value="">(todos)</option>
            {meta.departamentos.map((d) => (
              <option key={d} value={d}>
                {d}
              </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>Abrir series por</label>
          <select value={abrirPor} onChange={(e) => setAbrirPor(e.target.value)}>
            {ABRIR_POR.map((o) => (
              <option key={o.v} value={o.v}>
                {o.t}
              </option>
            ))}
          </select>
        </div>
      </div>

      <div className="tiles">
        <div className="tile">
          <div className="k">Total del periodo</div>
          <div className="v">{resumen.data ? nf.format(resumen.data.total) : "—"}</div>
          <div className="d">{etiquetaFiltro}</div>
        </div>
        <div className="tile">
          <div className="k">Variación último año cerrado</div>
          <div className="v">
            {v ? (
              <span className={v.pct >= 0 ? "up" : "down"}>
                {v.pct >= 0 ? "+" : ""}
                {v.pct}%
              </span>
            ) : (
              "—"
            )}
          </div>
          <div className="d">
            {v ? `${v.anio}: ${nf.format(v.valor)} vs ${v.anio_previo}: ${nf.format(v.valor_previo)}` : "—"}
          </div>
        </div>
        <div className="tile">
          <div className="k">Promedio mensual</div>
          <div className="v">{promedio != null ? nf.format(promedio) : "—"}</div>
          <div className="d">sobre {filas.length} meses</div>
        </div>
        <div className="tile">
          <div className="k">Mes más alto</div>
          <div className="v">{picoMes ? nf.format(picoMes.Total) : "—"}</div>
          <div className="d">{picoMes ? mesLargo(picoMes.mes) : "cierra las series para verlo"}</div>
        </div>
      </div>

      <div className="grid" style={{ marginBottom: 16 }}>
        <div className="card">
          <header>
            <div>
              <h2>Tendencia mensual — {etiquetaFiltro}</h2>
              <p className="note">
                Conteo de defunciones por mes de ocurrencia (columna FECHA).
                {!incluirParcial && mesParcial && ` Se excluye ${mesLargo(mesParcial)} por estar en curso.`}
              </p>
            </div>
            <Leyenda series={series} />
          </header>

          {veredicto && (
            <div className={`veredicto ${veredicto.clase}`}>
              <span className="v-icono">{veredicto.icono}</span>
              <span className="v-titulo">{veredicto.titulo}</span>
              <span className="v-detalle">{veredicto.detalle}</span>
              {tendencia && tendencia.r2 < 0.25 && tendencia.direccion !== "estable" && (
                <span className="v-aviso">
                  la recta explica poco de la variación: leer la media móvil
                </span>
              )}
            </div>
          )}

          <SerieMensual
            datos={filas}
            series={series}
            parcial={incluirParcial ? mesParcial : null}
            mostrarMedia={mostrarMedia}
            mostrarRecta={mostrarRecta}
            tendencia={tendencia}
          />

          <div className="opciones-serie">
            <label>
              <input
                type="checkbox"
                checked={incluirParcial}
                onChange={(e) => setIncluirParcial(e.target.checked)}
              />
              Incluir el mes en curso ({mesParcial ? mesLargo(mesParcial) : "—"}), aún incompleto
            </label>
            <label className={series.length > 1 ? "deshabilitada" : ""}>
              <input
                type="checkbox"
                checked={mostrarMedia}
                disabled={series.length > 1}
                onChange={(e) => setMostrarMedia(e.target.checked)}
              />
              <i className="swatch" style={{ background: "var(--series-2)" }} />
              Media móvil 12 meses (quita la estacionalidad)
            </label>
            <label className={series.length > 1 ? "deshabilitada" : ""}>
              <input
                type="checkbox"
                checked={mostrarRecta}
                disabled={series.length > 1}
                onChange={(e) => setMostrarRecta(e.target.checked)}
              />
              <i className="swatch-linea" />
              Recta de regresión (línea de tendencia)
            </label>
            {series.length > 1 && (
              <span className="nota-inline">
                Las capas de tendencia requieren una sola serie: pon «Sin abrir».
              </span>
            )}
          </div>
        </div>
      </div>

      <div className="card" style={{ marginBottom: 16 }}>
        <header>
          <div>
            <h2>
              Comparación interanual — {NOMBRE_MES[+(mesComp ?? "01") - 1]} y acumulado enero–
              {NOMBRE_MES[+(mesComp ?? "01") - 1]}
            </h2>
            <p className="note">
              Todos los años disponibles ({meta.anio_min}–{meta.anio_max}), sin importar el filtro de
              periodo de arriba. Solo se comparan años en los que ese mes ya transcurrió.
            </p>
          </div>
          <div className="field">
            <label>Mes de corte</label>
            <select value={mesComp ?? ""} onChange={(e) => setMesCorte(e.target.value)}>
              {NOMBRE_MES.map((nm, i) => (
                <option key={nm} value={String(i + 1).padStart(2, "0")}>
                  {nm}
                </option>
              ))}
            </select>
          </div>
        </header>

        {interanual.data && (
          <>
            <div className="grid two">
              <div>
                <div className="comp-h">
                  Solo {NOMBRE_MES[+interanual.data.mes_corte - 1]}, año por año
                  {interanual.data.variacion_mes && (
                    <span className="comp-var">
                      {interanual.data.variacion_mes.anio} vs{" "}
                      {interanual.data.variacion_mes.anio_previo}:{" "}
                      <b className={interanual.data.variacion_mes.pct >= 0 ? "up" : "down"}>
                        {interanual.data.variacion_mes.pct >= 0 ? "+" : ""}
                        {interanual.data.variacion_mes.pct}%
                      </b>
                      {" · vs promedio histórico: "}
                      <b className={interanual.data.variacion_mes.pct_vs_promedio >= 0 ? "up" : "down"}>
                        {interanual.data.variacion_mes.pct_vs_promedio >= 0 ? "+" : ""}
                        {interanual.data.variacion_mes.pct_vs_promedio}%
                      </b>
                    </span>
                  )}
                </div>
                <BarrasComparativas
                  datos={interanual.data.datos}
                  campo="mes_n"
                  anioCurso={interanual.data.anio_en_curso}
                  promedio={interanual.data.variacion_mes?.promedio_historico}
                  etiquetaPromedio={`promedio años previos: ${nf.format(
                    interanual.data.variacion_mes?.promedio_historico ?? 0
                  )}`}
                />
              </div>

              <div>
                <div className="comp-h">
                  Acumulado enero–{NOMBRE_MES[+interanual.data.mes_corte - 1]} (YTD)
                  {interanual.data.variacion_ytd && (
                    <span className="comp-var">
                      {interanual.data.variacion_ytd.anio} vs{" "}
                      {interanual.data.variacion_ytd.anio_previo}:{" "}
                      <b className={interanual.data.variacion_ytd.pct >= 0 ? "up" : "down"}>
                        {interanual.data.variacion_ytd.pct >= 0 ? "+" : ""}
                        {interanual.data.variacion_ytd.pct}%
                      </b>
                      {" · vs promedio histórico: "}
                      <b className={interanual.data.variacion_ytd.pct_vs_promedio >= 0 ? "up" : "down"}>
                        {interanual.data.variacion_ytd.pct_vs_promedio >= 0 ? "+" : ""}
                        {interanual.data.variacion_ytd.pct_vs_promedio}%
                      </b>
                    </span>
                  )}
                </div>
                <BarrasComparativas
                  datos={interanual.data.datos}
                  campo="ytd_n"
                  anioCurso={interanual.data.anio_en_curso}
                  promedio={interanual.data.variacion_ytd?.promedio_historico}
                  etiquetaPromedio={`promedio años previos: ${nf.format(
                    interanual.data.variacion_ytd?.promedio_historico ?? 0
                  )}`}
                />
              </div>
            </div>

            <div className="legend" style={{ marginTop: 10 }}>
              <span>
                <i className="swatch" style={{ background: "var(--series-1)" }} />
                Años previos
              </span>
              <span>
                <i className="swatch" style={{ background: "var(--series-2)" }} />
                {interanual.data.anio_en_curso} (año en curso)
              </span>
              <span style={{ color: "var(--text-muted)" }}>— — promedio de los años previos</span>
            </div>

            <p className="aviso">
              SINADEF sigue recibiendo certificados con retraso, así que los meses recién cerrados
              todavía suman registros durante las semanas siguientes. Un mes reciente tiende a quedar
              por debajo de su valor definitivo frente a los mismos meses de años ya consolidados.
            </p>
          </>
        )}
      </div>

      <div className="grid two" style={{ marginBottom: 16 }}>
        <div className="card">
          <header>
            <div>
              <h2>Total por año</h2>
              <p className="note">El año en curso aparece en gris: lleva registro parcial.</p>
            </div>
          </header>
          <BarrasAnuales datos={porAnioBarras} anioCurso={resumen.data?.anio_en_curso ?? ""} />
        </div>

        <div className="card">
          <header>
            <div>
              <h2>DEPARTAMENTO_FALLECIMIENTO</h2>
              <p className="note">Dónde ocurrió el fallecimiento, no dónde vivía la persona.</p>
            </div>
          </header>
          <BarrasRanking datos={conPct(deptos.data)} alto={330} />
        </div>
      </div>

      <div className="grid two" style={{ marginBottom: 16 }}>
        <div className="card">
          <header>
            <div>
              <h2>TIPO_LUGAR</h2>
              <p className="note">Lugar del hecho tal como lo consigna el certificado.</p>
            </div>
          </header>
          <BarrasRanking datos={conPct(lugares.data)} alto={230} />
        </div>

        <div className="card">
          <header>
            <div>
              <h2>EDAD por década</h2>
              <p className="note">
                Solo registros con TIEMPO_EDAD = AÑOS
                {edades.data?.otras_unidades?.length
                  ? ` (${nf.format(
                      edades.data.otras_unidades.reduce((s: number, r: any) => s + r.n, 0)
                    )} en otras unidades quedan fuera)`
                  : ""}
                .
              </p>
            </div>
          </header>
          <BarrasRanking datos={edadBarras} alto={230} />
        </div>
      </div>

      <div className="card" style={{ marginBottom: 16 }}>
        <header>
          <div>
            <h2>Estacionalidad — año × mes</h2>
            <p className="note">
              Misma escala en toda la matriz; el tono más oscuro es el mes con más registros del periodo.
            </p>
          </div>
        </header>
        {estacion.data && <Heatmap filas={estacion.data} mesParcial={mesParcial} />}
      </div>

      <div className="card">
        <header>
          <div>
            <h2>Datos de la serie</h2>
            <p className="note">La misma información del gráfico, en tabla.</p>
          </div>
        </header>
        <div className="tablewrap" style={{ maxHeight: 320, overflowY: "auto" }}>
          <table className="data">
            <thead>
              <tr>
                <th>Mes</th>
                {series.map((s: string) => (
                  <th key={s} style={{ textAlign: "right" }}>
                    <span
                      className="swatch"
                      style={{ background: colorDe(s, series), marginRight: 6, display: "inline-block" }}
                    />
                    {s}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[...filas].reverse().map((r: any) => (
                <tr key={r.mes}>
                  <td>{etiquetaMes(r.mes)}</td>
                  {series.map((s: string) => (
                    <td className="n" key={s}>
                      {r[s] != null ? nf.format(r[s]) : "—"}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="footnote">
        <b>Sobre la data.</b> Todo lo que se muestra son conteos directos sobre las columnas de SINADEF
        tal como las publica MINSA. La app <b>no crea ninguna categoría propia</b>: los filtros son los
        valores literales de <code>MUERTE_VIOLENTA</code>, <code>SEXO</code>, <code>TIPO_LUGAR</code> y{" "}
        <code>DEPARTAMENTO_FALLECIMIENTO</code>. La interpretación de cualquier cruce queda a criterio de
        quien consulta.
        <br />
        <b>Cobertura.</b> <code>MUERTE_VIOLENTA</code> solo se consigna en muertes violentas; el resto
        figura como SIN REGISTRO (~95% de los registros, proporción estable año a año).{" "}
        <code>CAUSA_*_CIEX</code> está llenado en ~81% de los registros en general, pero solo en ~21% de
        los marcados como HOMICIDIO. El mes en curso siempre está incompleto. Base actualizada a diario
        desde el repositorio de MINSA.
      </div>
    </>
  );
}