/* ============================================================
   SYMPHO · K'IN — financiero & sostenibilidad
   Inteligencia tarifaria · ROI/M&V · Carbono · Reportes
   ============================================================ */

// ------------------------------------------------------------
//  INTELIGENCIA TARIFARIA Y FINANCIERA (PRD §12.5)
// ------------------------------------------------------------
function KinFinance({ role }) {
  const [tab, setTab] = useState("concilia");
  const tabs = [
    { id: "concilia", label: "Factura vs. medido", icon: "receipt" },
    { id: "simulador", label: "Simulador tarifario", icon: "sliders" },
    { id: "roi", label: "ROI & M&V", icon: "trend" },
  ];
  return (
    <div className="canvas-in wide rise kin">
      <KinHead role={role} title="Financiero & tarifa" sub="Traduce energía en dinero · concilia factura CFE, simula tarifas y gestiona demanda"
        right={<div className="seg" style={{ marginRight: 8 }}>{tabs.map(t => (
          <button key={t.id} className="seg-btn" data-on={tab === t.id} onClick={() => setTab(t.id)}><Icon name={t.icon} size={15} /> {t.label}</button>
        ))}</div>} />
      {tab === "concilia" && <Reconcile />}
      {tab === "simulador" && <TariffSim />}
      {tab === "roi" && <RoiMV />}
    </div>
  );
}

function Reconcile() {
  const B = window.KIN_BILLING;
  const rows = [
    ["Energía", B.utility.energyMXN, B.metered.energyMXN],
    ["Demanda facturable", B.utility.demandMXN, B.metered.demandMXN],
    ["Penalización por FP", B.utility.pfPenaltyMXN, B.metered.pfPenaltyMXN],
  ];
  const totU = B.utility.total, totM = B.metered.total;
  return (
    <div>
      <div className="grid-4" style={{ marginBottom: 14 }}>
        <LiveTile icon="receipt" label="Factura CFE" value={kinMoneyK(totU)} sub={B.period} accent />
        <LiveTile icon="gauge" label="Medido por K'in" value={kinMoneyK(totM)} hue="var(--ek)" />
        <LiveTile icon="warn" label="Diferencia" value={kinMoney(totU - totM)} sub={`${B.diffPct}% a favor`} hue="var(--kin)" />
        <LiveTile icon="bolt" label="Demanda facturada" value={B.billedDemandKW.toLocaleString("es-MX")} unit="kW" />
      </div>
      <div className="grid-2" style={{ alignItems: "start", gridTemplateColumns: "minmax(0,1.3fr) minmax(0,1fr)" }}>
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <div className="card-head"><b style={{ fontSize: 14 }}>Conciliación · {B.period}</b><span className="mono" style={{ fontSize: 11, color: "var(--text-4)" }}>CFE vs. medición</span></div>
          <table className="tbl">
            <thead><tr><th>Concepto</th><th style={{ textAlign: "right" }}>Factura CFE</th><th style={{ textAlign: "right" }}>K'in medido</th><th style={{ textAlign: "right" }}>Δ</th></tr></thead>
            <tbody>
              {rows.map(([k, u, m], i) => (
                <tr key={i}>
                  <td style={{ color: "var(--text)", fontWeight: 500 }}>{k}</td>
                  <td className="num">{kinMoney(u)}</td>
                  <td className="num" style={{ color: "var(--ek)" }}>{kinMoney(m)}</td>
                  <td className="num" style={{ color: u - m > 0 ? "var(--kin)" : "var(--text-3)" }}>{kinMoney(u - m)}</td>
                </tr>
              ))}
              <tr style={{ background: "var(--surface-2)" }}>
                <td style={{ color: "var(--text)", fontWeight: 600 }}>Total</td>
                <td className="num" style={{ fontWeight: 600 }}>{kinMoney(totU)}</td>
                <td className="num" style={{ fontWeight: 600, color: "var(--ek)" }}>{kinMoney(totM)}</td>
                <td className="num" style={{ fontWeight: 600, color: "var(--kin)" }}>{kinMoney(totU - totM)}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div className="card" style={{ padding: 20 }}>
          <Section title="Consumo por periodo tarifario" sub="GDMTH · Base / Intermedia / Punta" style={{ marginBottom: 18 }} />
          <div className="kin-stack" style={{ marginBottom: 14 }}>
            {B.consumptionByPeriod.map(p => (
              <i key={p.period} style={{ width: (p.kwh / 612400 * 100) + "%", background: p.hue }} title={`${p.period}: ${p.kwh} kWh`} />
            ))}
          </div>
          {B.consumptionByPeriod.map(p => (
            <div key={p.period} style={{ display: "flex", alignItems: "center", gap: 9, padding: "7px 0", fontSize: 12.5, borderTop: "1px solid var(--line)" }}>
              <span className="kin-dot-sm" style={{ background: p.hue }} />
              <span style={{ flex: 1, color: "var(--text-2)" }}>{p.period}</span>
              <span className="mono" style={{ color: "var(--text-3)" }}>{(p.kwh/1000).toFixed(0)} MWh</span>
              <span className="mono" style={{ color: "var(--text)", width: 90, textAlign: "right" }}>{kinMoney(p.mxn)}</span>
            </div>
          ))}
          <div style={{ marginTop: 14, padding: 12, borderRadius: 10, background: "color-mix(in oklch, var(--bad) 9%, transparent)", border: "1px solid color-mix(in oklch, var(--bad) 26%, transparent)" }}>
            <p className="muted" style={{ fontSize: 11.5, lineHeight: 1.5 }}><b style={{ color: "var(--text)" }}>Punta = 13% del consumo pero 24% del costo.</b> Recortar 110 kW en horario punta con BESS reduce el cargo de demanda.</p>
          </div>
        </div>
      </div>
    </div>
  );
}

