/* global React, PageHead, FilterBar, Pager, PAGE_SIZES, useSortableTable, Check, Button, ImportBanner, runImportProgress, CRM_PROMO_SEED */

const { useState, useMemo } = React;

const CRM_PROMO_COLS = [
  { key: "updatedAt", label: "更新時間", w: 140, mono: true },
  { key: "buyer", label: "採購", w: 90 },
  { key: "masterName", label: "主檔名稱", w: 160 },
  { key: "menuName", label: "菜單顯示MENU名稱", w: 130 },
  { key: "menuSubName", label: "菜單次分類名稱", w: 120 },
  { key: "campaignStart", label: "檔期開始日", w: 110, mono: true },
  { key: "campaignEnd", label: "檔期結束日", w: 110, mono: true },
  { key: "analMain", label: "大分類(分析用)", w: 120 },
  { key: "analSub", label: "次分類(分析用)", w: 120 },
  { key: "analChild", label: "子分類(分析用)", w: 120 },
  { key: "skuNo", label: "品號", w: 168, mono: true, sticky: true },
  { key: "name", label: "品名", w: 220 },
  { key: "origCost", label: "原進價", w: 90, money: true },
  { key: "promoCost", label: "促進價", w: 90, money: true },
  { key: "promoListPrice", label: "促銷原價(牌價)", w: 120, money: true },
  { key: "suggestPrice", label: "常態售價", w: 90, money: true },
  { key: "marketPrice", label: "市調價格", w: 90, money: true },
  { key: "promoPrice", label: "促銷價", w: 90, money: true },
  { key: "promoScheme", label: "促銷案型", w: 90 },
  { key: "origMarginPct", label: "原毛利率%", w: 90, mono: true },
  { key: "stockQty", label: "庫存量", w: 72, num: true },
  { key: "supplierNo", label: "廠商編號", w: 90, mono: true },
  { key: "supplierName", label: "廠商名稱", w: 120 },
  { key: "itemFrame", label: "Item Frame", w: 88, bool: true },
];

const fmtMoney = (v) => (v != null && v !== "" && !Number.isNaN(+v))
  ? `NT$${Number(v).toLocaleString("zh-TW")}`
  : "—";

const CrmPromoList = ({ sectionLabel, titleLabel }) => {
  const [rows, setRows] = useState(() => CRM_PROMO_SEED.map(r => ({ ...r })));
  const [q, setQ] = useState("");
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
  const [exportPhase, setExportPhase] = useState(null);
  const [exportTotal, setExportTotal] = useState(0);
  const [exportDone, setExportDone] = useState(0);
  const { SortHead, applySortTo } = useSortableTable("updatedAt", "desc");

  const filtered = useMemo(() => {
    const lq = q.trim().toLowerCase();
    const base = !lq ? rows : rows.filter(r => {
      const hay = [r.skuNo, r.name, r.buyer, r.masterName, r.menuName, r.supplierName].filter(Boolean).join(" ");
      return hay.toLowerCase().includes(lq);
    });
    return applySortTo(base, (row, key) => {
      if (key === "itemFrame") return row.itemFrame ? 1 : 0;
      if (key === "stockQty") return row.stockQty ?? 0;
      if (key === "selected") return row.selected ? 1 : 0;
      return row[key] ?? "";
    });
  }, [rows, q, applySortTo]);

  const paged = filtered.slice((page - 1) * pageSize, page * pageSize);
  const allSelected = paged.length > 0 && paged.every(r => r.selected);

  const toggleAll = () => {
    const ids = new Set(paged.map(r => r.id));
    const next = !allSelected;
    setRows(prev => prev.map(r => ids.has(r.id) ? { ...r, selected: next } : r));
  };

  const toggleRow = (id) => {
    setRows(prev => prev.map(r => r.id === id ? { ...r, selected: !r.selected } : r));
  };

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

  const colSpan = 2 + CRM_PROMO_COLS.length;

  return (
    <>
      <PageHead
        section={sectionLabel}
        title={titleLabel}
        subtitle="CRM 促銷品項總表。"
        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: q, onChange: v => { setQ(v); setPage(1); } },
      ]} />

      <div className="card">
        <div className="tbl-wrap">
          <table className="tbl" style={{ minWidth: 3200 }}>
            <thead>
              <tr>
                <th style={{ width: 48 }} className="center stk-l-0">
                  <Check checked={allSelected} onChange={toggleAll} />
                </th>
                {CRM_PROMO_COLS.map(c => (
                  <th
                    key={c.key}
                    style={{
                      width: c.w,
                      ...(c.sticky ? { left: 48 } : {}),
                    }}
                    className={[c.num ? "num" : null, c.sticky ? "stk-l-48 stk-shadow" : null].filter(Boolean).join(" ") || undefined}
                  >
                    <SortHead colKey={c.key} label={c.label} />
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {paged.length === 0 ? (
                <tr>
                  <td colSpan={colSpan} style={{ textAlign: "center", color: "var(--fg-4)", padding: "40px 0" }}>
                    {q ? `沒有符合「${q}」的資料` : "尚無促銷品項"}
                  </td>
                </tr>
              ) : paged.map(r => (
                <tr key={r.id}>
                  <td className="center stk-l-0">
                    <Check checked={!!r.selected} onChange={() => toggleRow(r.id)} />
                  </td>
                  {CRM_PROMO_COLS.map(c => {
                    if (c.bool) {
                      return (
                        <td key={c.key} className="center" style={c.sticky ? { left: 48 } : undefined}>
                          <Check checked={!!r[c.key]} disabled />
                        </td>
                      );
                    }
                    const val = r[c.key];
                    let display = val ?? "—";
                    if (c.money) display = fmtMoney(val);
                    return (
                      <td
                        key={c.key}
                        className={[
                          c.mono ? "mono" : null,
                          c.num ? "num" : null,
                          c.sticky ? "stk-l-48 stk-shadow" : null,
                        ].filter(Boolean).join(" ") || undefined}
                        style={{
                          fontSize: c.mono ? "var(--fs-12)" : undefined,
                          color: c.mono ? "var(--fg-2)" : undefined,
                          fontWeight: c.key === "name" ? "var(--fw-medium)" : undefined,
                          ...(c.sticky ? { left: 48 } : {}),
                        }}
                      >
                        {display}
                      </td>
                    );
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <Pager total={filtered.length} page={page} pageSize={pageSize}
          onPageChange={setPage} onSizeChange={s => { setPageSize(s); setPage(1); }} />
      </div>
    </>
  );
};

Object.assign(window, { CrmPromoList, CRM_PROMO_COLS });