/* ============================================================
   Vista: Stock (semáforo crítico / bajo / OK)
   ============================================================ */
function StockBar({ product }) {
  const ideal = RB.stockIdeal(product);
  const st = RB.stockState(product);
  const colors = { crit: "var(--crit)", warn: "var(--warn)", ok: "var(--ok)" };
  const pct = Math.min(100, Math.round((product.stock / (ideal || 1)) * 100));
  return (
    <div style={{ minWidth: 150 }}>
      <div className="bar"><span style={{ width: pct + "%", background: colors[st] }}></span></div>
      <div className="flex between" style={{ fontSize: 11, color: "var(--muted)", marginTop: 5 }}>
        <span>mín {product.stockMin}</span><span>ideal {ideal}</span>
      </div>
    </div>
  );
}

function Stock({ products, suppliers, onChange, toast, go }) {
  const [detail, setDetail] = useState(null);
  const groups = {
    crit: products.filter((p) => RB.stockState(p) === "crit"),
    warn: products.filter((p) => RB.stockState(p) === "warn"),
    ok: products.filter((p) => RB.stockState(p) === "ok"),
  };
  const meta = {
    crit: { label: "Crítico", sub: "Stock por debajo del mínimo", cls: "crit",
      help: "Productos cuyo stock está por debajo del mínimo que definiste. Hay que reponerlos ya para no quedarte sin mercadería." },
    warn: { label: "Bajo", sub: "Entre el mínimo y el ideal", cls: "warn",
      help: "Productos que están entre el mínimo y el ideal. Todavía tenés, pero conviene reponerlos pronto para no llegar al rojo." },
    ok: { label: "En orden", sub: "Igual o superior al ideal", cls: "ok",
      help: "Productos con stock igual o mayor al ideal (mínimo × 2). No necesitan reposición por ahora." },
  };

  const adjust = (p, d) => {
    onChange((st) => ({ ...st, products: st.products.map((x) => x.id === p.id ? { ...x, stock: Math.max(0, x.stock + d) } : x) }));
  };

  return (
    <div>
      <div className="grid-3">
        {["crit", "warn", "ok"].map((k) => (
          <div className="stat clickable" key={k} style={{ borderTop: "3px solid " + (k === "crit" ? "var(--crit)" : k === "warn" ? "var(--warn)" : "var(--ok)") }}
            role="button" tabIndex={0}
            onClick={() => setDetail({
              title: meta[k].label + " · " + groups[k].length + " productos",
              intro: meta[k].help,
              rows: groups[k].map((p) => ({ name: p.name, sub: p.cat, value: "Stock " + p.stock + " / mín " + p.stockMin })),
              empty: "No hay productos en este estado.",
            })}
            onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setDetail({ title: meta[k].label, intro: meta[k].help, rows: groups[k].map((p) => ({ name: p.name, sub: p.cat, value: "Stock " + p.stock + " / mín " + p.stockMin })), empty: "No hay productos en este estado." }); } }}>
            <div className="flex between aic">
              <div className="stat-label">{meta[k].label}</div>
              <span className={"badge badge-" + k}><span className="dot"></span>{groups[k].length}</span>
            </div>
            <div className="stat-value">{groups[k].length}</div>
            <div className="muted" style={{ fontSize: 12.5, marginTop: 4 }}>{meta[k].sub} · tocá para ver el detalle</div>
          </div>
        ))}
        {detail && <DetailModal {...detail} onClose={() => setDetail(null)} />}
      </div>

      {["crit", "warn", "ok"].map((k) => groups[k].length > 0 && (
        <div key={k}>
          <div className="section-head">
            <span className={"badge badge-" + k}><span className="dot"></span>{meta[k].label}</span>
            <h2 style={{ fontSize: 18 }}>{groups[k].length} productos</h2>
            {k === "crit" && <><span className="spacer"></span>
              <button className="btn btn-clay btn-sm" onClick={() => go("compras")}><Icon name="cart" size={15} />Generar reposición</button></>}
          </div>
          <div className="table-wrap">
            <table className="tbl">
              <thead>
                <tr><th>Producto</th><th className="center">Stock</th><th>Nivel</th>
                  <th>Estado</th><th className="center">Ajuste rápido</th><th className="right">Reponer</th></tr>
              </thead>
              <tbody>
                {groups[k].map((p) => (
                  <tr key={p.id}>
                    <td><div className="prod-cell"><ProdThumb product={p} /><div>
                      <div className="td-strong">{p.name}</div>
                      <div className="muted" style={{ fontSize: 12 }}>{p.cat}</div></div></div></td>
                    <td className="center num td-strong" style={{ fontSize: 16 }} data-label="Stock">{p.stock}</td>
                    <td data-label="Nivel"><StockBar product={p} /></td>
                    <td data-label="Estado"><StockBadge product={p} /></td>
                    <td className="center" data-label="Ajuste">
                      <div className="flex gap8" style={{ justifyContent: "center" }}>
                        <button className="icon-btn" onClick={() => adjust(p, -1)} style={{ border: "1px solid var(--line)" }}><Icon name="x" size={13} /></button>
                        <button className="icon-btn" onClick={() => adjust(p, 1)} style={{ border: "1px solid var(--line)" }}><Icon name="plus" size={15} /></button>
                      </div>
                    </td>
                    <td className="right num td-strong" data-label="Reponer">{RB.reorderQty(p) > 0 ? "+" + RB.reorderQty(p) : "—"}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Stock });