/* ============================================================
   SYMPHO · PAKAL — vistas avanzadas
   Garantías · Contratos · RMA & logística · Refacciones ·
   Matching/disponibilidad · Ciclo de vida · Campo · Copilot IA
   ============================================================ */

// ============================================================
//  GARANTÍAS & PÓLIZAS
// ============================================================
function PkGarantias({ role, clientPortal }) {
  const base = clientPortal ? window.PK_ASSETS.filter(a => a.client === "helios") : window.PK_ASSETS;
  const rows = base.map(a => ({ ...a, w: a.warranty }));
  const vig = rows.filter(r => r.w.status === "Vigente").length;
  const venc = rows.filter(r => r.w.status === "Por vencer").length;
  const out = rows.filter(r => r.w.status === "Fuera de garantía").length;
  return (
    <div className="canvas-in wide rise pakal">
      <PkHead role={role} title={clientPortal ? "Mis garantías" : "Garantías & pólizas"}
        sub="Coberturas por equipo, fabricantes/integradores que gestionan el servicio y semáforo de vencimientos"
        action={clientPortal ? null : { label: "Registrar póliza", icon: "plus" }} />
      <div className="grid-4" style={{ marginBottom: 14 }}>
        <Stat icon="check" label="Vigentes" value={vig} hue="var(--ok)" />
        <Stat icon="clock" label="Por vencer (≤90d)" value={venc} hue="var(--warn)" />
        <Stat icon="warn" label="Fuera de garantía" value={out} hue="var(--bad)" />
        <Stat icon="users" label="Proveedores activos" value={window.PK_VENDORS.length} hue="var(--pakal)" />
      </div>
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div className="card-head"><b style={{ fontSize: 14 }}>Coberturas por equipo</b>
          <select className="field" style={{ width: 170, height: 32 }}><option>Todos los estados</option><option>Vigente</option><option>Por vencer</option><option>Fuera de garantía</option></select></div>
        <table className="tbl">
          <thead><tr><th>Equipo</th><th>Fabricante</th><th>Integrador</th><th>Póliza</th><th>Inicio</th><th>Vence</th><th>Estado</th></tr></thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i}>
                <td><span className="mono" style={{ fontSize: 11.5, color: "var(--text)" }}>{r.tag}</span><div className="muted" style={{ fontSize: 11 }}>{r.name}</div></td>
                <td>{pkVendor(r.w.vendor).name}</td>
                <td className="muted" style={{ fontSize: 12 }}>{pkVendor(r.w.integrator).name || "—"}</td>
                <td style={{ fontSize: 12.5, color: "var(--text)" }}>{r.w.policy}</td>
                <td className="mono" style={{ fontSize: 12 }}>{r.w.start}</td>
                <td className="mono" style={{ fontSize: 12 }}>{r.w.end}</td>
                <td><Pill status={r.w.status} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ============================================================
//  CONTRATOS (con clientes) — renovación
// ============================================================
function PkContratos({ role }) {
  const C = window.PK_CONTRACTS;
  return (
    <div className="canvas-in wide rise pakal">
      <PkHead role={role} title="Contratos con clientes"
        sub="Renovaciones, vigencia y valor · vinculados con Ek Chuah (CRM) y Muluk (facturación)"
        action={{ label: "Nuevo contrato", icon: "plus" }} />
      <div className="grid-2" style={{ alignItems: "stretch" }}>
        {C.map(c => {
          const cl = pkClient(c.client);
          return (
            <div key={c.id} className="card" style={{ padding: 20, display: "flex", flexDirection: "column", gap: 14 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
                <Avatar name={cl.name} initials={cl.name.slice(0,2).toUpperCase()} hue={cl.hue} size={36} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <b style={{ fontSize: 14 }}>{c.name}</b>
                  <div className="mono" style={{ fontSize: 11, color: "var(--text-4)" }}>{c.id} · {cl.name}</div>
                </div>
                <Pill status={c.status} />
              </div>
              <div className="grid-2" style={{ gap: 10 }}>
                <div className="card card-2" style={{ padding: 12 }}><div className="eyebrow">Valor anual</div><div className="disp" style={{ fontSize: 19, fontWeight: 600, marginTop: 4 }}>{window.fmtK(c.value)}</div></div>
                <div className="card card-2" style={{ padding: 12 }}><div className="eyebrow">Equipos</div><div className="disp" style={{ fontSize: 19, fontWeight: 600, marginTop: 4 }}>{c.assets}</div></div>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, padding: "10px 0", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
                <div><span className="muted">Vigencia </span><span className="mono" style={{ color: "var(--text-2)" }}>{c.start} → {c.end}</span></div>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span className="feed-ic" style={{ "--c": c.status === "Por vencer" ? "var(--warn)" : "var(--ok)", width: 30, height: 30 }}><Icon name="sync" size={15} /></span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 12.5, color: "var(--text)" }}>Renovación: <span className="mono">{c.renew}</span></div>
                  <div className="muted" style={{ fontSize: 11 }}>{c.autoRenew ? "Auto-renovación activa" : "Requiere gestión manual"}</div>
                </div>
                <button className="btn btn-sm" style={{ background: c.status === "Por vencer" ? "var(--pakal)" : "", color: c.status === "Por vencer" ? "oklch(0.16 0.02 264)" : "", borderColor: c.status === "Por vencer" ? "transparent" : "" }}>{c.status === "Por vencer" ? "Renovar" : "Ver"}</button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ============================================================
//  RMA & LOGÍSTICA DE INTERCAMBIO  (doble flujo)
// ============================================================
function PkRMA({ role, clientPortal }) {
  const cases = clientPortal ? window.PK_RMA.filter(r => { const a = window.PK_ASSETS.find(x => x.tag === r.asset); return a && a.client === "helios"; }) : window.PK_RMA;
  const [sel, setSel] = useState((cases[0] || window.PK_RMA[0]).id);
  const c = (cases.find(x => x.id === sel)) || cases[0] || window.PK_RMA[0];
  return (
    <div className="canvas-in wide rise pakal">
      <PkHead role={role} title={clientPortal ? "Mis casos RMA" : "RMA & logística de intercambio"}
        sub="Casos con número de contrato y status de póliza · doble flujo: llegada del equipo nuevo + recolección del dañado"
        action={clientPortal ? null : { label: "Abrir caso RMA", icon: "plus" }} />
      <div className="grid-2" style={{ alignItems: "start", gridTemplateColumns: "minmax(0,1fr) minmax(0,1.25fr)" }}>
        {/* case list */}
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <div className="card-head"><b style={{ fontSize: 14 }}>Casos</b><span className="mono" style={{ fontSize: 11, color: "var(--text-4)" }}>{cases.length}</span></div>
          <div>
            {cases.map(r => (
              <div key={r.id} onClick={() => setSel(r.id)} className="feed-row" style={{ background: r.id === c.id ? "var(--pakal-dim)" : "", "--c": "var(--pakal)" }}>
                <span className="feed-ic" style={{ "--c": r.status === "Cerrado" ? "var(--ok)" : r.status === "Por aprobar" ? "var(--warn)" : "var(--pakal)" }}><Icon name="swap" size={15} /></span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 7 }}><span className="mono" style={{ fontSize: 12, color: "var(--text)" }}>{r.id}</span><Pill status={r.status === "En intercambio" ? "En proceso" : r.status} /></div>
                  <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>{r.part}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* case detail */}
        <div className="card" style={{ padding: 22 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6, flexWrap: "wrap" }}>
            <h3 className="disp mono" style={{ fontSize: 17 }}>{c.id}</h3>
            <Pill status={c.status === "En intercambio" ? "En proceso" : c.status} />
            <div style={{ flex: 1 }} />
            <span className="badge" style={{ background: "var(--pakal-dim)", color: "var(--pakal)" }}>Póliza {c.policy}</span>
          </div>
          <div className="muted" style={{ fontSize: 13, marginBottom: 18 }}>{c.part} · equipo <span className="mono" style={{ color: "var(--text-2)" }}>{c.asset}</span></div>

          <div className="grid-3" style={{ marginBottom: 20 }}>
            {[["Contrato", c.contract],["Fabricante", pkVendor(c.vendor).name],["SLA", c.sla]].map(([k,v]) => (
              <div key={k} className="card card-2" style={{ padding: 12 }}><div className="eyebrow">{k}</div><div style={{ fontSize: 12.5, color: "var(--text)", marginTop: 5 }}>{v}</div></div>
            ))}
          </div>

          {/* dual logistics track */}
          <Section title="Logística de intercambio" sub="El proveedor entrega el equipo nuevo y recolecta el dañado" style={{ marginBottom: 14 }} />
          <div className="pk-track" style={{ marginBottom: 22 }}>
            <div className="pk-track-card" data-dir="in">
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}><Icon name="truck" size={16} style={{ color: "var(--ok)" }} /><b style={{ fontSize: 12.5 }}>Llegada (equipo nuevo)</b></div>
              <div style={{ fontSize: 12, color: "var(--text-2)" }}>{c.inbound.carrier}</div>
              <div className="mono" style={{ fontSize: 11, color: "var(--text-4)", marginTop: 3 }}>{c.inbound.track !== "—" ? `guía ${c.inbound.track}` : "sin guía"}</div>
              <div style={{ display: "flex", justifyContent: "space-between", marginTop: 10, paddingTop: 8, borderTop: "1px solid var(--line)" }}>
                <span className="badge" style={{ background: "color-mix(in oklch, var(--ok) 16%, transparent)", color: "color-mix(in oklch, var(--ok) 80%, white)" }}>{c.inbound.step}</span>
                <span className="mono" style={{ fontSize: 11, color: "var(--text-3)" }}>{c.inbound.eta !== "—" ? c.inbound.eta : ""}</span>
              </div>
            </div>
            <div className="pk-track-card" data-dir="out">
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}><Icon name="recycle" size={16} style={{ color: "var(--warn)" }} /><b style={{ fontSize: 12.5 }}>Recolección (dañado)</b></div>
              <div style={{ fontSize: 12, color: "var(--text-2)" }}>{c.outbound.carrier !== "—" ? c.outbound.carrier : "Pendiente de programar"}</div>
              <div className="mono" style={{ fontSize: 11, color: "var(--text-4)", marginTop: 3 }}>{c.outbound.note}</div>
              <div style={{ marginTop: 10, paddingTop: 8, borderTop: "1px solid var(--line)" }}>
                <span className="badge warn dot">{c.outbound.step}</span>
              </div>
            </div>
          </div>

          {/* steps timeline */}
          <Section title="Bitácora del caso" style={{ marginBottom: 14 }} />
          <div className="pk-rma-steps">
            {c.steps.map((s, i) => (
              <div key={i} className="pk-rma-step" data-done={s.done}>
                <div className="pk-rma-node">{s.done ? <Icon name="check" size={13} /> : <span style={{ width: 6, height: 6, borderRadius: 9, background: "var(--text-4)" }} />}</div>
                {i < c.steps.length - 1 && <div className="pk-rma-line" style={{ background: s.done ? "var(--pakal)" : "var(--line-2)" }} />}
                <div className="pk-rma-body">
                  <div style={{ fontSize: 13, color: s.done ? "var(--text)" : "var(--text-3)", fontWeight: s.done ? 500 : 400 }}>{s.label}</div>
                  <div className="mono" style={{ fontSize: 10.5, color: "var(--text-4)", marginTop: 1 }}>{s.date}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ============================================================
//  POOL DE REFACCIONES
// ============================================================
function PkRefacciones({ role }) {
  const P = window.PK_PARTS;
  const byKind = {};
  P.forEach(p => { byKind[p.kind] = (byKind[p.kind] || 0) + p.qty; });
  return (
    <div className="canvas-in wide rise pakal">
      <PkHead role={role} title="Pool de refacciones"
        sub="Piezas sueltas cosechadas de equipos desmontados o spare nuevo · alimenta el matching por piezas"
        action={{ label: "Ingresar pieza", icon: "plus" }} />
      <div className="grid-4" style={{ marginBottom: 14 }}>
        {Object.entries(byKind).slice(0,4).map(([k,n]) => (
          <Stat key={k} icon={PK_COMP_ICON[k] || "boxes"} label={k} value={n} hue="var(--pakal)" sub="piezas en pool" />
        ))}
      </div>
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div className="card-head"><b style={{ fontSize: 14 }}>Inventario de piezas</b><input className="field" placeholder="Buscar pieza…" style={{ width: 200, height: 32 }} /></div>
        <table className="tbl">
          <thead><tr><th>ID</th><th>Tipo</th><th>Descripción</th><th>Cant.</th><th>Origen</th><th>Estado</th><th>Ubicación</th></tr></thead>
          <tbody>
            {P.map((p, i) => (
              <tr key={i}>
                <td className="mono" style={{ fontSize: 11.5, color: "var(--text)" }}>{p.id}</td>
                <td><span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}><span className="pk-comp-ic" style={{ width: 26, height: 26 }}><Icon name={PK_COMP_ICON[p.kind] || "boxes"} size={13} /></span>{p.kind}</span></td>
                <td style={{ color: "var(--text)" }}>{p.desc}</td>
                <td className="mono" style={{ fontSize: 13, color: "var(--text)" }}>×{p.qty}</td>
                <td className="mono" style={{ fontSize: 11.5, color: "var(--text-3)" }}>{p.from}</td>
                <td><span className="badge" style={p.state.includes("Nueva") ? { background: "color-mix(in oklch, var(--ok) 16%, transparent)", color: "color-mix(in oklch, var(--ok) 80%, white)" } : { background: "var(--pakal-dim)", color: "var(--pakal)" }}>{p.state}</span></td>
                <td className="mono" style={{ fontSize: 11, color: "var(--text-3)" }}>{p.loc}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ============================================================
//  MATCHING / DISPONIBILIDAD
// ============================================================
const PK_PRESETS = [
  { id: "nodo", label: "Nodo cómputo · 2 CPU · 512GB · 2 PSU", cpu: 2, ram: 512, nvme: 0, psu: 2 },
  { id: "storage", label: "Storage · 30 TB NVMe", cpu: 0, ram: 0, nvme: 30, psu: 0 },
  { id: "virt", label: "Virtualización · 32 cores · 256GB", cpu: 2, ram: 256, nvme: 0, psu: 2 },
];

function PkMatching({ role }) {
  const nav = useNav();
  const [preset, setPreset] = useState("nodo");
  const req = PK_PRESETS.find(p => p.id === preset);

  // whole-unit candidates: disponibles que cumplen
  const whole = window.PK_ASSETS.filter(a => (a.state === "Bodega") &&
    (req.ram === 0 || a.ramGB >= req.ram) && (req.nvme === 0 || a.disksTB >= req.nvme)
  ).map(a => ({ a, score: 1 }));

  // parts-based: from pool
  const parts = window.PK_PARTS;
  const partCover = [];
  if (req.cpu) { const p = parts.find(x => x.kind === "CPU"); if (p) partCover.push({ need: `${req.cpu}× CPU`, p }); }
  if (req.ram) { const p = parts.find(x => x.kind === "RAM"); if (p) partCover.push({ need: `${req.ram} GB RAM`, p }); }
  if (req.nvme) { const p = parts.find(x => x.kind === "Disco"); if (p) partCover.push({ need: `${req.nvme} TB NVMe`, p }); }
  if (req.psu) { const p = parts.find(x => x.kind === "Fuente"); if (p) partCover.push({ need: `${req.psu}× Fuente`, p }); }

  return (
    <div className="canvas-in wide rise pakal">
      <PkHead role={role} title="Buscador de disponibilidad"
        sub="Define un requerimiento y encuentra equipo completo disponible — o ármalo con piezas del pool"
        right={<button className="btn btn-sm" onClick={() => nav.openApp("pakal", "copilot")}><Icon name="sparkle" size={14} /> Preguntar al Copilot</button>} />

      {/* requirement builder */}
      <div className="card" style={{ padding: 18, marginBottom: 16 }}>
        <Section title="Requerimiento" sub="Plantillas rápidas o ajusta los parámetros" style={{ marginBottom: 14 }} />
        <div style={{ display: "flex", gap: 9, flexWrap: "wrap", marginBottom: 14 }}>
          {PK_PRESETS.map(p => (
            <button key={p.id} className="chip" data-on={preset === p.id} onClick={() => setPreset(p.id)}
              style={{ cursor: "pointer", height: 34, background: preset === p.id ? "var(--pakal)" : "var(--surface-2)", color: preset === p.id ? "oklch(0.16 0.02 264)" : "var(--text-2)", borderColor: "transparent", fontFamily: "var(--ui)" }}>{p.label}</button>
          ))}
        </div>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          {req.cpu > 0 && <span className="pk-reqchip"><Icon name="chipx" size={13} /> {req.cpu}× CPU</span>}
          {req.ram > 0 && <span className="pk-reqchip"><Icon name="ram" size={13} /> {req.ram} GB RAM</span>}
          {req.nvme > 0 && <span className="pk-reqchip"><Icon name="disk" size={13} /> {req.nvme} TB NVMe</span>}
          {req.psu > 0 && <span className="pk-reqchip"><Icon name="plug" size={13} /> {req.psu}× Fuente</span>}
        </div>
      </div>

      {/* whole units */}
      <Section title="Equipos completos disponibles" sub={`${whole.length} unidad(es) cumplen el requerimiento`} style={{ marginBottom: 14 }} />
      {whole.length ? (
        <div className="grid-2" style={{ marginBottom: 24 }}>
          {whole.map(({ a }) => (
            <div key={a.tag} className="pk-cand" data-kind="whole">
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 10, marginBottom: 10 }}>
                <div style={{ minWidth: 0, lineHeight: 1.3 }}><b style={{ fontSize: 14 }}>{a.name}</b><div className="mono" style={{ fontSize: 11, color: "var(--text-4)", marginTop: 3 }}>{a.tag}</div></div>
                <span className="badge" style={{ flex: "none", background: "color-mix(in oklch, var(--ok) 16%, transparent)", color: "color-mix(in oklch, var(--ok) 80%, white)" }}><Icon name="check" size={11} /> 100% match</span>
              </div>
              <div className="mono" style={{ fontSize: 11.5, color: "var(--text-3)", marginBottom: 10 }}>{a.cpu} · {a.ram} · {a.disks}</div>
              <div style={{ display: "flex", alignItems: "center", gap: 8, paddingTop: 10, borderTop: "1px solid var(--line)" }}>
                <Icon name="pin" size={14} style={{ color: "var(--pakal)" }} />
                <span style={{ flex: 1, fontSize: 12, color: "var(--text-2)" }}>{pkSite(a.site).name} · {a.rack}</span>
                <button className="btn btn-sm btn-primary" style={{ background: "var(--pakal)" }}>Reservar</button>
              </div>
            </div>
          ))}
        </div>
      ) : <div className="card" style={{ padding: 18, marginBottom: 24, color: "var(--text-3)", fontSize: 13 }}>No hay una unidad entera disponible — revisa la opción por piezas abajo.</div>}

      {/* parts based */}
      <Section title="Armar con piezas del pool" sub="Cuando no hay unidad entera, estas piezas cubren el requerimiento" style={{ marginBottom: 14 }} />
      <div className="card" style={{ padding: 18 }}>
        {partCover.length ? (
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {partCover.map((pc, i) => (
              <div key={i} className="pk-cand" data-kind="parts" style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <span className="pk-comp-ic" style={{ width: 38, height: 38 }}><Icon name={PK_COMP_ICON[pc.p.kind] || "boxes"} size={18} /></span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, color: "var(--text)" }}>{pc.need} → <b>{pc.p.desc}</b></div>
                  <div className="mono" style={{ fontSize: 11, color: "var(--text-4)", marginTop: 2 }}>{pc.p.id} · ×{pc.p.qty} disponibles · {pc.p.loc}</div>
                </div>
                <span className="badge" style={{ background: "var(--pakal-dim)", color: "var(--pakal)" }}>cubre</span>
              </div>
            ))}
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 6, paddingTop: 14, borderTop: "1px solid var(--line)" }}>
              <Icon name="boxes" size={16} style={{ color: "var(--pakal)" }} />
              <span style={{ flex: 1, fontSize: 12.5, color: "var(--text-2)" }}>Las piezas listadas permiten ensamblar el requerimiento sin comprar equipo nuevo.</span>
              <button className="btn btn-sm">Crear orden de ensamble</button>
            </div>
          </div>
        ) : <div style={{ color: "var(--text-3)", fontSize: 13 }}>El pool no cubre este requerimiento por piezas.</div>}
      </div>
    </div>
  );
}

// ============================================================
//  CICLO DE VIDA
// ============================================================
function PkCiclo({ role }) {
  const L = window.PK_LIFE;
  return (
    <div className="canvas-in wide rise pakal">
      <PkHead role={role} title="Ciclo de vida"
        sub="Trazabilidad de cada servidor: de adquisición a retiro · tiempo restante de póliza · cierre con Manik" />
      <div className="card" style={{ padding: 26, marginBottom: 16 }}>
        <Section title="Etapas del parque" sub="Distribución actual de activos por fase del ciclo" style={{ marginBottom: 26 }} />
        <div className="pk-life">
          {L.map((s, i) => (
            <div key={i} className="pk-life-stage">
              <div className="pk-life-line" style={{ background: i < L.length - 1 ? "var(--line-2)" : "transparent" }} />
              <div className="pk-life-dot" style={{ background: `color-mix(in oklch, ${s.hue} 16%, var(--surface-2))`, borderColor: `color-mix(in oklch, ${s.hue} 40%, var(--line-2))`, position: "relative", zIndex: 1 }}>
                <Icon name={s.icon} size={20} style={{ color: s.hue }} />
              </div>
              <div className="disp" style={{ fontSize: 22, fontWeight: 600, color: s.hue }}>{s.n}</div>
              <div style={{ fontSize: 12, color: "var(--text-2)", marginTop: 3 }}>{s.stage}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div className="card-head"><b style={{ fontSize: 14 }}>Tiempo restante de cobertura</b><span className="mono" style={{ fontSize: 11, color: "var(--text-4)" }}>orden por urgencia</span></div>
        <table className="tbl">
          <thead><tr><th>Equipo</th><th>Cliente</th><th>Etapa</th><th>Vence póliza</th><th>Fin de vida</th><th>Acción</th></tr></thead>
          <tbody>
            {window.PK_ASSETS.slice().sort((a,b) => a.warranty.end.localeCompare(b.warranty.end)).map((a, i) => {
              const stage = a.state === "Producción" ? "Producción" : a.state === "Bodega" || a.state === "Reservado" ? "Almacén" : "Retiro";
              const retiro = a.state === "Retiro" || a.state === "Desmontado";
              return (
                <tr key={i}>
                  <td><span className="mono" style={{ fontSize: 11.5, color: "var(--text)" }}>{a.tag}</span><div className="muted" style={{ fontSize: 11 }}>{a.name}</div></td>
                  <td>{pkClient(a.client).name}</td>
                  <td><span className="badge">{stage}</span></td>
                  <td className="mono" style={{ fontSize: 12 }}>{a.warranty.end}</td>
                  <td className="mono" style={{ fontSize: 12, color: "var(--text-3)" }}>{a.eol}</td>
                  <td>{retiro ? <span className="pk-sync"><Icon name="recycle" size={11} /> a Manik</span> : a.warranty.status === "Por vencer" ? <span className="badge warn dot">renovar</span> : <span className="badge ok dot">vigente</span>}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ============================================================
//  CAPTURA EN CAMPO  (operaciones DC)
// ============================================================
function PkCampo({ role }) {
  const [serial, setSerial] = useState("");
  return (
    <div className="canvas-in rise pakal">
      <PkHead role={role} title="Captura en campo"
        sub="Registra o mueve equipo físicamente: escanea, ubica en rack y adjunta evidencia" />
      <div className="grid-2" style={{ alignItems: "start", marginBottom: 14 }}>
        <div className="card" style={{ padding: 22 }}>
          <div className="eyebrow">1 · Identificar equipo</div>
          <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
            <input className="field mono" placeholder="NÚMERO DE SERIE / TAG" value={serial} onChange={e => setSerial(e.target.value)} />
            <button className="btn btn-primary" style={{ background: "var(--pakal)" }}>Buscar</button>
          </div>
          <button className="scan-btn" style={{ marginTop: 12 }}><Icon name="qr" size={18} /> Escanear código QR / barras</button>
          <p className="muted" style={{ fontSize: 12, marginTop: 12, textAlign: "center" }}>Apunta la cámara a la etiqueta del activo.</p>
        </div>
        <div className="card" style={{ padding: 22 }}>
          <div className="eyebrow">2 · Ubicar</div>
          <label className="lbl" style={{ marginTop: 12 }}>Sitio</label>
          <select className="field">{window.PK_SITES.map(s => <option key={s.id}>{s.name}</option>)}</select>
          <div className="grid-2" style={{ marginTop: 10 }}>
            <div><label className="lbl" style={{ marginTop: 0 }}>Jaula</label><input className="field" defaultValue="Jaula A3" /></div>
            <div><label className="lbl" style={{ marginTop: 0 }}>Rack</label><input className="field" defaultValue="RK-A3-07" /></div>
          </div>
          <div className="grid-2" style={{ marginTop: 10 }}>
            <div><label className="lbl" style={{ marginTop: 0 }}>Nivel (U)</label><input className="field mono" defaultValue="18" /></div>
            <div><label className="lbl" style={{ marginTop: 0 }}>Estado</label><select className="field"><option>Producción</option><option>Bodega</option><option>Retiro</option></select></div>
          </div>
        </div>
      </div>
      <div className="card" style={{ padding: 22 }}>
        <div className="eyebrow" style={{ marginBottom: 10 }}>3 · Evidencia fotográfica</div>
        <div className="pk-photos" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
          {["Frontal","Trasera","Etiqueta","Rack"].map((p, i) => (
            <div key={i} className="pk-photo"><image-slot id={`pk-campo-${i}`} shape="rect" placeholder={p}></image-slot></div>
          ))}
        </div>
        <button className="btn btn-primary" style={{ background: "var(--pakal)", width: "100%", justifyContent: "center", marginTop: 16, height: 44 }}><Icon name="check" size={16} /> Guardar registro físico</button>
      </div>
    </div>
  );
}

// ============================================================
//  PAKAL COPILOT (IA en vivo)
// ============================================================
const PK_SYS = `Eres Pakal Copilot, asistente de inventario y ciclo de vida de hardware de datacenter (plataforma Pakal, ecosistema Sympho). Respondes en español, claro y conciso (máx ~150 palabras), como un ingeniero de infraestructura senior. Usa exclusivamente el contexto del parque que se te entrega abajo. Cita la fuente entre paréntesis al final cuando aplique, p. ej. (fuente: parque · PK-SRV-0512).\n\n`;

function pkRich(text) {
  return String(text).split(/(\*\*[^*]+\*\*)/g).map((seg, i) =>
    seg.startsWith("**") && seg.endsWith("**")
      ? <b key={i} style={{ color: "var(--text)", fontWeight: 600 }}>{seg.slice(2, -2)}</b>
      : <React.Fragment key={i}>{seg}</React.Fragment>
  );
}

function PkCopilot({ role }) {
  const [msgs, setMsgs] = useState([
    { role: "ai", text: `Hola. Soy Pakal Copilot. Tengo el inventario completo del parque: ${window.PK_STATS.total} activos entre producción, almacén y desmontados, con sus componentes, ubicación exacta, garantías y el pool de refacciones. Pregúntame qué equipo o piezas tienes disponibles para un requerimiento, dónde está algo, o qué pólizas están por vencer.`, cite: "Inventario Pakal · datos en vivo" },
  ]);
  const [input, setInput] = useState("");
  const [busy, setBusy] = useState(false);
  const scrollRef = useRef(null);
  useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [msgs, busy]);

  const send = async (text) => {
    const q = (text != null ? text : input).trim();
    if (!q || busy) return;
    setInput("");
    const history = [...msgs, { role: "user", text: q }];
    setMsgs(history);
    setBusy(true);
    try {
      const apiMessages = [
        { role: "user", content: PK_SYS + window.PK_KB + "\n\n(A partir de aquí inicia la conversación con el usuario.)" },
        { role: "assistant", content: "Contexto del parque cargado. Listo para responder sobre equipos, piezas, ubicaciones, garantías y RMA." },
        ...history.map(m => ({ role: m.role === "ai" ? "assistant" : "user", content: m.text })),
      ];
      const reply = await window.claude.complete({ messages: apiMessages });
      setMsgs(m => [...m, { role: "ai", text: (reply || "").trim() || "No pude generar una respuesta. Reformula la pregunta." }]);
    } catch (e) {
      setMsgs(m => [...m, { role: "ai", text: "Hubo un problema al consultar el modelo. Verifica la conexión e intenta de nuevo. Mientras tanto, el buscador de disponibilidad tiene los equipos y piezas en la pestaña correspondiente." }]);
    }
    setBusy(false);
  };
  const onKey = (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } };

  return (
    <div className="canvas-in wide rise pakal" style={{ display: "flex", flexDirection: "column", minHeight: 0 }}>
      <PkHead role={role} title="Pakal Copilot" sub="Pregunta en lenguaje natural · responde con equipos disponibles, piezas cosechables y su ubicación exacta"
        right={<span className="badge" style={{ background: "var(--pakal-dim)", color: "var(--pakal)" }}><Icon name="sparkle" size={12} /> IA en vivo</span>} />
      <div className="grid-2" style={{ alignItems: "stretch", gridTemplateColumns: "minmax(0,1.5fr) minmax(0,1fr)", gap: 16 }}>
        {/* chat */}
        <div className="card" style={{ padding: 18, display: "flex", flexDirection: "column", height: "min(640px, 72vh)" }}>
          <div className="pk-chat">
            <div className="pk-chat-scroll" ref={scrollRef}>
              {msgs.map((m, i) => (
                <div key={i} className="pk-msg" data-role={m.role}>
                  <span className="pk-msg-av" data-role={m.role}><Icon name={m.role === "ai" ? "sparkle" : "users"} size={15} /></span>
                  <div>
                    <div className="pk-bubble">{pkRich(m.text)}</div>
                    {m.cite && <div className="pk-cite"><Icon name="link" size={12} /> {m.cite}</div>}
                  </div>
                </div>
              ))}
              {busy && (
                <div className="pk-msg" data-role="ai">
                  <span className="pk-msg-av" data-role="ai"><Icon name="sparkle" size={15} /></span>
                  <div className="pk-bubble thinking"><span className="pk-typing"><i /><i /><i /></span></div>
                </div>
              )}
            </div>
            {msgs.length <= 1 && (
              <div style={{ padding: "10px 2px" }}>
                <div className="eyebrow" style={{ marginBottom: 8 }}>Preguntas sugeridas</div>
                <div className="pk-chips">
                  {window.PK_QUESTIONS.map((q, i) => <button key={i} className="pk-chip-q" onClick={() => send(q)}>{q}</button>)}
                </div>
              </div>
            )}
            <div className="pk-composer">
              <textarea value={input} onChange={e => setInput(e.target.value)} onKeyDown={onKey} rows={1}
                placeholder="¿Qué equipo o piezas tienes para…?" disabled={busy} />
              <button className="pk-send" onClick={() => send()} disabled={busy || !input.trim()}><Icon name="send" size={18} /></button>
            </div>
          </div>
        </div>

        {/* side: quick availability */}
        <div style={{ display: "flex", flexDirection: "column", gap: 14, minWidth: 0 }}>
          <div className="card" style={{ padding: 18 }}>
            <Section title="Disponible ahora" sub="Equipos completos en bodega" style={{ marginBottom: 12 }} />
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {window.PK_ASSETS.filter(a => a.state === "Bodega").map(a => (
                <div key={a.tag} style={{ padding: 12, borderRadius: 10, background: "var(--bg-2)", border: "1px solid var(--line)" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", gap: 8, lineHeight: 1.3 }}><b style={{ fontSize: 12.5, minWidth: 0 }}>{a.name}</b><span className="mono" style={{ fontSize: 10.5, color: "var(--pakal)", flex: "none" }}>{a.tag}</span></div>
                  <div className="mono" style={{ fontSize: 10.5, color: "var(--text-4)", marginTop: 4 }}>{a.ramGB} GB · {a.cores} cores · {pkSite(a.site).code}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="card" style={{ padding: 18 }}>
            <Section title="Pool de refacciones" sub="Para armar por piezas" style={{ marginBottom: 12 }} />
            <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
              {window.PK_PARTS.slice(0,5).map(p => (
                <div key={p.id} style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 12 }}>
                  <span className="pk-comp-ic" style={{ width: 26, height: 26 }}><Icon name={PK_COMP_ICON[p.kind] || "boxes"} size={13} /></span>
                  <span style={{ flex: 1, color: "var(--text-2)" }}>{p.desc}</span>
                  <span className="mono" style={{ color: "var(--text)" }}>×{p.qty}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PkGarantias, PkContratos, PkRMA, PkRefacciones, PkMatching, PkCiclo, PkCampo, PkCopilot });