/* global React, Icon, Button, Field, Select, Tag, Check, useToast, Dialog, ChipFilter, Pager, BulkBar, ROLES, PURCHASERS, BATCH_LIBRARY, PAGE_SIZES, UserChip, useSortableTable, isPrototypeSuperUser, canActAsPurchase */
// L1 — 新商品建立單列表
// One row = (applicant × batch). Matches the wireframe screenshot.

const { useState, useMemo } = React;

// ===== Yes / No status pill =============================================
// value "yes" | "no" (or any truthy fallback to NO)
const StatusPill = ({ value }) => {
  if (value === "yes") return <span className="sync-pill sync-pill--yes"><Icon name="check" size={12} /> YES</span>;
  return <span className="sync-pill sync-pill--no">NO</span>;
};

// ===== Main list =======================================================
const BatchList = ({ forms, role, onOpenForm, onCreate, onDelete, currentUser }) => {
  const [selected, setSelected] = useState(new Set());
  const [search, setSearch] = useState("");
  const [filterApplicant, setFilterApplicant] = useState("");
  const [filterStatus, setFilterStatus] = useState("");
  const [filterBatch, setFilterBatch] = useState([]);
  const [filterImg, setFilterImg] = useState("");
  const [filterSync, setFilterSync] = useState("");
  const { SortHead, applySortTo } = useSortableTable("updated", "desc");
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
  const [downloadBusy, setDownloadBusy] = useState(false);
  const toast = useToast();

  // Purchase role: only ever sees their own forms
  // Non-purchase (Samantha / Johnny): only see submitted forms
  const visibleForms = useMemo(() => {
    if (isPrototypeSuperUser(role)) return forms;
    if (role === "purchase") return forms.filter(f => f.applicant === currentUser);
    return forms.filter(f => f.status === "submitted");
  }, [forms, role, currentUser]);

  const _filtered = useMemo(() => {
    let r = visibleForms;
    if (search) r = r.filter(x =>
      x.batch.includes(search) || x.applicant.includes(search.toUpperCase()) || x.id.toLowerCase().includes(search.toLowerCase())
    );
    if (filterApplicant) r = r.filter(x => x.applicant === filterApplicant);
    if (filterStatus) r = r.filter(x => x.status === filterStatus);
    if (filterBatch.length) r = r.filter(x => filterBatch.includes(x.batch));
    if (filterImg) {
      const want = filterImg === "已上傳" ? "yes" : "no";
      r = r.filter(x => x.imgStatus === want);
    }
    if (filterSync) {
      const want = filterSync === "已同步" ? "yes" : "no";
      r = r.filter(x => x.syncStatus === want);
    }
    return r;
  }, [visibleForms, search, filterApplicant, filterStatus, filterBatch, filterImg, filterSync]);
  const filtered = useMemo(() =>
    applySortTo(_filtered, (x, key) => key === "items" ? x.items.length : (x[key] ?? "")),
  [_filtered, applySortTo]);

  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
  const pagedRows = filtered.slice((page - 1) * pageSize, page * pageSize);

  // Reset to page 1 when filters change
  React.useEffect(() => { setPage(1); }, [search, filterApplicant, filterStatus, filterBatch, filterImg, filterSync]);

  const toggleRow = (id) => {
    const next = new Set(selected);
    next.has(id) ? next.delete(id) : next.add(id);
    setSelected(next);
  };
  // Purchase: only submitted rows are selectable; others: all visible (already filtered to submitted)
  const selectableRows = useMemo(() => {
    if (isPrototypeSuperUser(role)) return filtered;
    if (canActAsPurchase(role)) return filtered.filter(r => r.status === "submitted");
    return filtered;
  }, [filtered, role]);
  const allChecked = selectableRows.length > 0 && selectableRows.every(r => selected.has(r.id));
  const someChecked = selectableRows.some(r => selected.has(r.id));
  const toggleAll = () => {
    const next = new Set(selected);
    if (allChecked) selectableRows.forEach(r => next.delete(r.id));
    else selectableRows.forEach(r => next.add(r.id));
    setSelected(next);
  };

  // Multi-batch summary
  const selectedRows = filtered.filter(r => selected.has(r.id));
  const selectedBatches = [...new Set(selectedRows.map(r => r.batch))];
  const selectedSku = selectedRows.reduce((s, r) => s + r.items.length, 0);

  const doBulkDownload = () => {
    setDownloadBusy(true);
    setTimeout(() => {
      setDownloadBusy(false);
      toast.push({ msg: `已下載 ${selectedRows.length} 張單的 Excel（共 ${selectedSku} 筆品項）` });
      setSelected(new Set());
    }, 900);
  };

  // ----- Per-row actions -----
  const renderRowActions = (r) => {
    if (canActAsPurchase(role) && r.status === "editing") {
      return <RowActions actions={[
        { label: "編輯", onClick: () => onOpenForm(r) },
        { label: "刪除", icon: "trash", danger: true, onClick: () => onDelete(r) },
      ]} />;
    }
    return <RowActions actions={[
      { label: "檢視", onClick: () => onOpenForm(r) },
      { label: "下載 Excel", icon: "download" },
    ]} />;
  };

  return (
    <>
      <PageHead
        section="商品資料"
        title="新商品建立單"
        subtitle="新商品建立單記錄待上架品項的基本資料，送出後依序完成圖片上傳與 Oracle 匯出。"
        actions={canActAsPurchase(role) && <Button variant="primary" icon="plus" onClick={onCreate}>新增建立單</Button>}
      />

      <FilterBar
        filters={[
          { type: "search", placeholder: "搜尋批次 / 申請人 / 單號…", value: search, onChange: v => setSearch(v) },
          { type: "chip", label: "狀態", value: filterStatus,
            options: ["編輯中", "已送出"],
            onChange: v => setFilterStatus(v === "編輯中" ? "editing" : v === "已送出" ? "submitted" : "") },
          { type: "chip", label: "批次", value: filterBatch, options: BATCH_LIBRARY, onChange: setFilterBatch, multi: true },
          !canActAsPurchase(role) && { type: "chip", label: "申請人", value: filterApplicant, options: PURCHASERS, onChange: setFilterApplicant },
          { type: "chip", label: "圖檔狀態", value: filterImg, options: ["已上傳", "未上傳"], onChange: setFilterImg },
          { type: "chip", label: "已同步", value: filterSync, options: ["已同步", "未同步"], onChange: setFilterSync },
        ]}
      />

      {selected.size > 0 && (
        <BulkBar label={<>已選 <b>{selected.size}</b> 張單 · 涵蓋 <b>{selectedBatches.length}</b> 批次 · 共 <b>{selectedSku}</b> 筆品項</>}>
          <Button variant="primary" size="sm" icon="download" onClick={doBulkDownload} disabled={downloadBusy}>
            {downloadBusy ? "準備檔案中…" : "批次下載 Excel"}
          </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="updated" label="更新時間" /></th>
                <th style={{ width: 100 }}><SortHead colKey="applicant" label="申請人" /></th>
                <th><SortHead colKey="batch" label="新商品所屬批次" /></th>
                <th style={{ width: 110 }} className="num"><SortHead colKey="items" label="新商品筆數" /></th>
                <th style={{ width: 100 }}><SortHead colKey="status" label="狀態" /></th>
                <th style={{ width: 110 }}><SortHead colKey="imgStatus" label="圖檔狀態" /></th>
                <th style={{ width: 140 }}><SortHead colKey="synced" label="已同步至商品主檔？" /></th>
                <th style={{ width: 180 }} className="center">功能</th>
              </tr>
            </thead>
            <tbody>
              {pagedRows.map(r => {
                const isEditing = r.status === "editing";
                return (
                  <tr key={r.id} className={selected.has(r.id) ? "selected" : ""}>
                    <td className="center">
                      <Check
                        checked={selected.has(r.id)}
                        onChange={() => toggleRow(r.id)}
                        disabled={canActAsPurchase(role) && !isPrototypeSuperUser(role) && r.status === "editing"}
                      />
                    </td>
                    <td className="mono" style={{ color: "var(--fg-2)" }}>{r.updated}</td>
                    <td><UserChip name={r.applicant} /></td>
                    <td>
                      <a className="tbl-link" onClick={() => onOpenForm(r)}>{r.batch}</a>
                      <span className="form-id">{r.id}</span>
                    </td>
                    <td className="num">{r.items.length}</td>
                    <td><Tag status={r.status} /></td>
                    <td>{isEditing ? <span className="cell-empty">—</span> : <StatusPill value={r.imgStatus} />}</td>
                    <td>{isEditing ? <span className="cell-empty">—</span> : <StatusPill value={r.syncStatus} />}</td>
                    <td className="center">{renderRowActions(r)}</td>
                  </tr>
                );
              })}
              {filtered.length === 0 && (
                <tr><td colSpan={9}>
                  <div className="empty">
                    <div className="empty__icon"><Icon name="inbox" size={56} /></div>
                    <div className="empty__title">尚無新商品建立單</div>
                    <div className="empty__desc">放寬篩選條件，或建立第一張單。</div>
                    {canActAsPurchase(role) && <Button variant="primary" icon="plus" onClick={onCreate}>新增建立單</Button>}
                  </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, { BatchList });