/* ============================================================
   SYMPHO — application bodies
   Ek Chuah (CRM) · Muluk (Facturación) · Manik (Custodia)
   Pakal (Inventario) · Zamná (Proyectos, soon)
   ============================================================ */

// status pill helper
function Pill({ status }) {
  const map = {
    "Timbrada": "ok", "En uso": "ok", "Activa": "ok", "Ganado": "ok", "Completado": "ok",
    "Activo": "ok", "Correcto": "ok",
    "Disponible": "ok", "Confirmada": "ok", "Liberado": "ok", "Recibida": "ok",
    "Vigente": "ok", "Aprobado": "ok", "Pagado": "ok", "Al corriente": "ok",
    "Borrador": "warn", "En proceso": "warn", "Por vencer": "warn", "Negociación": "warn", "Retiro": "warn",
    "Pausado": "warn", "Reservado": "warn", "Por aprobar": "warn", "En aduana": "warn",
    "En revisión": "warn", "Enviado": "warn", "Abierto": "warn",
    "Cancelada": "bad", "Perdido": "bad", "Error": "bad", "Fallido": "bad",
    "Fuera de garantía": "bad", "Rechazado": "bad", "Mora": "bad",
    "Pendiente": "", "Bodega": "", "Nuevo": "", "Contactado": "",
    "En tránsito": "", "Asignado": "", "Vendido": "", "Facturada": "", "Despachada": "",
    "Producción": "", "Embarcado": "",
    "Verificada": "ok", "Completada": "ok", "Generada": "warn", "Impresa": "",
    "Sin timbrar": "bad",
  };
  return <span className={"badge " + (map[status] || "") + (map[status] ? " dot" : "")}>{status}</span>;
}

// ============================================================
//  EK CHUAH — CRM
// ============================================================
function EkApp({ sub }) {
  if (sub === "pipeline") return <EkPipeline />;
  if (sub === "contacts") return <EkContacts />;
  if (sub === "companies") return <EkContacts companies />;
  if (sub === "reports") return <EkReports />;
  if (sub === "segments") return <EkContacts segments />;
  return <EkDash />;
}

