/* global React, Icon, Button, PageHead, Pager, FilterBar, RowActions, EmptyState, ImportBanner, runImportProgress, useToast, PAGE_SIZES, useSortableTable */
// 菜單預覽 L1 — 版本列表

const { useState, useMemo } = React;

const MenuPreviewList = ({ previews, onView, onDelete, onGenerate, sectionLabel, titleLabel }) => {
  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 toast = useToast();
  const { SortHead, applySortTo } = useSortableTable("createdAt", "desc");

  // itemCount 掛在 enriched 物件上供排序使用
  const enriched = useMemo(() =>
    previews.map(p => ({ ...p, itemCount: p.items?.length ?? p.itemCount ?? 0 })),
    [previews]
  );

  const filtered = useMemo(() => {
    const lq = q.trim().toLowerCase();
    const base = enriched.filter(p => !lq || p.name.toLowerCase().includes(lq));
    return applySortTo(base);
  }, [enriched, q, applySortTo]);

  const pageStart = (page - 1) * pageSize;
  const paged     = filtered.slice(pageStart, pageStart + pageSize);

  const handleGenerate = () => {
    if (exportPhase === "parsing") return;
    // 先建立 preview 取得真實品項數，再驅動進度 banner
    const newPreview = onGenerate();
    const total = newPreview.items?.length ?? 52;
    setExportTotal(total);
    setExportDone(0);
    setExportPhase("parsing");
    runImportProgress(total, setExportDone, () => {
      setExportPhase("ok");
      setTimeout(() => {
        setExportPhase(null);
        onView(newPreview);
      }, 1500);
    });
  };

  return (
    <>
      <PageHead
        section={sectionLabel}
        title={titleLabel}
        subtitle="整合「商品主檔」與「CRM 商品活動」資料，每週五產出菜單預覽，供核對品項正確性與歷史版本差異。"
        actions={
          <Button variant="primary" onClick={handleGenerate} disabled={exportPhase === "parsing"}>
            {exportPhase === "parsing" ? "產出中…" : "+ 產出菜單"}
          </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">
            <thead>
              <tr>
                <th style={{ width: 160 }}><SortHead colKey="createdAt" label="產出時間" /></th>
                <th><SortHead colKey="name" label="菜單名稱" /></th>
                <th style={{ width: 90 }} className="num"><SortHead colKey="itemCount" label="品項數" /></th>
                <th style={{ width: 180 }} className="center">功能</th>
              </tr>
            </thead>
            <tbody>
              {paged.length === 0 ? (
                <tr>
                  <td colSpan={4}>
                    <EmptyState
                      icon="menu"
                      title={q ? `沒有符合「${q}」的版本` : "尚無菜單版本"}
                      desc={!q ? "點擊「產出菜單」生成本週版本" : undefined}
                      style={{ padding: "40px 0" }}
                    />
                  </td>
                </tr>
              ) : (
                paged.map(p => (
                  <tr key={p.id}>
                    <td className="mono" style={{ color: "var(--fg-2)" }}>{p.createdAt}</td>
                    <td><a className="tbl-link" onClick={() => onView(p)}>{p.name}</a></td>
                    <td className="num">{p.itemCount.toLocaleString()}</td>
                    <td className="center">
                      <RowActions actions={[
                        { label: "檢視", onClick: () => onView(p) },
                        { label: "匯出", onClick: () => toast.push({ msg: `${p.name} 已匯出` }) },
                        { label: "刪除", danger: true, onClick: () => onDelete(p) },
                      ]} />
                    </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, { MenuPreviewList });