import { useEffect, useState } from "react";
import "./theme.css";
import type { Meta } from "./api";
import { useApi } from "./api";
import Dashboard from "./Dashboard";
import Gestion from "./Gestion";
import Nowcast from "./Nowcast";
import Proyeccion from "./Proyeccion";
import { nf } from "./charts";

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

/** "2026-08-05" → "5 de agosto de 2026" */
function fechaLarga(iso: string) {
  const [a, m, d] = iso.split("-");
  return `${+d} de ${NOMBRE_MES[+m - 1]} de ${a}`;
}

type Pestana = "dashboard" | "proyeccion" | "nowcast" | "gestion";

/**
 * Marca cuándo se comprobó por última vez si MINSA publicó datos nuevos.
 * Se pone en ámbar si pasaron más de 36 horas: eso ya no es "sin novedades",
 * es que el proceso automático dejó de correr.
 */
function VerificadoChip({ iso }: { iso: string }) {
  const t = new Date(iso);
  const horas = (Date.now() - t.getTime()) / 36e5;
  const alDia = horas < 36;
  const cuando =
    horas < 24
      ? `hoy ${t.toLocaleTimeString("es-PE", { hour: "2-digit", minute: "2-digit" })}`
      : t.toLocaleString("es-PE", {
          day: "numeric", month: "short", hour: "2-digit", minute: "2-digit",
        });

  return (
    <span
      className={`verif ${alDia ? "verif-ok" : "verif-viejo"}`}
      title={
        alDia
          ? "El proceso automático comprobó si hay datos nuevos. Si la base no cambió de fecha, es que MINSA no ha publicado nada."
          : "Hace más de 36 horas que no se comprueba: revisar el proceso automático."
      }
    >
      {alDia ? "✓" : "!"} verificado {cuando}
    </span>
  );
}

export default function App() {
  const { data: meta } = useApi<Meta>("/api/meta");
  const [tema, setTema] = useState<"auto" | "light" | "dark">("auto");
  const [pestana, setPestana] = useState<Pestana>("dashboard");

  useEffect(() => {
    const r = document.documentElement;
    if (tema === "auto") r.removeAttribute("data-theme");
    else r.setAttribute("data-theme", tema);
  }, [tema]);

  if (!meta) return <div className="loading">Cargando SINADEF…</div>;

  return (
    <div className="app">
      <div className="topbar">
        <div>
          <h1>SINADEF — Defunciones en el Perú</h1>
          <p className="sub">
            <b>{nf.format(meta.filas)}</b> registros · {meta.anio_min}–{meta.anio_max} · fuente: Datos
            Abiertos MINSA
          </p>
          <div className="corte">
            <span className="punto" />
            Última defunción registrada en SINADEF: <b>{fechaLarga(meta.fecha_max)}</b>
            <span className="corte-sep">·</span>
            <span className="corte-sec">
              base recargada el{" "}
              {new Date(meta.actualizado * 1000).toLocaleString("es-PE", {
                day: "numeric",
                month: "short",
                year: "numeric",
                hour: "2-digit",
                minute: "2-digit",
              })}
            </span>
            {/* El ETL corre a diario pero solo recarga si MINSA publicó algo
                nuevo. Sin este dato no se puede distinguir "sin novedades" de
                "el proceso dejó de correr". */}
            {meta.verificado && <VerificadoChip iso={meta.verificado} />}
          </div>
        </div>
        <button
          className="icon-btn"
          onClick={() => setTema(tema === "auto" ? "light" : tema === "light" ? "dark" : "auto")}
        >
          Tema: {tema === "auto" ? "automático" : tema === "light" ? "claro" : "oscuro"}
        </button>
      </div>

      <nav className="tabs">
        <button
          className={pestana === "dashboard" ? "activa" : ""}
          onClick={() => setPestana("dashboard")}
        >
          Análisis histórico
        </button>
        <button
          className={pestana === "proyeccion" ? "activa" : ""}
          onClick={() => setPestana("proyeccion")}
        >
          Proyecciones
        </button>
        <button
          className={pestana === "nowcast" ? "activa" : ""}
          onClick={() => setPestana("nowcast")}
        >
          Cierre del mes
        </button>
        <button
          className={pestana === "gestion" ? "activa" : ""}
          onClick={() => setPestana("gestion")}
        >
          Gestión territorial
        </button>
        <a className="tab-link" href="/analisis/setiembre-2026/">
          Análisis: setiembre 2026 ↗
        </a>
      </nav>

      {/* Ambas pestañas se mantienen montadas: cambiar de pestaña no debe
          descartar una proyección que tardó medio minuto en calcularse. */}
      <div hidden={pestana !== "dashboard"}>
        <Dashboard meta={meta} />
      </div>
      <div hidden={pestana !== "proyeccion"}>
        <Proyeccion meta={meta} />
      </div>
      <div hidden={pestana !== "nowcast"}>
        <Nowcast meta={meta} />
      </div>
      <div hidden={pestana !== "gestion"}>
        <Gestion meta={meta} />
      </div>
    </div>
  );
}