import { useEffect, useMemo, useRef, useState } from "react";
import type { Meta } from "./api";
import { CierreAnual, ProyeccionChart, 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}`;
};

const FASES = [
  { k: "en_cola", t: "En cola" },
  { k: "iniciando", t: "Preparando serie" },
  { k: "evaluando", t: "Validando modelos" },
  { k: "seleccionando", t: "Eligiendo el mejor" },
  { k: "proyectando", t: "Proyectando" },
  { k: "listo", t: "Listo" },
];

export default function Proyeccion({ meta }: { meta: Meta }) {
  /* Último mes cerrado: el mes con data siempre está en curso, así que el
     corte por defecto es el anterior. */
  const ultimoCerrado = useMemo(() => {
    const [a, m] = meta.ultimo_mes.split("-").map(Number);
    return m === 1 ? `${a - 1}-12` : `${a}-${String(m - 1).padStart(2, "0")}`;
  }, [meta.ultimo_mes]);

  const [tipo, setTipo] = useState("HOMICIDIO");
  const [sexo, setSexo] = useState("");
  const [departamento, setDepartamento] = useState("");
  const [lugar, setLugar] = useState("");
  const [corte, setCorte] = useState(ultimoCerrado);
  const [hasta, setHasta] = useState(`${meta.anio_max}-12`);
  const [excluir, setExcluir] = useState(0);
  const [ventana, setVentana] = useState(3);
  const [origenes, setOrigenes] = useState(6);

  const [job, setJob] = useState<any>(null);
  const [error, setError] = useState<string | null>(null);
  const timer = useRef<number | null>(null);

  // Meses de corte ofrecidos: los últimos 24 cerrados.
  const opcionesCorte = useMemo(() => {
    const out: string[] = [];
    const [a0, m0] = ultimoCerrado.split("-").map(Number);
    let a = a0, m = m0;
    for (let i = 0; i < 24; i++) {
      out.push(`${a}-${String(m).padStart(2, "0")}`);
      m -= 1;
      if (m === 0) { m = 12; a -= 1; }
    }
    return out;
  }, [ultimoCerrado]);

  const detener = () => {
    if (timer.current) {
      window.clearInterval(timer.current);
      timer.current = null;
    }
  };
  useEffect(() => detener, []);

  async function ejecutar() {
    detener();
    setError(null);
    setJob(null);

    const p = new URLSearchParams({
      mes_corte: corte,
      hasta,
      excluir_meses: String(excluir),
      ventana: String(ventana),
      origenes: String(origenes),
    });
    for (const [k, v] of Object.entries({ tipo, sexo, departamento, lugar })) if (v) p.set(k, v);

    try {
      const r = await fetch(`/api/forecast?${p}`, { method: "POST" });
      if (!r.ok) throw new Error((await r.json()).detail ?? r.statusText);
      const j = await r.json();
      setJob(j);
      if (j.estado === "listo") return;

      timer.current = window.setInterval(async () => {
        const e = await fetch(`/api/forecast/${j.id}`);
        if (!e.ok) return;
        const d = await e.json();
        setJob(d);
        if (d.estado === "listo" || d.estado === "error") detener();
      }, 1200);
    } catch (e: any) {
      setError(String(e.message ?? e));
    }
  }

  const r = job?.estado === "listo" ? job.resultado : null;
  const corriendo = job && (job.estado === "en_cola" || job.estado === "corriendo");
  const faseActual = job?.progreso?.fase ?? null;
  const iFase = FASES.findIndex((f) => f.k === faseActual);

  const totalProyectado = r ? Math.round(r.central.reduce((s: number, v: number) => s + v, 0)) : null;

  return (
    <>
      <div className="filters">
        <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>Mes de corte</label>
          <select value={corte} onChange={(e) => setCorte(e.target.value)}>
            {opcionesCorte.map((m) => <option key={m} value={m}>{mesLegible(m)}</option>)}
          </select>
        </div>
        <div className="field">
          <label>Proyectar hasta</label>
          <select value={hasta} onChange={(e) => setHasta(e.target.value)}>
            {["06", "09", "12"].map((m) => (
              <option key={m} value={`${meta.anio_max}-${m}`}>
                {mesLegible(`${meta.anio_max}-${m}`)}
              </option>
            ))}
          </select>
        </div>
        <div className="field">
          <button className="btn-primario" onClick={ejecutar} disabled={!!corriendo}>
            {corriendo ? "Procesando…" : "Ejecutar proyección"}
          </button>
        </div>
      </div>

      <details className="avanzado">
        <summary>Ajustes de validación</summary>
        <div className="avanzado-body">
          <div className="field">
            <label>Excluir últimos meses del entrenamiento</label>
            <select value={excluir} onChange={(e) => setExcluir(+e.target.value)}>
              {[0, 1, 2, 3, 4, 5, 6].map((n) => (
                <option key={n} value={n}>{n === 0 ? "ninguno" : `${n} mes${n > 1 ? "es" : ""}`}</option>
              ))}
            </select>
          </div>
          <div className="field">
            <label>Meses por ventana de test</label>
            <select value={ventana} onChange={(e) => setVentana(+e.target.value)}>
              {[2, 3, 4, 5, 6].map((n) => <option key={n} value={n}>{n}</option>)}
            </select>
          </div>
          <div className="field">
            <label>Ventanas (rolling origin)</label>
            <select value={origenes} onChange={(e) => setOrigenes(+e.target.value)}>
              {[1, 3, 6, 8, 12].map((n) => <option key={n} value={n}>{n}</option>)}
            </select>
          </div>
          <p className="nota-avanzado">
            SINADEF sigue recibiendo certificados con retraso, así que los meses recién cerrados
            están subvalorados. Excluirlos del entrenamiento evita que el modelo aprenda una caída
            que en realidad es registro pendiente.
          </p>
        </div>
      </details>

      {error && <div className="card err">No se pudo iniciar: {error}</div>}

      {job && job.estado === "error" && (
        <div className="card err">La proyección falló: {job.error}</div>
      )}

      {job && (corriendo || r) && (
        <div className="card" style={{ marginBottom: 16 }}>
          <div className="pasos">
            {FASES.map((f, i) => (
              <div
                key={f.k}
                className={`paso ${i < iFase ? "hecho" : i === iFase ? "activo" : ""}`}
              >
                <span className="bolita" />
                {f.t}
              </div>
            ))}
          </div>
          <p className="paso-msg">
            {job.progreso?.mensaje}
            {job.progreso?.total ? ` · ${job.progreso.total} configuraciones` : ""}
            {job.desde_cache ? " · resultado en caché" : ""}
            {job.en_espera > 0 ? ` · ${job.en_espera} trabajo(s) por delante` : ""}
            {job.duracion != null ? ` · ${job.duracion}s` : ""}
          </p>
        </div>
      )}

      {r && (
        <>
          <div className="tiles">
            <div className="tile">
              <div className="k">Mejor modelo</div>
              <div className="v" style={{ fontSize: 22 }}>{r.mejor.modelo}</div>
              <div className="d">
                entre {r.configuraciones_probadas} configuraciones de 6 familias
              </div>
            </div>
            <div className="tile">
              <div className="k">MAPE (validación)</div>
              <div className="v">{r.mejor.mape}%</div>
              <div className="d">
                naive estacional: {r.naive?.mape}% ·{" "}
                <span className={r.gana_al_naive ? "down" : "up"}>
                  {r.gana_al_naive ? "le gana al naive" : "NO le gana al naive"}
                </span>
              </div>
            </div>
            <div className="tile">
              <div className="k">Proyectado {mesLegible(r.meses[0])} – {mesLegible(r.meses.at(-1))}</div>
              <div className="v">{nf.format(totalProyectado ?? 0)}</div>
              <div className="d">{r.horizonte} meses proyectados</div>
            </div>
            <div className="tile">
              <div className="k">MASE</div>
              <div className="v">{r.mejor.mase}</div>
              <div className="d">&lt;1 significa mejor que el naive estacional</div>
            </div>
          </div>

          <div className="card" style={{ marginBottom: 16 }}>
            <header>
              <div>
                <h2>
                  Proyección de {r.filtros.tipo} hasta {mesLegible(r.meses.at(-1))}
                </h2>
                <p className="note">
                  Entrenado con {r.historico.length} meses (2017-01 a {mesLegible(r.mes_corte_usado)}).
                  La banda es el rango donde cayó el 80% de los errores del modelo en la validación.
                </p>
              </div>
              <div className="legend">
                <span><i className="swatch" style={{ background: "var(--series-1)" }} />Observado</span>
                <span><i className="swatch" style={{ background: "var(--series-2)" }} />Proyectado</span>
                <span style={{ color: "var(--text-muted)" }}>▨ rango 80%</span>
              </div>
            </header>
            <ProyeccionChart historico={r.historico} meses={r.meses} central={r.central} bandas={r.bandas} />
          </div>

          {r.cierre_anual && (
            <div className="card" style={{ marginBottom: 16 }}>
              <header>
                <div>
                  <h2>Cómo cerraría {r.cierre_anual.anio}, comparado con los años anteriores</h2>
                  <p className="note">
                    {r.cierre_anual.meses_observados} meses ya registrados por SINADEF
                    (hasta {mesLegible(r.cierre_anual.mes_corte)}) más {r.horizonte} meses proyectados.
                    Mismos filtros de arriba.
                  </p>
                </div>
                <div className="legend">
                  <span><i className="swatch" style={{ background: "var(--series-1)" }} />Ya registrado</span>
                  <span><i className="swatch" style={{ background: "var(--series-2)" }} />Proyectado</span>
                </div>
              </header>

              <div className="cierre-kpis">
                <div>
                  <span className="ck">Cierre estimado {r.cierre_anual.anio}</span>
                  <span className="cv">{nf.format(r.cierre_anual.cierre)}</span>
                  {r.cierre_anual.rango_lo && (
                    <span className="cd">
                      rango 80%: {nf.format(r.cierre_anual.rango_lo)} – {nf.format(r.cierre_anual.rango_hi)}
                    </span>
                  )}
                </div>
                {r.cierre_anual.vs_anterior && (
                  <div>
                    <span className="ck">vs {r.cierre_anual.vs_anterior.anio}</span>
                    <span className={`cv ${r.cierre_anual.vs_anterior.pct >= 0 ? "up" : "down"}`}>
                      {r.cierre_anual.vs_anterior.pct >= 0 ? "+" : ""}
                      {r.cierre_anual.vs_anterior.pct}%
                    </span>
                    <span className="cd">
                      {r.cierre_anual.vs_anterior.anio} cerró en {nf.format(r.cierre_anual.vs_anterior.valor)}
                    </span>
                  </div>
                )}
                {r.cierre_anual.vs_promedio && (
                  <div>
                    <span className="ck">vs promedio de años previos</span>
                    <span className={`cv ${r.cierre_anual.vs_promedio.pct >= 0 ? "up" : "down"}`}>
                      {r.cierre_anual.vs_promedio.pct >= 0 ? "+" : ""}
                      {r.cierre_anual.vs_promedio.pct}%
                    </span>
                    <span className="cd">promedio: {nf.format(r.cierre_anual.vs_promedio.valor)}</span>
                  </div>
                )}
              </div>

              <CierreAnual datos={r.cierre_anual.filas} />

              <p className="aviso">
                Si el cierre real queda por debajo de este rango, la baja no se explica por la
                tendencia previa. Si queda dentro, el año se comportó como venía comportándose.
              </p>
            </div>
          )}

          <div className="grid two" style={{ marginBottom: 16 }}>
            <div className="card">
              <header><div><h2>Proyección mes a mes</h2></div></header>
              <div className="tablewrap">
                <table className="data">
                  <thead>
                    <tr>
                      <th>Mes</th>
                      <th style={{ textAlign: "right" }}>Proyectado</th>
                      {r.bandas?.p10 && <th style={{ textAlign: "right" }}>Rango 80%</th>}
                    </tr>
                  </thead>
                  <tbody>
                    {r.meses.map((m: string, i: number) => (
                      <tr key={m}>
                        <td>{mesLegible(m)}</td>
                        <td className="n">{nf.format(Math.round(r.central[i]))}</td>
                        {r.bandas?.p10 && (
                          <td className="n" style={{ color: "var(--text-muted)" }}>
                            {nf.format(Math.round(r.bandas.p10[i]))} – {nf.format(Math.round(r.bandas.p90[i]))}
                          </td>
                        )}
                      </tr>
                    ))}
                    <tr style={{ fontWeight: 640 }}>
                      <td>Total</td>
                      <td className="n">{nf.format(totalProyectado ?? 0)}</td>
                      {r.bandas?.p10 && (
                        <td className="n" style={{ color: "var(--text-muted)" }}>
                          {nf.format(Math.round(r.bandas.p10.reduce((s: number, v: number) => s + v, 0)))} –{" "}
                          {nf.format(Math.round(r.bandas.p90.reduce((s: number, v: number) => s + v, 0)))}
                        </td>
                      )}
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div className="card">
              <header>
                <div>
                  <h2>Mejor configuración por familia</h2>
                  <p className="note">Ordenadas por {r.criterio.toUpperCase()} en la validación.</p>
                </div>
              </header>
              <div className="tablewrap">
                <table className="data">
                  <thead>
                    <tr>
                      <th>Familia</th>
                      <th style={{ textAlign: "right" }}>MAPE</th>
                      <th style={{ textAlign: "right" }}>MASE</th>
                      <th style={{ textAlign: "right" }}>RMSE</th>
                    </tr>
                  </thead>
                  <tbody>
                    {r.por_familia.map((f: any) => (
                      <tr key={f.modelo} style={f.modelo === r.mejor.modelo ? { fontWeight: 640 } : {}}>
                        <td>
                          {f.modelo === r.mejor.modelo && (
                            <span className="swatch" style={{ background: "var(--series-2)", marginRight: 6, display: "inline-block" }} />
                          )}
                          {f.modelo}
                        </td>
                        <td className="n">{f.mape}%</td>
                        <td className="n">{f.mase}</td>
                        <td className="n">{f.rmse}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <div className="card">
            <header><div><h2>Resumen técnico</h2></div></header>
            <div className="resumen">
              <dl>
                <dt>Serie</dt>
                <dd>
                  {r.filtros.tipo} · sexo {r.filtros.sexo} · departamento {r.filtros.departamento} ·
                  lugar {r.filtros.lugar}
                </dd>

                <dt>Entrenamiento</dt>
                <dd>
                  {r.historico.length} meses, de {mesLegible(r.historico[0].mes)} a{" "}
                  {mesLegible(r.mes_corte_usado)}
                  {r.meses_excluidos > 0 &&
                    ` (se excluyeron los ${r.meses_excluidos} meses finales por registro tardío)`}
                </dd>

                <dt>Validación</dt>
                <dd>
                  Rolling origin: {r.validacion.n_origenes} ventanas de {r.validacion.ventana_meses}{" "}
                  meses ({r.validacion.meses_evaluados} meses evaluados), con orígenes entre{" "}
                  {mesLegible(r.validacion.primer_origen)} y {mesLegible(r.validacion.ultimo_origen)}.
                  Cada configuración se reajusta desde cero en cada ventana.
                </dd>

                <dt>Búsqueda</dt>
                <dd>
                  {r.configuraciones_probadas} configuraciones probadas ({r.configuraciones_validas}{" "}
                  convergieron) sobre SARIMA, ETS, Theta, Prophet, XGBoost y naive estacional.
                </dd>

                <dt>Criterio de selección</dt>
                <dd>
                  {r.criterio.toUpperCase()} promedio entre ventanas.
                  {r.hay_ceros
                    ? " La serie tiene meses en cero, por lo que el MAPE no es confiable y se decidió por MASE."
                    : " La serie no tiene ceros, así que el MAPE es válido."}
                </dd>

                <dt>Modelo elegido</dt>
                <dd>
                  {r.mejor.modelo} {JSON.stringify(r.mejor.params)} — MAPE {r.mejor.mape}%, sMAPE{" "}
                  {r.mejor.smape}%, MASE {r.mejor.mase}, RMSE {r.mejor.rmse}. Reentrenado con la serie
                  completa antes de proyectar.
                </dd>

                <dt>Referencia</dt>
                <dd>
                  Naive estacional (repetir los últimos 12 meses): MAPE {r.naive?.mape}%, MASE{" "}
                  {r.naive?.mase}.{" "}
                  {r.gana_al_naive
                    ? "El modelo elegido lo supera, así que aporta información por encima de repetir el año pasado."
                    : "El modelo elegido NO lo supera: para esta serie conviene desconfiar de la proyección."}
                </dd>

                <dt>Intervalos</dt>
                <dd>
                  Empíricos, construidos con los errores relativos observados en la validación. Se usan
                  en lugar de los intervalos analíticos de cada modelo porque solo así son comparables
                  entre familias.
                </dd>

                <dt>Advertencia</dt>
                <dd>
                  La proyección supone que las condiciones se mantienen. No incorpora cambios de
                  política, intervenciones ni shocks. Los meses recientes de SINADEF siguen recibiendo
                  registros con retraso, lo que tiende a deprimir el final de la serie de
                  entrenamiento.
                </dd>
              </dl>
            </div>
          </div>
        </>
      )}

      {!job && !error && (
        <div className="card vacio">
          Elige los filtros y el mes de corte, y ejecuta la proyección. Se evalúan ~46 configuraciones
          de 6 familias de modelos con validación rolling origin sobre toda la serie desde 2017.
          Toma alrededor de 30 segundos.
        </div>
      )}

      <Historial recargar={job?.estado === "listo"} />
    </>
  );
}

/* ── Repositorio compartido de proyecciones ───────────────────────────── */

function Historial({ recargar }: { recargar: boolean }) {
  const [datos, setDatos] = useState<any>(null);
  const [abierto, setAbierto] = useState(false);

  useEffect(() => {
    if (!abierto) return;
    fetch("/api/forecast-historial?limite=40")
      .then((r) => r.json())
      .then(setDatos)
      .catch(() => {});
  }, [abierto, recargar]);

  return (
    <details className="avanzado" style={{ marginTop: 18 }} onToggle={(e) => setAbierto((e.target as HTMLDetailsElement).open)}>
      <summary>
        Proyecciones ya calculadas
        {datos ? ` (${datos.guardadas})` : ""}
      </summary>
      <div style={{ padding: "0 16px 16px" }}>
        {!datos ? (
          <p className="nota-avanzado">Cargando…</p>
        ) : (
          <>
            <p className="nota-avanzado" style={{ marginBottom: 12 }}>
              Repositorio compartido: cualquier persona que repita una de estas combinaciones la
              recibe al instante, sin volver a calcularla. Las marcadas como <b>desactualizada</b> se
              hicieron con una versión anterior de la base; se conservan como registro de qué se
              proyectó y cuándo, pero al pedirlas de nuevo se recalculan desde cero.
              {datos.segundos_de_computo_acumulados > 0 && (
                <> Cómputo acumulado guardado: {Math.round(datos.segundos_de_computo_acumulados)} s.</>
              )}
            </p>
            <div className="tablewrap">
              <table className="data">
                <thead>
                  <tr>
                    <th>Calculada</th>
                    <th>Filtros</th>
                    <th>Corte</th>
                    <th>Modelo</th>
                    <th style={{ textAlign: "right" }}>MAPE</th>
                    <th style={{ textAlign: "right" }}>Cierre</th>
                    <th>Estado</th>
                  </tr>
                </thead>
                <tbody>
                  {datos.proyecciones.map((p: any, i: number) => (
                    <tr key={i}>
                      <td>{p.creado_en.replace("T", " ").slice(0, 16)}</td>
                      <td>
                        {[p.tipo, p.sexo, p.departamento, p.lugar]
                          .filter((v) => v && !v.startsWith("(tod"))
                          .join(" · ") || "sin filtros"}
                      </td>
                      <td>{mesLegible(p.mes_corte)}</td>
                      <td>{p.modelo}</td>
                      <td className="n">{p.mape}%</td>
                      <td className="n">{p.cierre != null ? nf.format(Math.round(p.cierre)) : "—"}</td>
                      <td>
                        <span className={p.vigente ? "chip-ok" : "chip-off"}>
                          {p.vigente ? "vigente" : "desactualizada"}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </>
        )}
      </div>
    </details>
  );
}