/* ============================================================
   SYMPHO · EB — QR único por unidad: ciclo de vida completo
   Se genera una sola vez al entrar la unidad al CEDI del Master.
   Viaja con la unidad: salida a Dealer → Vo.Bo. de recepción →
   alta a inventario del Dealer → venta a cliente final → consulta
   de servicio por cualquier Dealer de la red.
   ============================================================ */

// ---- visual falso de QR (mismo helper para toda la app) ----
function qrPattern(seed) {
  let h = 0; for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
  const cells = [];
  for (let i = 0; i < 49; i++) {
    const r = Math.floor(i / 7), c = i % 7;
    const corner = (r < 3 && c < 3) || (r < 3 && c > 3) || (r > 3 && c < 3);
    if (corner) { cells.push((r === 1 && c === 1) || (r === 1 && c === 5) || (r === 5 && c === 1) || (r % 2 === 0 || c % 2 === 0)); continue; }
    h = (h * 1103515245 + 12345) >>> 0;
    cells.push(((h >> 16) & 1) === 1);
  }
  return cells;
}
function EbQrVisual({ seed, size = 88 }) {
  const cells = qrPattern(seed);
  return (
    <div className="eb-qr-visual" style={{ width: size, height: size }}>
      {cells.map((on, i) => <i key={i} className={on ? "" : "off"} />)}
    </div>
  );
}

// ---- store compartido (module-level) + hook reactivo entre vistas ----
const EB_QR_BUS = new EventTarget();
function useEbQrUnits() {
  const [, force] = useState(0);
  useEffect(() => {
    const h = () => force(v => v + 1);
    EB_QR_BUS.addEventListener("update", h);
    return () => EB_QR_BUS.removeEventListener("update", h);
  }, []);
  function push() { EB_QR_BUS.dispatchEvent(new Event("update")); }
  return {
    units: window.EB_QR_UNITS,
    find: (vin) => window.EB_QR_UNITS.find(u => u.vin === vin),
    transition: (vin, stage, entry) => {
      const u = window.EB_QR_UNITS.find(x => x.vin === vin);
      if (!u) return;
      u.stage = stage;
      u.history.push(entry);
      push();
    },
  };
}

// ---- timeline de trazabilidad (reutilizable) ----
function EbQrTimeline({ unit }) {
  const meta = window.EB_QR_STAGE_META[unit.stage];
  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 16 }}>
        <EbQrVisual seed={unit.vin} size={64} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 9, flexWrap: "wrap" }}>
            <b style={{ fontSize: 15 }}>{unit.brand} {unit.model}</b>
            <span className="mono" style={{ fontSize: 11, color: "var(--text-4)" }}>{unit.year} · {unit.color}</span>
          </div>
          <div className="mono" style={{ fontSize: 11.5, color: "var(--eb)", marginTop: 3 }}>{unit.vin}</div>
        </div>
        <span className={"badge dot" + (meta.tone ? " " + meta.tone : "")}>{meta.label}</span>
      </div>
      <div style={{ paddingLeft: 2 }}>
        {unit.history.map((h, i) => (
          <div key={i} className="eb-vin-step" data-done="true">
            <span className="eb-vin-node"><Icon name={i === unit.history.length - 1 ? "qr" : "check"} size={14} /></span>
            <div className="eb-vin-body">
              <div style={{ display: "flex", alignItems: "center", gap: 9, flexWrap: "wrap" }}>
                <b style={{ fontSize: 13.5 }}>{h.stage}</b>
                <span className="mono" style={{ fontSize: 10.5, color: "var(--text-4)" }}>{h.ts}</span>
              </div>
              <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>{h.ubic} · {h.usuario}</div>
              {h.note && <div className="mono" style={{ fontSize: 11, color: "var(--eb)", marginTop: 3 }}>{h.note}</div>}
            </div>
          </div>
        ))}
      </div>
      {unit.cliente && (
        <div className="card" style={{ padding: 14, marginTop: 4, background: "var(--bg-2)", display: "flex", alignItems: "center", gap: 12 }}>
          <EbQrVisual seed={unit.vin + "-card"} size={44} />
          <div style={{ flex: 1 }}>
            <b style={{ fontSize: 12.5 }}>Tarjeta + QR digital de {unit.cliente}</b>
            <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>Con este QR, cualquier Dealer de la red puede consultar el estatus y dar servicio a esta unidad.</div>
          </div>
        </div>
      )}
    </div>
  );
}

