/* 2.4 — Analítica, KPIs y Reportabilidad */

function Analitica({ role }) {
  const [periodo, setPeriodo] = useState("2026-I");
  const [cohorte, setCohorte] = useState("todas");
  const [region, setRegion] = useState("todas");

  return (
    <div className="page" data-screen-label="2.4 Analítica & KPIs">
      <div className="page-head">
        <div>
          <div className="meta">MÓDULO 2.4 · INDICADORES MÍNIMOS DEL PROGRAMA</div>
          <h1>Analítica, KPIs & Reportabilidad</h1>
          <div className="sub">Tableros interactivos con desagregación por cohorte, territorio, sector y tipo de actor. Exportable a Excel y PDF.</div>
        </div>
        <div className="flex gap-8">
          <button className="btn"><Icon name="download" size={13}/> PDF institucional</button>
          <button className="btn"><Icon name="download" size={13}/> Excel (10 hojas)</button>
        </div>
      </div>

      <div className="filterbar" style={{ marginBottom: 16 }}>
        <div className="field"><label>Período</label>
          <select value={periodo} onChange={e => setPeriodo(e.target.value)}>
            <option>2026-I</option><option>2025-II</option><option>2025-I</option><option>YTD</option><option>Histórico</option>
          </select>
        </div>
        <div className="field"><label>Cohorte</label>
          <select value={cohorte} onChange={e => setCohorte(e.target.value)}>
            <option value="todas">Todas</option><option>2026-I</option><option>Caribe-Pilot</option><option>Mujer-2026</option>
          </select>
        </div>
        <div className="field"><label>Región</label>
          <select value={region} onChange={e => setRegion(e.target.value)}>
            <option value="todas">Todas</option><option>Andina</option><option>Caribe</option><option>Pacífica</option><option>Orinoquía</option><option>Amazonía</option>
          </select>
        </div>
        <div className="field"><label>Tipo de actor</label>
          <select><option>Todos</option>{window.TIPOS_ACTOR.map(t => <option key={t.id}>{t.label}</option>)}</select>
        </div>
        <span className="count">Datos actualizados · 2026-05-26 14:32</span>
      </div>

      {/* KPI grid */}
      <div className="grid-kpis">
        <KpiTile label="Actores caracterizados" value="7,075" sub="Meta 8,000 · 88%" delta="+12.4%"/>
        <KpiTile label="Tasa finalización diagnósticos" value="68.2%" sub="4,824 de 7,075" delta="+4.1 pp"/>
        <KpiTile label="Variación ex-ante / ex-post" value="+1.3 pts" sub="Madurez digital · promedio" delta="+0.4" accent/>
        <KpiTile label="Conexiones generadas" value="1,437" sub="184 este mes" delta="+23.1%"/>
      </div>
      <div className="grid-kpis" style={{ marginTop: 0 }}>
        <KpiTile label="Participación en eventos" value="4,218" sub="38 eventos · sat. 4.6/5"/>
        <KpiTile label="Proyectos publicados" value="312" sub="187 aprobados · 41 financiados"/>
        <KpiTile label="Mentorías realizadas" value="2,847h" sub="318 mentores · este mes 412h"/>
        <KpiTile label="Inversión gestionada" value="$14.8M" accent sub="USD · YTD · +$1.2M mes"/>
      </div>

      <div className="grid-2" style={{ marginBottom: 16 }}>
        {/* Heatmap regional */}
        <div className="card">
          <div className="card-head">
            <h3>Mapa de calor · actores por departamento</h3>
            <div className="hint">Top 24 departamentos</div>
          </div>
          <div className="card-body">
            <Heatmap/>
          </div>
        </div>

        {/* Funnel cohorte */}
        <div className="card">
          <div className="card-head"><h3>Embudo del programa · cohorte 2026-I</h3></div>
          <div className="card-body">
            <Funnel data={[
              { etapa: "Inscritos", n: 2412, pct: 100 },
              { etapa: "Caracterización completa", n: 2104, pct: 87.2 },
              { etapa: "Diagnóstico ex-ante", n: 1842, pct: 76.4 },
              { etapa: "Conectados (≥1 conexión)", n: 1418, pct: 58.8 },
              { etapa: "Asistencia evento ≥1", n: 1284, pct: 53.2 },
              { etapa: "Proyecto publicado", n: 384, pct: 15.9 },
              { etapa: "Cierre ex-post", n: 218, pct: 9.0 },
            ]}/>
          </div>
        </div>
      </div>

      <div className="grid-2" style={{ marginBottom: 16 }}>
        {/* Resultados de articulación */}
        <div className="card">
          <div className="card-head"><h3>Resultados de articulación · YTD</h3></div>
          <div className="card-body">
            <HBarChart
              data={[
                { label: "Mentorías realizadas", value: 2847, color: "#7c5a1f" },
                { label: "Alianzas formalizadas", value: 89, color: "#1b7a4d" },
                { label: "Leads comerciales", value: 412, color: "#c97a16" },
                { label: "Inversiones cerradas", value: 41, color: "#a83a5b" },
                { label: "Pilotos corporativos", value: 28, color: "#1a3a6c" },
                { label: "Convenios académicos", value: 34, color: "#5b3f9e" },
              ]}
              maxVal={3000}
              format={v => v.toLocaleString()}/>
          </div>
        </div>

        {/* Evolución mensual */}
        <div className="card">
          <div className="card-head">
            <h3>Evolución mensual · KPIs principales</h3>
            <div className="hint flex gap-12">
              <Legend swatch="#1a3a6c" label="Conexiones"/>
              <Legend swatch="#c97a16" label="Eventos"/>
              <Legend swatch="#1b7a4d" label="Inversión (M USD)"/>
            </div>
          </div>
          <div className="card-body">
            <LineChart
              series={[
                { values: [780, 902, 1010, 1138, 1245, 1320, 1384, 1410, 1437], color: "#1a3a6c" },
                { values: [128, 184, 248, 312, 384, 421, 482, 568, 619], color: "#c97a16" },
                { values: [320, 480, 610, 740, 980, 1120, 1280, 1390, 1480], color: "#1b7a4d" },
              ]}
              xLabels={["Sep","Oct","Nov","Dic","Ene","Feb","Mar","Abr","May"]}
              width={620}
              height={220}/>
          </div>
        </div>
      </div>

      {/* Tabla resumen por cohorte */}
      <div className="card">
        <div className="card-head"><h3>Resumen por cohorte y región</h3></div>
        <table className="data">
          <thead><tr>
            <th>Cohorte</th><th>Región</th>
            <th className="num">Inscritos</th>
            <th className="num">Caracterizados</th>
            <th className="num">Diagnóstico %</th>
            <th className="num">Conexiones</th>
            <th className="num">Proyectos</th>
            <th className="num">Inversión USD</th>
          </tr></thead>
          <tbody>
            {[
              { c: "2026-I", r: "Andina",   ins: 1418, car: 1284, diag: 71.2, con: 982, p: 218, inv: "$8.4M" },
              { c: "2026-I", r: "Caribe",   ins: 487,  car: 412,  diag: 64.8, con: 287, p: 67,  inv: "$2.1M" },
              { c: "2026-I", r: "Pacífica", ins: 342,  car: 298,  diag: 68.2, con: 184, p: 41,  inv: "$1.8M" },
              { c: "2026-I", r: "Orinoquía",ins: 98,   car: 84,   diag: 58.4, con: 38,  p: 9,   inv: "$0.2M" },
              { c: "2026-I", r: "Amazonía", ins: 67,   car: 52,   diag: 47.2, con: 18,  p: 3,   inv: "—" },
              { c: "Caribe-Pilot",  r: "Caribe", ins: 384, car: 384, diag: 84.1, con: 318, p: 47, inv: "$1.2M" },
              { c: "Mujer-2026", r: "Multi", ins: 718, car: 618, diag: 71.8, con: 488, p: 89, inv: "$1.1M" },
            ].map((r, i) => (
              <tr key={i}>
                <td><span className="cell-strong">Cohorte {r.c}</span></td>
                <td><span className="chip">{r.r}</span></td>
                <td className="num mono">{r.ins.toLocaleString()}</td>
                <td className="num mono">{r.car.toLocaleString()}</td>
                <td className="num"><span className="mono">{r.diag.toFixed(1)}%</span></td>
                <td className="num mono">{r.con.toLocaleString()}</td>
                <td className="num mono">{r.p}</td>
                <td className="num mono" style={{ color: r.inv === "—" ? "var(--c-ink-5)" : "var(--c-success)", fontWeight: 600 }}>{r.inv}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function Legend({ swatch, label }) {
  return <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
    <span style={{ width: 8, height: 8, background: swatch, borderRadius: 2 }}/>{label}
  </span>;
}

// ───── Heatmap ─────
function Heatmap() {
  const data = window.DEPARTAMENTOS.slice(0, 24);
  const max = Math.max(...data.map(d => d.actores));
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 4 }}>
      {data.map(d => {
        const intensity = d.actores / max;
        const bg = `rgba(26, 58, 108, ${0.1 + intensity * 0.85})`;
        const fg = intensity > 0.4 ? "#fff" : "var(--c-ink)";
        return (
          <div key={d.code} style={{
            background: bg, padding: "10px 8px", borderRadius: 4,
            display: "flex", flexDirection: "column", gap: 2,
            color: fg, minHeight: 56, cursor: "pointer"
          }}>
            <div style={{ fontSize: 10, opacity: 0.85 }}>{d.name}</div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 14, fontWeight: 600 }}>{d.actores.toLocaleString()}</div>
            <div style={{ fontSize: 9, opacity: 0.7 }}>{d.region}</div>
          </div>
        );
      })}
    </div>
  );
}

