/* ============================================================
   VegaFácil — Vista Dueño (Comprar · Pedidos · Precios)
   ============================================================ */
function OwnerView({ orders, marginDefault, costOverrides, setCostOverrides }) {
  const { products, merchants, byId, priceFor, margin } = window.VEGA;
  const [tab, setTab] = useState("comprar");
  const [open, setOpen] = useState(null);
  const [minMargin, setMinMargin] = useState(marginDefault);

  const costOf = (p) => (costOverrides[p.id] != null ? costOverrides[p.id] : p.cost);

  // ---- KPIs ----
  const delivered = orders.filter((o) => o.status === "entregado").length;
  const saleValue = orders.reduce((s, o) =>
    s + o.items.reduce((ss, it) => ss + priceFor(byId(products, it.productId), o.merchantId) * it.qty, 0), 0);

  // ---- Consolidado de compra ----
  const consolidated = (() => {
    const map = {};
    orders.forEach((o) => o.items.forEach((it) => {
      if (!map[it.productId]) map[it.productId] = { qty: 0, merchants: new Set() };
      map[it.productId].qty += it.qty; map[it.productId].merchants.add(o.merchantId);
    }));
    return Object.entries(map).map(([id, v]) => {
      const p = byId(products, id);
      return { p, qty: v.qty, nMerchants: v.merchants.size, cost: v.qty * costOf(p) };
    }).sort((a, b) => b.cost - a.cost);
  })();
  const totalBuy = consolidated.reduce((s, c) => s + c.cost, 0);
  const totalUnits = consolidated.reduce((s, c) => s + c.qty, 0);

  // ---- Alerta de margen: precios de venta bajo el mínimo ----
  const flagged = [];
  products.forEach((p) => {
    const c = costOf(p);
    const mBase = margin(p.base, c);
    if (mBase < minMargin) flagged.push({ p, label: "Lista base", price: p.base, m: mBase });
    Object.entries(p.special || {}).forEach(([mid, price]) => {
      const mm = margin(price, c);
      if (mm < minMargin) flagged.push({ p, label: byId(merchants, mid).name, price, m: mm });
    });
  });

  return (
    <div className="page no-cart fade-enter">
      <div className="col wide">
        <div style={{ position: "sticky", top: 59, zIndex: 30, background: "var(--crema)", padding: "12px 0", margin: "0 0 4px" }}>
          <div className="tabs">
            <button className={tab === "comprar" ? "on" : ""} onClick={() => setTab("comprar")}><Icon name="cart2" size={16} /> Comprar</button>
            <button className={tab === "pedidos" ? "on" : ""} onClick={() => setTab("pedidos")}><Icon name="bag" size={16} /> Pedidos</button>
            <button className={tab === "precios" ? "on" : ""} onClick={() => setTab("precios")}><Icon name="tag" size={16} /> Precios</button>
          </div>
        </div>

        {/* ===================== COMPRAR ===================== */}
        {tab === "comprar" && (
          <div className="fade-enter">
            <div className="grid-3" style={{ margin: "8px 0 16px" }}>
              <div className="stat">
                <div className="k"><Icon name="bag" size={15} /> Pedidos</div>
                <div className="v num">{orders.length}</div>
              </div>
              <div className="stat">
                <div className="k"><Icon name="truck" size={15} /> Entregados</div>
                <div className="v num">{delivered}<small> / {orders.length}</small></div>
              </div>
              <div className="stat">
                <div className="k"><Icon name="spark" size={15} /> Monto vendido</div>
                <div className="v num">{fmt(saleValue)}</div>
              </div>
            </div>

            <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end", marginBottom: 12 }}>
              <div>
                <h2 className="section-label">Qué comprar hoy en La Vega</h2>
                <span className="muted" style={{ fontSize: 13 }}>Suma de todos los pedidos, por producto</span>
              </div>
            </div>

            <div className="card card-pad" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14, background: "var(--verde)", color: "#fff", border: "none" }}>
              <div>
                <div style={{ fontSize: 13, opacity: .85, fontWeight: 600 }}>Costo total de compra</div>
                <div className="h-display num" style={{ fontSize: 30, marginTop: 2 }}>{fmt(totalBuy)}</div>
              </div>
              <div style={{ textAlign: "right" }}>
                <div className="num" style={{ fontFamily: "var(--font-head)", fontWeight: 800, fontSize: 22 }}>{totalUnits}</div>
                <div style={{ fontSize: 12.5, opacity: .85 }}>bultos · {consolidated.length} productos</div>
              </div>
            </div>

            <div className="stack" style={{ gap: 10 }}>
              {consolidated.map((c) => (
                <div className="buyrow" key={c.p.id}>
                  <div className="glyph">{c.p.emoji}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="h-title" style={{ fontSize: 15.5 }}>{c.p.name}</div>
                    <div className="muted" style={{ fontSize: 12.5 }}>{c.p.unit} · {c.nMerchants} {c.nMerchants === 1 ? "comerciante" : "comerciantes"} · {fmt(costOf(c.p))} c/u</div>
                  </div>
                  <div style={{ textAlign: "center", padding: "0 6px" }}>
                    <div className="qty-big num">{c.qty}</div>
                    <div className="qty-unit">comprar</div>
                  </div>
                  <div style={{ textAlign: "right", minWidth: 92 }}>
                    <div className="num" style={{ fontWeight: 700, fontSize: 15 }}>{fmt(c.cost)}</div>
                    <div className="qty-unit">costo</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* ===================== PEDIDOS ===================== */}
        {tab === "pedidos" && (
          <div className="fade-enter">
            <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end", margin: "8px 0 14px" }}>
              <div>
                <h2 className="section-label">Pedidos por comerciante</h2>
                <span className="muted" style={{ fontSize: 13 }}>{orders.length} pedidos · {delivered} entregados</span>
              </div>
            </div>
            <div className="stack" style={{ gap: 12 }}>
              {orders.map((o) => {
                const m = byId(merchants, o.merchantId);
                const items = o.items.map((it) => ({ p: byId(products, it.productId), qty: it.qty }));
                const tot = o.items.reduce((s, it) => s + priceFor(byId(products, it.productId), o.merchantId) * it.qty, 0);
                const isOpen = open === o.id;
                return (
                  <div className="order-card" key={o.id}>
                    <button className="order-head" onClick={() => setOpen(isOpen ? null : o.id)}>
                      <div className="av">{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 }}>{o.time}</span>
                        </div>
                        <div className="muted" style={{ fontSize: 13 }}>{items.length} productos · <b className="num" style={{ color: "var(--ink-2)" }}>{fmt(tot)}</b></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)" }}>
                          {items.map(({ p, qty }) => {
                            const pr = priceFor(p, o.merchantId);
                            return (
                              <div className="line-item" key={p.id}>
                                <div className="lg">{p.emoji}</div>
                                <div className="ln"><b>{p.name}</b><span>{qty} × {fmt(pr)}</span></div>
                                <div className="lp num">{fmt(pr * qty)}</div>
                              </div>
                            );
                          })}
                        </div>
                        <div className="totrow grand" style={{ marginTop: 4 }}><span>Total</span><span className="num">{fmt(tot)}</span></div>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {/* ===================== PRECIOS ===================== */}
        {tab === "precios" && (
          <div className="fade-enter">
            {/* Control de margen mínimo */}
            <div className="card card-pad" style={{ margin: "8px 0 14px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 14, flexWrap: "wrap" }}>
              <div>
                <div className="h-title" style={{ fontSize: 16 }}>Margen mínimo</div>
                <div className="muted" style={{ fontSize: 13 }}>Avisaremos si algún precio de venta cae bajo este margen.</div>
              </div>
              <div className="row" style={{ gap: 4 }}>
                <Stepper value={minMargin} onChange={setMinMargin} min={0} max={60} />
                <span className="h-display num" style={{ fontSize: 24, marginLeft: 6 }}>{minMargin}%</span>
              </div>
            </div>

            {/* Alerta */}
            {flagged.length > 0 ? (
              <div className="alert danger" style={{ marginBottom: 14 }}>
                <div className="ic"><Icon name="alert" size={16} /></div>
                <div className="body">
                  <div className="t">{flagged.length} {flagged.length === 1 ? "precio quedó" : "precios quedaron"} bajo el margen mínimo</div>
                  <div className="d">Sube el precio de venta o renegocia el precio de compra para recuperar el {minMargin}%.</div>
                  <ul>
                    {flagged.map((f, i) => (
                      <li key={i}>
                        <span>{f.p.emoji} <b>{f.p.name}</b> · {f.label}</span>
                        <span><span className="num">{fmt(f.price)}</span> <span style={{ color: "var(--rojo)", fontWeight: 700 }} className="num">{f.m.toFixed(0)}%</span></span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            ) : (
              <div className="alert" style={{ background: "var(--verde-soft)", border: "1px solid var(--verde-300)", marginBottom: 14 }}>
                <div className="ic" style={{ background: "var(--verde)", color: "#fff" }}><Icon name="check" size={16} /></div>
                <div className="body">
                  <div className="t" style={{ color: "var(--verde-700)" }}>Todos los precios sobre el margen</div>
                  <div className="d">Ningún precio de venta cae bajo el {minMargin}%. Prueba subir el precio de compra para ver la alerta.</div>
                </div>
              </div>
            )}

            <div className="owner-grid">
              {products.map((p) => {
                const c = costOf(p);
                const rows = [{ label: "Venta base", price: p.base, who: "Lista general" },
                  ...Object.entries(p.special || {}).map(([mid, price]) => ({ label: byId(merchants, mid).name, price, who: "Precio especial" }))];
                const anyFlag = rows.some((r) => margin(r.price, c) < minMargin);
                return (
                  <div className={"price-card" + (anyFlag ? " flag" : "")} key={p.id}>
                    <div className="row" style={{ gap: 12, marginBottom: 10 }}>
                      <div className="glyph" style={{ width: 42, height: 42, fontSize: 22, borderRadius: 11 }}>{p.emoji}</div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div className="h-title" style={{ fontSize: 15.5 }}>{p.name}</div>
                        <div className="muted" style={{ fontSize: 12 }}>{p.unit}</div>
                      </div>
                      <div style={{ textAlign: "right" }}>
                        <div className="muted" style={{ fontSize: 11, fontWeight: 600, marginBottom: 3 }}>Precio compra</div>
                        <div className="cost-input">
                          <span>$</span>
                          <input type="number" className="num" value={c}
                            onChange={(e) => setCostOverrides({ ...costOverrides, [p.id]: Math.max(0, parseInt(e.target.value || "0", 10)) })} />
                        </div>
                      </div>
                    </div>
                    {rows.map((r, i) => {
                      const mm = margin(r.price, c);
                      return (
                        <div className="prow" key={i}>
                          <div className="pl"><b>{r.label}</b><span>{r.who}</span></div>
                          <div className="pr">
                            <span className="amt num">{fmt(r.price)}</span>
                            <MarginPill pct={mm} flag={minMargin} />
                          </div>
                        </div>
                      );
                    })}
                  </div>
                );
              })}
            </div>
            {Object.keys(costOverrides).length > 0 && (
              <div style={{ textAlign: "center", marginTop: 16 }}>
                <Btn variant="ghost" onClick={() => setCostOverrides({})}>Restablecer precios de compra</Btn>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

window.OwnerView = OwnerView;