// =================== MASTER · Etiquetas QR ===================
// unidades recién dadas de alta al CEDI (QR ya generado) listas para imprimir
// la etiqueta y, al vender al Dealer, confirmar la salida escaneando el QR.
function EbEtiquetas() {
  const { units, transition } = useEbQrUnits();
  const [confirming, setConfirming] = useStateM(null); // vin en proceso de salida
  const [destino, setDestino] = useStateM(window.EB_DEALERS[0].name);
  const enCedi = units.filter(u => u.stage === "cedi");
  const enTransito = units.filter(u => u.stage === "transito");

  function confirmarSalida(vin) {
    transition(vin, "transito", {
      stage: "Venta a Dealer · salida de CEDI",
      ts: "ahora", ubic: "CEDI Centro · andén de carga", usuario: window.USER.name,
      note: "Rumbo a " + destino,
    });
    // el destino queda asociado a la unidad para que el Dealer la vea en "Verificar embarque"
    const u = units.find(x => x.vin === vin); if (u) u.dealer = destino;
    setConfirming(null);
  }

  return (
    <div className="canvas-in wide rise">
      <AppHead app="eb" title="Etiquetas QR" sub="El QR se genera una sola vez al dar de alta la unidad al CEDI — viaja con ella toda su vida útil" />
      <div className="card" style={{ padding: 0, overflow: "hidden", marginBottom: 18 }}>
        <div className="card-head"><b style={{ fontSize: 14 }}>En CEDI · listas para imprimir etiqueta</b><span className="badge">{enCedi.length}</span></div>
        {enCedi.length === 0 && <div className="muted" style={{ padding: 20, fontSize: 12.5 }}>No hay unidades pendientes de embarque.</div>}
        <div style={{ display: "flex", flexDirection: "column" }}>
          {enCedi.map((u, i) => (
            <div key={i} className="card" style={{ padding: 16, display: "flex", gap: 16, alignItems: "center", border: "none", borderTop: i ? "1px solid var(--line)" : "none", borderRadius: 0 }}>
              <EbQrVisual seed={u.vin} size={60} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <b style={{ fontSize: 13.5 }}>{u.brand} {u.model}</b>
                <div className="mono" style={{ fontSize: 11, color: "var(--eb)", marginTop: 3 }}>{u.vin}</div>
              </div>
              <button className="btn btn-sm" onClick={() => window.print()}><Icon name="download" size={13} /> Imprimir etiqueta</button>
              {confirming === u.vin ? (
                <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
                  <select className="field" style={{ height: 32, width: 170 }} value={destino} onChange={e => setDestino(e.target.value)}>
                    {window.EB_DEALERS.map(d => <option key={d.name} value={d.name}>{d.name}</option>)}
                  </select>
                  <button className="btn btn-sm btn-primary" style={{ background: "var(--eb)" }} onClick={() => confirmarSalida(u.vin)}><Icon name="qr" size={13} /> Confirmar</button>
                </div>
              ) : (
                <button className="btn btn-sm" onClick={() => setConfirming(u.vin)}><Icon name="route" size={13} /> Vender y confirmar salida</button>
              )}
            </div>
          ))}
        </div>
      </div>
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div className="card-head"><b style={{ fontSize: 14 }}>En tránsito hacia un Dealer</b><span className="badge warn dot">{enTransito.length}</span></div>
        <table className="tbl">
          <thead><tr><th>VIN</th><th>Modelo</th><th>Dealer destino</th><th>Último escaneo</th></tr></thead>
          <tbody>
            {enTransito.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="muted">{u.dealer}</td>
                <td className="mono" style={{ fontSize: 11.5 }}>{u.history[u.history.length - 1].ts}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// =================== DEALER · Verificar embarque (Vo.Bo.) ===================
function EbDScanner() {
  const { units, transition } = useEbQrUnits();
  const [firmante, setFirmante] = useStateD("");
  const incoming = units.filter(u => u.dealer === window.EB_CTX.dealerActual && (u.stage === "transito" || u.stage === "recibido_pendiente"));

  function escanear(vin) {
    transition(vin, "recibido_pendiente", {
      stage: "Embarque escaneado en Dealer — Vo.Bo. pendiente", ts: "ahora",
      ubic: window.EB_CTX.dealerActual, usuario: "Sin firmar",
      note: "El operador debe validar y firmar para acreditar la entrada.",
    });
  }
  function firmar(vin) {
    if (!firmante.trim()) return;
    const u = units.find(x => x.vin === vin);
    transition(vin, "inventario_dealer", {
      stage: "Vo.Bo. de recepción en Dealer", ts: "ahora", ubic: window.EB_CTX.dealerActual, usuario: firmante,
      note: "Sin discrepancias — pedido correcto. Firma electrónica registrada.",
    });
    u.history.push({ stage: "Alta a inventario del Dealer", ts: "ahora", ubic: window.EB_CTX.dealerActual + " · piso de venta", usuario: "Sistema" });
    setFirmante("");
  }

  return (
    <div className="canvas-in wide rise">
      <AppHead app="eb" title="Verificar embarque" sub="Escanea el QR de cada unidad al llegar y da tu Vo.Bo. para acreditar la entrada — sin discrepancias" />
      {incoming.length === 0 && <div className="card" style={{ padding: 24, textAlign: "center" }}><p className="muted" style={{ fontSize: 13 }}>No tienes embarques pendientes de verificar.</p></div>}
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {incoming.map((u, i) => (
          <div key={i} className="card" style={{ padding: 18 }}>
            <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
              <EbQrVisual seed={u.vin} size={60} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <b style={{ fontSize: 14 }}>{u.brand} {u.model}</b>
                <div className="mono" style={{ fontSize: 11, color: "var(--eb)", marginTop: 3 }}>{u.vin}</div>
              </div>
              <span className={"badge dot" + (u.stage === "recibido_pendiente" ? " bad" : " warn")}>{window.EB_QR_STAGE_META[u.stage].label}</span>
            </div>
            <div style={{ marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--line)", display: "flex", gap: 10, alignItems: "center" }}>
              {u.stage === "transito" ? (
                <button className="btn btn-primary" style={{ background: "var(--eb)" }} onClick={() => escanear(u.vin)}><Icon name="qr" size={14} /> Escanear QR de llegada</button>
              ) : (
                <>
                  <input className="field" placeholder="Firma tu usuario para dar Vo.Bo. (ej. A. Rangel)" value={firmante} onChange={e => setFirmante(e.target.value)} style={{ flex: 1 }} />
                  <button className="btn btn-primary" style={{ background: "var(--eb)" }} disabled={!firmante.trim()} onClick={() => firmar(u.vin)}><Icon name="check" size={14} /> Firmar Vo.Bo. y dar entrada</button>
                </>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// =================== DEALER · Venta a cliente final (salida por QR) ===================
function EbSellModal({ unit, onClose }) {
  const { transition } = useEbQrUnits();
  const [vendedor, setVendedor] = useStateD(window.EB_VENDEDORES[0].name);
  const [cliente, setCliente] = useStateD("");
  const [scanned, setScanned] = useStateD(false);

  function confirmar(e) {
    e.preventDefault();
    if (!cliente.trim()) return;
    unit.cliente = cliente;
    transition(unit.vin, "vendida", {
      stage: "Venta a cliente final", ts: "ahora", ubic: window.EB_CTX.dealerActual, usuario: vendedor,
      note: "Cliente: " + cliente + " · tarjeta + QR digital entregados.",
    });
    onClose();
  }
  return (
    <div className="cmd-overlay" onMouseDown={onClose}>
      <div className="cmd-panel" style={{ width: 460 }} onMouseDown={e => e.stopPropagation()}>
        <div className="cmd-input">
          <b style={{ fontSize: 14.5 }}>Vender a cliente final</b>
          <button className="ic-btn" style={{ marginLeft: "auto" }} onClick={onClose}><Icon name="ext" size={15} /></button>
        </div>
        <div style={{ padding: "16px 20px 0" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
            <EbQrVisual seed={unit.vin} size={54} />
            <div><b style={{ fontSize: 13.5 }}>{unit.brand} {unit.model}</b><div className="mono" style={{ fontSize: 11, color: "var(--eb)", marginTop: 2 }}>{unit.vin}</div></div>
          </div>
        </div>
        <form onSubmit={confirmar} style={{ padding: "0 20px 20px", display: "flex", flexDirection: "column", gap: 12 }}>
          {!scanned ? (
            <button type="button" className="btn" style={{ justifyContent: "center", height: 40 }} onClick={() => setScanned(true)}><Icon name="qr" size={15} /> Escanear QR para dar salida</button>
          ) : (
            <div className="badge ok dot" style={{ alignSelf: "flex-start" }}>QR escaneado</div>
          )}
          <div>
            <label className="lbl" style={{ fontSize: 11.5, color: "var(--text-3)", display: "block", marginBottom: 5 }}>Vendedor (tu usuario)</label>
            <select className="field" value={vendedor} onChange={e => setVendedor(e.target.value)}>
              {window.EB_VENDEDORES.map(v => <option key={v.name} value={v.name}>{v.name}</option>)}
            </select>
          </div>
          <div>
            <label className="lbl" style={{ fontSize: 11.5, color: "var(--text-3)", display: "block", marginBottom: 5 }}>Cliente final</label>
            <input className="field" value={cliente} onChange={e => setCliente(e.target.value)} placeholder="Nombre del cliente" required />
          </div>
          <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 6 }}>
            <button type="button" className="btn btn-sm" onClick={onClose}>Cancelar</button>
            <button type="submit" className="btn btn-sm btn-primary" style={{ background: "var(--eb)" }} disabled={!scanned}><Icon name="check" size={13} /> Confirmar venta</button>
          </div>
        </form>
      </div>
    </div>
  );
}

Object.assign(window, { qrPattern, EbQrVisual, useEbQrUnits, EbQrTimeline, EbEtiquetas, EbDScanner, EbSellModal });