function TariffSim() {
  const T = window.KIN_TARIFF;
  const [tariff, setTariff] = useState("GDMTH");
  const options = [
    { id: "GDMTH", label: "GDMTH (actual)", total: 1638300, note: "Media tensión horaria" },
    { id: "GDMTO", label: "GDMTO", total: 1712400, note: "Media tensión ordinaria" },
    { id: "DIST", label: "DIST (distribución)", total: 1689000, note: "Si bajara a baja tensión" },
  ];
  const cur = options.find(o => o.id === tariff);
  const best = options.reduce((a, b) => a.total < b.total ? a : b);
  return (
    <div className="grid-2" style={{ alignItems: "start", gridTemplateColumns: "minmax(0,1fr) minmax(0,1.2fr)" }}>
      <div className="card" style={{ padding: 22 }}>
        <Section title="Esquema tarifario" sub="Compara escenarios CFE sobre tu perfil de consumo" style={{ marginBottom: 18 }} />
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {options.map(o => (
            <button key={o.id} className="kin-conn" data-on={tariff === o.id} onClick={() => setTariff(o.id)} style={{ padding: 14, cursor: "pointer", flexDirection: "row", alignItems: "center", gap: 12 }}>
              <span className="chk" style={{ width: 22, height: 22, background: tariff === o.id ? "var(--kin)" : "var(--surface-2)" }}>{tariff === o.id && <Icon name="check" size={13} />}</span>
              <div style={{ flex: 1, textAlign: "left" }}>
                <b style={{ fontSize: 13.5 }}>{o.label}</b>
                <div className="mono" style={{ fontSize: 11, color: "var(--text-4)" }}>{o.note}</div>
              </div>
              <span className="mono" style={{ fontSize: 13, color: o.id === best.id ? "var(--ek)" : "var(--text-2)" }}>{kinMoneyK(o.total)}</span>
              {o.id === best.id && <span className="badge ok dot">óptima</span>}
            </button>
          ))}
        </div>
      </div>
      <div className="card" style={{ padding: 22 }}>
        <Section title="Tarifas vigentes · GDMTH" sub="Catálogo CFE versionado · MXN por kWh" style={{ marginBottom: 18 }} />
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {T.periods.map(p => (
            <div key={p.id} style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <span className="kin-dot-sm" style={{ background: p.hue }} />
              <div style={{ flex: 1 }}>
                <b style={{ fontSize: 13 }}>{p.label}</b>
                <div className="mono" style={{ fontSize: 10.5, color: "var(--text-4)" }}>{p.hours}</div>
              </div>
              <span className="disp" style={{ fontSize: 18, fontWeight: 600, color: p.hue }}>${p.rate}</span>
            </div>
          ))}
          <div style={{ display: "flex", alignItems: "center", gap: 12, paddingTop: 12, borderTop: "1px solid var(--line)" }}>
            <span className="kin-dot-sm" style={{ background: "var(--text-3)" }} />
            <div style={{ flex: 1 }}><b style={{ fontSize: 13 }}>Cargo por demanda</b><div className="mono" style={{ fontSize: 10.5, color: "var(--text-4)" }}>por kW facturable</div></div>
            <span className="disp" style={{ fontSize: 18, fontWeight: 600 }}>${T.demandCharge}</span>
          </div>
        </div>
        <div style={{ marginTop: 18, padding: 14, borderRadius: 11, background: "color-mix(in oklch, var(--kin) 10%, var(--surface-2))", border: "1px solid color-mix(in oklch, var(--kin) 28%, transparent)" }}>
          <div className="kin-gauge-cap">Recomendación de K'in</div>
          <p style={{ fontSize: 12.5, color: "var(--text)", marginTop: 7, lineHeight: 1.5 }}>Mantener <b>GDMTH</b> y atacar la demanda en punta es más rentable que cambiar de tarifa. Ahorro potencial: <b style={{ color: "var(--kin)" }}>{kinMoney(248000)}/año</b>.</p>
        </div>
      </div>
    </div>
  );
}

