/* global React, Button, PageHead, Pager, FilterBar, RowActions, EmptyState, ImportBanner, runImportProgress, useToast, PAGE_SIZES, useSortableTable */
// Delta File 產出 L1 — 版本列表

const { useState, useMemo } = React;

const DeltaFileList = ({ deltaFiles, onDelete, onGenerate }) => {
  const [q, setQ]           = useState("");
  const [page, setPage]     = useState(1);
  const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
  const [genPhase, setGenPhase] = useState(null);
  const [genDone, setGenDone]   = useState(0);
  const toast = useToast();
  const { SortHead, applySortTo } = useSortableTable("createdAt", "desc");

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

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

  const handleGenerate = () => {
    if (genPhase === "parsing") return;
    onGenerate();
    setGenDone(0);
    setGenPhase("parsing");
    runImportProgress(13, setGenDone, () => {
      setGenPhase("ok");
      setTimeout(() => setGenPhase(null), 1500);
    });
  };

  return (
    <>
      <PageHead
        section="菜單"
        title="Delta file 商家價格、庫存檔案 INCA"
        subtitle="依當週菜單預覽整合店級與庫存資料，產出 13 個 Delta File 供上傳至 Uber Eats 系統。"
        actions={
          <Button variant="primary" onClick={handleGenerate} disabled={genPhase === "parsing"}>
            {genPhase === "parsing" ? "產出中…" : "+ 新增"}
          </Button>
        }
      />

      <ImportBanner
        phase={genPhase}
        parsingTitle="Delta File 產出中…"
        total={13}
        done={genDone}
        unit="個檔案"
        okTitle="已建立 13 個 Delta File"
        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: 160 }} className="center">功能</th>
              </tr>
            </thead>
            <tbody>
              {paged.length === 0 ? (
                <tr>
                  <td colSpan={3}>
                    <EmptyState
                      icon="file"
                      title={q ? `沒有符合「${q}」的版本` : "尚無 Delta File"}
                      desc={!q ? "點擊「新增」產出本週版本" : undefined}
                      style={{ padding: "40px 0" }}
                    />
                  </td>
                </tr>
              ) : (
                paged.map(f => (
                  <tr key={f.id}>
                    <td className="mono" style={{ color: "var(--fg-2)" }}>{f.createdAt}</td>
                    <td style={{ fontWeight: 600 }}>{f.name}</td>
                    <td className="center">
                      <RowActions actions={[
                        { label: "匯出", onClick: () => toast.push({ msg: `${f.name} 已匯出（共 13 個 Delta File）` }) },
                        { label: "刪除", danger: true, onClick: () => onDelete(f) },
                      ]} />
                    </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, { DeltaFileList });