/* global React, Icon, Button, Field, Tag, ChipFilter, AdvFilterBtn, FdrChipGroup, FilterDrawer, FilterGroup, FilterTagStrip, Pager, ModeToggle, useToast, ImportBanner, runImportProgress, PRICE_HISTORY, RECORD_SOURCES, CURRENCIES, SkuToolbar, useSortableTable, TableGroupHeader */
// 進價歷史總表 L1 — 唯讀列表、header 匯出

const { useState, useMemo } = React;

// ── Column helpers (PH_ prefix to avoid conflict with product-master scope) ──
const phCol = (key, label, w, group, opts = {}) => ({ key, label, w, group, ...opts });

const PH_GROUP_LABELS = {
  A: "品項識別", B: "廠商", C: "品項資訊",
  D: "價格", E: "日期", F: "規格配送", G: "審核建檔",
};

// 精簡模式：A(3) B(1) D(3) E(2) F(1) = 10 欄（生效狀態＋備註合入 F）
const PH_COMPACT_COLS = [
  phCol("#",               "#",          48,  "A", { stickyNum: true }),
  phCol("barcode",         "品號",       150, "A", { mono: true, sticky2nd: true }),
  phCol("name",            "品名",       260, "A"),
  phCol("supplierShort",   "廠商簡稱",   110, "B"),
  phCol("costExTax",       "未稅進價",   110, "D", { price: true }),
  phCol("costIncTax",      "含稅進價",   110, "D", { price: true }),
  phCol("taxRatePct",      "稅率(%)",     80, "D", { num: true }),
  phCol("effectiveDate",   "生效日",     110, "E", { mono: true }),
  phCol("expiryDate",      "失效日",     110, "E", { mono: true }),
  phCol("effectiveStatus", "生效狀態",    90, "E", { center: true }),
  phCol("adjNote",         "商品調整備註", 160, "G"),
];

// 全欄位模式：A(3) B(4) C(5) D(5) E(4) F(4) G(3) = 28 欄
const PH_FULL_COLS = [
  phCol("#",               "#",             48,  "A", { stickyNum: true }),
  phCol("barcode",         "品號",          150, "A", { mono: true, sticky2nd: true }),
  phCol("name",            "品名",          260, "A"),
  phCol("supplierNo",      "廠商編號",      110, "B", { mono: true }),
  phCol("supplierShort",   "廠商簡稱",      110, "B"),
  phCol("supplierName",    "廠商完整名稱",  180, "B"),
  phCol("vendorSku",       "廠商廠編",      150, "B", { mono: true }),
  phCol("recordSource",    "建檔來源",       90, "C"),
  phCol("stockCategory",   "存貨類別",      110, "C"),
  phCol("mainCat",         "主類別",        110, "C"),
  phCol("subCat",          "次類別",        110, "C"),
  phCol("specSummary",     "規格摘要",      140, "C"),
  phCol("currency",        "幣別",           70, "D"),
  phCol("costExTax",       "未稅進價",      110, "D", { price: true }),
  phCol("costIncTax",      "含稅進價",      110, "D", { price: true }),
  phCol("taxRatePct",      "稅率(%)",        80, "D", { num: true }),
  phCol("taxable",         "含稅",           70, "D", { center: true }),
  phCol("pricedDate",      "核價日",        110, "E", { mono: true }),
  phCol("effectiveDate",   "生效日",        110, "E", { mono: true }),
  phCol("expiryDate",      "失效日",        110, "E", { mono: true }),
  phCol("effectiveStatus", "生效狀態",       90, "E", { center: true }),
  phCol("unitPerCase",     "單箱入數",       80, "F", { num: true }),
  phCol("caseWeightKg",    "單箱重量(kg)",  100, "F", { num: true }),
  phCol("packUnit",        "包裝單位",        70, "F"),
  phCol("warehouse",       "倉庫別",          80, "F"),
  phCol("approvedBy",      "核定人",          90, "G"),
  phCol("createdDate",     "建立日期",       110, "G", { mono: true }),
  phCol("adjNote",         "商品調整備註",   200, "G"),
];


