/* global React, PageHead, FilterBar, Pager, PAGE_SIZES, STORE_MASTER, INVENTORY_SEED, useSortableTable */

const { useState, useMemo } = React;

const StockQueryPage = ({ sectionLabel, titleLabel }) => {
  const [searchQ,      setSearchQ]      = useState("");
  const [filterStores, setFilterStores] = useState([]);
  const [filterStatus, setFilterStatus] = useState([]);
  const { SortHead, applySortTo }      = useSortableTable("updatedAt", "desc");
  const [page,         setPage]         = useState(1);
  const [pageSize,     setPageSize]     = useState(PAGE_SIZES[0]);

  const lastUpdatedAt = useMemo(() =>
    INVENTORY_SEED.reduce((max, r) => r.updatedAt > max ? r.updatedAt : max, ""),
  []);

  const storeOptions = useMemo(() =>
    STORE_MASTER.map(s => ({ value: s.id, label: `${s.id} ${s.name}` })),
  []);

  const statusOptions = [
    { value: "in",  label: "有庫存" },
    { value: "oos", label: "缺貨" },
  ];

  const filteredRows = useMemo(() => {
    let rows = INVENTORY_SEED;
    if (searchQ) {
      const q = searchQ.toLowerCase();
      rows = rows.filter(r =>
        r.skuId.toLowerCase().includes(q) || r.skuName.toLowerCase().includes(q)
      );
    }
    if (filterStores.length) {
      rows = rows.filter(r => filterStores.includes(r.storeId));
    }
    if (filterStatus.length && filterStatus.length < 2) {
      if (filterStatus.includes("oos")) rows = rows.filter(r => r.inventory === 0);
      if (filterStatus.includes("in"))  rows = rows.filter(r => r.inventory > 0);
    }
    return applySortTo(rows);
  }, [searchQ, filterStores, filterStatus, applySortTo]);

  return (
    <>
      <PageHead
        crumbs={[
          { label: sectionLabel },
          { label: titleLabel, current: true },
        ]}
        title={
          <>
            {titleLabel}
            <div className="info-badge">
              最後更新<span style={{ fontFamily: "var(--font-mono)" }}>{lastUpdatedAt}</span>
            </div>
          </>
        }
        subtitle="查詢各門店最新商品庫存數量，資料由系統每小時自動更新。"
      />

      <FilterBar filters={[
        {
          type: "search",
          placeholder: "搜尋 Eats 品號、品名…",
          value: searchQ,
          onChange: v => { setSearchQ(v); setPage(1); },
        },
        {
          type: "chip",
          label: "門店",
          value: filterStores,
          options: storeOptions,
          onChange: v => { setFilterStores(v); setPage(1); },
          multi: true,
        },
        {
          type: "chip",
          label: "庫存狀態",
          value: filterStatus,
          options: statusOptions,
          onChange: v => { setFilterStatus(v); setPage(1); },
          multi: true,
        },
      ]} />

      <div className="card">
        <div className="tbl-wrap">
          <table className="tbl" style={{ minWidth: 860 }}>
            <thead>
              <tr>
                <th style={{ width: 168 }}><SortHead colKey="updatedAt" label="更新時間" /></th>
                <th style={{ width: 86 }}><SortHead colKey="storeId" label="門店代碼" /></th>
                <th style={{ width: 86 }}><SortHead colKey="storeName" label="門店名稱" /></th>
                <th style={{ width: 196, color: "var(--fg-3)", fontWeight: "var(--fw-regular)" }}>Eats 品號</th>
                <th><SortHead colKey="skuName" label="品名" /></th>
                <th style={{ width: 88, paddingRight: 24 }} className="num"><SortHead colKey="inventory" label="庫存數量" /></th>
              </tr>
            </thead>
            <tbody>
              {filteredRows.slice((page - 1) * pageSize, page * pageSize).map(r => (
                <tr key={`${r.storeId}-${r.skuId}`}>
                  <td className="mono" style={{ color: "var(--fg-2)", fontSize: "var(--fs-12)" }}>{r.updatedAt}</td>
                  <td className="mono">{r.storeId}</td>
                  <td>{r.storeName}</td>
                  <td className="mono" style={{ fontSize: "var(--fs-12)" }}>{r.skuId}</td>
                  <td>{r.skuName}</td>
                  <td className="num" style={{ paddingRight: 24, fontWeight: "var(--fw-medium)", ...(r.inventory === 0 ? { color: "var(--danger)" } : {}) }}>
                    {r.inventory}
                  </td>
                </tr>
              ))}
              {filteredRows.length === 0 && (
                <tr>
                  <td colSpan={6} style={{ textAlign: "center", color: "var(--fg-4)", padding: "24px 0" }}>
                    沒有符合條件的項目
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
        <Pager
          total={filteredRows.length}
          page={page}
          pageSize={pageSize}
          onPageChange={setPage}
          onSizeChange={s => { setPageSize(s); setPage(1); }}
        />
      </div>
    </>
  );
};

Object.assign(window, { StockQueryPage });