/* ============================================================
   SYMPHO · EB — vistas del Master Dealer (admin)
   ============================================================ */

const { useState: useStateM } = React;

// thumbnail de modelo (tile de marca con ícono de moto)
function ModelThumb({ color, size = 44 }) {
  return (
    <div className="glyph" style={{ width: size, height: size, borderRadius: Math.round(size * 0.28),
      background: `linear-gradient(150deg, ${window.cx(color, 1.12)}, ${window.cx(color, 0.82)})` }}>
      <Icon name="moto" size={size * 0.52} stroke={2} />
    </div>
  );
}

// barra km vs límite de garantía
function KmBar({ km, limite }) {
  const pct = Math.min(km / limite * 100, 100);
  const over = km > limite;
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 160 }}>
      <div className="bar" style={{ flex: 1 }}><i style={{ width: pct + "%", background: over ? "var(--bad)" : pct > 85 ? "var(--warn)" : "var(--ok)" }} /></div>
      <span className="mono" style={{ fontSize: 11.5, color: over ? "var(--bad)" : "var(--text-2)", whiteSpace: "nowrap" }}>{km.toLocaleString()}/{(limite/1000)}k</span>
    </div>
  );
}

// ---------------- RESUMEN ----------------
function EbResumen() {
  const m = window.EB_METRICS.master, c = window.EB_CTX;
  const pend = window.EB_ORDERS.filter(o => o.estado === "Por aprobar");
  return (
    <div className="canvas-in wide rise">
      <AppHead app="eb" title="Resumen" sub={`${c.master} · ${c.dealersActivos} dealers activos · ${c.marcas} marcas · ${c.pais}`}
        action={{ label: "Nueva orden a marca", icon: "ship", primary: true }} />
      <div className="grid-4" style={{ marginBottom: 14 }}>
        <Stat icon="warehouse" label="Stock en CEDI" value={m.stockCEDI} hue="var(--eb)" sub="unidades disponibles + reservadas" />
        <Stat icon="receipt" label="Órdenes del mes" value={m.ordenesMes} hue="var(--eb)" trend={9} />
        <Stat icon="dollar" label="Venta a la red" value={window.fmtK(m.ventaRedMes)} hue="var(--eb)" trend={6} />
        <Stat icon="wallet" label="Cartera vencida" value={window.fmtK(m.carteraVencida)} hue="var(--eb)" sub="2 dealers en mora/por vencer" />
      </div>
      <div className="grid-2" style={{ alignItems: "start", marginBottom: 14, gridTemplateColumns: "minmax(0,1.3fr) minmax(0,1fr)" }}>
        <div className="card" style={{ padding: 20 }}>
          <Section title="Sell-in a la red" sub="Unidades facturadas Master → Dealer · 12 periodos" right={<span className="badge">2026</span>} style={{ marginBottom: 16 }} />
          <Spark data={m.sellinSeries} hue="var(--eb)" w={640} h={92} />
          <div style={{ display: "flex", gap: 28, marginTop: 16, paddingTop: 16, borderTop: "1px solid var(--line)" }}>
            <div><div className="disp" style={{ fontSize: 22, fontWeight: 600 }}>{m.entregaDias} días</div><div className="muted" style={{ fontSize: 12 }}>Entrega promedio <span style={{ color: "var(--ok)" }}>· meta {m.entregaTarget}</span></div></div>
            <div><div className="disp" style={{ fontSize: 22, fontWeight: 600 }}>{window.EB_CEDI.estados[2].n}</div><div className="muted" style={{ fontSize: 12 }}>Unidades en tránsito</div></div>
          </div>
        </div>
        <div className="card" style={{ padding: 20 }}>
          <Section title="Inventario CEDI" sub="Por estado de unidad" style={{ marginBottom: 14 }} />
          <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
            <Donut segments={window.EB_CEDI.estados} size={128} thickness={15}
              center={<><div className="disp" style={{ fontSize: 20, fontWeight: 600 }}>{m.stockCEDI}</div><div className="mono" style={{ fontSize: 9.5, color: "var(--text-4)" }}>en piso</div></>} />
            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 7 }}>
              {window.EB_CEDI.estados.map(s => (
                <div key={s.estado} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12 }}>
                  <span className="dot" style={{ background: s.hue }} />
                  <span style={{ flex: 1, color: "var(--text-2)" }}>{s.estado}</span>
                  <span className="mono" style={{ color: "var(--text)" }}>{s.n}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div className="card-head"><b style={{ fontSize: 14 }}>Órdenes por aprobar</b><span className="badge warn dot">{pend.length} pendientes</span></div>
        <EbOrderRows rows={pend} compact />
      </div>
      <div className="grid-2" style={{ alignItems: "start", marginTop: 14, gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)" }}>
        <div className="card" style={{ padding: 20 }}>
          <Section title="Utilidad consolidada" sub="Venta a la red · desglose" style={{ marginBottom: 14 }} />
          <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
            <Donut segments={m.utilidad} size={110} thickness={14} />
            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 7 }}>
              {m.utilidad.map(s => (
                <div key={s.estado} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12 }}>
                  <span className="dot" style={{ background: s.hue }} />
                  <span style={{ flex: 1, color: "var(--text-2)" }}>{s.estado}</span>
                  <span className="mono" style={{ color: "var(--text)" }}>{s.n}%</span>
                </div>
              ))}
            </div>
          </div>
        </div>
        <EbBoletin />
      </div>
    </div>
  );
}

