// hydor-page-products.jsx — Products & Inventory page. Depends on engine, ui, forms.
function ProductsPage({ onDrill }) {
  const s = useHydor();
  const d = useDerive();
  const push = useToast();
  const role = useRole();
  const canMoney = Hydor.can(role, "seeCostProfit");
  const canEdit = Hydor.can(role, "manageProducts");
  const [q, setQ] = React.useState("");
  const [sort, setSort] = React.useState({ key: "code", dir: "asc" });
  const [form, setForm] = React.useState(null);  // {editing} | true
  const [del, setDel] = React.useState(null);
  const [abcFilter, setAbcFilter] = React.useState("all");

  const rows = s.products.map((p) => ({ p, st: d.productStats[p.id] }))
    .filter(({ p }) => (p.code + " " + p.name).toLowerCase().includes(q.toLowerCase()))
    .filter(({ st }) => abcFilter === "all" || st.abc === abcFilter);

  const acc = {
    code: (r) => r.p.code, name: (r) => r.p.name, remaining: (r) => r.st.remaining,
    avgCost: (r) => r.st.avgCost, recPrice: (r) => r.st.recPrice, invValue: (r) => r.st.invValue,
    sold: (r) => r.st.sold, revenue: (r) => r.st.revenue, profit: (r) => r.st.profit, margin: (r) => r.st.margin,
    abc: (r) => r.st.abc,
  };
  const sorted = sortRows(rows, sort, acc);

  const tot = d.totals;
  const stats = canMoney ? [
    { label: "Products", value: Hydor.fmtQty(s.products.length), sub: "tracked systems" },
    { label: "Inventory value", value: Hydor.fmtMoney0(tot.invValue), sub: "JOD at FIFO cost", accent: "var(--accent)" },
    { label: "Units on hand", value: Hydor.fmtQty(s.products.reduce((a, p) => a + d.productStats[p.id].remaining, 0)), sub: "across all products" },
    { label: "Lifetime profit", value: Hydor.fmtMoney0(s.products.reduce((a, p) => a + d.productStats[p.id].profit, 0)), sub: "JOD gross", accent: "var(--pos)" },
  ] : [
    { label: "Products", value: Hydor.fmtQty(s.products.length), sub: "tracked systems" },
    { label: "Units on hand", value: Hydor.fmtQty(s.products.reduce((a, p) => a + d.productStats[p.id].remaining, 0)), sub: "across all products" },
    { label: "Low / dead stock", value: Hydor.fmtQty(s.products.filter((p) => { const st = d.productStats[p.id]; return st.dead || (p.reorder > 0 && st.remaining <= p.reorder); }).length), sub: "need attention", accent: "var(--warn)" },
    { label: "Units sold", value: Hydor.fmtQty(s.products.reduce((a, p) => a + d.productStats[p.id].sold, 0)), sub: "lifetime" },
  ];

  const exportCsv = () => {
    const rowsCsv = [["Code", "Name", "On hand", "Avg cost", "Rec. price", "Inv. value", "Units sold", "Revenue", "Profit", "Margin %", "ABC"]];
    sorted.forEach(({ p, st }) => rowsCsv.push([p.code, p.name, st.remaining, st.avgCost.toFixed(3), st.recPrice.toFixed(3), st.invValue.toFixed(3), st.sold, st.revenue.toFixed(3), st.profit.toFixed(3), (st.margin * 100).toFixed(1), st.abc]));
    Hydor.exportCSV("hydor-products.csv", rowsCsv);
    push("Products exported to CSV.");
  };

  return (
    <div className="content-narrow">
      <div className="stat-strip" style={{ gridTemplateColumns: "repeat(4,1fr)" }}>
        {stats.map((st) => (
          <div className="mini-stat" key={st.label} style={st.accent ? { borderLeft: `3px solid ${st.accent}` } : null}>
            <div className="ms-label">{st.label}</div>
            <div className="ms-value">{st.value}</div>
            <div className="ms-sub">{st.sub}</div>
          </div>
        ))}
      </div>

      <div className="toolbar">
        <div className="search"><Icon name="search" /><input placeholder="Search products…" value={q} onChange={(e) => setQ(e.target.value)} /></div>
        <div className="chip-row">
          {["all", "A", "B", "C"].map((a) => <button key={a} className={"chip" + (abcFilter === a ? " on" : "")} onClick={() => setAbcFilter(a)}>{a === "all" ? "All classes" : "Class " + a}</button>)}
        </div>
        <div className="grow" />
        {canMoney && <Btn icon="download" onClick={exportCsv} disabled={!s.products.length}>CSV</Btn>}
        {canEdit && <Btn variant="primary" icon="plus" onClick={() => setForm({})}>New product</Btn>}
      </div>

      <div className="hx-panel" style={{ overflow: "hidden" }}>
        {s.products.length === 0 ? (
          <Empty icon="box" title="No products yet" action={canEdit ? <Btn variant="primary" icon="plus" onClick={() => setForm({})}>Add your first product</Btn> : null}>
            Add the items you buy and sell. HYDOR tracks stock, FIFO cost, recommended price and profit automatically from your transactions.
          </Empty>
        ) : (
          <table className="hx-table">
            <thead><tr>
              <SortHeader col="code" label="Code" sort={sort} setSort={setSort} />
              <SortHeader col="name" label="Product" sort={sort} setSort={setSort} />
              <SortHeader col="abc" label="Class" sort={sort} setSort={setSort} />
              <SortHeader col="remaining" label="On hand" sort={sort} setSort={setSort} r />
              {canMoney && <SortHeader col="avgCost" label="Avg cost" sort={sort} setSort={setSort} r />}
              <SortHeader col="recPrice" label="Rec. price" sort={sort} setSort={setSort} r />
              {canMoney && <SortHeader col="invValue" label="Inv. value" sort={sort} setSort={setSort} r />}
              <SortHeader col="sold" label="Sold" sort={sort} setSort={setSort} r />
              {canMoney && <SortHeader col="profit" label="Profit" sort={sort} setSort={setSort} r />}
              {canMoney && <SortHeader col="margin" label="Margin" sort={sort} setSort={setSort} r />}
              <th></th>
            </tr></thead>
            <tbody>
              {sorted.map(({ p, st }) => {
                const low = p.reorder > 0 && st.remaining <= p.reorder;
                return (
                  <tr key={p.id} className="clickrow" onClick={() => onDrill({ type: "product", id: p.id })}>
                    <td><span className="hx-code">{p.code}</span></td>
                    <td style={{ fontWeight: 500 }}>{p.name}
                      {p.category && <span style={{ display: "block", fontSize: 11.5, color: "var(--text-3)" }}>{p.category}</span>}
                      {st.dead && <Badge color="amber" >dead stock</Badge>}
                    </td>
                    <td><span className={"abc " + (st.abc === "—" ? "C" : st.abc)}>{st.abc}</span></td>
                    <td className="r num">
                      <span style={low ? { color: "var(--warn)", fontWeight: 600 } : null}>{Hydor.fmtQty(st.remaining)}</span>
                      {low && <Icon name="alert" size={12} style={{ color: "var(--warn)", marginLeft: 5, verticalAlign: "middle" }} />}
                    </td>
                    {canMoney && <td className="r num" style={{ color: "var(--text-2)" }}>{Hydor.fmtMoney(st.avgCost)}</td>}
                    <td className="r num" style={{ color: "var(--accent-2)" }}>{Hydor.fmtMoney(st.recPrice)}</td>
                    {canMoney && <td className="r num">{Hydor.fmtMoney0(st.invValue)}</td>}
                    <td className="r num" style={{ color: "var(--text-2)" }}>{Hydor.fmtQty(st.sold)}</td>
                    {canMoney && <td className="r num hx-pos">{Hydor.fmtMoney0(st.profit)}</td>}
                    {canMoney && <td className="r num"><Pct v={st.margin} color /></td>}
                    <td className="r no-print" onClick={(e) => e.stopPropagation()}>
                      <div style={{ display: "flex", gap: 2, justifyContent: "flex-end" }}>
                        {canEdit && <Btn variant="ghost" sm icon="edit" onClick={() => setForm({ editing: p })} />}
                        {canEdit && <Btn variant="ghost" sm icon="trash" onClick={() => setDel(p)} />}
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>

      {form && <ProductForm editing={form.editing} onClose={() => setForm(null)} />}
      {del && <Confirm title="Delete product?" danger confirmLabel="Delete"
        body={`Delete ${del.code} · ${del.name}? This can't be undone.`}
        onConfirm={() => { try { Hydor.deleteProduct(del.id); push("Product deleted."); } catch (e) { push(e.message, "err"); } }}
        onClose={() => setDel(null)} />}
    </div>
  );
}
Object.assign(window, { ProductsPage });