/* ============================================================
   VegaFácil — Vista Repartidor
   ============================================================ */
function DriverView({ orders, onDeliver }) {
  const { products, merchants, byId } = window.VEGA;
  const [open, setOpen] = useState(null);

  const sorted = [...orders].sort((a, b) => a.time.localeCompare(b.time));
  const pend = sorted.filter((o) => o.status === "pendiente").length;
  const done = sorted.length - pend;

  return (
    <div className="page no-cart fade-enter">
      <div className="col">
        <div className="row" style={{ justifyContent: "space-between", margin: "16px 0 14px", alignItems: "flex-end" }}>
          <div>
            <h2 className="section-label">Entregas de hoy</h2>
            <span className="muted" style={{ fontSize: 13 }}>Lunes 1 de junio · Furgón 3</span>
          </div>
          <div className="row" style={{ gap: 8 }}>
            <span className="badge badge-pend"><span className="dot"></span>{pend} por entregar</span>
            <span className="badge badge-deliv"><span className="dot"></span>{done} listas</span>
          </div>
        </div>

        {/* Progreso del día */}
        <div className="card card-pad" style={{ marginBottom: 14 }}>
          <div className="row" style={{ justifyContent: "space-between", marginBottom: 8 }}>
            <b style={{ fontSize: 13.5, whiteSpace: "nowrap" }}>Progreso del día</b>
            <b className="num" style={{ fontSize: 13.5, color: "var(--verde)" }}>{done}/{sorted.length}</b>
          </div>
          <div style={{ height: 9, borderRadius: 999, background: "var(--line)", overflow: "hidden" }}>
            <div style={{ height: "100%", width: (sorted.length ? (done / sorted.length) * 100 : 0) + "%", background: "var(--verde)", borderRadius: 999, transition: "width .4s cubic-bezier(.2,.8,.2,1)" }}></div>
          </div>
        </div>

        <div className="stack" style={{ gap: 12 }}>
          {sorted.map((o) => {
            const m = byId(merchants, o.merchantId);
            const items = o.items.map((it) => ({ p: byId(products, it.productId), qty: it.qty }));
            const totalUnits = o.items.reduce((s, it) => s + it.qty, 0);
            const isOpen = open === o.id;
            const delivered = o.status === "entregado";
            return (
              <div className="order-card" key={o.id} style={delivered ? { opacity: .72 } : null}>
                <button className="order-head" onClick={() => setOpen(isOpen ? null : o.id)}>
                  <div className="av" style={delivered ? { background: "var(--verde)", color: "#fff" } : null}>
                    {delivered ? <Icon name="check" size={18} stroke={2.4} /> : m.initials}
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="row" style={{ gap: 8 }}>
                      <b className="h-title" style={{ fontSize: 16 }}>{m.name}</b>
                      <span className="muted num" style={{ fontSize: 13, display: "inline-flex", alignItems: "center", gap: 4 }}>
                        <Icon name="clock" size={13} /> {o.time}
                      </span>
                    </div>
                    <div className="muted" style={{ fontSize: 13 }}>{m.local} · {items.length} prod. · {totalUnits} bultos</div>
                  </div>
                  <StatusBadge status={o.status} />
                  <Icon name="chev" size={18} className={"chev" + (isOpen ? " open" : "")} />
                </button>
                {isOpen && (
                  <div className="order-body fade-enter">
                    <div className="stack" style={{ gap: 0, borderTop: "1px solid var(--line)", marginBottom: 12 }}>
                      {items.map(({ p, qty }) => (
                        <div className="line-item" key={p.id}>
                          <div className="lg">{p.emoji}</div>
                          <div className="ln"><b>{p.name}</b><span>{p.unit}</span></div>
                          <div className="num" style={{ fontFamily: "var(--font-head)", fontWeight: 800, fontSize: 18 }}>
                            ×{qty}
                          </div>
                        </div>
                      ))}
                    </div>
                    {delivered
                      ? <Btn variant="soft" block disabled><Icon name="check" size={18} /> Entregado a las {o.time}</Btn>
                      : <Btn variant="verde" block size="lg" onClick={() => onDeliver(o.id)}><Icon name="truck" size={18} /> Registrar entrega</Btn>}
                  </div>
                )}
              </div>
            );
          })}
        </div>

        {sorted.length === 0 && (
          <div className="empty"><div className="ee">🚚</div><p>No hay entregas asignadas para hoy.</p></div>
        )}
      </div>
    </div>
  );
}

window.DriverView = DriverView;