/* global React, Icon, Button, Tag, STATUS, ChipFilter, Pager, useToast, PURCHASERS, PAGE_SIZES, UserChip, useSortableTable, isPrototypeSuperUser, canActAsPurchase, canActAsJoanna */
// ADJ-A L1 — 轉廠商調整 批次列表

const { useState, useMemo } = React;

// ── Aggregate status computation (shared with adj-detail) ─────────────────
const computeAggStatus = (batch) => {
  if (!batch.submitted) return { type: "single", key: "adjDraft" };
  // 送出後一律以「每個狀態帶計數」呈現（含整批待審核），不再有無計數的單一 Tag 特例
  const counts = {};
  batch.rows.forEach(r => { const s = r.rowStatus || "adjPending"; counts[s] = (counts[s] || 0) + 1; });
  return { type: "counts", counts };
};

// 計數顯示順序（待審核 → 審核通過 → 已退回）
const AGG_STATUS_ORDER = [
  ["adjPending",  "待審核"],
  ["adjApproved", "審核通過"],
  ["adjRejected", "已退回"],
];

const AggStatusDisplay = ({ batch }) => {
  const agg = computeAggStatus(batch);
  if (agg.type === "single") return <Tag status={agg.key} />;
  const { counts } = agg;
  return (
    <span className="agg-status-tags">
      {AGG_STATUS_ORDER.filter(([k]) => counts[k]).map(([k, label]) => (
        <Tag key={k} status={k}>{label} ({counts[k]})</Tag>
      ))}
    </span>
  );
};