// ───── Funnel ─────
function Funnel({ data }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
      {data.map((s, i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "180px 1fr 60px 50px", gap: 10, alignItems: "center", fontSize: 12 }}>
          <span style={{ color: "var(--c-ink-2)" }}>{s.etapa}</span>
          <div style={{ position: "relative", height: 22, background: "var(--c-line-2)", borderRadius: 3 }}>
            <div style={{
              position: "absolute", left: 0, top: 0, height: "100%",
              width: `${s.pct}%`,
              background: `linear-gradient(90deg, var(--c-primary), var(--c-primary-700))`,
              borderRadius: 3,
              display: "flex", alignItems: "center", paddingLeft: 8, color: "#fff",
              fontSize: 11, fontWeight: 500
            }}>
              {s.pct > 14 && `${s.pct.toFixed(1)}%`}
            </div>
          </div>
          <span className="mono" style={{ color: "var(--c-ink-3)", fontSize: 11, textAlign: "right" }}>{s.n.toLocaleString()}</span>
          <span className="mono" style={{ color: "var(--c-ink-4)", fontSize: 11, textAlign: "right" }}>{i > 0 ? `${Math.round((s.n / data[i-1].n) * 100)}%` : "—"}</span>
        </div>
      ))}
    </div>
  );
}

window.Analitica = Analitica;