// ---------------- COPILOTO (asistente en lenguaje natural) — ver sympho-eb-copilot.jsx para el ícono/pop-up del top bar ----------------

// ---------------- ALMACÉN Y LOGÍSTICA (entrada/salida por QR) ----------------
function EbAlmacen() {
  const [seccion, setSeccion] = useStateM("vehiculos");
  const [scanState, setScanState] = useStateM("idle"); // idle | scanning | done
  const [lastScan, setLastScan] = useStateM(null);
  const [extraLog, setExtraLog] = useStateM([]);
  const { units, transition } = window.useEbQrUnits();
  const parts = window.EB_CEDI.skus;
  const log = [...extraLog, ...window.EB_SCANLOG];

  const pendientes = units.filter(u => u.stage === "cedi");

  function simular() {
    if (scanState === "scanning") return;
    setScanState("scanning");
    setTimeout(() => {
      if (seccion === "vehiculos" && pendientes.length) {
        const u = pendientes[0];
        transition(u.vin, "transito", {
          stage: "Venta a Dealer · salida de CEDI", ts: "ahora", ubic: "CEDI Centro · andén de carga",
          usuario: window.USER.name, note: "Escaneo simulado desde Almacén y logística",
        });
        const u2 = units.find(x => x.vin === u.vin); if (u2) u2.dealer = u2.dealer || window.EB_DEALERS[0].name;
        setExtraLog(l => [{ ts: "ahora", vin: u.vin, evento: "Salida a Dealer (QR)", ubic: "CEDI Centro", usuario: window.USER.name }, ...l]);
        setLastScan({ tipo: "vehiculo", label: u.brand + " " + u.model, code: u.vin });
      } else if (seccion === "refacciones" && parts.length) {
        const p = parts[Math.floor(Math.random() * parts.length)];
        setExtraLog(l => [{ ts: "ahora", vin: p.sku, evento: "Movimiento de almacén (QR)", ubic: "CEDI Centro · anaquel refacciones", usuario: window.USER.name }, ...l]);
        setLastScan({ tipo: "refaccion", label: p.name, code: p.sku });
      }
      setScanState("done");
      setTimeout(() => setScanState("idle"), 1600);
    }, 900);
  }

  return (
    <div className="canvas-in wide rise">
      <AppHead app="eb" title="Almacén y logística" sub="Entrada de unidades desde importación y salida hacia los dealers — validado por escaneo QR" />
      <div className="seg" style={{ marginBottom: 18 }}>
        <button className="seg-btn" data-on={seccion === "vehiculos"} onClick={() => setSeccion("vehiculos")}><Icon name="moto" size={15} /> Vehículos / Motos</button>
        <button className="seg-btn" data-on={seccion === "refacciones"} onClick={() => setSeccion("refacciones")}><Icon name="tag" size={15} /> Refacciones</button>
      </div>
      <div className="grid-2" style={{ alignItems: "start", marginBottom: 16, gridTemplateColumns: "minmax(0,1fr) minmax(0,1.4fr)" }}>
        <div className="card" style={{ padding: 22, display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
          <div className="eb-scanframe" data-active={scanState !== "idle"} onClick={simular} style={{ cursor: "pointer" }}>
            {scanState === "done" ? <Icon name="check" size={40} style={{ color: "var(--ok)" }} /> : <Icon name={scanState === "scanning" ? "qr" : "camera"} size={40} />}
          </div>
          <button className="btn btn-primary" style={{ background: "var(--eb)" }} onClick={simular} disabled={scanState !== "idle"}>
            <Icon name="qr" size={15} /> {scanState === "scanning" ? "Escaneando…" : "Simular escaneo"}
          </button>
          {lastScan && scanState === "done" && (
            <div className="badge ok dot">{lastScan.tipo === "vehiculo" ? "Salida registrada" : "Movimiento registrado"} · {lastScan.label} ({lastScan.code})</div>
          )}
          <p className="muted" style={{ fontSize: 12, textAlign: "center" }}>
            {seccion === "vehiculos"
              ? "Escanea el QR único del vehículo (nace al entrar al CEDI y nunca cambia) para registrar su salida hacia un Dealer."
              : "Escanea el QR de la refacción para registrar su movimiento de almacén."}
          </p>
        </div>
        <div className="grid-2" style={{ gap: 12 }}>
          <Stat icon="warehouse" label="Entradas hoy" value={7} hue="var(--eb)" sub="validadas por QR" />
          <Stat icon="route" label="Salidas hoy" value={4 + extraLog.filter(l => l.evento.includes("Salida")).length} hue="var(--eb)" sub="rumbo a dealers" />
          <Stat icon="qr" label={seccion === "vehiculos" ? "Vehículos con QR activo" : "Refacciones con QR activo"} value={seccion === "vehiculos" ? units.length : parts.length} hue="var(--eb)" />
          <Stat icon="ext" label="Sin factura al despacho" value={1} hue="var(--bad)" sub="bloquea el avance de estatus" />
        </div>
      </div>

      <div className="card" style={{ padding: 0, overflow: "hidden", marginBottom: 16 }}>
        <div className="card-head"><b style={{ fontSize: 14 }}>{seccion === "vehiculos" ? "Vehículos · QR único por unidad" : "Refacciones · QR por SKU"}</b><span className="badge">{seccion === "vehiculos" ? units.length : parts.length}</span></div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 0 }}>
          {seccion === "vehiculos" ? units.map((u, i) => (
            <div key={i} style={{ width: "33.33%", boxSizing: "border-box", padding: 14, display: "flex", gap: 12, alignItems: "center", borderTop: i >= 3 ? "1px solid var(--line)" : "none", borderLeft: i % 3 ? "1px solid var(--line)" : "none" }}>
              <window.EbQrVisual seed={u.vin} size={52} />
              <div style={{ minWidth: 0, flex: 1 }}>
                <b style={{ fontSize: 12.5 }}>{u.brand} {u.model}</b>
                <div className="mono" style={{ fontSize: 10, color: "var(--eb)", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis" }}>{u.vin}</div>
                <span className={"badge dot" + (window.EB_QR_STAGE_META[u.stage].tone ? " " + window.EB_QR_STAGE_META[u.stage].tone : "")} style={{ marginTop: 4 }}>{window.EB_QR_STAGE_META[u.stage].label}</span>
              </div>
            </div>
          )) : parts.map((p, i) => (
            <div key={i} style={{ width: "33.33%", boxSizing: "border-box", padding: 14, display: "flex", gap: 12, alignItems: "center", borderTop: i >= 3 ? "1px solid var(--line)" : "none", borderLeft: i % 3 ? "1px solid var(--line)" : "none" }}>
              <window.EbQrVisual seed={p.sku} size={52} />
              <div style={{ minWidth: 0, flex: 1 }}>
                <b style={{ fontSize: 12.5 }}>{p.name}</b>
                <div className="mono" style={{ fontSize: 10, color: "var(--eb)", marginTop: 2 }}>{p.sku}</div>
                <span className={"badge dot " + (p.qty < p.min ? "bad" : "ok")} style={{ marginTop: 4 }}>{p.qty} u</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div className="card-head"><b style={{ fontSize: 14 }}>Bitácora de escaneo</b></div>
        <table className="tbl">
          <thead><tr><th>Fecha</th><th>VIN / SKU</th><th>Evento</th><th>Ubicación</th><th>Usuario</th></tr></thead>
          <tbody>
            {log.map((r, i) => (
              <tr key={i}>
                <td className="mono" style={{ fontSize: 12 }}>{r.ts}</td>
                <td className="mono" style={{ color: "var(--text)", fontSize: 12 }}>{r.vin}</td>
                <td style={{ color: "var(--text)", fontWeight: 500 }}>{r.evento}</td>
                <td className="muted">{r.ubic}</td>
                <td className="muted">{r.usuario}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// fila de órdenes (reutilizable)
function EbOrderRows({ rows, compact }) {
  const facturable = ['Facturada', 'Despachada', 'Recibida'];
  return (
    <table className="tbl">
      <thead><tr><th>Folio</th><th>Dealer</th><th>Productos</th><th>Crédito</th><th>Estado</th><th>Factura</th><th className="num">Valor</th>{!compact && <th></th>}</tr></thead>
      <tbody>
        {rows.map((o, i) => (
          <tr key={i} style={o.facturada === false && facturable.includes(o.estado) ? { opacity: 0.6 } : {}}>
            <td className="mono" style={{ color: "var(--text)", fontSize: 12.5 }}>{o.folio}</td>
            <td style={{ color: "var(--text)", fontWeight: 500 }}>{o.dealer}</td>
            <td className="muted">{o.items}</td>
            <td>{o.credito === "ok" ? <span className="badge ok dot">dentro de línea</span> : <span className="badge bad dot">excede línea</span>}</td>
            <td><Pill status={o.estado} /></td>
            <td>
              {!facturable.includes(o.estado) ? <span className="muted" style={{ fontSize: 11.5 }}>—</span>
                : o.facturada === false ? <span className="badge bad dot">sin facturar</span> : <span className="badge ok dot">timbrada</span>}
            </td>
            <td className="num">{window.fmtMoney(o.value)}</td>
            {!compact && <td style={{ textAlign: "right", whiteSpace: "nowrap" }}>
              {o.estado === "Por aprobar"
                ? <div style={{ display: "inline-flex", gap: 6 }}>
                    <button className="btn btn-sm" disabled={o.credito !== "ok"} style={o.credito === "ok" ? { background: "var(--eb)", color: "oklch(0.16 0.02 264)", borderColor: "transparent", fontWeight: 600 } : {}}><Icon name="check" size={13} /> Aprobar</button>
                  </div>
                : <Icon name="chevright" size={16} style={{ color: "var(--text-4)" }} />}
            </td>}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// ---------------- BOLETÍN ----------------
function EbBoletin() {
  const items = window.EB_BOLETIN;
  return (
    <div className="card" style={{ padding: 0, overflow: "hidden", marginBottom: 18 }}>
      <div className="card-head"><b style={{ fontSize: 14 }}>Boletín</b><span className="badge">{items.length} avisos</span></div>
      {items.map((b, i) => (
        <div key={i} className="eb-boletin-row">
          <span className="feed-ic" style={{ "--c": b.tipo === "precio" ? "var(--eb)" : "var(--warn)", width: 32, height: 32 }}><Icon name={b.icon} size={15} /></span>
          <div style={{ flex: 1 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              {b.prioridad === "urgente" && <span className="eb-boletin-flag" style={{ color: "var(--bad)" }} title="Urgente"><Icon name="bolt" size={13} /></span>}
              {b.prioridad === "importante" && <span className="eb-boletin-flag" style={{ color: "var(--warn)" }} title="Importante"><Icon name="bell" size={13} /></span>}
              <div style={{ color: "var(--text)", fontSize: 13 }}>{b.texto}</div>
            </div>
          </div>
          {b.prioridad === "urgente" && <span className="badge bad dot">urgente</span>}
          {b.prioridad === "importante" && <span className="badge warn dot">importante</span>}
          <span className="mono" style={{ fontSize: 11, color: "var(--text-4)", whiteSpace: "nowrap" }}>{b.fecha}</span>
        </div>
      ))}
    </div>
  );
}

// ---------------- CATÁLOGO ----------------
function EbCatalogo() {
  const [tipo, setTipo] = useStateM("unidad");
  const [marca, setMarca] = useStateM("todas");
  const [unitsModal, setUnitsModal] = useStateM(null); // { model, mode }
  const [altaOpen, setAltaOpen] = useStateM(false);
  const [bump, setBump] = useStateM(0);
  const models = window.EB_MODELS.filter(m => marca === "todas" || m.brand === marca);
  function handleCreate({ kind, item }) {
    if (kind === "vehiculo") window.EB_MODELS.push(item);
    else window.EB_CEDI.skus.push(item);
    setBump(v => v + 1);
  }
  return (
    <div className="canvas-in wide rise">
      <AppHead app="eb" title="Catálogo" sub="4 marcas · jerarquía Marca → Modelo → Año · precio Dealer / Cliente Final / % descuento de promoción — se actualiza cada mes"
        action={{ label: "Alta de producto", icon: "plus", primary: true, onClick: () => setAltaOpen(true) }} />
      <div style={{ display: "flex", gap: 12, alignItems: "center", marginBottom: 18, flexWrap: "wrap" }}>
        <div className="seg">
          <button className="seg-btn" data-on={tipo === "unidad"} onClick={() => setTipo("unidad")}><Icon name="moto" size={15} /> Unidades (VIN)</button>
          <button className="seg-btn" data-on={tipo === "sku"} onClick={() => setTipo("sku")}><Icon name="tag" size={15} /> Refacciones (SKU)</button>
        </div>
        {tipo === "unidad" && <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
          <button className="chip" data-on={marca === "todas"} style={{ cursor: "pointer" }} onClick={() => setMarca("todas")}>Todas</button>
          {window.EB_BRANDS.map(b => <button key={b.id} className="chip" data-on={marca === b.name} style={{ cursor: "pointer", color: marca === b.name ? b.hue : "var(--text-2)" }} onClick={() => setMarca(b.name)}>{b.name}</button>)}
        </div>}
      </div>

      {tipo === "unidad" ? (
        <div className="grid-3">
          {models.map((m, i) => (
            <div key={i} className="card eb-model" style={{ padding: 16, "--c": m.color }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <ModelThumb color={m.color} size={46} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 7 }}><b style={{ fontSize: 14.5 }}>{m.model}</b></div>
                  <div className="mono" style={{ fontSize: 10.5, color: m.color, marginTop: 2 }}>{m.brand} · {m.cat} · {m.year}</div>
                </div>
              </div>
              <div style={{ marginTop: 16, paddingTop: 14, borderTop: "1px solid var(--line)" }}>
                <div className="eb-price-row" data-tone="master"><span className="k">Precio Dealer</span><span className="v">{window.fmtMoney(m.priceDealer)}</span></div>
                <div className="eb-price-row" data-tone="dist"><span className="k">Precio Cliente Final</span><span className="v">{window.fmtMoney(m.pricePublico)}</span></div>
                <div className="eb-price-row" data-tone="promo"><span className="k">Descuento promoción</span><span className="v">{m.descuentoPromoPct ? m.descuentoPromoPct + "%" : "—"}</span></div>
                <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 10 }}>
                  <button className="badge ok dot" style={{ border: "none", cursor: "pointer" }} onClick={() => setUnitsModal({ model: m, mode: "stock" })}>{m.stock} CEDI</button>
                  {m.transit > 0 && <button className="badge dot" style={{ border: "none", cursor: "pointer" }} onClick={() => setUnitsModal({ model: m, mode: "transito" })}>{m.transit} tránsito</button>}
                </div>
                <window.EbProductAssets photoId={"cat-" + window.ebCatalogKey(m.brand, m.model).replace(/[^a-z0-9]+/gi, "-")} docs={(window.EB_CATALOG_DOCS[window.ebCatalogKey(m.brand, m.model)] || {}).docs} />
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <table className="tbl">
            <thead><tr><th>SKU</th><th>Refacción / accesorio</th><th>Marca</th><th>Existencia</th><th>Mínimo</th><th>Archivos</th><th className="num">Precio</th></tr></thead>
            <tbody>
              {window.EB_CEDI.skus.map((s, i) => (
                <tr key={i}>
                  <td className="mono" style={{ color: "var(--text)", fontSize: 12 }}>{s.sku}</td>
                  <td style={{ color: "var(--text)", fontWeight: 500 }}>{s.name}</td>
                  <td>{s.marca}</td>
                  <td><span className={"badge dot " + (s.qty < s.min ? "bad" : "ok")}>{s.qty} u</span></td>
                  <td className="mono" style={{ fontSize: 12 }}>{s.min}</td>
                  <td>
                    <div style={{ display: "flex", gap: 5, flexWrap: "wrap", maxWidth: 200 }}>
                      {((window.EB_SKU_DOCS[s.sku] || {}).docs || []).map((d, j) => <window.EbFileChip key={j} name={d.name} />)}
                    </div>
                  </td>
                  <td className="num">{window.fmtMoney(s.price)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
      {unitsModal && <window.EbUnitsModal model={unitsModal.model} mode={unitsModal.mode} onClose={() => setUnitsModal(null)} />}
      {altaOpen && <window.EbAltaProductoModal onClose={() => setAltaOpen(false)} onCreate={handleCreate} />}
    </div>
  );
}

// ---------------- INVENTARIO CEDI ----------------
function EbCedi() {
  const d = window.EB_CEDI;
  return (
    <div className="canvas-in wide rise">
      <AppHead app="eb" title="Inventario CEDI" sub="Centro de distribución · stock en tiempo real por número de serie"
        action={{ label: "Recibir importación", icon: "ship" }} />
      <div className="grid-4" style={{ marginBottom: 16 }}>
        {d.estados.slice(0, 4).map(s => (
          <div key={s.estado} className="card" style={{ padding: 16 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}><span className="dot" style={{ background: s.hue }} /><span className="muted" style={{ fontSize: 12.5 }}>{s.estado}</span></div>
            <div className="disp" style={{ fontSize: 26, fontWeight: 600, marginTop: 8 }}>{s.n}</div>
          </div>
        ))}
      </div>
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div className="card-head"><b style={{ fontSize: 14 }}>Unidades serializadas</b><input className="field" placeholder="Buscar VIN / modelo…" style={{ width: 220, height: 32 }} /></div>
        <table className="tbl">
          <thead><tr><th>VIN</th><th>Modelo</th><th>Año</th><th>Estado</th><th>Ubicación</th><th>Dealer</th></tr></thead>
          <tbody>
            {d.unidades.map((u, i) => (
              <tr key={i}>
                <td className="mono" style={{ color: "var(--text)", fontSize: 12 }}>{u.vin}</td>
                <td style={{ color: "var(--text)", fontWeight: 500 }}>{u.brand} {u.model}</td>
                <td className="mono" style={{ fontSize: 12 }}>{u.year}</td>
                <td><Pill status={u.estado} /></td>
                <td className="muted" style={{ fontSize: 12.5 }}>{u.ubic}</td>
                <td>{u.dealer === "—" ? <span className="muted">—</span> : u.dealer}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ---------------- ÓRDENES Y RESERVAS ----------------
function EbOrdenes() {
  const [f, setF] = useStateM("todas");
  const [bloqueoInmediato, setBloqueoInmediato] = useStateM(window.EB_CONFIG.bloqueoDesdeSolicitud);
  const all = window.EB_ORDERS;
  const rows = f === "todas" ? all : all.filter(o => o.estado === "Por aprobar");
  return (
    <div className="canvas-in wide rise">
      <AppHead app="eb" title="Órdenes y reservas" sub="Bandeja del Master Dealer · aprueba, factura y despacha las solicitudes de la red" />
      <div className="card" style={{ padding: 16, marginBottom: 14, display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
        <div style={{ flex: 1, minWidth: 240 }}>
          <b style={{ fontSize: 13 }}>Bloqueo de unidad desde la solicitud</b>
          <p className="muted" style={{ fontSize: 12, marginTop: 2 }}>El primer dealer que solicita congela el stock; tiene {window.EB_CONFIG.ventanaHorasPago}h para validar el pago antes de liberarse.</p>
        </div>
        <div className="seg" onClick={() => setBloqueoInmediato(v => !v)} style={{ cursor: "pointer" }}>
          <span className="seg-btn" data-on={!bloqueoInmediato}>Al aprobar</span>
          <span className="seg-btn" data-on={bloqueoInmediato}>Desde la solicitud</span>
        </div>
      </div>
      <div className="card" style={{ padding: 14, marginBottom: 14, display: "flex", gap: 10, alignItems: "center" }}>
        <div className="seg">
          <button className="seg-btn" data-on={f === "todas"} onClick={() => setF("todas")}>Todas</button>
          <button className="seg-btn" data-on={f === "pend"} onClick={() => setF("pend")}>Por aprobar</button>
        </div>
        <div style={{ flex: 1 }} />
        <span className="mono" style={{ fontSize: 12, color: "var(--text-4)" }}>{rows.length} órdenes</span>
      </div>
      <div className="card" style={{ padding: 0, overflow: "hidden", marginBottom: 16 }}>
        <EbOrderRows rows={rows} />
      </div>
      <div className="card" style={{ padding: 18, borderColor: "color-mix(in oklch, var(--bad) 30%, var(--line))" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span className="feed-ic" style={{ "--c": "var(--bad)", width: 38, height: 38 }}><Icon name="wallet" size={18} /></span>
          <div style={{ flex: 1 }}>
            <b style={{ fontSize: 14 }}>OC-2026-0417 · Pacífico Motors — bloqueada por crédito</b>
            <p className="muted" style={{ fontSize: 12.5, marginTop: 3 }}>La orden de {window.fmtMoney(968000)} excede la línea disponible. El sistema bloqueó la reserva de stock automáticamente.</p>
          </div>
          <button className="btn btn-sm">Ver cuenta</button>
        </div>
      </div>
    </div>
  );
}

// ---------------- IMPORTACIONES (supply planning) ----------------
function EbImportaciones() {
  const flow = window.EB_IMPORT_FLOW;
  return (
    <div className="canvas-in wide rise">
      <AppHead app="eb" title="Importaciones" sub="Supply planning · pedido a marca y seguimiento de importación (origen China · pedimento / NOM)"
        action={{ label: "Nuevo pedido a marca", icon: "plus", primary: true }} />
      <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 12 }}>
        <button className="btn btn-sm"><Icon name="upload" size={13} /> Importar CSV de unidades (VIN masivo)</button>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {window.EB_IMPORTS.map((im, i) => {
          const idx = flow.indexOf(im.estado);
          return (
            <div key={i} className="card" style={{ padding: 18 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <span className="feed-ic" style={{ "--c": "var(--eb)", width: 40, height: 40 }}><Icon name="ship" size={19} /></span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
                    <b style={{ fontSize: 14.5 }}>{im.ped}</b>
                    <span className="mono" style={{ fontSize: 11, color: "var(--eb)" }}>{im.marca}</span>
                    <span className="muted" style={{ fontSize: 12.5 }}>· {im.desc}</span>
                  </div>
                  <div className="mono" style={{ fontSize: 11, color: "var(--text-4)", marginTop: 3 }}>{im.origen} · {im.units} unidades · {im.doc}</div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <Pill status={im.estado} />
                  <div className="mono" style={{ fontSize: 11.5, color: "var(--text-3)", marginTop: 5 }}>ETA {im.eta}</div>
                </div>
              </div>
              <div className="eb-impflow">
                {flow.map((st, j) => (
                  <div key={st} className="eb-impstep" data-on={j <= idx}>
                    <span className="eb-impdot">{j < idx ? <Icon name="check" size={11} /> : j === idx ? <span className="eb-impdot-live" /> : null}</span>
                    <span className="eb-implabel">{st}</span>
                    {j < flow.length - 1 && <span className="eb-impline" data-on={j < idx} />}
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ---------------- CICLO DE VIDA & TRAZABILIDAD VIN (HÉROE) ----------------
function EbLogistica() {
  const t = window.EB_VIN_TIMELINE;
  return (
    <div className="canvas-in rise">
      <AppHead app="eb" title="Ciclo de vida" sub="El ciclo de vida completo de cada unidad — importación → CEDI → Dealer → cliente → garantía" />
      <div className="card" style={{ padding: 16, marginBottom: 18, display: "flex", gap: 10, alignItems: "center" }}>
        <Icon name="vin" size={20} style={{ color: "var(--eb)" }} />
        <input className="field mono" defaultValue={t.vin} style={{ flex: 1, fontSize: 13 }} />
        <button className="btn btn-primary" style={{ background: "var(--eb)" }}>Rastrear</button>
      </div>
      <div className="eb-vin-grid">
        <div className="card" style={{ padding: 22 }}>
          <div className="eb-vin-line" />
          {t.steps.map((s, i) => (
            <div key={i} className="eb-vin-step" data-done={s.done}>
              <span className="eb-vin-node"><Icon name={s.done ? s.icon : "clock"} size={15} /></span>
              <div className="eb-vin-body">
                <div style={{ display: "flex", alignItems: "center", gap: 9, flexWrap: "wrap" }}>
                  <b style={{ fontSize: 14 }}>{s.stage}</b>
                  <span className="mono" style={{ fontSize: 11, color: s.done ? "var(--text-3)" : "var(--text-4)" }}>{s.date}</span>
                  {!s.done && <span className="badge">próximo</span>}
                </div>
                <div className="muted" style={{ fontSize: 12.5, marginTop: 3 }}>{s.place}</div>
                {s.note && <div className="mono" style={{ fontSize: 11, color: "var(--eb)", marginTop: 4 }}>{s.note}</div>}
                {s.done && <div style={{ marginTop: 8 }}><window.EbEvidenceGallery baseId={"ciclo-" + i} count={i % 3 === 0 ? 2 : i % 2 === 0 ? 1 : 0} label="Evidencia del paso" /></div>}
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <div className="card" style={{ padding: 20 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <ModelThumb color="var(--manik)" size={48} />
              <div><b className="disp" style={{ fontSize: 16 }}>{t.brand} {t.model}</b><div className="mono" style={{ fontSize: 11, color: "var(--text-4)" }}>{t.year} · {t.color}</div></div>
            </div>
            <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 11 }}>
              {[["VIN", t.vin],["Dealer", t.dealer],["Cliente final", t.cliente],["Garantía", "Vigente · 820 km"]].map(([k, v]) => (
                <div key={k} style={{ display: "flex", justifyContent: "space-between", gap: 12, fontSize: 12.5 }}>
                  <span className="muted">{k}</span><span className="mono" style={{ color: "var(--text)", textAlign: "right" }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="card" style={{ padding: 18 }}>
            <div className="eyebrow" style={{ marginBottom: 10 }}>Apps conectadas</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
              {[["muluk", "CFDI LXA-0992 · venta"],["pakal", "Activo sincronizado"],["ek", "Cliente en CRM"]].map(([aid, txt]) => {
                const a = window.APPS.find(x => x.id === aid);
                return <div key={aid} style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 12.5 }}><Glyph app={a} size={22} radius={6} /><span style={{ color: "var(--text-2)" }}>{txt}</span></div>;
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------------- CRÉDITO & CUENTAS ----------------
function EbCredito() {
  const dealers = window.EB_DEALERS;
  const [statement, setStatement] = useStateM(null);
  const totalLinea = dealers.reduce((s, d) => s + d.linea, 0);
  const totalUsado = dealers.reduce((s, d) => s + d.usado, 0);
  const totalVenc = dealers.reduce((s, d) => s + d.vencido, 0);
  return (
    <div className="canvas-in wide rise">
      <AppHead app="eb" title="Crédito & cuentas" sub="Cuenta corriente Dealer ↔ Master · línea, saldo, antigüedad y bloqueo automático por mora" />
      <div className="grid-3" style={{ marginBottom: 16 }}>
        <Stat icon="wallet" label="Línea total otorgada" value={window.fmtK(totalLinea)} hue="var(--eb)" />
        <Stat icon="dollar" label="Saldo utilizado" value={window.fmtK(totalUsado)} hue="var(--eb)" sub={Math.round(totalUsado/totalLinea*100) + "% de la línea"} />
        <Stat icon="ext" label="Cartera vencida" value={window.fmtK(totalVenc)} hue="var(--eb)" sub="2 dealers requieren atención" />
      </div>
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div className="card-head"><b style={{ fontSize: 14 }}>Estados de cuenta por Dealer</b><span className="muted" style={{ fontSize: 11.5 }}>Click en una fila para ver el estado de cuenta</span></div>
        <table className="tbl">
          <thead><tr><th>Dealer</th><th>Plaza</th><th>Línea</th><th>Disponible</th><th style={{width:170}}>Uso de línea</th><th>Vencido</th><th>Estado</th></tr></thead>
          <tbody>
            {dealers.map((d, i) => {
              const disp = d.linea - d.usado, pct = d.usado / d.linea * 100;
              return (
                <tr key={i} style={{ cursor: "pointer" }} onClick={() => setStatement(d)}>
                  <td style={{ color: "var(--text)", fontWeight: 500 }}>{d.name}</td>
                  <td className="muted">{d.city}</td>
                  <td className="mono" style={{ fontSize: 12 }}>{window.fmtK(d.linea)}</td>
                  <td className="mono" style={{ fontSize: 12, color: disp < d.linea * 0.1 ? "var(--bad)" : "var(--text)" }}>{window.fmtK(disp)}</td>
                  <td><div className="bar"><i style={{ width: pct + "%", background: pct > 95 ? "var(--bad)" : pct > 80 ? "var(--warn)" : "var(--eb)" }} /></div></td>
                  <td className="mono" style={{ fontSize: 12, color: d.vencido ? "var(--bad)" : "var(--text-4)" }}>{d.vencido ? window.fmtMoney(d.vencido) : "—"}</td>
                  <td><Pill status={d.estado} /></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      {statement && <window.EbCreditStatementModal dealer={statement} onClose={() => setStatement(null)} />}
    </div>
  );
}

// ---------------- GARANTÍAS & OEM ----------------
function EbGarantias() {
  const [tab, setTab] = useStateM("gar");
  const w = window.EB_WARRANTY;
  return (
    <div className="canvas-in wide rise">
      <AppHead app="eb" title="Garantías & OEM" sub="Activación por VIN, validación por kilometraje, claims de reembolso hacia la marca y devoluciones" />
      <div className="seg" style={{ marginBottom: 18 }}>
        <button className="seg-btn" data-on={tab === "gar"} onClick={() => setTab("gar")}><Icon name="shield" size={15} /> Garantías</button>
        <button className="seg-btn" data-on={tab === "oem"} onClick={() => setTab("oem")}><Icon name="recycle" size={15} /> Claims OEM</button>
        <button className="seg-btn" data-on={tab === "rma"} onClick={() => setTab("rma")}><Icon name="ret" size={15} /> Devoluciones</button>
      </div>
      {tab === "gar" && (
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <table className="tbl">
            <thead><tr><th>VIN</th><th>Modelo</th><th>Dealer</th><th>Activada</th><th style={{width:200}}>Kilometraje</th><th>Estado</th></tr></thead>
            <tbody>
              {w.garantias.map((g, i) => (
                <tr key={i}>
                  <td className="mono" style={{ color: "var(--text)", fontSize: 12 }}>{g.vin}</td>
                  <td style={{ color: "var(--text)", fontWeight: 500 }}>{g.model}</td>
                  <td className="muted">{g.dealer}</td>
                  <td className="mono" style={{ fontSize: 12 }}>{g.activada}</td>
                  <td><KmBar km={g.km} limite={g.limite} /></td>
                  <td><Pill status={g.estado} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
      {tab === "oem" && (
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <div className="card-head"><b style={{ fontSize: 14 }}>Reclamos a la marca</b><button className="btn btn-sm btn-primary" style={{ background: "var(--eb)" }}><Icon name="plus" size={13} /> Nuevo claim</button></div>
          <table className="tbl">
            <thead><tr><th>Claim</th><th>VIN</th><th>Concepto</th><th>Marca</th><th>Estado</th><th className="num">Monto</th></tr></thead>
            <tbody>
              {w.claims.map((c, i) => (
                <tr key={i}>
                  <td className="mono" style={{ color: "var(--text)", fontSize: 12 }}>{c.id}</td>
                  <td className="mono" style={{ fontSize: 11.5 }}>{c.vin}</td>
                  <td style={{ color: "var(--text)" }}>{c.concepto}</td>
                  <td>{c.marca}</td>
                  <td><Pill status={c.estado} /></td>
                  <td className="num">{window.fmtMoney(c.monto)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
      {tab === "rma" && (
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <table className="tbl">
            <thead><tr><th>RMA</th><th>Referencia</th><th>Tipo</th><th>Descripción</th><th>Estado</th></tr></thead>
            <tbody>
              {w.rma.map((r, i) => (
                <tr key={i}>
                  <td className="mono" style={{ color: "var(--text)", fontSize: 12 }}>{r.id}</td>
                  <td className="mono" style={{ fontSize: 11.5 }}>{r.ref}</td>
                  <td><span className="chip" style={{ height: 22, fontSize: 11 }}>{r.tipo}</span></td>
                  <td className="muted">{r.desc}</td>
                  <td><Pill status={r.estado} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

// ---------------- RED DE DEALERS ----------------
function EbDealers() {
  const dealers = window.EB_DEALERS;
  const [showTransfer, setShowTransfer] = useStateM(false);
  return (
    <div className="canvas-in wide rise">
      <AppHead app="eb" title="Red de Dealers" sub={`${window.EB_CTX.dealersActivos} agencias distribuidoras · ${window.EB_CTX.pais}`}
        action={{ label: "Alta de Dealer", icon: "plus", primary: true }} />
      <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginBottom: 16, marginTop: -10 }}>
        <button className="btn btn-sm" onClick={() => setShowTransfer(true)}><Icon name="route" size={13} /> Transferir / permutar unidades</button>
      </div>
      {showTransfer && <EbTransferModal onClose={() => setShowTransfer(false)} />}
      <div className="card" style={{ padding: 0, overflow: "hidden", marginBottom: 18 }}>
        <div className="card-head"><b style={{ fontSize: 14 }}>Transferencias recientes</b><span className="badge">{window.EB_TRANSFERS.length}</span></div>
        <table className="tbl">
          <thead><tr><th>Folio</th><th>Origen</th><th>Destino</th><th>Movimiento</th><th>Fecha</th><th>Estado</th></tr></thead>
          <tbody>
            {window.EB_TRANSFERS.map((t, i) => (
              <tr key={i}>
                <td className="mono" style={{ color: "var(--text)", fontSize: 12 }}>{t.id}</td>
                <td style={{ color: "var(--text)", fontWeight: 500 }}>{t.origen}</td>
                <td style={{ color: "var(--text)", fontWeight: 500 }}>{t.destino}</td>
                <td className="muted">{t.item}</td>
                <td className="mono" style={{ fontSize: 12 }}>{t.fecha}</td>
                <td><Pill status={t.estado} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="grid-3">
        {dealers.map((d, i) => {
          const pct = d.usado / d.linea * 100;
          return (
            <div key={i} className="card" style={{ padding: 18 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
                <span className="feed-ic" style={{ "--c": "var(--eb)", width: 38, height: 38 }}><Icon name="moto" size={18} /></span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <b style={{ fontSize: 14 }}>{d.name}</b>
                  <div className="mono" style={{ fontSize: 11, color: "var(--text-4)", marginTop: 2 }}>{d.city}</div>
                </div>
                <Pill status={d.estado} />
              </div>
              <div style={{ display: "flex", gap: 18, marginTop: 16 }}>
                <div><div className="disp" style={{ fontSize: 18, fontWeight: 600 }}>{window.fmtK(d.ventasMes)}</div><div className="muted" style={{ fontSize: 11 }}>ventas/mes</div></div>
                <div><div className="disp" style={{ fontSize: 18, fontWeight: 600 }}>{d.units}</div><div className="muted" style={{ fontSize: 11 }}>unidades</div></div>
              </div>
              <div style={{ marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--line)" }}>
                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11.5, marginBottom: 6 }}><span className="muted">Uso de línea</span><span className="mono" style={{ color: "var(--text-2)" }}>{Math.round(pct)}%</span></div>
                <div className="bar"><i style={{ width: pct + "%", background: pct > 95 ? "var(--bad)" : pct > 80 ? "var(--warn)" : "var(--eb)" }} /></div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { EbResumen, EbCatalogo, EbCedi, EbOrdenes, EbImportaciones, EbLogistica, EbAlmacen, EbCredito, EbGarantias, EbDealers, EbOrderRows, EbBoletin, ModelThumb, KmBar });