// ── AdjList ───────────────────────────────────────────────────────────────
const AdjList = ({ adjBatches, role, currentUser, onCreate, onOpen, onDelete }) => {
  const [q, setQ]                   = useState("");
  const [fApplicant, setFApplicant] = useState([]);
  const [fBatch, setFBatch]         = useState([]);
  const [fStatus, setFStatus]       = useState([]);
  const [fErpStatus, setFErpStatus] = useState([]);
  const [page, setPage]             = useState(1);
  const [pageSize, setPageSize]     = useState(PAGE_SIZES[0]);
  const { SortHead, applySortTo }   = useSortableTable("updatedAt", "desc");
  const { push: toast }             = useToast();

  const listBase = useMemo(() => {
    if (isPrototypeSuperUser(role)) return adjBatches;
    if (role === "purchase") return adjBatches.filter(b => b.applicant === currentUser);
    return adjBatches.filter(b => b.submitted);
  }, [adjBatches, role, currentUser]);

  const allApplicants = useMemo(() => {
    return [...new Set(listBase.map(b => b.applicant))].sort();
  }, [listBase]);
  const allBatchNames = useMemo(() => {
    return [...new Set(listBase.map(b => b.batchName))].sort();
  }, [listBase]);
  const allStatuses = isPrototypeSuperUser(role) || role === "purchase"
    ? [
        { value: "",            label: "尚未送審" },
        { value: "adjPending",  label: "待審核" },
        { value: "adjRejected", label: "已退回" },
        { value: "adjApproved", label: "審核通過" },
      ]
    : role === "joanna"
    ? [
        { value: "jPending", label: "待審核" },
        { value: "jDone",    label: "已審核" },
      ]
    : [
        { value: "adjPending",  label: "待審核" },
        { value: "adjRejected", label: "已退回" },
        { value: "adjApproved", label: "審核通過" },
      ];

  const filtered = useMemo(() => {
    return listBase.filter(b => {
      if (q && !b.batchName.includes(q) && !b.applicant.includes(q)) return false;
      if (fApplicant.length && !fApplicant.includes(b.applicant)) return false;
      if (fBatch.length && !fBatch.includes(b.batchName)) return false;
      if (fStatus.length) {
        if (canActAsJoanna(role) && !isPrototypeSuperUser(role)) {
          const hasPending = b.rows.some(r => r.rowStatus === "adjPending");
          if (!fStatus.includes(hasPending ? "jPending" : "jDone")) return false;
        } else {
          const match = fStatus.some(v =>
            v === "" ? !b.submitted : b.rows.some(r => r.rowStatus === v)
          );
          if (!match) return false;
        }
      }
      if ((role === "samantha" || isPrototypeSuperUser(role)) && fErpStatus.length) {
        const approvedRows = b.rows.filter(r => r.rowStatus === "adjApproved");
        if (approvedRows.length === 0) return false;
        const hasPendingErp = approvedRows.some(r => !r.erpUpdated);
        const match = fErpStatus.some(v => v === "erpPending" ? hasPendingErp : !hasPendingErp);
        if (!match) return false;
      }
      return true;
    });
  }, [listBase, role, q, fApplicant, fBatch, fStatus, fErpStatus]);

  const sorted = useMemo(() => applySortTo(filtered, (b, key) => {
    if (key === "rowCount") return b.rows.length;
    if (key === "aggStatus") {
      if (!b.submitted) return "0";
      const s = b.rows.map(r => r.rowStatus);
      if (s.every(x => x === "adjApproved")) return "3";
      if (s.every(x => x === "adjPending"))  return "1";
      return "2";
    }
    return b[key] ?? "";
  }), [filtered, applySortTo]);
  const paged = sorted.slice((page - 1) * pageSize, page * pageSize);

  const pendingCount = useMemo(() => {
    if (!canActAsJoanna(role)) return 0;
    return adjBatches.filter(b => b.submitted).reduce((sum, b) =>
      sum + b.rows.filter(r => r.rowStatus === "adjPending").length, 0);
  }, [adjBatches, role]);

  const getActions = (b) => {
    const agg = computeAggStatus(b);
    const isDraft     = agg.type === "single" && agg.key === "adjDraft";
    const hasRejected = agg.type === "mixed"  && agg.counts.adjRejected > 0;
    const hasPending = b.submitted && b.rows.some(r => r.rowStatus === "adjPending");
    const hasErpWork = b.rows.some(r => r.rowStatus === "adjApproved" && !r.erpUpdated);

    if (isPrototypeSuperUser(role)) {
      const actions = [];
      if (isDraft) {
        actions.push({ label: "編輯", onClick: () => onOpen(b) });
        actions.push({ label: "刪除", icon: "trash", danger: true, onClick: () => onDelete(b) });
      }
      if (hasRejected) actions.push({ label: "編輯", onClick: () => onOpen(b) });
      if (hasPending) actions.push({ label: "進入審核", onClick: () => onOpen(b) });
      if (hasErpWork) actions.push({ label: "ERP 確認", onClick: () => onOpen(b) });
      if (actions.length) return actions;
      return [{ label: "檢視", onClick: () => onOpen(b) }];
    }

    if (canActAsPurchase(role)) {
      if (isDraft) return [
        { label: "編輯", onClick: () => onOpen(b) },
        ...(b.applicant === currentUser || isPrototypeSuperUser(role)
          ? [{ label: "刪除", icon: "trash", danger: true, onClick: () => onDelete(b) }]
          : []),
      ];
      if (hasRejected) return [{ label: "編輯", onClick: () => onOpen(b) }];
    }
    if (role === "joanna") {
      if (hasPending) return [{ label: "進入審核", onClick: () => onOpen(b) }];
    }
    if (role === "samantha") {
      if (hasErpWork) return [{ label: "ERP 確認", onClick: () => onOpen(b) }];
    }
    return [{ label: "檢視", onClick: () => onOpen(b) }];
  };

  return (
    <>
      <PageHead
        section="商品調整"
        title="商品轉廠"
        subtitle="記錄待確認商品的廠商與定價調整，每週三更新週次、每週五同步菜單版本。"
        actions={canActAsPurchase(role) && <Button variant="primary" icon="plus" onClick={onCreate}>新增調整單</Button>}
      />

      {canActAsJoanna(role) && pendingCount > 0 && (
        <div className="summary-strip">
          <span className="summary-strip__label">待審核</span>
          <span className="summary-strip__num">{pendingCount} 筆</span>
        </div>
      )}

      <FilterBar
        filters={[
          { type: "search", placeholder: "搜尋批次名稱或申請人…", value: q, onChange: v => { setQ(v); setPage(1); } },
          !canActAsPurchase(role) && { type: "chip", label: "申請人", value: fApplicant, options: allApplicants, onChange: v => { setFApplicant(v); setPage(1); }, multi: true },
          { type: "chip", label: "批次", value: fBatch, options: allBatchNames, onChange: v => { setFBatch(v); setPage(1); }, multi: true },
          { type: "chip", label: "審核狀態", value: fStatus, options: allStatuses, onChange: v => { setFStatus(v); setPage(1); }, multi: true },
          (role === "samantha" || isPrototypeSuperUser(role)) && { type: "chip", label: "ERP 狀態", value: fErpStatus,
            options: [{ value: "erpPending", label: "ERP 待確認" }, { value: "erpDone", label: "ERP 已完成" }],
            onChange: v => { setFErpStatus(v); setPage(1); }, multi: true },
        ]}
      />

      <div className="card">
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 150 }}><SortHead colKey="updatedAt" label="更新時間" /></th>
                <th style={{ width: 100 }}><SortHead colKey="applicant" label="申請人" /></th>
                <th><SortHead colKey="batchName" label="批次名稱" /></th>
                <th style={{ width: 110 }} className="num"><SortHead colKey="rowCount" label="品項筆數" /></th>
                <th style={{ width: 1 }}><SortHead colKey="aggStatus" label="狀態" /></th>
                <th style={{ width: 160 }} className="center">功能</th>
              </tr>
            </thead>
            <tbody>
              {paged.length === 0 && (
                <tr>
                  <td colSpan={6}>
                    <div className="empty" style={{ padding: "40px 20px" }}>
                      <div className="empty__icon"><Icon name="sliders" size={36} /></div>
                      <div className="empty__title">沒有符合條件的調整單</div>
                      <div className="empty__desc">試試清除篩選條件，或點右上角「新增調整單」。</div>
                    </div>
                  </td>
                </tr>
              )}
              {paged.map(b => (
                <tr key={b.id}>
                  <td className="mono" style={{ color: "var(--fg-2)" }}>{b.updatedAt}</td>
                  <td><UserChip name={b.applicant} /></td>
                  <td>
                    <a className="tbl-link" onClick={() => onOpen(b)}>{b.batchName}</a>
                  </td>
                  <td className="num">{b.rows.length}</td>
                  <td><AggStatusDisplay batch={b} /></td>
                  <td className="center">
                    <RowActions actions={getActions(b)} />
                  </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, { AdjList, computeAggStatus, AggStatusDisplay });