// DistributorCatalog — the catalog a regional distributor carries, with reorder controls.

const CATALOG = [
  { sku: "KHT-J-5KG",    brand: "Khao Hom Thai",   name: "香米 5kg",          stock:  240, reorder: 100, sold: 142, gmv: 142000, state: "ok" },
  { sku: "KHT-B-2KG",    brand: "Khao Hom Thai",   name: "糙米香米 2kg",      stock:   62, reorder:  50, sold:  88, gmv:  44000, state: "ok" },
  { sku: "SIA-LIP-01",   brand: "Siam Cosmetic",   name: "Siam 唇釉 · 玫瑰",   stock:    8, reorder:  40, sold: 124, gmv:  93000, state: "low" },
  { sku: "SIA-FOU-01",   brand: "Siam Cosmetic",   name: "Siam 粉底液 · 浅色",  stock:   38, reorder:  30, sold:  62, gmv:  46500, state: "ok" },
  { sku: "BKB-CRM-01",   brand: "Bangkok Beauty",  name: "Bangkok Beauty 面霜", stock:    4, reorder:  20, sold:  48, gmv:  72000, state: "low" },
  { sku: "RMC-COF-1KG",  brand: "Riang Mai Coffee",name: "清迈咖啡豆 1kg",     stock:  124, reorder:  40, sold:  34, gmv:  17000, state: "ok" },
  { sku: "LAN-TEA-200G", brand: "Lanna Tea",       name: "兰娜乌龙茶 200g",    stock:   88, reorder:  30, sold:  18, gmv:   5400, state: "ok" },
];

const STATE = {
  ok:  { label: "In stock",  tone: "success" },
  low: { label: "Low stock", tone: "warning" },
  out: { label: "Out",       tone: "danger" },
};

function DistributorCatalog() {
  const [brand, setBrand] = React.useState(null);
  const brands = Array.from(new Set(CATALOG.map(c => c.brand)));
  const rows = CATALOG.filter(c => !brand || c.brand === brand);

  return (
    <div>
      <div className="page-head">
        <h1>Catalog</h1>
        <span className="count">{rows.length} of {CATALOG.length} SKUs · 6 brands</span>
        <div className="right">
          <button className="btn secondary"><i className="ti ti-download"></i>Export</button>
          <button className="btn secondary"><i className="ti ti-history"></i>Order history</button>
          <button className="btn primary"><i className="ti ti-shopping-cart-plus"></i>Reorder selected</button>
        </div>
      </div>

      <div className="filter-bar">
        <span className="label-caps">Brand</span>
        <span className={"chip" + (brand === null ? " active":"")} onClick={() => setBrand(null)}>All</span>
        {brands.map(b => <span key={b} className={"chip" + (brand === b ? " active":"")} onClick={() => setBrand(b)}>{b}</span>)}
      </div>

      <div className="table-card">
        <table>
          <thead>
            <tr>
              <th>SKU</th>
              <th>Product · brand</th>
              <th style={{width:100, textAlign:"right"}}>On hand</th>
              <th style={{width:100, textAlign:"right"}}>Reorder pt</th>
              <th style={{width:100, textAlign:"right"}}>Sold MTD</th>
              <th style={{width:140, textAlign:"right"}}>GMV MTD</th>
              <th style={{width:120}}>Status</th>
              <th style={{width:36}}></th>
            </tr>
          </thead>
          <tbody>
            {rows.map(c => (
              <tr key={c.sku}>
                <td className="data-mono">{c.sku}</td>
                <td><div className="org-name">{c.name}</div><div className="org-id" style={{fontFamily:"var(--font-sans)"}}>{c.brand}</div></td>
                <td className="num" style={c.state === "low" ? {color:"var(--color-text-on-warning)"} : {}}>{c.stock}</td>
                <td className="num" style={{color:"var(--on-surface-variant)"}}>{c.reorder}</td>
                <td className="num">{c.sold}</td>
                <td className="num">¥{c.gmv.toLocaleString()}</td>
                <td><span className={"pill " + STATE[c.state].tone}>{STATE[c.state].label}</span></td>
                <td><span className="kebab"><i className="ti ti-dots-vertical"></i></span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.DistributorCatalog = DistributorCatalog;