/* global React, Icon, Button, Tag, useToast, Dialog, ChipFilter, Pager, PAGE_SIZES,
   ROLES, SALE_STATUS_LABELS, computeAggStatus, AggStatusDisplay,
   AdjStatusPicker, AdjStatusDetail, RowActions, UserChip, useSortableTable,
   isPrototypeSuperUser, canActAsPurchase, canActAsJoanna */
// ADJ-C/D L1 — 商品狀態調整 批次列表

const { useState, useMemo, useEffect } = React;

// ── AdjStatusList ─────────────────────────────────────────────────────────────
const AdjStatusList = ({ role, currentUser, adjStatusBatches, onPatchBatch, onSubmitBatch,
  onOpenBatch, onCreateBatch, onDeleteBatch, onDirtyChange }) => {

  const [pickerOpen, setPickerOpen]           = useState(false);
  const [openBatchId, setOpenBatchId]         = useState(null);
  const [deleteCandidate, setDeleteCandidate] = useState(null);
  const [q, setQ]                             = useState("");
  const [fApplicant, setFApplicant]           = useState([]);
  const [fBatchName, setFBatchName]           = 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();

  // ── Role-filtered base list (data visibility) ────────────────────────────
  const baseList = useMemo(() => {
    if (isPrototypeSuperUser(role)) return adjStatusBatches;
    if (role === "purchase") return adjStatusBatches.filter(b => b.applicant === currentUser);
    return adjStatusBatches.filter(b => b.submitted);
  }, [adjStatusBatches, role, currentUser]);
  const allApplicants = useMemo(() => [...new Set(baseList.map(b => b.applicant))].sort(), [baseList]);
  const allBatchNames = useMemo(() => [...new Set(baseList.map(b => b.batchName))].sort(), [baseList]);

  // ── Filtering (must be before any conditional return) ────────────────────
  const visibleBatches = useMemo(() => {
    let list = baseList;
    if (q) list = list.filter(b => b.batchName.includes(q) || b.applicant.includes(q));
    if (fApplicant.length > 0) list = list.filter(b => fApplicant.includes(b.applicant));
    if (fBatchName.length > 0) list = list.filter(b => fBatchName.includes(b.batchName));
    if (fStatus.length > 0) {
      if (canActAsJoanna(role) && !isPrototypeSuperUser(role)) {
        list = list.filter(b => {
          const hasPending = b.rows.some(r => r.rowStatus === "adjPending");
          return fStatus.includes(hasPending ? "jPending" : "jDone");
        });
      } else {
        list = list.filter(b => fStatus.some(v =>
          v === "" ? !b.submitted : b.rows.some(r => r.rowStatus === v)
        ));
      }
    }
    if ((role === "samantha" || isPrototypeSuperUser(role)) && fErpStatus.length > 0) {
      list = list.filter(b => {
        const approvedRows = b.rows.filter(r => r.rowStatus === "adjApproved");
        if (approvedRows.length === 0) return false;
        const hasPendingErp = approvedRows.some(r => !r.erpUpdated);
        return fErpStatus.some(v => v === "erpPending" ? hasPendingErp : !hasPendingErp);
      });
    }
    return list;
  }, [baseList, q, fApplicant, fBatchName, fStatus, fErpStatus, role]);

  const sorted = useMemo(() => applySortTo(visibleBatches, (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] ?? "";
  }), [visibleBatches, applySortTo]);
  const paged = sorted.slice((page - 1) * pageSize, page * pageSize);

  // Joanna pending count strip
  const joannaAllPending = useMemo(() => {
    if (!canActAsJoanna(role)) return 0;
    return baseList.reduce((sum, b) =>
      sum + b.rows.filter(r => r.rowStatus === "adjPending").length, 0);
  }, [baseList, role]);

  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: "審核通過" },
      ];

  // ── Handlers ────────────────────────────────────────────────────────────────
  const handlePickerConfirm = (batchName) => {
    setPickerOpen(false);
    const newId = onCreateBatch(batchName);
    setOpenBatchId(newId);
  };

  const handleDoDelete = () => {
    if (!deleteCandidate) return;
    onDeleteBatch(deleteCandidate.id);
    setDeleteCandidate(null);
    toast({ kind: "success", msg: "調整單已刪除" });
  };

  // ── Row actions (role-aware) ─────────────────────────────────────────────
  const getActions = (batch) => {
    const agg = computeAggStatus(batch);
    const isDraft     = agg.type === "single" && agg.key === "adjDraft";
    const hasRejected = agg.type === "mixed"  && agg.counts.adjRejected > 0;
    const hasPending = batch.submitted && batch.rows.some(r => r.rowStatus === "adjPending");
    const hasErpWork = batch.rows.some(r => r.rowStatus === "adjApproved" && !r.erpUpdated);

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

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

  // ── If a batch is open, render detail view (after all hooks) ─────────────
  if (openBatchId) {
    const batch = adjStatusBatches.find(b => b.id === openBatchId);
    if (!batch) {
      // batch was deleted — go back to list on next render
      setTimeout(() => setOpenBatchId(null), 0);
      return null;
    }
    return (
      <AdjStatusDetail
        batch={batch}
        role={role}
        onBack={() => setOpenBatchId(null)}
        onPatchBatch={onPatchBatch}
        onSubmitBatch={onSubmitBatch}
        onDeleteBatch={onDeleteBatch}
        onDirtyChange={onDirtyChange}
      />
    );
  }

  return (
    <>
      <PageHead
        section="商品調整"
        title="商品主檔調整"
        subtitle="申請商品停售、暫停供貨及恢復供貨，每週三更新週次、每週五同步菜單版本。"
        actions={canActAsPurchase(role) && <Button variant="primary" icon="plus" onClick={() => setPickerOpen(true)}>新增調整單</Button>}
      />

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

      <FilterBar
        filters={[
          { type: "search", placeholder: "搜尋批次名稱或申請人…", value: q, onChange: v => setQ(v) },
          !canActAsPurchase(role) && { type: "chip", label: "申請人",  value: fApplicant, options: allApplicants, onChange: setFApplicant, multi: true },
          { type: "chip", label: "批次",     value: fBatchName, options: allBatchNames, onChange: setFBatchName, multi: true },
          { type: "chip", label: "審核狀態", value: fStatus,    options: allStatuses,    onChange: setFStatus,    multi: true },
          (role === "samantha" || isPrototypeSuperUser(role)) && { type: "chip", label: "ERP 狀態", value: fErpStatus,
            options: [{ value: "erpPending", label: "ERP 待確認" }, { value: "erpDone", label: "ERP 已完成" }],
            onChange: setFErpStatus, 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(batch => (
                <tr key={batch.id}>
                  <td className="mono" style={{ color: "var(--fg-2)" }}>{batch.updatedAt}</td>
                  <td><UserChip name={batch.applicant} /></td>
                  <td><a className="tbl-link" onClick={() => setOpenBatchId(batch.id)}>{batch.batchName}</a></td>
                  <td className="num">{batch.rows.length}</td>
                  <td><AggStatusDisplay batch={batch} /></td>
                  <td className="center"><RowActions actions={getActions(batch)} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <Pager total={visibleBatches.length} page={page} pageSize={pageSize}
          onPageChange={setPage} onSizeChange={s => { setPageSize(s); setPage(1); }} />
      </div>

      <AdjStatusPicker
        open={pickerOpen}
        onClose={() => setPickerOpen(false)}
        adjStatusBatches={adjStatusBatches}
        currentUser={currentUser}
        onConfirm={handlePickerConfirm}
      />

      <Dialog open={!!deleteCandidate} title="刪除調整單"
        onClose={() => setDeleteCandidate(null)}
        footer={<>
          <Button variant="text" onClick={() => setDeleteCandidate(null)}>取消</Button>
          <Button variant="danger" onClick={handleDoDelete}>確認刪除</Button>
        </>}>
        <p>確定要刪除 <b>{deleteCandidate?.batchName}</b> 嗎？此操作無法還原。</p>
      </Dialog>
    </>
  );
};

Object.assign(window, { AdjStatusList });