/* global React, Icon, Button, Field, Check, ChipFilter, DateRangeChip, Pager, BulkBar, useToast, BATCH_LIBRARY, PAGE_SIZES, useSortableTable */
// Oracle 匯出 L1 — 新商品 Oracle 匯出列表（Johnny only）

const { useState, useMemo } = React;

const OracleList = ({ forms, onOpenForm }) => {
  const [selected, setSelected] = useState(new Set());
  const [search, setSearch] = useState("");
  const [filterBatch, setFilterBatch] = useState([]);
  const [filterDateFrom, setFilterDateFrom] = useState("");
  const [filterDateTo, setFilterDateTo] = useState("");
  const { SortHead, applySortTo } = useSortableTable("updated", "desc");
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
  const toast = useToast();

  // Aggregate submitted forms by Phase (batch) — one row per batch
  const phases = useMemo(() => {
    const submitted = forms.filter(f => f.status === "submitted");
    const map = {};
    submitted.forEach(f => {
      if (!map[f.batch]) map[f.batch] = { batch: f.batch, items: [], _forms: [] };
      map[f.batch].items = map[f.batch].items.concat(f.items);
      map[f.batch]._forms.push(f);
    });
    return Object.values(map).map(p => ({
      id: p.batch,
      batch: p.batch,
      items: p.items,
      itemCount: p.items.length,
      created: p._forms.map(f => f.created).sort()[0],
      updated: p._forms.map(f => f.updated).sort().reverse()[0],
    }));
  }, [forms]);

  const _filtered = useMemo(() => {
    let r = phases;
    if (search) r = r.filter(x => x.batch.includes(search));
    if (filterBatch.length) r = r.filter(x => filterBatch.includes(x.batch));
    if (filterDateFrom) r = r.filter(x => x.created.slice(0, 8) >= filterDateFrom.replace(/-/g, ""));
    if (filterDateTo) r = r.filter(x => x.created.slice(0, 8) <= filterDateTo.replace(/-/g, ""));
    return r;
  }, [phases, search, filterBatch, filterDateFrom, filterDateTo]);
  const filtered = useMemo(() => applySortTo(_filtered), [_filtered, applySortTo]);

  const pagedRows = filtered.slice((page - 1) * pageSize, page * pageSize);

  React.useEffect(() => { setPage(1); }, [search, filterBatch, filterDateFrom, filterDateTo]);

  const toggleRow = (id) => {
    const next = new Set(selected);
    next.has(id) ? next.delete(id) : next.add(id);
    setSelected(next);
  };
  const allChecked = filtered.length > 0 && filtered.every(r => selected.has(r.id));
  const someChecked = filtered.some(r => selected.has(r.id));
  const toggleAll = () => {
    const next = new Set(selected);
    if (allChecked) filtered.forEach(r => next.delete(r.id));
    else filtered.forEach(r => next.add(r.id));
    setSelected(next);
  };

  const [exportingId, setExportingId] = useState(null);

  const doExport = (r) => {
    if (exportingId === r.id) return;
    setExportingId(r.id);
    setTimeout(() => {
      setExportingId(null);
      toast.push({ msg: `已匯出 Oracle CSV · ${r.batch}` });
    }, 900);
  };

  const [bulkBusy, setBulkBusy] = useState(false);
  const doBulkExport = () => {
    setBulkBusy(true);
    const selectedRows = filtered.filter(r => selected.has(r.id));
    setTimeout(() => {
      setBulkBusy(false);
      toast.push({ msg: `已批次匯出 Oracle CSV · ${selectedRows.length} 個批次（模擬）` });
      setSelected(new Set());
    }, 900);
  };

  return (
    <>
      <PageHead
        section="商品資料"
        title="新商品 Oracle 表"
        subtitle="彙整所有已送出建立單的品項（依批次），選取批次後匯出 Oracle ERP 可匯入格式。"
      />

      <FilterBar
        filters={[
          { type: "search", placeholder: "搜尋批次…", value: search, onChange: v => setSearch(v) },
          { type: "dateRange", label: "建立日期", from: filterDateFrom, to: filterDateTo, onApply: (f, t) => { setFilterDateFrom(f); setFilterDateTo(t); } },
          { type: "chip", label: "批次", value: filterBatch, options: BATCH_LIBRARY, onChange: setFilterBatch, multi: true },
        ]}
      />

      {selected.size > 0 && (
        <BulkBar label={<>已選 <b>{selected.size}</b> 個批次</>}>
          <Button variant="primary" size="sm" icon="download" onClick={doBulkExport} disabled={bulkBusy}>
            {bulkBusy ? "準備檔案中…" : "批次匯出 Oracle"}
          </Button>
          <Button variant="text" size="sm" onClick={() => setSelected(new Set())}>取消選取</Button>
        </BulkBar>
      )}

      <div className="card">
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 36 }} className="center">
                  <Check checked={allChecked} indeterminate={someChecked && !allChecked} onChange={toggleAll} />
                </th>
                <th style={{ width: 150 }}><SortHead colKey="created" label="建立日期" /></th>
                <th style={{ width: 150 }}><SortHead colKey="updated" label="更新時間" /></th>
                <th><SortHead colKey="batch" label="新商品所屬批次" /></th>
                <th style={{ width: 110 }} className="num"><SortHead colKey="itemCount" label="新商品筆數" /></th>
                <th style={{ width: 180 }} className="center">操作</th>
              </tr>
            </thead>
            <tbody>
              {pagedRows.map(r => (
                <tr key={r.id} className={selected.has(r.id) ? "selected" : ""}>
                  <td className="center">
                    <Check checked={selected.has(r.id)} onChange={() => toggleRow(r.id)} />
                  </td>
                  <td className="mono" style={{ color: "var(--fg-2)" }}>{r.created}</td>
                  <td className="mono" style={{ color: "var(--fg-2)" }}>{r.updated}</td>
                  <td>
                    <a className="tbl-link" onClick={() => onOpenForm(r)}>{r.batch}</a>
                  </td>
                  <td className="num">{r.itemCount}</td>
                  <td className="center">
                    <RowActions actions={[
                      { label: exportingId === r.id ? "匯出中…" : "匯出", icon: "download", onClick: () => doExport(r) },
                      { label: "檢視", onClick: () => onOpenForm(r) },
                    ]} />
                  </td>
                </tr>
              ))}
              {filtered.length === 0 && (
                <tr><td colSpan={6}>
                  <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); setPage(1); }}

        />
      </div>
    </>
  );
};

Object.assign(window, { OracleList });