/* global React, Icon, Button, Check, ChipFilter, DateRangeChip, Pager, BulkBar, useToast, PAGE_SIZES, PageHead, FilterBar, RowActions, useSortableTable */
// 商品調整 Oracle 匯出 L1 — Johnny only

const { useState, useMemo } = React;

const AdjOracleList = ({ adjBatches, priceAdjBatches, adjStatusBatches, onOpenBatch }) => {
  const [selected, setSelected] = useState(new Set());
  const [search, setSearch] = useState("");
  const [filterDateFrom, setFilterDateFrom] = useState("");
  const [filterDateTo, setFilterDateTo] = useState("");
  const { SortHead, applySortTo } = useSortableTable("updatedAt", "desc");
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
  const toast = useToast();

  // Aggregate all 3 submitted batch sources into a unified list
  const allBatches = useMemo(() => {
    const fromA = (adjBatches || [])
      .filter(b => b.submitted)
      .map(b => ({
        id: b.id, batchName: b.batchName, sourceType: "ADJ-A",
        rowCount: b.rows.length,
        approvedCount: b.rows.filter(r => r.rowStatus === "adjApproved").length,
        createdAt: b.createdAt, updatedAt: b.updatedAt,
        rows: b.rows,
      }));
    const fromB = (priceAdjBatches || [])
      .filter(b => b.submitted)
      .map(b => ({
        id: b.id, batchName: b.batchName, sourceType: "ADJ-B",
        rowCount: b.rows.length,
        approvedCount: b.rows.filter(r => r.rowStatus === "adjApproved").length,
        createdAt: b.createdAt, updatedAt: b.updatedAt,
        rows: b.rows,
      }));
    const fromCD = (adjStatusBatches || [])
      .filter(b => b.submitted)
      .map(b => ({
        id: b.id, batchName: b.batchName, sourceType: "ADJ-C/D",
        rowCount: b.rows.length,
        approvedCount: b.rows.filter(r => r.rowStatus === "adjApproved").length,
        createdAt: b.createdAt, updatedAt: b.updatedAt,
        rows: b.rows,
      }));
    return [...fromA, ...fromB, ...fromCD];
  }, [adjBatches, priceAdjBatches, adjStatusBatches]);

  const _filtered = useMemo(() => {
    let r = allBatches;
    if (search) r = r.filter(x => x.batchName.includes(search) || x.id.includes(search));
    if (filterDateFrom) r = r.filter(x => x.createdAt.slice(0, 8) >= filterDateFrom.replace(/-/g, ""));
    if (filterDateTo)   r = r.filter(x => x.createdAt.slice(0, 8) <= filterDateTo.replace(/-/g, ""));
    return r;
  }, [allBatches, search, filterDateFrom, filterDateTo]);
  const filtered = useMemo(() => applySortTo(_filtered), [_filtered, applySortTo]);

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

  React.useEffect(() => { setPage(1); }, [search, 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.batchName}` });
    }, 900);
  };

  const [bulkBusy, setBulkBusy] = useState(false);
  const doBulkExport = () => {
    setBulkBusy(true);
    const count = selected.size;
    setTimeout(() => {
      setBulkBusy(false);
      toast.push({ msg: `已批次匯出 Oracle CSV · ${count} 個批次（模擬）` });
      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); } },
        ]}
      />

      {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="createdAt" label="建立日期" /></th>
                <th style={{ width: 150 }}><SortHead colKey="updatedAt" label="更新時間" /></th>
                <th><SortHead colKey="batchName" label="商品調整所屬批次" /></th>
                <th style={{ width: 110 }} className="num"><SortHead colKey="approvedCount" label="已審核數" /></th>
                <th style={{ width: 110 }} className="num"><SortHead colKey="rowCount" 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.createdAt}</td>
                  <td className="mono" style={{ color: "var(--fg-2)" }}>{r.updatedAt}</td>
                  <td>
                    <a className="tbl-link" onClick={() => onOpenBatch(r)}>{r.batchName}</a>
                  </td>
                  <td className="num">
                    <span style={{ color: r.approvedCount === r.rowCount && r.rowCount > 0 ? "var(--success)" : "var(--fg-1)" }}>
                      {r.approvedCount}
                    </span>
                    <span style={{ color: "var(--fg-3)" }}> / {r.rowCount}</span>
                  </td>
                  <td className="num">{r.rowCount}</td>
                  <td className="center">
                    <RowActions actions={[
                      { label: exportingId === r.id ? "匯出中…" : "匯出", icon: "download", onClick: () => doExport(r) },
                      { label: "檢視", onClick: () => onOpenBatch(r) },
                    ]} />
                  </td>
                </tr>
              ))}
              {filtered.length === 0 && (
                <tr><td colSpan={7}>
                  <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, { AdjOracleList });