function RoiMV() {
  const L = window.KIN_LIVE;
  const totalSaving = window.KIN_PROJECTS.reduce((s, p) => s + p.savingYr, 0);
  return (
    <div>
      <div className="grid-4" style={{ marginBottom: 14 }}>
        <LiveTile icon="check" label="Ahorro verificado (año)" value={kinMoneyK(L.savingsYTD)} sub="M&V · IPMVP" hue="var(--ek)" accent />
        <LiveTile icon="trend" label="Ahorro potencial total" value={kinMoneyK(totalSaving)} sub="4 proyectos" hue="var(--kin)" />
        <LiveTile icon="dollar" label="CapEx comprometido" value={kinMoneyK(window.KIN_PROJECTS.reduce((s,p)=>s+p.capex,0))} />
        <LiveTile icon="leaf" label="CO₂ evitado" value={window.KIN_PROJECTS.reduce((s,p)=>s+p.co2,0)} unit="tCO₂e" hue="var(--manik)" />
      </div>
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div className="card-head"><b style={{ fontSize: 14 }}>Proyectos de eficiencia · Medición y Verificación</b><span className="mono" style={{ fontSize: 11, color: "var(--kin)" }}>IPMVP</span></div>
        <table className="tbl">
          <thead><tr><th>Proyecto</th><th>Protocolo M&V</th><th style={{ textAlign: "right" }}>CapEx</th><th style={{ textAlign: "right" }}>Ahorro/año</th><th>Payback</th><th>Estado</th></tr></thead>
          <tbody>
            {window.KIN_PROJECTS.map((p, i) => (
              <tr key={i}>
                <td style={{ color: "var(--text)", fontWeight: 500 }}>{p.name}</td>
                <td className="mono" style={{ fontSize: 11.5, color: "var(--text-3)" }}>{p.mv}</td>
                <td className="num">{p.capex ? kinMoney(p.capex) : "—"}</td>
                <td className="num" style={{ color: "var(--ek)" }}>{kinMoney(p.savingYr)}</td>
                <td className="mono">{p.payback ? p.payback + " m" : "inmediato"}</td>
                <td><Pill status={p.status === "Verificado" ? "Aprobado" : p.status === "En medición" ? "En proceso" : "Pendiente"} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ------------------------------------------------------------
//  SOSTENIBILIDAD / CARBONO (PRD §12.11)
// ------------------------------------------------------------
function KinCarbon({ role }) {
  const C = window.KIN_CARBON;
  const max = Math.max(...C.byMonth);
  const labels = ["Jul","Ago","Sep","Oct","Nov","Dic","Ene","Feb","Mar","Abr","May","Jun"];
  const goalPct = Math.round(C.ytdT / C.goalT * 100);
  return (
    <div className="canvas-in wide rise kin">
      <KinHead role={role} title="Sostenibilidad · Carbono" sub="Huella de carbono Alcance 2 · factores de emisión versionados por región y periodo" />
      <div className="grid-4" style={{ marginBottom: 14 }}>
        <LiveTile icon="leaf" label="CO₂ Alcance 2 (mes)" value={C.monthT} unit="tCO₂e" hue="var(--manik)" accent />
        <LiveTile icon="trend" label="Acumulado del año" value={C.ytdT.toLocaleString("es-MX")} unit="tCO₂e" />
        <LiveTile icon="gauge" label="Intensidad energética" value={C.intensity} unit="tCO₂e/t" sub="por tonelada producida" hue="var(--kin)" />
        <LiveTile icon="solar" label="CO₂ evitado" value={C.avoidedT} unit="tCO₂e" sub="solar + eficiencia" hue="var(--ek)" />
      </div>
      <div className="grid-2" style={{ alignItems: "start", gridTemplateColumns: "minmax(0,1.5fr) minmax(0,1fr)" }}>
        <div className="card" style={{ padding: 20 }}>
          <Section title="Huella mensual · 12 meses" sub={`Factor de emisión ${C.factor} tCO₂e/MWh · SEN México`} style={{ marginBottom: 18 }} />
          <div style={{ display: "flex", alignItems: "flex-end", gap: 6, height: 150 }}>
            {C.byMonth.map((v, i) => (
              <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 6, justifyContent: "flex-end", height: "100%" }} title={`${labels[i]}: ${v} tCO₂e`}>
                <div style={{ width: "100%", height: (v/max*120)+"px", borderRadius: "3px 3px 0 0", background: i === 11 ? "var(--manik)" : "color-mix(in oklch, var(--manik) 45%, var(--surface-3))" }} />
                <span className="mono" style={{ fontSize: 9, color: "var(--text-4)" }}>{labels[i]}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="card" style={{ padding: 22 }}>
          <Section title="Meta anual" sub="Avance hacia el límite de emisiones 2026" style={{ marginBottom: 20 }} />
          <div style={{ display: "grid", placeItems: "center", marginBottom: 18 }}>
            <Gauge value={C.ytdT / C.goalT} display={goalPct + "%"} label={`${C.ytdT} / ${C.goalT} tCO₂e`} hue={goalPct > 90 ? "var(--bad)" : "var(--manik)"} size={150} />
          </div>
          <div style={{ padding: 13, borderRadius: 10, background: "var(--surface-2)", border: "1px solid var(--line)" }}>
            <p className="muted" style={{ fontSize: 12, lineHeight: 1.5 }}>A este ritmo, el cierre proyectado es <b style={{ color: "var(--text)" }}>3,120 tCO₂e</b> — dentro de la meta de {C.goalT.toLocaleString("es-MX")}. El despacho solar evita {C.avoidedT} tCO₂e adicionales.</p>
          </div>
        </div>
      </div>
    </div>
  );
}

// ------------------------------------------------------------
//  REPORTES (PRD §12.10)
// ------------------------------------------------------------
function KinReports({ role }) {
  return (
    <div className="canvas-in wide rise kin">
      <KinHead role={role} title="Reportes" sub="Reportes técnicos y ejecutivos · manuales o programados · identidad de marca Sympho"
        action={{ label: "Generar reporte", icon: "plus" }} />
      <div className="grid-2" style={{ alignItems: "start", gridTemplateColumns: "minmax(0,1.4fr) minmax(0,1fr)" }}>
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <div className="card-head"><b style={{ fontSize: 14 }}>Reportes programados</b></div>
          <div style={{ padding: 12, display: "flex", flexDirection: "column", gap: 10 }}>
            {window.KIN_REPORTS.map((r, i) => (
              <div key={i} style={{ display: "flex", gap: 14, alignItems: "center", padding: 14, borderRadius: 11, background: "var(--surface-2)", border: "1px solid var(--line)" }}>
                <span className="kin-tile-ic"><Icon name={r.icon} size={17} /></span>
                <div style={{ flex: 1 }}>
                  <b style={{ fontSize: 13.5 }}>{r.name}</b>
                  <div className="mono" style={{ fontSize: 10.5, color: "var(--text-4)", marginTop: 3 }}>{r.audience} · {r.freq} · último {r.last}</div>
                </div>
                <span className="badge">{r.tpl}</span>
                <button className="btn btn-sm"><Icon name="download" size={13} /> PDF</button>
              </div>
            ))}
          </div>
        </div>
        <div className="card" style={{ padding: 22 }}>
          <Section title="Plantillas" sub="Cuatro tipos de salida" style={{ marginBottom: 16 }} />
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {[["Ejecutivo","Dirección / CFO · KPIs y ahorro","trend"],["Técnico","Ingeniería · calidad y riesgo","wave"],["Normativo","M&V · IPMVP auditable","check"],["ESG","Carbono Alcance 2 · GHG Protocol","leaf"]].map(([t,d,ic],i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: 12, borderRadius: 10, border: "1px solid var(--line)" }}>
                <span className="kin-tile-ic" style={{ width: 30, height: 30 }}><Icon name={ic} size={15} /></span>
                <div style={{ flex: 1 }}><b style={{ fontSize: 13 }}>{t}</b><div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>{d}</div></div>
                <Icon name="chevright" size={15} style={{ color: "var(--text-4)" }} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { KinFinance, KinCarbon, KinReports });