/* ============================================================
   SYMPHO · K'IN — operación
   Monitoreo · Calidad de energía · Analítica · DER · Alertas
   ============================================================ */

// ------------------------------------------------------------
//  MONITOREO Y TELEMETRÍA (PRD §12.3)
// ------------------------------------------------------------
function KinMonitor({ role }) {
  const L = window.KIN_LIVE;
  const tgd = window.KIN_HIER[0];
  const [drill, setDrill] = useState(tgd.children[0]);
  return (
    <div className="canvas-in wide rise kin">
      <KinHead role={role} title="Monitoreo en vivo" sub="Consumo en tiempo real hasta nivel de circuito · muestreo 1 s · sello de tiempo y calidad" />
      <div className="grid-4" style={{ marginBottom: 14 }}>
        <LiveTile icon="activity" label="Demanda instantánea" value={L.demandKW.toLocaleString("es-MX")} unit="kW" accent />
        <LiveTile icon="bolt" label="Energía acumulada hoy" value={L.energyTodayMWh} unit="MWh" />
        <LiveTile icon="solar" label="Generación solar" value={L.solarNowKW} unit="kW" hue="var(--ek)" />
        <LiveTile icon="gauge" label="Frecuencia" value={L.freq} unit="Hz" hue="var(--ek)" />
      </div>

      <div className="card" style={{ padding: 20, marginBottom: 14 }}>
        <Section title="Demanda vs. generación · 24 h" sub="Lectura agregada del medidor principal y submedidores" style={{ marginBottom: 18 }}
          right={<div style={{ display: "flex", gap: 14 }}>
            <span className="kin-leg"><span className="kin-dot-sm" style={{ background: "var(--kin)" }} /> red</span>
            <span className="kin-leg"><span className="kin-dot-sm" style={{ background: "color-mix(in oklch, var(--ek) 60%, transparent)" }} /> solar</span>
            <span className="kin-leg"><span className="kin-dot-sm" style={{ background: "color-mix(in oklch, var(--bad) 60%, transparent)" }} /> punta</span>
          </div>} />
        <KinBars height={170} />
      </div>

      <div className="grid-2" style={{ alignItems: "start", gridTemplateColumns: "minmax(0,1fr) minmax(0,1.3fr)" }}>
        <div className="card" style={{ padding: 18 }}>
          <Section title="Drilldown por tablero" sub="Selecciona para ver sus circuitos" style={{ marginBottom: 14 }} />
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {tgd.children.filter(c => c.kind !== "DER").map(c => (
              <button key={c.id} className="kin-child" data-on={drill.id === c.id} onClick={() => setDrill(c)} style={{ width: "100%" }}>
                <span className="kin-dot-sm" style={{ background: c.hue }} />
                <span style={{ flex: 1, fontSize: 12.5, color: "var(--text-2)", textAlign: "left" }}>{c.name.split(" · ")[0]}</span>
                <span className="mono" style={{ fontSize: 12, color: "var(--text)" }}>{c.kw} kW</span>
              </button>
            ))}
          </div>
        </div>
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <div className="card-head"><b style={{ fontSize: 14 }}>{drill.name}</b><span className="kin-live">en vivo</span></div>
          <table className="tbl">
            <thead><tr><th>Circuito / carga</th><th>FP</th><th>Utilización</th><th style={{ textAlign: "right" }}>Demanda</th></tr></thead>
            <tbody>
              {(drill.children || []).map((c, i) => (
                <tr key={i}>
                  <td style={{ color: "var(--text)", fontWeight: 500 }}>{c.name}</td>
                  <td><span className="mono" style={{ color: window.pfHue(c.pf) }}>{c.pf.toFixed(2)}</span></td>
                  <td style={{ width: 140 }}><div className="bar"><i style={{ width: c.load + "%", background: c.hue || "var(--kin)" }} /></div></td>
                  <td className="num">{c.kw} kW</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// ------------------------------------------------------------
//  CALIDAD DE ENERGÍA (PRD §12.3)
// ------------------------------------------------------------
function KinQuality({ role }) {
  const L = window.KIN_LIVE;
  return (
    <div className="canvas-in wide rise kin">
      <KinHead role={role} title="Calidad de energía" sub="Armónicos, factor de potencia, tensión y desbalance por tablero" />
      <div className="grid-4" style={{ marginBottom: 14 }}>
        <LiveTile icon="gauge" label="FP global" value={L.pf.toFixed(3)} sub="objetivo ≥ 0.90" hue={window.pfHue(L.pf)} accent />
        <LiveTile icon="wave" label="THD-I máximo" value="8.2" unit="%" sub="bancada de VFDs" hue="var(--bad)" />
        <LiveTile icon="bolt" label="Desbalance de tensión" value={L.voltImbalance} unit="%" sub="límite 2%" />
        <LiveTile icon="activity" label="Tensión promedio" value="437" unit="V" hue="var(--ek)" />
      </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 }}>Calidad por tablero</b></div>
          <table className="tbl">
            <thead><tr><th>Tablero</th><th>FP</th><th>THD-I</th><th>Desbalance</th><th>Tensión</th><th>Estado</th></tr></thead>
            <tbody>
              {window.KIN_QUALITY.map((q, i) => (
                <tr key={i}>
                  <td style={{ color: "var(--text)", fontWeight: 500 }}>{q.panel}</td>
                  <td><span className="mono" style={{ color: window.pfHue(q.pf) }}>{q.pf.toFixed(2)}</span></td>
                  <td><span className="mono" style={{ color: q.thd > 7 ? "var(--bad)" : "var(--text-2)" }}>{q.thd}%</span></td>
                  <td className="mono">{q.imbalance}%</td>
                  <td className="mono">{q.volt} V</td>
                  <td><Pill status={q.status === "warn" ? "En revisión" : "Activo"} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="card" style={{ padding: 20 }}>
          <Section title="Espectro armónico" sub="Bancada de VFDs · armónicos impares de corriente" style={{ marginBottom: 18 }} />
          <div className="kin-harm">
            {window.KIN_HARMONICS.map((h, i) => (
              <div key={i} className="kin-harm-col">
                <span className="mono" style={{ fontSize: 10.5, color: "var(--text-2)" }}>{h.v}%</span>
                <div className="kin-harm-bar" data-hot={h.v > 5} style={{ height: (h.v/8*100)+"%" }} />
                <span className="mono" style={{ fontSize: 10, color: "var(--text-4)" }}>{h.h}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 18, padding: 13, borderRadius: 10, background: "color-mix(in oklch, var(--warn) 9%, transparent)", border: "1px solid color-mix(in oklch, var(--warn) 28%, transparent)" }}>
            <div style={{ fontSize: 12.5, color: "var(--text)", display: "flex", gap: 8, alignItems: "center" }}><Icon name="warn" size={15} style={{ color: "var(--warn)" }} /> THD-I 8.2% supera el umbral de 8.0%</div>
            <p className="muted" style={{ fontSize: 11.5, marginTop: 6, lineHeight: 1.5 }}>K'in recomienda filtro de armónicos. Reduce THD a &lt;5% y alarga la vida del transformador.</p>
          </div>
        </div>
      </div>
    </div>
  );
}

// ------------------------------------------------------------
//  ANALÍTICA ENERGÉTICA (PRD §12.4)
// ------------------------------------------------------------
function KinAnalytics({ role }) {
  const B = window.KIN_BASELINE;
  const max = Math.max(...B.baseline, ...B.real);
  return (
    <div className="canvas-in wide rise kin">
      <KinHead role={role} title="Analítica energética" sub="Desagregación de cargas, línea base y detección de desperdicio" />
      <div className="grid-2" style={{ alignItems: "start", marginBottom: 14 }}>
        <div className="card" style={{ padding: 20 }}>
          <Section title="Desagregación de consumo · mes" sub="Estimada por analítica sin submedición total" style={{ marginBottom: 18 }} />
          <div style={{ display: "flex", gap: 22, alignItems: "center" }}>
            <Donut segments={window.KIN_DISAGG.map(d => ({ ...d, n: d.pct }))} size={150} thickness={18}
              center={<><div className="disp" style={{ fontSize: 22, fontWeight: 600 }}>612</div><div className="mono" style={{ fontSize: 10, color: "var(--text-4)" }}>MWh</div></>} />
            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 9 }}>
              {window.KIN_DISAGG.map(d => (
                <div key={d.load} style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 12.5 }}>
                  <span className="kin-dot-sm" style={{ background: d.hue }} />
                  <span style={{ flex: 1, color: "var(--text-2)" }}>{d.load}</span>
                  <span className="mono" style={{ color: "var(--text)" }}>{d.pct}%</span>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="card" style={{ padding: 20 }}>
          <Section title="Consumo real vs. línea base" sub="12 meses · línea base ajustada por clima y producción" style={{ marginBottom: 18 }}
            right={<span className="badge ok dot">−2.8% vs base</span>} />
          <div style={{ display: "flex", alignItems: "flex-end", gap: 5, height: 150 }}>
            {B.real.map((v, i) => (
              <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "flex-end", position: "relative", height: "100%" }} title={`${B.labels[i]}: ${v} MWh`}>
                <div style={{ position: "absolute", left: 0, right: 0, bottom: (B.baseline[i]/max*130)+"px", height: 2, background: "var(--line-strong)", zIndex: 2 }} />
                <div style={{ height: (v/max*130)+"px", borderRadius: "3px 3px 0 0", background: v <= B.baseline[i] ? "color-mix(in oklch, var(--ek) 55%, var(--surface-3))" : "color-mix(in oklch, var(--kin) 55%, var(--surface-3))" }} />
              </div>
            ))}
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8 }}>
            {B.labels.filter((_,i)=>i%2===0).map(l => <span key={l} className="mono" style={{ fontSize: 9.5, color: "var(--text-4)" }}>{l}</span>)}
          </div>
          <div style={{ display: "flex", gap: 16, marginTop: 12 }}>
            <span className="kin-leg"><span style={{ width: 14, height: 2, background: "var(--line-strong)", display: "inline-block" }} /> línea base</span>
            <span className="kin-leg"><span className="kin-dot-sm" style={{ background: "var(--ek)" }} /> bajo base</span>
          </div>
        </div>
      </div>

      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div className="card-head"><b style={{ fontSize: 14 }}>Desperdicio detectado</b><span className="mono" style={{ fontSize: 11, color: "var(--kin)" }}>modelos no supervisados</span></div>
        <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 10 }}>
          {window.KIN_WASTE.map((w, 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" style={{ background: "var(--kin-dim)", color: "var(--kin)" }}><Icon name="warn" size={16} /></span>
              <div style={{ flex: 1 }}>
                <b style={{ fontSize: 13.5 }}>{w.title}</b>
                <p className="muted" style={{ fontSize: 12, marginTop: 4, lineHeight: 1.5 }}>{w.detail}</p>
              </div>
              <div style={{ textAlign: "right", flex: "none" }}>
                <div className="disp" style={{ fontSize: 18, fontWeight: 600, color: "var(--kin)" }}>{kinMoney(w.mxn)}</div>
                <div className="mono" style={{ fontSize: 10.5, color: "var(--text-4)" }}>{w.kwh.toLocaleString("es-MX")} kWh/mes · {Math.round(w.conf*100)}% conf.</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ------------------------------------------------------------
//  DER Y ALMACENAMIENTO (PRD §12.6)
// ------------------------------------------------------------
function KinDER({ role }) {
  const D = window.KIN_DER;
  const max = Math.max(...D.dispatch.map(Math.abs));
  return (
    <div className="canvas-in wide rise kin">
      <KinHead role={role} title="DER & almacenamiento" sub="Solar, baterías y UPS · maximiza autoconsumo y respaldo crítico" />
      <div className="grid-4" style={{ marginBottom: 14 }}>
        <LiveTile icon="solar" label="Solar · generando" value={D.solar.nowKW} unit="kW" sub={`${D.solar.capacityKWp} kWp · ${D.solar.selfPct}% autoconsumo`} hue="var(--ek)" accent />
        <LiveTile icon="battery" label="Batería · SoC" value={D.battery.soc} unit="%" sub={`SoH ${D.battery.soh}% · ${D.battery.cycles} ciclos`} hue="var(--kin)" />
        <LiveTile icon="shield" label="UPS proceso crítico" value={D.ups.loadPct} unit="%" sub={`${D.ups.autonomyMin} min autonomía`} hue="var(--pakal)" />
        <LiveTile icon="leaf" label="CO₂ evitado (mes)" value={D.solar.co2Avoided} unit="tCO₂e" hue="var(--manik)" />
      </div>

      <div className="grid-2" style={{ alignItems: "start", marginBottom: 14, gridTemplateColumns: "minmax(0,1.5fr) minmax(0,1fr)" }}>
        <div className="card" style={{ padding: 20 }}>
          <Section title="Plan de despacho de batería · 24 h" sub="Modo: arbitraje tarifario — carga con solar/base, descarga en punta" style={{ marginBottom: 18 }} />
          <div style={{ display: "flex", alignItems: "center", gap: 3, height: 160, position: "relative" }}>
            <div style={{ position: "absolute", left: 0, right: 0, top: "50%", height: 1, background: "var(--line-2)" }} />
            {D.dispatch.map((v, i) => (
              <div key={i} style={{ flex: 1, height: "100%", display: "flex", flexDirection: "column", justifyContent: "center", minWidth: 0 }} title={`${String(i).padStart(2,"0")}:00 · ${v>0?"carga":"descarga"} ${Math.abs(v)} kW`}>
                <div style={{ width: "100%", display: "flex", flexDirection: "column", justifyContent: v >= 0 ? "flex-end" : "flex-start", height: "100%" }}>
                  {v >= 0
                    ? <div style={{ height: (v/max*70)+"px", marginTop: "auto", background: "color-mix(in oklch, var(--ek) 60%, var(--surface-3))", borderRadius: "3px 3px 0 0" }} />
                    : <div style={{ height: (Math.abs(v)/max*70)+"px", marginBottom: "auto", background: "color-mix(in oklch, var(--kin) 65%, var(--surface-3))", borderRadius: "0 0 3px 3px" }} />}
                </div>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", gap: 16, marginTop: 12 }}>
            <span className="kin-leg"><span className="kin-dot-sm" style={{ background: "var(--ek)" }} /> carga (kW)</span>
            <span className="kin-leg"><span className="kin-dot-sm" style={{ background: "var(--kin)" }} /> descarga (kW)</span>
          </div>
        </div>
        <div className="card" style={{ padding: 22, display: "flex", flexDirection: "column", gap: 18 }}>
          <Section title="Estado de almacenamiento" style={{ marginBottom: 2 }} />
          <div style={{ display: "flex", gap: 14, justifyContent: "space-around" }}>
            <Gauge value={D.battery.soc/100} display={D.battery.soc+"%"} label="SoC" hue="var(--kin)" size={112} />
            <Gauge value={D.battery.soh/100} display={D.battery.soh+"%"} label="SoH" hue="var(--ek)" size={112} />
          </div>
          <div style={{ padding: 13, borderRadius: 10, background: "var(--surface-2)", border: "1px solid var(--line)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12.5, marginBottom: 6 }}><span className="muted">Reserva para respaldo crítico</span><span className="mono" style={{ color: "var(--text)" }}>{D.battery.reserveCritical}%</span></div>
            <p className="mono" style={{ fontSize: 10.5, color: "var(--text-4)", lineHeight: 1.5 }}>La descarga respeta umbrales de SoH y reserva de respaldo (interlock de seguridad).</p>
          </div>
        </div>
      </div>
    </div>
  );
}

// ------------------------------------------------------------
//  ALERTAS Y RIESGO (PRD §12.9) — orden de trabajo → Zamná
// ------------------------------------------------------------
function KinAlerts({ role }) {
  const nav = useNav();
  const [filter, setFilter] = useState("all");
  const alerts = window.KIN_ALERTS.filter(a => filter === "all" ? true : filter === "open" ? a.state !== "Cerrada" : a.sev === "crit");
  const sevLabel = { crit: "crítica", high: "alta", med: "media", low: "baja" };
  return (
    <div className="canvas-in wide rise kin">
      <KinHead role={role} title="Centro de alertas & riesgo" sub="Detección y escalamiento de condiciones de riesgo eléctrico y operativo · las críticas no se autocierran" />
      <div className="grid-4" style={{ marginBottom: 14 }}>
        <LiveTile icon="warn" label="Críticas" value="1" hue="var(--bad)" accent />
        <LiveTile icon="bolt" label="Altas" value="2" hue="var(--warn)" />
        <LiveTile icon="check" label="Reconocidas" value="1" hue="var(--kin)" />
        <LiveTile icon="flow" label="Órdenes a Zamná" value="1" sub="generada hoy" hue="var(--zamna)" />
      </div>
      <div className="card" style={{ padding: 12, marginBottom: 14, display: "flex", gap: 8, alignItems: "center" }}>
        <div className="seg">
          {[["all","Todas"],["open","Abiertas"],["crit","Críticas"]].map(([id,l]) => (
            <button key={id} className="seg-btn" data-on={filter===id} onClick={() => setFilter(id)}>{l}</button>
          ))}
        </div>
        <div style={{ flex: 1 }} />
        <span className="mono" style={{ fontSize: 11, color: "var(--text-4)" }}>{alerts.length} alertas</span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {alerts.map(a => (
          <div key={a.id} className="kin-alert" data-sev={a.sev}>
            <div className="kin-alert-spine" />
            <div className="kin-alert-body">
              <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
                <span className="kin-sev-tag" data-sev={a.sev}>{sevLabel[a.sev]}</span>
                <b style={{ fontSize: 14 }}>{a.title}</b>
                <span className="mono" style={{ fontSize: 10.5, color: "var(--text-4)" }}>{a.id}</span>
              </div>
              <p className="muted" style={{ fontSize: 12.5, marginTop: 7, lineHeight: 1.5, maxWidth: 620 }}>{a.detail}</p>
              <div className="mono" style={{ fontSize: 11, color: "var(--text-4)", marginTop: 8 }}>{a.node} · {a.time}</div>
            </div>
            <div className="kin-alert-side">
              <Pill status={a.state} />
              {a.wo
                ? <button className="btn btn-sm" style={{ background: "var(--zamna)", borderColor: "transparent", color: "oklch(0.16 0.02 264)" }} onClick={() => nav.openApp("zamna")}><Icon name="flow" size={13} /> Ver orden Zamná</button>
                : a.state === "Abierta" && <button className="btn btn-sm"><Icon name="flow" size={13} /> Crear orden</button>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { KinMonitor, KinQuality, KinAnalytics, KinDER, KinAlerts });