function EkDash() {
  const d = window.EK;
  return (
    <div className="canvas-in rise">
      <AppHead app="ek" title="Dashboard" sub="Pipeline activo y pronóstico del trimestre · 1 abr – 30 jun 2026" />
      <div className="grid-4" style={{ marginBottom: 14 }}>
        <Stat icon="contacts" label="Total contactos" value={d.stats.contacts} hue="var(--ek)" trend={6} />
        <Stat icon="check" label="Deals ganados" value={d.stats.won} hue="var(--ek)" trend={12} />
        <Stat icon="dollar" label="Pipeline activo" value={window.fmtK(d.stats.pipelineValue)} hue="var(--ek)" sub="ponderado " trend={4} />
        <Stat icon="target" label="Tasa de conversión" value={d.stats.conv + "%"} hue="var(--ek)" trend={-2} />
      </div>
      <div className="grid-2" style={{ alignItems: "start", marginBottom: 14 }}>
        <div className="card" style={{ padding: 20 }}>
          <Section title="Funnel por etapa" style={{ marginBottom: 18 }} />
          <div style={{ display: "flex", gap: 24, alignItems: "center" }}>
            <Donut segments={d.funnel} size={140} thickness={16}
              center={<><div className="disp" style={{ fontSize: 24, fontWeight: 600 }}>{d.funnel.reduce((s,x)=>s+x.n,0)}</div><div className="mono" style={{ fontSize: 10, color: "var(--text-4)" }}>deals</div></>} />
            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 9 }}>
              {d.funnel.map(f => (
                <div key={f.stage} style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 12.5 }}>
                  <span className="dot" style={{ background: f.hue }} />
                  <span style={{ flex: 1, color: "var(--text-2)" }}>{f.stage}</span>
                  <span className="mono" style={{ color: "var(--text)" }}>{f.n}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="card" style={{ padding: 20 }}>
          <Section title="Forecast del trimestre" right={<span className="badge">Q2 2026</span>} style={{ marginBottom: 16 }} />
          <div style={{ display: "flex", gap: 28 }}>
            <div><div className="disp" style={{ fontSize: 30, fontWeight: 600 }}>{window.fmtK(d.stats.weighted)}</div><div className="muted" style={{ fontSize: 12, marginTop: 4 }}>Valor esperado</div></div>
            <div><div className="disp" style={{ fontSize: 30, fontWeight: 600 }}>{d.stats.won + 5}</div><div className="muted" style={{ fontSize: 12, marginTop: 4 }}>Deals en forecast</div></div>
          </div>
          <div style={{ marginTop: 20 }}><Spark data={[8,12,9,16,14,22,19,26,24,31,28,34]} hue="var(--ek)" w={460} h={70} /></div>
          <div className="mono" style={{ fontSize: 10.5, color: "var(--text-4)", marginTop: 6 }}>cierres acumulados · últimos 12 periodos</div>
        </div>
      </div>
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div className="card-head"><b style={{ fontSize: 14 }}>Deals activos</b><button className="btn btn-ghost btn-sm">Ver pipeline <Icon name="arrowr" size={13} /></button></div>
        <table className="tbl">
          <thead><tr><th>Deal</th><th>Empresa</th><th>Etapa</th><th>Banda</th><th>Responsable</th><th style={{textAlign:"right"}}>Valor</th></tr></thead>
          <tbody>
            {d.deals.map((x, i) => (
              <tr key={i}>
                <td style={{ color: "var(--text)", fontWeight: 500 }}>{x.name}</td>
                <td>{x.company}</td><td><Pill status={x.stage} /></td>
                <td><span className="chip" style={{ height: 22, fontSize: 11 }}>{x.band}</span></td>
                <td><Avatar name={x.owner} initials={x.owner} hue="var(--ek)" size={24} /></td>
                <td className="num">{window.fmtMoney(x.value)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function EkPipeline() {
  const stages = ["Nuevo", "Contactado", "Propuesta", "Negociación"];
  const d = window.EK;
  const hues = { "Nuevo": "var(--pakal)", "Contactado": "var(--sympho)", "Propuesta": "var(--muluk)", "Negociación": "var(--zamna)" };
  const byStage = (s) => d.deals.filter(x => x.stage === s);
  return (
    <div className="canvas-in wide rise">
      <AppHead app="ek" title="Pipeline" sub="Arrastra deals entre etapas · banda A/B/C por probabilidad de cierre" />
      <div className="kanban">
        {stages.map(s => {
          const items = byStage(s);
          const sum = items.reduce((a, x) => a + x.value, 0);
          return (
            <div key={s} className="kan-col">
              <div className="kan-head">
                <span className="chip" style={{ height: 24, fontSize: 11.5, color: hues[s], borderColor: `color-mix(in oklch, ${hues[s]} 35%, transparent)` }}>{s}</span>
                <span className="mono" style={{ fontSize: 11, color: "var(--text-4)" }}>{items.length}</span>
              </div>
              <div className="mono" style={{ fontSize: 11, color: "var(--text-3)", padding: "0 2px 10px" }}>{window.fmtK(sum)}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                {items.map((x, i) => (
                  <div key={i} className="kan-card">
                    <div style={{ display: "flex", justifyContent: "space-between", gap: 8 }}>
                      <b style={{ fontSize: 13 }}>{x.name}</b>
                      <span className="chip" style={{ height: 20, fontSize: 10, flex: "none" }}>{x.band}</span>
                    </div>
                    <div className="muted" style={{ fontSize: 12, marginTop: 6 }}>{x.company}</div>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 12 }}>
                      <span className="mono" style={{ fontSize: 12.5, color: "var(--text)" }}>{window.fmtMoney(x.value)}</span>
                      <Avatar name={x.owner} initials={x.owner} hue="var(--ek)" size={22} />
                    </div>
                  </div>
                ))}
                <button className="kan-add"><Icon name="plus" size={14} /> Agregar deal</button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function EkContacts({ companies, segments }) {
  const d = window.EK;
  const title = companies ? "Empresas" : segments ? "Segmentación" : "Contactos";
  return (
    <div className="canvas-in rise">
      <AppHead app="ek" title={title} sub={segments ? "Filtra por sector, estado y banda · guarda segmentos y exporta CSV" : "Base de contactos sincronizada con el pipeline"}
        action={segments ? { label: "Exportar CSV", icon: "download" } : { label: companies ? "Nueva empresa" : "Nuevo contacto", icon: "plus", primary: true }} />
      {segments && (
        <div className="card" style={{ padding: 16, marginBottom: 14, display: "flex", gap: 12, flexWrap: "wrap" }}>
          {["Sector", "Estado", "Etiqueta", "Banda de deal"].map(f => (
            <div key={f} style={{ flex: 1, minWidth: 150 }}>
              <label className="lbl" style={{ marginTop: 0 }}>{f}</label>
              <select className="field"><option>Todos</option></select>
            </div>
          ))}
        </div>
      )}
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <table className="tbl">
          <thead><tr><th>{companies ? "Empresa" : "Nombre"}</th>{!companies && <th>Empresa</th>}<th>Email</th><th>Sector</th><th>Estado</th><th>Banda</th></tr></thead>
          <tbody>
            {d.contacts.map((c, i) => (
              <tr key={i}>
                <td style={{ color: "var(--text)", fontWeight: 500 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <Avatar name={c.name} initials={c.name.split(" ").map(w=>w[0]).slice(0,2).join("")} hue="var(--ek)" size={28} />
                    {companies ? c.company : c.name}
                  </div>
                </td>
                {!companies && <td>{c.company}</td>}
                <td className="mono" style={{ fontSize: 12 }}>{c.email}</td>
                <td>{c.sector}</td><td><Pill status={c.state} /></td>
                <td><span className="chip" style={{ height: 22, fontSize: 11 }}>{c.band}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function EkReports() {
  const d = window.EK;
  const max = Math.max(...d.funnel.map(f => f.n));
  return (
    <div className="canvas-in rise">
      <AppHead app="ek" title="Reportes" sub="Conversión y rendimiento del funnel" />
      <div className="grid-4" style={{ marginBottom: 14 }}>
        <Stat icon="funnel" label="Deals en pipeline" value={d.funnel.slice(0,4).reduce((s,f)=>s+f.n,0)} hue="var(--ek)" />
        <Stat icon="check" label="Deals ganados" value={d.stats.won} hue="var(--ek)" />
        <Stat icon="target" label="Tasa de conversión" value={d.stats.conv + "%"} hue="var(--ek)" />
        <Stat icon="dollar" label="Valor ganado" value={window.fmtK(2310000)} hue="var(--ek)" />
      </div>
      <div className="card" style={{ padding: 22 }}>
        <Section title="Funnel por etapa" style={{ marginBottom: 20 }} />
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {d.funnel.map(f => (
            <div key={f.stage} style={{ display: "flex", alignItems: "center", gap: 14 }}>
              <span style={{ width: 100, fontSize: 13, color: "var(--text-2)" }}>{f.stage}</span>
              <div className="bar" style={{ flex: 1, height: 22, borderRadius: 6 }}><i style={{ width: (f.n / max * 100) + "%", background: f.hue, borderRadius: 6 }} /></div>
              <span className="mono" style={{ width: 36, textAlign: "right", fontSize: 13, color: "var(--text)" }}>{f.n}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============================================================
//  MULUK — Facturación (CFDI)
// ============================================================
function MulukApp({ sub }) {
  if (sub === "invoices") return <MulukInvoices />;
  if (sub === "new") return <MulukNew />;
  if (sub === "series") return <MulukSeries />;
  if (sub === "receivers") return <MulukInvoices receivers />;
  if (sub === "keys") return <MulukKeys />;
  return <MulukDash />;
}

function MulukDash() {
  const d = window.MULUK;
  return (
    <div className="canvas-in rise">
      <AppHead app="muluk" title="Dashboard" sub="Timbrado CFDI 4.0 · junio de 2026" action={{ label: "Nueva factura", icon: "plus", primary: true }} />
      <div className="grid-4" style={{ marginBottom: 14 }}>
        <Stat icon="receipt" label="Timbradas este mes" value={d.stats.timbradas} hue="var(--muluk)" trend={9} />
        <Stat icon="dollar" label="Monto timbrado" value={window.fmtK(d.stats.monto)} hue="var(--muluk)" trend={14} />
        <Stat icon="ext" label="Canceladas" value={d.stats.canceladas} hue="var(--muluk)" />
        <Stat icon="doc" label="Borradores" value={d.stats.borradores} hue="var(--muluk)" />
      </div>
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div className="card-head"><b style={{ fontSize: 14 }}>Últimas facturas</b><button className="btn btn-ghost btn-sm">Ver todas <Icon name="arrowr" size={13} /></button></div>
        <InvoiceTable rows={d.invoices} />
      </div>
    </div>
  );
}

function MulukInvoices({ receivers }) {
  const d = window.MULUK;
  return (
    <div className="canvas-in rise">
      <AppHead app="muluk" title={receivers ? "Receptores" : "Facturas"} sub={receivers ? "Clientes con RFC registrado para timbrado" : `${d.invoices.length} comprobantes`} action={{ label: receivers ? "Nuevo receptor" : "Nueva factura", icon: "plus", primary: true }} />
      <div className="card" style={{ padding: 14, marginBottom: 14, display: "flex", gap: 10, alignItems: "center" }}>
        <select className="field" style={{ width: 180 }}><option>Todos los estados</option><option>Timbrada</option><option>Borrador</option><option>Cancelada</option></select>
        <span className="mono" style={{ fontSize: 12, color: "var(--text-4)" }}>{d.invoices.length} resultados</span>
        <div style={{ flex: 1 }} />
        <button className="btn btn-sm"><Icon name="download" size={14} /> Exportar</button>
      </div>
      <div className="card" style={{ padding: 0, overflow: "hidden" }}><InvoiceTable rows={d.invoices} /></div>
    </div>
  );
}

function InvoiceTable({ rows }) {
  return (
    <table className="tbl">
      <thead><tr><th>Folio</th><th>Receptor</th><th>RFC</th><th>Estado</th><th>Fecha</th><th style={{textAlign:"right"}}>Total</th></tr></thead>
      <tbody>
        {rows.map((x, i) => (
          <tr key={i}>
            <td className="mono" style={{ color: "var(--text)" }}>{x.folio}</td>
            <td style={{ color: "var(--text)", fontWeight: 500 }}>{x.receiver}</td>
            <td className="mono" style={{ fontSize: 12 }}>{x.rfc}</td>
            <td><Pill status={x.status} /></td>
            <td className="mono" style={{ fontSize: 12 }}>{x.date}</td>
            <td className="num">{window.fmtMoney(x.total)}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function MulukNew() {
  return (
    <div className="canvas-in rise">
      <AppHead app="muluk" title="Nueva factura" sub="Genera un CFDI 4.0 y tímbralo ante el SAT" />
      <div className="grid-2" style={{ alignItems: "start" }}>
        <div className="card" style={{ padding: 22 }}>
          <Section title="Datos del comprobante" style={{ marginBottom: 16 }} />
          <label className="lbl" style={{marginTop:0}}>Receptor</label>
          <select className="field"><option>KIO Networks S.A. — KNE0903127H8</option><option>Natura Cosméticos — NCO120401PQ4</option></select>
          <div className="grid-2" style={{ marginTop: 12 }}>
            <div><label className="lbl" style={{marginTop:0}}>Serie</label><select className="field"><option>LXA</option><option>LXB</option></select></div>
            <div><label className="lbl" style={{marginTop:0}}>Uso CFDI</label><select className="field"><option>G03 — Gastos en general</option></select></div>
          </div>
          <label className="lbl">Concepto</label>
          <input className="field" defaultValue="Servicio de retiro y custodia de activos IT" />
          <div className="grid-2" style={{ marginTop: 12 }}>
            <div><label className="lbl" style={{marginTop:0}}>Subtotal</label><input className="field mono" defaultValue="$480,000.00" /></div>
            <div><label className="lbl" style={{marginTop:0}}>IVA 16%</label><input className="field mono" defaultValue="$76,800.00" /></div>
          </div>
        </div>
        <div className="card" style={{ padding: 22, position: "sticky", top: 0 }}>
          <Section title="Resumen" style={{ marginBottom: 16 }} />
          {[["Subtotal","$480,000.00"],["IVA 16%","$76,800.00"]].map(([k,v])=>(
            <div key={k} style={{ display: "flex", justifyContent: "space-between", padding: "9px 0", fontSize: 13 }}>
              <span className="muted">{k}</span><span className="mono" style={{ color: "var(--text)" }}>{v}</span>
            </div>
          ))}
          <div style={{ display: "flex", justifyContent: "space-between", padding: "14px 0", borderTop: "1px solid var(--line)", marginTop: 6 }}>
            <b>Total</b><span className="disp" style={{ fontSize: 22, fontWeight: 600 }}>$556,800.00</span>
          </div>
          <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center", height: 44, marginTop: 12 }}><Icon name="check" size={16} /> Timbrar ante el SAT</button>
          <button className="btn" style={{ width: "100%", justifyContent: "center", marginTop: 8 }}>Guardar borrador</button>
        </div>
      </div>
    </div>
  );
}

function MulukSeries() {
  const d = window.MULUK;
  return (
    <div className="canvas-in rise">
      <AppHead app="muluk" title="Series" sub="Folios y series de emisión por razón social" action={{ label: "Nueva serie", icon: "plus", primary: true }} />
      <div className="grid-2">
        {d.series.map((s, i) => (
          <div key={i} className="card" style={{ padding: 20 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span className="glyph" style={{ width: 40, height: 40, fontSize: 16, background: "var(--muluk-dim)", color: "var(--muluk)", fontFamily: "var(--mono)" }}>{s.serie}</span>
              <span className="badge ok dot">activa</span>
            </div>
            <div className="muted" style={{ fontSize: 13, marginTop: 14 }}>{s.uso}</div>
            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--line)" }}>
              <div><div className="eyebrow">Folio actual</div><div className="mono" style={{ fontSize: 15, color: "var(--text)", marginTop: 4 }}>#{s.folio}</div></div>
              <div style={{ textAlign: "right" }}><div className="eyebrow">RFC emisor</div><div className="mono" style={{ fontSize: 13, color: "var(--text-2)", marginTop: 4 }}>{s.rfc}</div></div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function MulukKeys() {
  return (
    <div className="canvas-in rise">
      <AppHead app="muluk" title="API Keys" sub="Las API keys permiten a sistemas externos timbrar en Muluk. La key sólo se muestra una vez." action={{ label: "Generar key", icon: "plus", primary: true }} />
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <table className="tbl">
          <thead><tr><th>Nombre</th><th>Key</th><th>Scopes</th><th>Estado</th><th>Creada</th></tr></thead>
          <tbody>
            {[["ERP Producción","sk_live_••••4f2a","timbrar, leer","activa","12 may 2026"],["Integración Pakal","sk_live_••••9c10","leer","activa","03 jun 2026"]].map((r,i)=>(
              <tr key={i}><td style={{color:"var(--text)",fontWeight:500}}>{r[0]}</td><td className="mono" style={{fontSize:12}}>{r[1]}</td>
              <td className="mono" style={{fontSize:11.5,color:"var(--text-3)"}}>{r[2]}</td><td><span className="badge ok dot">{r[3]}</span></td><td className="mono" style={{fontSize:12}}>{r[4]}</td></tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ============================================================
//  MANIK — cadena de custodia
// ============================================================
function ManikApp({ sub }) {
  if (sub === "field") return <ManikField />;
  if (sub === "certs") return <ManikCerts />;
  return <ManikProjects />;
}

function ManikProjects() {
  const d = window.MANIK;
  const [open, setOpen] = useState(d.projects[0].code);
  const p = d.projects.find(x => x.code === open);
  return (
    <div className="canvas-in wide rise">
      <AppHead app="manik" title="Proyectos" sub="Lotes de retiro y reciclaje de activos IT" action={{ label: "Nuevo proyecto", icon: "plus", primary: true }} />
      <div className="card" style={{ padding: 0, overflow: "hidden", marginBottom: 16 }}>
        <table className="tbl">
          <thead><tr><th>Proyecto</th><th>Cliente</th><th>Estado</th><th>Dispositivos</th><th>Avance</th><th></th></tr></thead>
          <tbody>
            {d.projects.map((x, i) => (
              <tr key={i} onClick={() => setOpen(x.code)} style={{ cursor: "pointer", background: x.code === open ? "var(--manik-dim)" : "" }}>
                <td className="mono" style={{ color: "var(--text)", fontSize: 12.5 }}>{x.code}</td>
                <td style={{ color: "var(--text)", fontWeight: 500 }}>{x.client}</td>
                <td><Pill status={x.status} /></td>
                <td className="mono">{x.devices}</td>
                <td style={{ width: 180 }}><div className="bar"><i style={{ width: (x.done / x.devices * 100) + "%", background: "var(--manik)" }} /></div></td>
                <td><Icon name="chevright" size={16} style={{ color: "var(--text-4)" }} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* selected project detail */}
      <div className="card" style={{ padding: 22 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
          <h3 className="disp mono" style={{ fontSize: 18 }}>{p.code}</h3>
          <Pill status={p.status} />
          <div style={{ flex: 1 }} />
          <button className="btn btn-sm"><Icon name="doc" size={14} /> Reporte</button>
        </div>
        <div className="grid-4" style={{ marginBottom: 22 }}>
          {[["Dispositivos", p.devices, "var(--text)"],["Pendientes", p.pending, "var(--text-2)"],["En proceso", p.process, "var(--warn)"],["Completados", p.done, "var(--ok)"]].map(([k,v,c])=>(
            <div key={k} className="card-2 card" style={{ padding: 16 }}>
              <div className="disp" style={{ fontSize: 24, fontWeight: 600, color: c }}>{v}</div>
              <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{k}</div>
            </div>
          ))}
        </div>
        <Section title="Paradas del lote" sub="Recorrido en orden — cada parada valida cliente y/o responsable" style={{ marginBottom: 16 }} />
        <div className="route">
          {d.stops.map((s, i) => (
            <div key={i} className="route-stop">
              <div className="route-node" style={{ background: i === 0 ? "var(--manik)" : "var(--surface-3)", color: i===0 ? "oklch(0.16 0.02 264)" : "var(--text-3)" }}>{i + 1}</div>
              {i < d.stops.length - 1 && <div className="route-line" />}
              <div className="route-body">
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <b style={{ fontSize: 14 }}>{s.name}</b>
                  <span className="badge">{s.type}</span>
                </div>
                <div style={{ display: "flex", gap: 14, marginTop: 8 }}>
                  <span className="mono" style={{ fontSize: 11, color: s.cVal ? "var(--ok)" : "var(--text-4)" }}>{s.cVal ? "✓" : "○"} valida cliente</span>
                  <span className="mono" style={{ fontSize: 11, color: s.rVal ? "var(--ok)" : "var(--text-4)" }}>{s.rVal ? "✓" : "○"} valida responsable</span>
                  <span className="mono" style={{ fontSize: 11, color: "var(--text-3)" }}>· {s.count} equipos aquí</span>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 22, paddingTop: 18, borderTop: "1px solid var(--line)" }}>
          <Section title="Portal del cliente" sub="Acceso de solo lectura vía enlace + verificación por correo. No requiere cuenta Sympho." style={{ marginBottom: 14 }} />
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            <span className="badge ok dot">habilitado</span>
            <code className="route-link mono">https://manik.sympho.app/portal/d6c65508-c80e-4956…</code>
            <button className="btn btn-sm"><Icon name="link" size={14} /> Copiar</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function ManikField() {
  const d = window.MANIK;
  const [stop, setStop] = useState(d.stops[0].name);
  return (
    <div className="canvas-in rise">
      <AppHead app="manik" title="Captura en campo" sub="Registra el paso de cada dispositivo por la parada actual" />
      <div className="grid-2" style={{ alignItems: "start", marginBottom: 14 }}>
        <div className="card" style={{ padding: 22 }}>
          <div className="eyebrow">Proyecto</div>
          <div className="mono" style={{ fontSize: 15, color: "var(--text)", marginTop: 5 }}>{d.projects[0].code}</div>
          <div className="eyebrow" style={{ marginTop: 18 }}>Parada actual</div>
          <div style={{ display: "flex", gap: 8, marginTop: 10, flexWrap: "wrap" }}>
            {d.stops.map(s => <button key={s.name} className="chip" data-on={s.name === stop} onClick={() => setStop(s.name)}
              style={{ cursor: "pointer", background: s.name === stop ? "var(--manik)" : "var(--surface-2)", color: s.name === stop ? "oklch(0.16 0.02 264)" : "var(--text-2)", borderColor: "transparent" }}>{s.name}</button>)}
          </div>
          <button className="btn" style={{ width: "100%", justifyContent: "center", marginTop: 18 }}><Icon name="lock" size={14} /> Cerrar etapa</button>
        </div>
        <div className="card" style={{ padding: 22 }}>
          <div className="eyebrow">2 · Dispositivo</div>
          <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
            <input className="field mono" placeholder="NÚMERO DE SERIE" />
            <button className="btn btn-primary">Buscar</button>
          </div>
          <button className="scan-btn"><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 al código de la etiqueta.</p>
        </div>
      </div>
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div className="card-head"><b style={{ fontSize: 14 }}>Dispositivos del lote</b><span className="mono" style={{ fontSize: 11, color: "var(--text-4)" }}>1,154 totales</span></div>
        <table className="tbl">
          <thead><tr><th>Serial</th><th>Marca / Modelo</th><th>Parada actual</th><th>Estado</th><th></th></tr></thead>
          <tbody>
            {d.devices.map((x, i) => (
              <tr key={i}>
                <td className="mono" style={{ color: "var(--text)", fontSize: 12.5 }}>{x.serial}</td>
                <td>{x.brand} <span className="muted">{x.model}</span></td>
                <td>{x.stop === "—" ? <span className="muted">—</span> : x.stop}</td>
                <td><Pill status={x.status} /></td>
                <td style={{ textAlign: "right" }}><button className="btn btn-sm btn-primary" style={{ background: "var(--manik)" }}>Avance</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function ManikCerts() {
  return (
    <div className="canvas-in rise">
      <AppHead app="manik" title="Certificados" sub="PDF de destrucción / reciclaje emitidos por la recicladora" action={{ label: "Subir certificado", icon: "upload", primary: true }} />
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <table className="tbl">
          <thead><tr><th>Documento</th><th>Alcance</th><th>Emitido por</th><th>Fecha</th><th></th></tr></thead>
          <tbody>
            {[["Certificado de destrucción — Lote 214-1","Todo el proyecto","E-Waste Solutions","—","pendiente"],["Acta de recolección — CPD KIO MEX4","10 dispositivos","Luxerv Co//Labs","18 jun 2026","ok"]].map((r,i)=>(
              <tr key={i}><td style={{display:"flex",alignItems:"center",gap:10,color:"var(--text)",fontWeight:500}}><Icon name="doc" size={18} style={{color:"var(--manik)"}}/>{r[0]}</td>
              <td>{r[1]}</td><td>{r[2]}</td><td className="mono" style={{fontSize:12}}>{r[3]}</td>
              <td style={{textAlign:"right"}}>{r[4]==="ok"?<button className="btn btn-sm"><Icon name="download" size={13}/> PDF</button>:<span className="badge warn dot">pendiente</span>}</td></tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ============================================================
//  PAKAL — inventario (definido en sympho-pakal.jsx + sympho-pakal-ops.jsx)
// ============================================================
// ---------------- shared app page header ----------------

// ============================================================
//  PAKAL — inventario
// ============================================================// ---------------- shared app page header ----------------
function AppHead({ app, title, sub, action }) {
  const a = window.APPS.find(x => x.id === app);
  const nav = useNav();
  let displayTitle = title;
  if (app === "eb" && nav && nav.ebLang && nav.ebLang !== "es" && window.ebPageTitle) {
    displayTitle = window.ebPageTitle(nav.loc.sub, nav.ebLang, title);
  }
  return (
    <div className="pagehead">
      <Glyph app={a} size={40} />
      <div style={{ flex: 1 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
          <h1 className="disp" style={{ fontSize: 23, fontWeight: 600, letterSpacing: "-0.02em" }}>{displayTitle}</h1>
          <span className="mono" style={{ fontSize: 11, color: a.hue }}>{a.name}</span>
        </div>
        {sub && <p className="muted" style={{ fontSize: 13, marginTop: 4 }}>{sub}</p>}
      </div>
      {action && <button className={"btn " + (action.primary ? "btn-primary" : "")} style={action.primary ? { background: a.hue } : {}} onClick={action.onClick}><Icon name={action.icon} size={15} /> {action.label}</button>}
    </div>
  );
}

Object.assign(window, { EkApp, MulukApp, ManikApp, AppHead, Pill });