/* ============================================================
   VegaFácil — Vista Comerciante
   ============================================================ */
function MerchantView({ merchantId, onPlaceOrder }) {
  const { products, priceFor, byId, merchants } = window.VEGA;
  const me = byId(merchants, merchantId);
  const [cat, setCat] = useState("verdura");
  const [cart, setCart] = useState({});          // { productId: qty }
  const [sheet, setSheet] = useState(false);
  const [confirmed, setConfirmed] = useState(null); // resumen del pedido confirmado

  const setQty = (id, q) => setCart((c) => { const n = { ...c }; if (q <= 0) delete n[id]; else n[id] = q; return n; });

  const list = products.filter((p) => p.cat === cat);
  const lines = Object.entries(cart).map(([id, qty]) => {
    const p = byId(products, id); const price = priceFor(p, merchantId);
    return { p, qty, price, sub: price * qty, negotiated: p.special && p.special[merchantId] != null };
  });
  const count = lines.reduce((s, l) => s + l.qty, 0);
  const total = lines.reduce((s, l) => s + l.sub, 0);
  const negotiatedCount = products.filter((p) => p.special && p.special[merchantId] != null).length;

  // --- Pantalla de confirmación ---
  if (confirmed) {
    return (
      <div className="page no-cart fade-enter">
        <div className="col" style={{ paddingTop: 40, textAlign: "center" }}>
          <div style={{ width: 84, height: 84, margin: "0 auto 18px", borderRadius: "50%", background: "var(--verde-soft)", display: "grid", placeItems: "center", color: "var(--verde)" }}>
            <Icon name="check" size={42} stroke={2.4} />
          </div>
          <h2 className="h-display" style={{ fontSize: 27, margin: "0 0 6px" }}>¡Pedido enviado!</h2>
          <p className="muted" style={{ margin: "0 0 22px", fontSize: 15 }}>
            Tu pedido va a la bodega de PedidoFácil. Te avisaremos cuando salga a reparto.
          </p>
          <div className="card card-pad" style={{ textAlign: "left" }}>
            <div className="row" style={{ justifyContent: "space-between", marginBottom: 10 }}>
              <b className="h-title" style={{ fontSize: 16 }}>Resumen</b>
              <span className="badge badge-pend"><span className="dot"></span>En preparación</span>
            </div>
            {confirmed.lines.map((l) => (
              <div className="line-item" key={l.p.id}>
                <div className="lg">{l.p.emoji}</div>
                <div className="ln"><b>{l.p.name}</b><span>{l.qty} × {l.p.unit}</span></div>
                <div className="lp num">{fmt(l.sub)}</div>
              </div>
            ))}
            <div style={{ borderTop: "1px solid var(--line)", marginTop: 6, paddingTop: 8 }}>
              <div className="totrow grand"><span>Total</span><span className="num">{fmt(confirmed.total)}</span></div>
            </div>
          </div>
          <div style={{ marginTop: 20 }}>
            <Btn variant="verde" block size="lg" onClick={() => { setConfirmed(null); setCart({}); }}>Hacer otro pedido</Btn>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="page fade-enter">
      <div className="col">
        {/* Banner precios negociados */}
        {negotiatedCount > 0 && (
          <div className="neg-banner" style={{ marginTop: 14 }}>
            <div className="nb-ic"><Icon name="tag" size={18} /></div>
            <div style={{ flex: 1 }}>
              <div className="nb-t">Estás viendo tus precios negociados</div>
              <div className="nb-d">{negotiatedCount} productos con precio especial para {me.name}.</div>
            </div>
          </div>
        )}

        {/* Encabezado + filtros */}
        <div className="row" style={{ justifyContent: "space-between", margin: "18px 0 12px" }}>
          <h2 className="section-label">Lista de precios</h2>
        </div>
        <div className="segs full" style={{ marginBottom: 14 }}>
          <button className={cat === "verdura" ? "on" : ""} onClick={() => setCat("verdura")}>🥬 Verduras</button>
          <button className={cat === "fruta" ? "on" : ""} onClick={() => setCat("fruta")}>🍎 Frutas</button>
        </div>

        {/* Productos */}
        <div className="stack" style={{ gap: 10 }}>
          {list.map((p) => {
            const price = priceFor(p, merchantId);
            const neg = p.special && p.special[merchantId] != null;
            const qty = cart[p.id] || 0;
            return (
              <div className={"prod" + (qty > 0 ? " in-cart" : "")} key={p.id}>
                <Glyph emoji={p.emoji} />
                <div className="info">
                  <div className="name">{p.name}</div>
                  <div className="unit">{p.unit}</div>
                  <div className="price-col" style={{ textAlign: "left", marginTop: 4, display: "flex", alignItems: "baseline", gap: 8 }}>
                    <span className="price num">{fmt(price)}</span>
                    {neg && <span className="was num">{fmt(p.base)}</span>}
                    {neg && <span className="badge badge-neg" style={{ padding: "2px 7px" }}>tu precio</span>}
                  </div>
                </div>
                {qty > 0
                  ? <Stepper value={qty} onChange={(q) => setQty(p.id, q)} />
                  : <button className="add-btn" onClick={() => setQty(p.id, 1)} aria-label={"Agregar " + p.name}>+</button>}
              </div>
            );
          })}
        </div>
        <p className="muted" style={{ textAlign: "center", fontSize: 12.5, margin: "20px 0 0" }}>
          Precios mayoristas por unidad de venta · La Vega Central
        </p>
      </div>

      {/* Carrito flotante */}
      <div className="cart-dock">
        <div className={"cart-bar" + (count === 0 ? " hidden" : "")}>
          <div className="row" style={{ gap: 12 }}>
            <div style={{ position: "relative" }}>
              <Icon name="cart" size={24} />
              <span style={{ position: "absolute", top: -8, right: -10, background: "var(--tomate)", fontSize: 11, fontWeight: 800, borderRadius: 999, minWidth: 18, height: 18, padding: "0 4px", display: "grid", placeItems: "center" }} className="num">{count}</span>
            </div>
            <div className="stack">
              <span className="c-count">{lines.length} {lines.length === 1 ? "producto" : "productos"}</span>
              <span className="c-amt num">{fmt(total)}</span>
            </div>
          </div>
          <div className="spacer"></div>
          <button className="c-go" onClick={() => setSheet(true)}>Ver pedido <Icon name="chev" size={16} /></button>
        </div>
      </div>

      {/* Hoja de resumen */}
      {sheet && (
        <div className="sheet-scrim" onClick={() => setSheet(false)}>
          <div className="sheet" onClick={(e) => e.stopPropagation()}>
            <div className="grab"></div>
            <div className="sheet-head">
              <div>
                <h3 className="h-title" style={{ fontSize: 20, margin: 0 }}>Resumen del pedido</h3>
                <span className="muted" style={{ fontSize: 13 }}>{me.name} · {me.local}</span>
              </div>
              <button className="add-btn" style={{ background: "#fff", border: "1px solid var(--line-2)", color: "var(--muted)" }} onClick={() => setSheet(false)}><Icon name="close" size={18} /></button>
            </div>
            <div className="sheet-body">
              {lines.map((l) => (
                <div className="line-item" key={l.p.id}>
                  <div className="lg">{l.p.emoji}</div>
                  <div className="ln">
                    <b>{l.p.name}</b>
                    <span>{fmt(l.price)} · {l.p.unit} {l.negotiated && "· precio negociado"}</span>
                  </div>
                  <Stepper value={l.qty} small onChange={(q) => setQty(l.p.id, q)} />
                  <div className="lp num" style={{ minWidth: 76 }}>{fmt(l.sub)}</div>
                </div>
              ))}
            </div>
            <div className="sheet-foot">
              <div className="totrow"><span className="muted">Productos ({count})</span><span className="num">{fmt(total)}</span></div>
              <div className="totrow grand"><span>Total</span><span className="num">{fmt(total)}</span></div>
              <div style={{ marginTop: 12 }}>
                <Btn variant="primary" block size="lg" onClick={() => {
                  const snap = { lines, total };
                  onPlaceOrder(lines.map((l) => ({ productId: l.p.id, qty: l.qty })));
                  setSheet(false); setConfirmed(snap);
                }}>
                  <Icon name="check" size={18} /> Confirmar y enviar pedido
                </Btn>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.MerchantView = MerchantView;