// ── Price formatter ───────────────────────────────────────────────────────
const phFmtPrice = (val, currency) => {
  if (val === "" || val == null) return null;
  const n = Number(val);
  if (currency === "USD") return `USD ${n.toFixed(2)}`;
  return `NT$${n.toLocaleString("zh-TW", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
};

// ── Cell renderer ─────────────────────────────────────────────────────────
const phRenderCell = (item, c, idx) => {
  if (c.key === "#") return <span style={{ color: "var(--fg-3)", fontSize: 12 }}>{idx + 1}</span>;
  const v = item[c.key];
  if (v === "" || v == null) return <span className="cell-empty">—</span>;
  if (c.key === "effectiveStatus") return <Tag status={v} />;
  if (c.key === "taxable") return <span>{v ? "是" : "否"}</span>;
  if (c.key === "taxRatePct") return <span>{v}%</span>;
  if (c.price) return <span className="mono" style={{ fontSize: 12 }}>{phFmtPrice(v, item.currency)}</span>;
  if (c.mono)  return <span className="mono" style={{ fontSize: 12 }}>{v}</span>;
  return v;
};

// ── Derived option lists ──────────────────────────────────────────────────
const phUniq = (arr) => [...new Set(arr.filter(Boolean))].sort();
const PH_ALL_SUPPLIERS_SHORT = phUniq(PRICE_HISTORY.map(p => p.supplierShort));
const PH_ALL_MAIN_CATS       = phUniq(PRICE_HISTORY.map(p => p.mainCat));
const PH_ALL_SUB_CATS        = phUniq(PRICE_HISTORY.map(p => p.subCat));
const PH_ALL_PACK_UNITS      = phUniq(PRICE_HISTORY.map(p => p.packUnit));
const PH_ALL_WAREHOUSES      = phUniq(PRICE_HISTORY.map(p => p.warehouse));
const PH_ALL_APPROVERS       = phUniq(PRICE_HISTORY.map(p => p.approvedBy));

const PH_EFF_STATUS_OPTIONS = ["生效中", "已失效"];
const PH_EFF_STATUS_KEY     = { "生效中": "active", "已失效": "expired" };
const PH_TAX_RATES          = [0, 5];

// ── Advanced filter initial state ─────────────────────────────────────────
const PH_ADV_INIT = {
  // 廠商資訊
  supplierNo:   "",
  supplierName: "",
  vendorSku:    "",
  // 商品分類
  mainCat:     [],
  subCat:      [],
  specSummary: "",
  // 日期區間
  expiryDateMin:  "", expiryDateMax:  "",
  createdDateMin: "", createdDateMax: "",
  // 價格
  costExTaxMin:  "", costExTaxMax:  "",
  costIncTaxMin: "", costIncTaxMax: "",
  taxRatePct: [],
  taxable:    [],
  // 規格與倉儲
  unitPerCaseMin: "", unitPerCaseMax: "",
  caseWeightMin:  "", caseWeightMax:  "",
  packUnit:  [],
  warehouse: [],
  // 其他
  currency:   [],
  approvedBy: [],
  adjNote:    "",
};

// ── PriceHistoryList ──────────────────────────────────────────────────────
const PriceHistoryList = () => {
  const toast = useToast();
  const [mode, setMode]                       = useState("compact");
  const [search, setSearch]                   = useState("");
  const [filterEffStatus, setFilterEffStatus] = useState([]);
  const [filterSupplier, setFilterSupplier]   = useState([]);
  const [filterRecordSrc, setFilterRecordSrc] = useState([]);
  const [filterEffDateFrom,   setFilterEffDateFrom]   = useState("");
  const [filterEffDateTo,     setFilterEffDateTo]     = useState("");
  const [filterPricedDateFrom, setFilterPricedDateFrom] = useState("");
  const [filterPricedDateTo,   setFilterPricedDateTo]   = useState("");
  const [advDrawerOpen, setAdvDrawerOpen]     = useState(false);
  const [advFilters, setAdvFilters]           = useState(PH_ADV_INIT);
  const [appliedAdv, setAppliedAdv]           = useState(PH_ADV_INIT);
  const [page, setPage]                       = useState(1);
  const [pageSize, setPageSize]               = useState(20);
  const { SortHead, applySortTo }             = useSortableTable("effectiveDate", "desc");
  const [exportPhase, setExportPhase]         = useState(null);
  const [exportTotal, setExportTotal]         = useState(0);
  const [exportDone, setExportDone]           = useState(0);

  const cols = mode === "compact" ? PH_COMPACT_COLS : PH_FULL_COLS;

  // ── Filtering ───────────────────────────────────────────────────────────
  const filtered = useMemo(() => {
    let data = PRICE_HISTORY;
    const q = search.trim().toLowerCase();
    if (q) data = data.filter(p =>
      p.barcode.toLowerCase().includes(q) || p.name.toLowerCase().includes(q)
    );
    if (filterEffStatus.length) {
      const keys = filterEffStatus.map(s => PH_EFF_STATUS_KEY[s]);
      data = data.filter(p => keys.includes(p.effectiveStatus));
    }
    if (filterSupplier.length)  data = data.filter(p => filterSupplier.includes(p.supplierShort));
    if (filterRecordSrc.length) data = data.filter(p => filterRecordSrc.includes(p.recordSource));
    if (filterEffDateFrom)   data = data.filter(p => p.effectiveDate >= filterEffDateFrom);
    if (filterEffDateTo)     data = data.filter(p => p.effectiveDate <= filterEffDateTo);
    if (filterPricedDateFrom) data = data.filter(p => p.pricedDate >= filterPricedDateFrom);
    if (filterPricedDateTo)   data = data.filter(p => p.pricedDate <= filterPricedDateTo);

    const a = appliedAdv;
    // 廠商資訊
    if (a.supplierNo.trim())   data = data.filter(p => p.supplierNo.toLowerCase().includes(a.supplierNo.trim().toLowerCase()));
    if (a.supplierName.trim()) data = data.filter(p => p.supplierName.toLowerCase().includes(a.supplierName.trim().toLowerCase()));
    if (a.vendorSku.trim())    data = data.filter(p => p.vendorSku.toLowerCase().includes(a.vendorSku.trim().toLowerCase()));
    // 商品分類
    if (a.mainCat.length)      data = data.filter(p => a.mainCat.includes(p.mainCat));
    if (a.subCat.length)       data = data.filter(p => a.subCat.includes(p.subCat));
    if (a.specSummary.trim())  data = data.filter(p => p.specSummary.toLowerCase().includes(a.specSummary.trim().toLowerCase()));
    // 日期區間
    if (a.expiryDateMin)    data = data.filter(p => p.expiryDate >= a.expiryDateMin);
    if (a.expiryDateMax)    data = data.filter(p => p.expiryDate <= a.expiryDateMax);
    if (a.createdDateMin)   data = data.filter(p => p.createdDate >= a.createdDateMin);
    if (a.createdDateMax)   data = data.filter(p => p.createdDate <= a.createdDateMax);
    // 價格
    if (a.costExTaxMin)     data = data.filter(p => +p.costExTax >= +a.costExTaxMin);
    if (a.costExTaxMax)     data = data.filter(p => +p.costExTax <= +a.costExTaxMax);
    if (a.costIncTaxMin)    data = data.filter(p => +p.costIncTax >= +a.costIncTaxMin);
    if (a.costIncTaxMax)    data = data.filter(p => +p.costIncTax <= +a.costIncTaxMax);
    if (a.taxRatePct.length) data = data.filter(p => a.taxRatePct.includes(p.taxRatePct));
    if (a.taxable.length)   data = data.filter(p => a.taxable.includes(p.taxable ? "是" : "否"));
    // 規格與倉儲
    if (a.unitPerCaseMin)   data = data.filter(p => +p.unitPerCase >= +a.unitPerCaseMin);
    if (a.unitPerCaseMax)   data = data.filter(p => +p.unitPerCase <= +a.unitPerCaseMax);
    if (a.caseWeightMin)    data = data.filter(p => +p.caseWeightKg >= +a.caseWeightMin);
    if (a.caseWeightMax)    data = data.filter(p => +p.caseWeightKg <= +a.caseWeightMax);
    if (a.packUnit.length)  data = data.filter(p => a.packUnit.includes(p.packUnit));
    if (a.warehouse.length) data = data.filter(p => a.warehouse.includes(p.warehouse));
    // 其他
    if (a.currency.length)   data = data.filter(p => a.currency.includes(p.currency));
    if (a.approvedBy.length) data = data.filter(p => a.approvedBy.includes(p.approvedBy));
    if (a.adjNote.trim())    data = data.filter(p => p.adjNote.toLowerCase().includes(a.adjNote.trim().toLowerCase()));
    return applySortTo(data);
  }, [search, filterEffStatus, filterSupplier, filterRecordSrc, filterEffDateFrom, filterEffDateTo, filterPricedDateFrom, filterPricedDateTo, appliedAdv, applySortTo]);

  // ── Adv active count ─────────────────────────────────────────────────────
  const advActiveCount = useMemo(() => {
    let n = 0;
    const a = appliedAdv;
    if (a.supplierNo.trim())   n++;
    if (a.supplierName.trim()) n++;
    if (a.vendorSku.trim())    n++;
    if (a.mainCat.length)      n++;
    if (a.subCat.length)       n++;
    if (a.specSummary.trim())  n++;
    if (a.createdDateMin   || a.createdDateMax)   n++;
    if (a.expiryDateMin    || a.expiryDateMax)    n++;
    if (a.costExTaxMin     || a.costExTaxMax)     n++;
    if (a.costIncTaxMin    || a.costIncTaxMax)    n++;
    if (a.taxRatePct.length) n++;
    if (a.taxable.length)    n++;
    if (a.unitPerCaseMin   || a.unitPerCaseMax)   n++;
    if (a.caseWeightMin    || a.caseWeightMax)    n++;
    if (a.packUnit.length)   n++;
    if (a.warehouse.length)  n++;
    if (a.currency.length)   n++;
    if (a.approvedBy.length) n++;
    if (a.adjNote.trim())    n++;
    return n;
  }, [appliedAdv]);

  // ── FilterTagStrip tags ──────────────────────────────────────────────────
  const activeTags = useMemo(() => {
    const tags = [];
    const a = appliedAdv;
    const rmv = (...keys) => () => setAppliedAdv(prev => {
      const next = { ...prev };
      keys.forEach(k => { next[k] = Array.isArray(prev[k]) ? [] : ""; });
      return next;
    });
    const dateLbl  = (min, max) => min && max ? `${min} – ${max}` : min ? `≥ ${min}` : `≤ ${max}`;
    const priceLbl = (min, max, prefix) => min && max ? `${prefix} ${min}–${max}` : min ? `${prefix} ≥ ${min}` : `${prefix} ≤ ${max}`;
    const numLbl   = (min, max, label) => min && max ? `${label} ${min}–${max}` : min ? `${label} ≥ ${min}` : `${label} ≤ ${max}`;

    if (a.supplierNo.trim())   tags.push({ label: `廠商編號：${a.supplierNo}`,    onRemove: rmv("supplierNo") });
    if (a.supplierName.trim()) tags.push({ label: `廠商完整名稱：${a.supplierName}`, onRemove: rmv("supplierName") });
    if (a.vendorSku.trim())    tags.push({ label: `廠商廠編：${a.vendorSku}`,     onRemove: rmv("vendorSku") });
    if (a.mainCat.length)      tags.push({ label: `主類別：${a.mainCat.join("、")}`, onRemove: rmv("mainCat") });
    if (a.subCat.length)       tags.push({ label: `次類別：${a.subCat.join("、")}`,  onRemove: rmv("subCat") });
    if (a.specSummary.trim())  tags.push({ label: `規格摘要：${a.specSummary}`,   onRemove: rmv("specSummary") });
    if (a.createdDateMin || a.createdDateMax)
      tags.push({ label: `建立日期 ${dateLbl(a.createdDateMin, a.createdDateMax)}`, onRemove: rmv("createdDateMin","createdDateMax") });
    if (a.expiryDateMin || a.expiryDateMax)
      tags.push({ label: `失效日 ${dateLbl(a.expiryDateMin, a.expiryDateMax)}`, onRemove: rmv("expiryDateMin","expiryDateMax") });
    if (a.costExTaxMin || a.costExTaxMax)
      tags.push({ label: priceLbl(a.costExTaxMin, a.costExTaxMax, "未稅進價"), onRemove: rmv("costExTaxMin","costExTaxMax") });
    if (a.costIncTaxMin || a.costIncTaxMax)
      tags.push({ label: priceLbl(a.costIncTaxMin, a.costIncTaxMax, "含稅進價"), onRemove: rmv("costIncTaxMin","costIncTaxMax") });
    if (a.taxRatePct.length)
      tags.push({ label: `稅率(%)：${a.taxRatePct.map(v => v + "%").join("、")}`, onRemove: rmv("taxRatePct") });
    if (a.taxable.length)
      tags.push({ label: `含稅：${a.taxable.join("、")}`, onRemove: rmv("taxable") });
    if (a.unitPerCaseMin || a.unitPerCaseMax)
      tags.push({ label: numLbl(a.unitPerCaseMin, a.unitPerCaseMax, "單箱入數"), onRemove: rmv("unitPerCaseMin","unitPerCaseMax") });
    if (a.caseWeightMin || a.caseWeightMax)
      tags.push({ label: numLbl(a.caseWeightMin, a.caseWeightMax, "單箱重量(kg)"), onRemove: rmv("caseWeightMin","caseWeightMax") });
    if (a.packUnit.length)
      tags.push({ label: `包裝單位：${a.packUnit.join("、")}`, onRemove: rmv("packUnit") });
    if (a.warehouse.length)
      tags.push({ label: `倉庫別：${a.warehouse.join("、")}`, onRemove: rmv("warehouse") });
    if (a.currency.length)
      tags.push({ label: `幣別：${a.currency.join("、")}`, onRemove: rmv("currency") });
    if (a.approvedBy.length)
      tags.push({ label: `核定人：${a.approvedBy.join("、")}`, onRemove: rmv("approvedBy") });
    if (a.adjNote.trim())
      tags.push({ label: `商品調整備註：${a.adjNote}`, onRemove: rmv("adjNote") });
    return tags;
  }, [appliedAdv]);

  // ── Paging ───────────────────────────────────────────────────────────────
  const pageItems = useMemo(() => {
    const start = (page - 1) * pageSize;
    return filtered.slice(start, start + pageSize);
  }, [filtered, page, pageSize]);

  const resetPage = () => setPage(1);

  // ── Export ───────────────────────────────────────────────────────────────
  const doExport = () => {
    const total = filtered.length;
    setExportTotal(total);
    setExportDone(0);
    setExportPhase("parsing");
    runImportProgress(total || 1, setExportDone, () => {
      setExportPhase("ok");
      setTimeout(() => setExportPhase(null), 1500);
    });
  };

  // ── Adv filter helpers ───────────────────────────────────────────────────
  const setAdv = (key) => (val) => setAdvFilters(prev => ({ ...prev, [key]: val }));
  const toggleAdvChip = (key, val) => setAdvFilters(prev => {
    const cur = prev[key] || [];
    return { ...prev, [key]: cur.includes(val) ? cur.filter(v => v !== val) : [...cur, val] };
  });
  const applyAdv = () => { setAppliedAdv({ ...advFilters }); setAdvDrawerOpen(false); resetPage(); };
  const clearAdv = () => { setAdvFilters(PH_ADV_INIT); setAppliedAdv(PH_ADV_INIT); resetPage(); };

  return (
    <>
      <PageHead
        section="商品資料"
        title="進價歷史總表"
        subtitle="記錄各商品在不同日期區間的進價詳情，含廠商、生效日、失效日，可作為進價與廠編的歷史存查依據。"
        actions={
          <Button variant="primary" icon="download" onClick={doExport} disabled={exportPhase === "parsing"}>
            {exportPhase === "parsing" ? "匯出中…" : `匯出 Excel（${filtered.length} 筆）`}
          </Button>
        }
      />
      <ImportBanner
        phase={exportPhase}
        parsingTitle="匯出準備中…"
        total={exportTotal}
        done={exportDone}
        okTitle={`已匯出 ${exportTotal} 筆`}
        okDesc=""
      />

      <FilterBar
        filters={[
          { type: "search", placeholder: "搜尋品號、品名…", value: search, onChange: v => { setSearch(v); resetPage(); }, style: { width: 240 } },
          { type: "chip", label: "生效狀態", value: filterEffStatus, options: PH_EFF_STATUS_OPTIONS, onChange: v => { setFilterEffStatus(v); resetPage(); }, multi: true },
          { type: "chip", label: "廠商簡稱", value: filterSupplier,  options: PH_ALL_SUPPLIERS_SHORT, onChange: v => { setFilterSupplier(v); resetPage(); }, multi: true },
          { type: "chip", label: "建檔來源", value: filterRecordSrc, options: RECORD_SOURCES, onChange: v => { setFilterRecordSrc(v); resetPage(); }, multi: true },
          { type: "dateRange", label: "生效日", from: filterEffDateFrom, to: filterEffDateTo, onApply: (f, t) => { setFilterEffDateFrom(f); setFilterEffDateTo(t); resetPage(); } },
          { type: "dateRange", label: "核價日", from: filterPricedDateFrom, to: filterPricedDateTo, onApply: (f, t) => { setFilterPricedDateFrom(f); setFilterPricedDateTo(t); resetPage(); } },
        ]}
        advFilter={{ activeCount: advActiveCount, onClick: () => setAdvDrawerOpen(true) }}
      />

      {/* ── Applied advanced filter tag strip ── */}
      <FilterTagStrip tags={activeTags} onClearAll={clearAdv} />

      {/* ── Table card ── */}
      <div className="card sku-card">
        <SkuToolbar>
          <ModeToggle mode={mode} onChange={setMode} />
          <span style={{ color: "var(--fg-2)", fontSize: 13, whiteSpace: "nowrap", marginLeft: "auto" }}>
            共 <b style={{ color: "var(--fg-1)" }}>{filtered.length}</b> 筆
          </span>
        </SkuToolbar>

        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <TableGroupHeader cols={cols} groupLabels={PH_GROUP_LABELS} />
              <tr>
                {cols.map(c => (
                  <th
                    key={c.key}
                    style={{ width: c.w, minWidth: c.w }}
                    className={[
                      c.stickyNum  ? "stk-l-0 center"       : "",
                      c.sticky2nd  ? "stk-l-48 stk-shadow" : "",
                      c.num    ? "num"    : "",
                      c.center ? "center" : "",
                    ].filter(Boolean).join(" ")}
                  >
                    {c.key === "#" ? c.label : <SortHead colKey={c.key} label={c.label} />}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {pageItems.map((item, idx) => {
                const globalIdx = (page - 1) * pageSize + idx;
                return (
                  <tr key={globalIdx}>
                    {cols.map(c => (
                      <td
                        key={c.key}
                        className={[
                          c.stickyNum  ? "stk-l-0 center"       : "",
                          c.sticky2nd  ? "stk-l-48 stk-shadow" : "",
                          c.num    ? "num"    : "",
                          c.center ? "center" : "",
                        ].filter(Boolean).join(" ")}
                      >
                        {phRenderCell(item, c, globalIdx)}
                      </td>
                    ))}
                  </tr>
                );
              })}
              {filtered.length === 0 && (
                <tr><td colSpan={cols.length}>
                  <div className="empty">
                    <div className="empty__icon"><Icon name="inbox" size={56} /></div>
                    <div className="empty__title">查無符合條件的記錄</div>
                    <div className="empty__desc">請調整篩選條件後重試。</div>
                  </div>
                </td></tr>
              )}
            </tbody>
          </table>
        </div>

        <Pager
          total={filtered.length}
          page={page}
          pageSize={pageSize}
          onPageChange={setPage}
          onSizeChange={s => { setPageSize(s); resetPage(); }}

        />
      </div>

      {/* ── Advanced filter drawer ── */}
      <FilterDrawer
        open={advDrawerOpen}
        activeCount={advActiveCount}
        onClose={() => setAdvDrawerOpen(false)}
        onClear={clearAdv}
        onApply={applyAdv}
      >
        <FilterGroup label="廠商資訊">
          <div className="fdr-row">
            <label className="fdr-label">廠商編號</label>
            <input className="fdr-text-input" type="text" placeholder="輸入廠商編號…" value={advFilters.supplierNo} onChange={e => setAdv("supplierNo")(e.target.value)} />
          </div>
          <div className="fdr-row">
            <label className="fdr-label">廠商完整名稱</label>
            <input className="fdr-text-input" type="text" placeholder="輸入廠商名稱…" value={advFilters.supplierName} onChange={e => setAdv("supplierName")(e.target.value)} />
          </div>
          <div className="fdr-row">
            <label className="fdr-label">廠商廠編</label>
            <input className="fdr-text-input" type="text" placeholder="輸入廠商廠編…" value={advFilters.vendorSku} onChange={e => setAdv("vendorSku")(e.target.value)} />
          </div>
        </FilterGroup>

        <FilterGroup label="商品分類">
          <div className="fdr-row">
            <label className="fdr-label">存貨類別</label>
            <span style={{ color: "var(--fg-3)", fontSize: 12 }}>目前資料僅含「商品存貨」，暫無篩選</span>
          </div>
          <FdrChipGroup label="主類別" options={PH_ALL_MAIN_CATS} selected={advFilters.mainCat} onChange={v => setAdv("mainCat")(v)} />
          <FdrChipGroup label="次類別" options={PH_ALL_SUB_CATS}  selected={advFilters.subCat}  onChange={v => setAdv("subCat")(v)}  />
          <div className="fdr-row">
            <label className="fdr-label">規格摘要</label>
            <input className="fdr-text-input" type="text" placeholder="輸入規格摘要…" value={advFilters.specSummary} onChange={e => setAdv("specSummary")(e.target.value)} />
          </div>
        </FilterGroup>

        <FilterGroup label="日期區間">
          <div className="fdr-row">
            <label className="fdr-label">失效日</label>
            <div className="fdr-range">
              <input className="fdr-range__input" type="date" value={advFilters.expiryDateMin} onChange={e => setAdv("expiryDateMin")(e.target.value)} />
              <span className="fdr-range__sep">–</span>
              <input className="fdr-range__input" type="date" value={advFilters.expiryDateMax} onChange={e => setAdv("expiryDateMax")(e.target.value)} />
            </div>
          </div>
          <div className="fdr-row">
            <label className="fdr-label">建立日期</label>
            <div className="fdr-range">
              <input className="fdr-range__input" type="date" value={advFilters.createdDateMin} onChange={e => setAdv("createdDateMin")(e.target.value)} />
              <span className="fdr-range__sep">–</span>
              <input className="fdr-range__input" type="date" value={advFilters.createdDateMax} onChange={e => setAdv("createdDateMax")(e.target.value)} />
            </div>
          </div>
        </FilterGroup>

        <FilterGroup label="價格">
          <div className="fdr-row">
            <label className="fdr-label">未稅進價</label>
            <div className="fdr-range">
              <input className="fdr-range__input" type="number" placeholder="最小" value={advFilters.costExTaxMin} onChange={e => setAdv("costExTaxMin")(e.target.value)} />
              <span className="fdr-range__sep">–</span>
              <input className="fdr-range__input" type="number" placeholder="最大" value={advFilters.costExTaxMax} onChange={e => setAdv("costExTaxMax")(e.target.value)} />
            </div>
          </div>
          <div className="fdr-row">
            <label className="fdr-label">含稅進價</label>
            <div className="fdr-range">
              <input className="fdr-range__input" type="number" placeholder="最小" value={advFilters.costIncTaxMin} onChange={e => setAdv("costIncTaxMin")(e.target.value)} />
              <span className="fdr-range__sep">–</span>
              <input className="fdr-range__input" type="number" placeholder="最大" value={advFilters.costIncTaxMax} onChange={e => setAdv("costIncTaxMax")(e.target.value)} />
            </div>
          </div>
          <div className="fdr-row">
            <label className="fdr-label">稅率(%)</label>
            <div className="fdr-chips">
              {PH_TAX_RATES.map(v => (
                <span key={v} className={"fdr-chip" + (advFilters.taxRatePct.includes(v) ? " on" : "")} onClick={() => toggleAdvChip("taxRatePct", v)}>{v}%</span>
              ))}
            </div>
          </div>
          <FdrChipGroup label="含稅" options={["是","否"]} selected={advFilters.taxable} onChange={v => setAdv("taxable")(v)} />
        </FilterGroup>

        <FilterGroup label="規格與倉儲">
          <div className="fdr-row">
            <label className="fdr-label">單箱入數</label>
            <div className="fdr-range">
              <input className="fdr-range__input" type="number" placeholder="最小" value={advFilters.unitPerCaseMin} onChange={e => setAdv("unitPerCaseMin")(e.target.value)} />
              <span className="fdr-range__sep">–</span>
              <input className="fdr-range__input" type="number" placeholder="最大" value={advFilters.unitPerCaseMax} onChange={e => setAdv("unitPerCaseMax")(e.target.value)} />
            </div>
          </div>
          <div className="fdr-row">
            <label className="fdr-label">單箱重量(kg)</label>
            <div className="fdr-range">
              <input className="fdr-range__input" type="number" placeholder="最小" value={advFilters.caseWeightMin} onChange={e => setAdv("caseWeightMin")(e.target.value)} />
              <span className="fdr-range__sep">–</span>
              <input className="fdr-range__input" type="number" placeholder="最大" value={advFilters.caseWeightMax} onChange={e => setAdv("caseWeightMax")(e.target.value)} />
            </div>
          </div>
          <FdrChipGroup label="包裝單位" options={PH_ALL_PACK_UNITS} selected={advFilters.packUnit} onChange={v => setAdv("packUnit")(v)} />
          <FdrChipGroup label="倉庫別"   options={PH_ALL_WAREHOUSES} selected={advFilters.warehouse} onChange={v => setAdv("warehouse")(v)} />
        </FilterGroup>

        <FilterGroup label="其他">
          <FdrChipGroup label="幣別"  options={CURRENCIES}       selected={advFilters.currency}   onChange={v => setAdv("currency")(v)}   />
          <FdrChipGroup label="核定人" options={PH_ALL_APPROVERS} selected={advFilters.approvedBy} onChange={v => setAdv("approvedBy")(v)} />
          <div className="fdr-row">
            <label className="fdr-label">商品調整備註</label>
            <input className="fdr-text-input" type="text" placeholder="輸入商品調整備註關鍵字…" value={advFilters.adjNote} onChange={e => setAdv("adjNote")(e.target.value)} />
          </div>
        </FilterGroup>
      </FilterDrawer>
    </>
  );
};

Object.assign(window, { PriceHistoryList });