/* ============================================================
   SYMPHO · K'IN — Digital Twin (PRD §12.2)
   Unifilar interactivo · topología · dispositivos · simulador
   ============================================================ */

function KinTwin({ role }) {
  const [tab, setTab] = useState("unifilar");
  const tabs = [
    { id: "unifilar", label: "Diagrama unifilar", icon: "node" },
    { id: "topo", label: "Jerarquía", icon: "layers" },
    { id: "sim", label: "Simulador “qué pasaría si”", icon: "sparkle" },
  ];
  return (
    <div className="canvas-in wide rise kin">
      <KinHead role={role} title="Digital Twin" sub="Modelo eléctrico del sitio con estado en tiempo real y simulación · toda carga pertenece a un circuito, todo circuito a un tablero"
        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 === "unifilar" && <Unifilar />}
      {tab === "topo" && <TopoTree />}
      {tab === "sim" && <Simulator />}
    </div>
  );
}

// ------------------------------------------------------------
//  Diagrama unifilar
// ------------------------------------------------------------
function nodeIcon(kind) {
  return { "Tablero general": "bolt", "Tablero": "grid", "DER": "battery", "Carga": "plug", "Solar": "solar", "Batería": "battery", "UPS": "shield" }[kind] || "plug";
}

function Unifilar() {
  const tgd = window.KIN_HIER[0];
  const panels = tgd.children;
  const [sel, setSel] = useState(panels[0]);
  const sevOf = (n) => n.pf != null && n.pf < 0.88 ? "warn" : null;

  return (
    <div className="grid-2" style={{ alignItems: "start", gridTemplateColumns: "minmax(0,1.7fr) minmax(0,1fr)", gap: 16 }}>
      <div className="kin-twin">
        <div className="kin-bus">
          {/* fuente CFE */}
          <div className="kin-source">
            <span className="kin-src-ic"><Icon name="bolt" size={15} /></span>
            CFE · {window.KIN_SITE.voltage}
            <span className="mono" style={{ fontSize: 10.5, color: "var(--text-4)", marginLeft: 4 }}>GDMTH</span>
          </div>
          <div className="kin-drop" />
          {/* medidor principal */}
          <button className="kin-node" data-on={sel.id === tgd.id} onClick={() => setSel(tgd)} style={{ minWidth: 200 }}>
            <div className="kin-node-top">
              <span className="kin-node-ic" style={{ background: "var(--kin)" }}><Icon name="gauge" size={14} /></span>
              <span className="kin-node-name">{tgd.name}</span>
            </div>
            <div className="kin-node-kw">{tgd.kw.toLocaleString("es-MX")} kW</div>
            <div className="kin-node-meta">FP {tgd.pf} · medidor principal MT</div>
            <div className="kin-node-bar"><i style={{ width: tgd.load + "%", background: "var(--kin)" }} /></div>
          </button>
          <div className="kin-drop" />
          <div className="kin-mainbus" style={{ width: "92%" }} />
          {/* feeders */}
          <div className="kin-feeders" style={{ marginTop: 0, width: "100%", justifyContent: "space-between" }}>
            {panels.map(p => (
              <div key={p.id} className="kin-feeder" style={{ flex: 1, minWidth: 0 }}>
                <div className="kin-feeder-drop" />
                <button className="kin-node" data-on={sel.id === p.id} data-sev={sevOf(p)} onClick={() => setSel(p)} style={{ width: "100%" }}>
                  <div className="kin-node-top">
                    <span className="kin-node-ic" style={{ background: p.hue }}><Icon name={nodeIcon(p.kind)} size={13} /></span>
                    <span className="kin-node-name" style={{ fontSize: 11.5 }}>{p.name.split(" · ")[0]}</span>
                  </div>
                  <div className="kin-node-kw" style={{ fontSize: 13 }}>{window.fmtKW(p.kw)}</div>
                  <div className="kin-node-meta">{p.kind === "DER" ? "generación / respaldo" : "FP " + p.pf}</div>
                  {p.kind !== "DER" && <div className="kin-node-bar"><i style={{ width: p.load + "%", background: p.pf < 0.88 ? "var(--warn)" : p.hue }} /></div>}
                </button>
                {/* children */}
                <div className="kin-children" style={{ width: "100%" }}>
                  {p.children.map(c => (
                    <div key={c.id} className="kin-child" data-on={sel.id === c.id} onClick={() => setSel(c)}>
                      <span className="kin-dot-sm" style={{ background: c.pf != null && c.pf < 0.88 ? "var(--warn)" : (p.hue) }} />
                      <span style={{ flex: 1, fontSize: 11.5, color: "var(--text-2)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.name}</span>
                      <span className="mono" style={{ fontSize: 11, color: "var(--text-3)" }}>{window.fmtKW(c.kw)}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* inspector */}
      <NodeInspector node={sel} />
    </div>
  );
}

function NodeInspector({ node }) {
  const nav = useNav();
  const dev = node.dev || (node.kind === "Tablero general" ? "Medidor principal" : "—");
  const rows = [
    ["Tipo", node.kind],
    ["Demanda", window.fmtKW(node.kw)],
    node.pf != null && node.kind !== "DER" ? ["Factor de potencia", node.pf.toFixed(2)] : null,
    node.thd != null ? ["THD de corriente", node.thd + "%"] : null,
    node.load ? ["Utilización", node.load + "%"] : null,
    ["Medición", dev],
  ].filter(Boolean);
  const warn = node.pf != null && node.pf < 0.88;
  return (
    <div className="kin-inspect" style={{ position: "sticky", top: 0 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 14 }}>
        <span className="kin-node-ic" style={{ width: 36, height: 36, borderRadius: 9, background: node.hue || "var(--kin)" }}><Icon name={nodeIcon(node.kind)} size={18} /></span>
        <div style={{ minWidth: 0 }}>
          <b className="disp" style={{ fontSize: 15 }}>{node.name}</b>
          <div className="mono" style={{ fontSize: 10.5, color: "var(--text-4)" }}>nodo {node.id} · gemelo digital</div>
        </div>
      </div>
      {rows.map(([k, v], i) => (
        <div key={i} className="kin-inspect-row">
          <span className="muted">{k}</span>
          <span className="mono" style={{ color: k === "Factor de potencia" ? window.pfHue(node.pf) : "var(--text)" }}>{v}</span>
        </div>
      ))}
      {warn && (
        <div style={{ marginTop: 14, padding: 12, borderRadius: 10, background: "color-mix(in oklch, var(--warn) 10%, transparent)", border: "1px solid color-mix(in oklch, var(--warn) 30%, transparent)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12.5, color: "var(--text)" }}><Icon name="warn" size={15} style={{ color: "var(--warn)" }} /> Factor de potencia bajo</div>
          <p className="muted" style={{ fontSize: 11.5, marginTop: 6, lineHeight: 1.5 }}>K'in recomienda banco de capacitores. Ahorro estimado $612,000/año.</p>
          <button className="btn btn-sm" style={{ marginTop: 10, width: "100%", justifyContent: "center" }} onClick={() => nav.openApp("kin", "copilot")}>Analizar con Copilot</button>
        </div>
      )}
      <div style={{ marginTop: 14, display: "flex", gap: 8 }}>
        <button className="btn btn-sm" style={{ flex: 1, justifyContent: "center" }} onClick={() => nav.openApp("kin", "monitor")}><Icon name="activity" size={14} /> Telemetría</button>
        <button className="btn btn-sm" style={{ flex: 1, justifyContent: "center" }} onClick={() => nav.openApp("kin", "alerts")}><Icon name="warn" size={14} /> Riesgo</button>
      </div>
    </div>
  );
}

// ------------------------------------------------------------
//  Jerarquía / topología (árbol + registro de dispositivos)
// ------------------------------------------------------------
function TopoTree() {
  const tgd = window.KIN_HIER[0];
  const path = ["Organización", window.KIN_SITE.org, window.KIN_SITE.site, "Edificio Proceso"];
  return (
    <div className="grid-2" style={{ alignItems: "start", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", gap: 16 }}>
      <div className="card" style={{ padding: 18 }}>
        <Section title="Jerarquía de activos" sub="Organización → Sitio → Edificio → Tablero → Circuito → Carga" style={{ marginBottom: 14 }} />
        <div className="mono" style={{ fontSize: 11, color: "var(--text-4)", marginBottom: 12, display: "flex", gap: 6, flexWrap: "wrap" }}>
          {path.map((p, i) => <span key={i}>{p}{i < path.length-1 ? " ›" : ""}</span>)}
        </div>
        <div className="kin-tree">
          <TreeNode node={tgd} depth={0} />
        </div>
      </div>
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div className="card-head"><b style={{ fontSize: 14 }}>Registro de dispositivos</b><span className="mono" style={{ fontSize: 11, color: "var(--text-4)" }}>{window.KIN_DEVICES.length} gemelos</span></div>
        <table className="tbl">
          <thead><tr><th>Dispositivo</th><th>Tipo</th><th>Nodo</th><th>Estado</th></tr></thead>
          <tbody>
            {window.KIN_DEVICES.map((d, i) => (
              <tr key={i}>
                <td style={{ color: "var(--text)", fontWeight: 500 }}>{d.name}<div className="mono" style={{ fontSize: 10, color: "var(--text-4)" }}>{d.id} · {d.proto}</div></td>
                <td>{d.type}</td>
                <td className="mono" style={{ fontSize: 11 }}>{d.node}</td>
                <td><span className="dot" style={{ background: d.status === "En línea" ? "var(--ek)" : d.status === "Alerta" ? "var(--warn)" : "var(--text-4)", marginRight: 6 }} /><span className="mono" style={{ fontSize: 11 }}>{d.status}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function TreeNode({ node, depth }) {
  const [open, setOpen] = useState(depth < 1);
  const kids = node.children || [];
  return (
    <div>
      <div className="kin-tree-row" style={{ paddingLeft: 10 + depth * 18 }} onClick={() => kids.length && setOpen(v => !v)}>
        {kids.length ? <Icon name="chevright" size={13} style={{ transform: open ? "rotate(90deg)" : "none", transition: "transform 0.15s", color: "var(--text-4)" }} /> : <span style={{ width: 13 }} />}
        <span className="kin-dot-sm" style={{ background: node.hue || "var(--text-3)" }} />
        <span style={{ color: depth === 0 ? "var(--text)" : "var(--text-2)" }}>{node.name}</span>
        <span className="kin-tree-kw">{window.fmtKW(node.kw)}</span>
      </div>
      {open && kids.map(k => <TreeNode key={k.id} node={k} depth={depth + 1} />)}
    </div>
  );
}

// ------------------------------------------------------------
//  Simulador "qué pasaría si"
// ------------------------------------------------------------
function Simulator() {
  const L = window.KIN_LIVE, T = window.KIN_TARIFF;
  const [bess, setBess] = useState(125);      // kW de descarga en punta
  const [pvAdd, setPvAdd] = useState(0);      // kWp adicionales
  const [pfFix, setPfFix] = useState(false);  // corregir FP

  const basePeak = L.peakTodayKW;
  const newPeak = Math.max(0, basePeak - bess);
  const demandSaving = (basePeak - newPeak) * T.demandCharge;
  const pvSaving = pvAdd * 1.6 * 1.78 * 30 / 1000 * 1000; // approx MXN/mes
  const pfSaving = pfFix ? 41200 : 0;
  const monthSaving = demandSaving + pvSaving + pfSaving;

  const Slider = ({ label, value, set, min, max, step, unit, hint }) => (
    <div style={{ marginBottom: 18 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
        <span style={{ fontSize: 13, color: "var(--text-2)" }}>{label}</span>
        <span className="mono" style={{ fontSize: 13, color: "var(--kin)" }}>{value} {unit}</span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value} onChange={e => set(+e.target.value)}
        style={{ width: "100%", accentColor: "var(--kin)" }} />
      {hint && <div className="mono" style={{ fontSize: 10.5, color: "var(--text-4)", marginTop: 5 }}>{hint}</div>}
    </div>
  );

  return (
    <div className="grid-2" style={{ alignItems: "start", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", gap: 16 }}>
      <div className="card" style={{ padding: 22 }}>
        <Section title="Escenario" sub="Ajusta variables sin afectar la instalación real" style={{ marginBottom: 20 }} />
        <Slider label="Descarga de batería en punta" value={bess} set={setBess} min={0} max={250} step={5} unit="kW" hint="BESS instalada: 125 kW · simula hasta 250 kW" />
        <Slider label="Capacidad solar adicional" value={pvAdd} set={setPvAdd} min={0} max={500} step={20} unit="kWp" hint="Arreglo actual: 480 kWp" />
        <label style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer", padding: "12px 0", borderTop: "1px solid var(--line)" }}>
          <button className={"sw" + (pfFix ? " on" : "")} style={{ "--c": "var(--kin)" }} onClick={() => setPfFix(v => !v)}><span /></button>
          <span style={{ fontSize: 13, color: "var(--text-2)" }}>Corregir factor de potencia a 0.97 (banco de capacitores)</span>
        </label>
      </div>

      <div className="card" style={{ padding: 22, background: "linear-gradient(160deg, color-mix(in oklch, var(--kin) 10%, var(--surface)), var(--surface) 60%)", borderColor: "color-mix(in oklch, var(--kin) 26%, var(--line))" }}>
        <Section title="Impacto proyectado" style={{ marginBottom: 20 }} />
        <div style={{ display: "flex", gap: 20, marginBottom: 22 }}>
          <div style={{ flex: 1 }}>
            <div className="kin-gauge-cap">Pico facturable</div>
            <div className="disp" style={{ fontSize: 30, fontWeight: 600, marginTop: 6 }}>{newPeak.toLocaleString("es-MX")}<small style={{ fontSize: 14, color: "var(--text-4)" }}> kW</small></div>
            <div className="mono" style={{ fontSize: 11, color: bess > 0 ? "var(--ek)" : "var(--text-4)", marginTop: 4 }}>{bess > 0 ? `▼ ${(basePeak-newPeak).toLocaleString("es-MX")} kW vs hoy` : `actual ${basePeak} kW`}</div>
          </div>
          <div style={{ flex: 1 }}>
            <div className="kin-gauge-cap">Ahorro estimado</div>
            <div className="disp" style={{ fontSize: 30, fontWeight: 600, marginTop: 6, color: "var(--kin)" }}>{kinMoney(monthSaving)}</div>
            <div className="mono" style={{ fontSize: 11, color: "var(--text-4)", marginTop: 4 }}>MXN / mes estimado</div>
          </div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {[["Recorte de demanda (BESS)", demandSaving], ["Generación solar adicional", pvSaving], ["Corrección de FP", pfSaving]].map(([k, v]) => (
            <div key={k} style={{ display: "flex", justifyContent: "space-between", fontSize: 12.5 }}>
              <span className="muted">{k}</span>
              <span className="mono" style={{ color: v > 0 ? "var(--text)" : "var(--text-4)" }}>{v > 0 ? "+" + kinMoney(v) : "—"}</span>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 18, paddingTop: 16, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <b>Ahorro anual proyectado</b>
          <span className="disp" style={{ fontSize: 24, fontWeight: 600, color: "var(--kin)" }}>{kinMoney(monthSaving * 12)}</span>
        </div>
        <p className="mono" style={{ fontSize: 10.5, color: "var(--text-4)", marginTop: 12, lineHeight: 1.5 }}>Simulación sobre el gemelo digital · no modifica la instalación física. Validar con K'in Copilot antes de ejecutar.</p>
      </div>
    </div>
  );
}

Object.assign(window, { KinTwin });