// Site Inventory
function InventoryPage({ lang }) {
  const [siteFilter, setSiteFilter] = useState("all");
  const sites = [...new Set(INVENTORY.map(i => i.site))];
  const filtered = siteFilter === "all" ? INVENTORY : INVENTORY.filter(i => i.site === siteFilter);
  const sort = useSort(filtered, "name", "asc");
  const data = sort.sorted;
  const totalValue = INVENTORY.reduce((a, i) => a + i.value, 0);
  const lowStock = INVENTORY.filter(i => i.qty < i.reorder).length;
  const toast = useToast();

  return (
    <div className="anim-fadein">
      <PageHeader
        title={lang === "th" ? "คลังหน้างาน" : "Site Inventory"}
        subtitle={lang === "th" ? "ติดตามวัสดุที่หน้างาน + จุดเตือนเติมสต๊อก" : "Track on-site materials with reorder alerts"}
        actions={<>
          <button className="btn btn-sm"><I.upload /> {lang==="th"?"บันทึกรับของ":"Record receipt"}</button>
          <button className="btn btn-sm btn-primary"><I.plus /> {lang==="th"?"เบิกใช้งาน":"Issue stock"}</button>
        </>}
      />

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 12, marginBottom: 14 }}>
        <StatCard label={lang==="th"?"จำนวน SKU":"Total SKU"} value={INVENTORY.length} icon="box" />
        <StatCard label={lang==="th"?"มูลค่าสต๊อก":"Stock value"} value={fmtTHB(totalValue)} icon="cash" accent="rgba(74,222,128,0.20)" />
        <StatCard label={lang==="th"?"ใกล้หมด":"Low stock"} value={lowStock} hint={lang==="th"?"ต่ำกว่าจุดเติม":"below reorder"} icon="bell" accent="rgba(255,107,138,0.20)" />
        <StatCard label={lang==="th"?"หน้างาน":"Sites"} value={sites.length} icon="grid" />
      </div>

      <div className="card" style={{ padding: 0 }}>
        <div style={{ padding: 14, borderBottom: "1px solid var(--line)", display: "flex", gap: 8, flexWrap: "wrap" }}>
          <button className="btn btn-sm" onClick={() => setSiteFilter("all")} style={{ background: siteFilter === "all" ? "rgba(40,72,255,0.18)" : "var(--glass-2)" }}>{lang==="th"?"ทุกหน้างาน":"All sites"}</button>
          {sites.map(s => (
            <button key={s} className="btn btn-sm" onClick={() => setSiteFilter(s)} style={{ background: siteFilter === s ? "rgba(40,72,255,0.18)" : "var(--glass-2)" }}>{s}</button>
          ))}
        </div>
        <table className="table">
          <thead><tr>
            <SortTH label="Code" k="code" sort={sort} />
            <SortTH label={lang==="th"?"รายการ":"Item"} k="name" sort={sort} />
            <SortTH label={lang==="th"?"หน้างาน":"Site"} k="site" sort={sort} />
            <SortTH label={lang==="th"?"คงเหลือ":"On hand"} k="qty" sort={sort} align="right" />
            <SortTH label={lang==="th"?"หน่วย":"Unit"} k="unit" sort={sort} />
            <SortTH label={lang==="th"?"จุดเติม":"Reorder"} k="reorder" sort={sort} />
            <SortTH label={lang==="th"?"มูลค่า":"Value"} k="value" sort={sort} align="right" />
            <th></th>
          </tr></thead>
          <tbody>
            {data.map((it, i) => {
              const low = it.qty < it.reorder;
              const ratio = Math.min(it.qty / (it.reorder * 2), 1);
              return (
                <tr key={i} className="row-int">
                  <td className="mono" style={{ fontSize: 12, color: "var(--syk-blue-soft)" }}>{it.code}</td>
                  <td>{it.name}</td>
                  <td className="mono ink-soft" style={{ fontSize: 12 }}>{it.site}</td>
                  <td className="mono" style={{ textAlign: "right", fontWeight: 600, color: low ? "var(--rose)" : "var(--ink)" }}>{it.qty}</td>
                  <td className="ink-soft">{it.unit}</td>
                  <td style={{ width: 140 }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <div className="prog" style={{ flex: 1, height: 5 }}>
                        <span style={{ width: `${ratio * 100}%`, background: low ? "linear-gradient(90deg, var(--rose), var(--amber))" : "linear-gradient(90deg, var(--emerald), #6ee7a7)" }} />
                      </div>
                      <span className="mono ink-mute" style={{ fontSize: 11 }}>{it.reorder}</span>
                    </div>
                  </td>
                  <td className="mono" style={{ textAlign: "right" }}>{fmtTHB(it.value)}</td>
                  <td style={{ textAlign: "right", width: 100 }}>
                    {low ? <button className="btn btn-sm" style={{ color: "var(--rose)" }} onClick={() => toast("เปิด PR เติมสต๊อก " + it.name, "info")}><I.cart size={12} /> เปิด PR</button>
                         : <span className="chip success" style={{ fontSize: 10 }}>OK</span>}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.InventoryPage = InventoryPage;