/* global React, Icon, Button, Tag, Pager, useToast, Textarea, PAGE_SIZES, FilterBar, PageHead,
   RowActions, UserChip, ModeToggle, TableGroupHeader, SkuToolbar, Dialog, FormField,
   EO_ALL_COLS, EO_COMPACT_KEYS, EO_GROUP_LABELS, EO_NUM_W,
   DISCOUNT_TYPE_OPTIONS, isFriday, isThursday, useSortableTable, isPrototypeSuperUser, canActAsPurchase, canActAsJoanna */
// Eats Offer — 單品優惠品項列表（單層，每列 = 一筆品項）

const { useState, useMemo } = React;

// 列表專用：更新時間 + 申請人放在商品欄位群組前（META 群組）
const EO_LIST_META_COLS = [
  { key: "updatedAt", label: "更新時間", w: 150, group: "META", mono: true },
  { key: "applicant", label: "申請人",   w: 100, group: "META" },
];

// 狀態欄（group=CTRL → 與功能欄共用「操作」群組標頭）
const EO_STATUS_COL = { key: "_status", label: "狀態", w: 90, group: "CTRL" };

// 功能欄（同 CTRL 群組，與狀態欄共用標頭）
const EO_LIST_ACTION_COL = { key: "_action", label: "功能", w: 100, group: "CTRL" };

// 群組標籤（擴充 META 申請資訊群組 + CTRL 操作群組）
const EO_LIST_GROUP_LABELS = { META: "申請資訊", ...EO_GROUP_LABELS, CTRL: "操作" };

const EatsOfferList = ({
  offers, hasApproval, role, currentUser,
  sectionLabel, titleLabel, subtitleLabel,
  onAdd, onEdit, onDelete, onApprove, onReject, onView,
}) => {
  const { push: toast } = useToast();
  const [search,             setSearch]             = useState("");
  const [fPromoStartFrom,    setFPromoStartFrom]    = useState("");
  const [fPromoStartTo,      setFPromoStartTo]      = useState("");
  const [fPromoEndFrom,      setFPromoEndFrom]      = useState("");
  const [fPromoEndTo,        setFPromoEndTo]        = useState("");
  const [fDiscountType,      setFDiscountType]      = useState([]);
  const [fMenuPromoStartFrom,setFMenuPromoStartFrom]= useState("");
  const [fMenuPromoStartTo,  setFMenuPromoStartTo]  = useState("");
  const [fMenuPromoEndFrom,  setFMenuPromoEndFrom]  = useState("");
  const [fMenuPromoEndTo,    setFMenuPromoEndTo]    = useState("");
  const [fStatus,            setFStatus]            = useState([]);
  const [fApplicant,         setFApplicant]         = useState([]);
  const [page,               setPage]               = useState(1);
  const [pageSize,   setPageSize]   = useState(PAGE_SIZES[0]);
  const { SortHead, applySortTo }  = useSortableTable("updatedAt", "desc");
  const [colMode,    setColMode]    = useState("compact");
  const [rejectTarget,    setRejectTarget]    = useState(null);  // 待退回的品項
  const [rejectReasonInput, setRejectReasonInput] = useState("");

  // 可見性規則：
  //  - joanna（採購主管）：所有非草稿品項
  //  - purchase（採購）：線別可見 — 只看自己負責採購線（lineOwner）的品項；他人草稿不可見，自己草稿可見
  //  - viewer：全部
  // ⚠️ lineOwner 為 prototype 模擬欄（不顯示於前端）；正式版改為由品項分類→採購線指派推導。
  const baseList = useMemo(() => {
    if (isPrototypeSuperUser(role)) return offers;
    if (role === "joanna")   return offers.filter(o => o.status !== "eoDraft");
    if (role === "purchase") return offers.filter(o =>
      o.lineOwner === currentUser && (o.status !== "eoDraft" || o.applicant === currentUser));
    return offers;
  }, [offers, role, currentUser]);

  const allApplicants = useMemo(() =>
    [...new Set(baseList.map(o => o.applicant))].filter(Boolean).sort(),
    [baseList]
  );

  // 欄位集合：META + 商品欄位（去掉 # 和 _action）+ 狀態（選配）
  const dataCols = useMemo(() => {
    const productCols = EO_ALL_COLS.filter(c => !c.stickyNum && !c.actionCol);
    const visibleProduct = colMode === "compact"
      ? productCols.filter(c => c.sticky2nd || EO_COMPACT_KEYS.includes(c.key))
      : productCols;
    const trailing = [...(hasApproval ? [EO_STATUS_COL] : []), EO_LIST_ACTION_COL];
    return [...EO_LIST_META_COLS, ...visibleProduct, ...trailing];
  }, [colMode, hasApproval]);

  const totalWidth = EO_NUM_W + dataCols.reduce((s, c) => s + c.w, 0);

  // 篩選
  const filtered = useMemo(() => {
    const q = search.trim().toLowerCase();
    return baseList.filter(o => {
      if (q && !(o.barcode?.toLowerCase().includes(q) || o.name?.toLowerCase().includes(q))) return false;
      if (fStatus.length        && !fStatus.includes(o.status))             return false;
      if (fApplicant.length     && !fApplicant.includes(o.applicant))       return false;
      if (fDiscountType.length  && !fDiscountType.includes(o.discountType)) return false;
      if (fPromoStartFrom       && (o.promoStart||"") < fPromoStartFrom)    return false;
      if (fPromoStartTo         && (o.promoStart||"") > fPromoStartTo)      return false;
      if (fPromoEndFrom         && (o.promoEnd||"")   < fPromoEndFrom)      return false;
      if (fPromoEndTo           && (o.promoEnd||"")   > fPromoEndTo)        return false;
      if (fMenuPromoStartFrom   && (o.menuPromoStart||"") < fMenuPromoStartFrom) return false;
      if (fMenuPromoStartTo     && (o.menuPromoStart||"") > fMenuPromoStartTo)   return false;
      if (fMenuPromoEndFrom     && (o.menuPromoEnd||"")   < fMenuPromoEndFrom)   return false;
      if (fMenuPromoEndTo       && (o.menuPromoEnd||"")   > fMenuPromoEndTo)     return false;
      return true;
    });
  }, [baseList, search, fStatus, fApplicant, fDiscountType,
      fPromoStartFrom, fPromoStartTo, fPromoEndFrom, fPromoEndTo,
      fMenuPromoStartFrom, fMenuPromoStartTo, fMenuPromoEndFrom, fMenuPromoEndTo]);

  const sorted = useMemo(() => applySortTo(filtered), [filtered, applySortTo]);

  const paged = sorted.slice((page - 1) * pageSize, page * pageSize);

  const pendingCount = useMemo(() =>
    canActAsJoanna(role) ? offers.filter(o => o.status === "eoUnderReview").length : 0,
    [offers, role]
  );

  const getActions = (o) => {
    const isOwn = o.applicant === currentUser || isPrototypeSuperUser(role);
    if (isPrototypeSuperUser(role)) {
      if (o.status === "eoUnderReview") return [
        { label: "退回", danger: true, onClick: () => { setRejectTarget(o); setRejectReasonInput(""); } },
        { label: "審核通過", onClick: () => { onApprove(o); toast({ kind: "success", msg: `${o.name || o.barcode} 已審核通過` }); } },
        { label: "編輯", onClick: () => onEdit(o) },
      ];
      if (o.status === "eoDraft" || o.status === "eoRejected") return [
        { label: "編輯", onClick: () => onEdit(o) },
        { label: "刪除", danger: true, onClick: () => onDelete(o) },
      ];
      return [{ label: "編輯", onClick: () => onEdit(o) }, { label: "檢視", onClick: () => onView(o) }];
    }
    if (canActAsPurchase(role)) {
      // 草稿（理論上不進 L1）與已退回：自己的可編輯/刪除
      if (isOwn && (o.status === "eoDraft" || o.status === "eoRejected")) return [
        { label: "編輯", onClick: () => onEdit(o) },
        { label: "刪除", danger: true, onClick: () => onDelete(o) },
      ];
      if (isOwn) return [{ label: "編輯", onClick: () => onEdit(o) }];
      return [{ label: "檢視", onClick: () => onView(o) }];
    }
    if (role === "joanna") {
      if (o.status === "eoUnderReview") return [
        { label: "退回", danger: true, onClick: () => { setRejectTarget(o); setRejectReasonInput(""); } },
        { label: "審核通過", onClick: () => { onApprove(o); toast({ kind: "success", msg: `${o.name || o.barcode} 已審核通過` }); } },
      ];
      return [{ label: "檢視", onClick: () => onView(o) }];
    }
    return [{ label: "檢視", onClick: () => onView(o) }];
  };

  const confirmReject = () => {
    onReject(rejectTarget, rejectReasonInput.trim());
    toast({ kind: "warning", msg: `${rejectTarget.name || rejectTarget.barcode} 已退回，申請人需修正後重新送出` });
    setRejectTarget(null);
    setRejectReasonInput("");
  };

  const statusOptions = [
    { value: "eoDraft",       label: "草稿" },
    { value: "eoUnderReview", label: "待審核" },
    { value: "eoNoReview",    label: "無需審核" },
    { value: "eoApproved",    label: "審核通過" },
    { value: "eoRejected",    label: "已退回" },
  ];

  // ── 唯讀儲存格 ────────────────────────────────────────────────────────────
  const renderCell = (col, row, globalIdx) => {
    const k = col.key;

    if (k === "#") return (
      <td key={k} style={{
        textAlign: "center", color: "var(--fg-3)",
        position: "sticky", left: 0, background: "var(--bg-surface)", zIndex: 1,
        width: EO_NUM_W, minWidth: EO_NUM_W, padding: "0 4px",
      }}>
        {globalIdx + 1}
      </td>
    );

    if (k === "barcode") {
      const canOpen = (canActAsPurchase(role) && (row.applicant === currentUser || isPrototypeSuperUser(role)));
      return (
        <td key={k} style={{
          position: "sticky", left: EO_NUM_W, background: "var(--bg-surface)", zIndex: 1,
          boxShadow: "2px 0 4px rgba(0,0,0,.06)",
        }}>
          {canOpen
            ? <a className="tbl-link" onClick={() => onEdit(row)} style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>{row.barcode || "—"}</a>
            : <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-2)" }}>{row.barcode || "—"}</span>
          }
        </td>
      );
    }

    if (k === "_status") return (
      <td key={k}><Tag status={row.status} /></td>
    );

    if (k === "_action") return (
      <td key={k} className="center"><RowActions actions={getActions(row)} /></td>
    );

    if (k === "applicant") return (
      <td key={k}><UserChip name={row.applicant} /></td>
    );

    if (k === "name") {
      const canOpen = (canActAsPurchase(role) && (row.applicant === currentUser || isPrototypeSuperUser(role)));
      return (
        <td key={k}>
          {canOpen
            ? <a className="tbl-link" onClick={() => onEdit(row)}>{row.name || "—"}</a>
            : <span style={{ color: "var(--fg-2)" }}>{row.name || "—"}</span>
          }
        </td>
      );
    }

    if (k === "marginPct") {
      const v = row.marginPct;
      const warn = v != null && v < 0.20;
      return (
        <td key={k} className="mono" style={{
          textAlign: "right",
          color: warn ? "var(--red-600, #DC2626)" : "var(--fg-2)",
          fontWeight: warn ? 600 : undefined,
        }}>
          {v != null ? `${(v * 100).toFixed(1)}%` : <span style={{ color: "var(--fg-4)" }}>—</span>}
        </td>
      );
    }

    if (k === "discountType") {
      const v = row[k];
      const opt = DISCOUNT_TYPE_OPTIONS.find(o => o.value === v);
      return (
        <td key={k} style={{ color: v ? "var(--fg-2)" : "var(--fg-4)" }}>
          {opt ? opt.label : (v || "—")}
        </td>
      );
    }

    if (["discountPct", "promoDepth", "stackDepth"].includes(k)) {
      const v = row[k];
      return (
        <td key={k} className="mono" style={{ textAlign: "right", color: "var(--fg-2)" }}>
          {v != null ? `${(v * 100).toFixed(1)}%` : <span style={{ color: "var(--fg-4)" }}>—</span>}
        </td>
      );
    }

    if (k === "menuPromoStart" || k === "menuPromoEnd") {
      const v = row[k];
      return (
        <td key={k} className="mono" style={{ fontSize: 12, color: v ? "var(--fg-2)" : "var(--fg-4)" }}>
          {v || "—"}
        </td>
      );
    }

    if (["promoCheck", "promoVsList", "autoListAdj"].includes(k)) {
      const v = row[k];
      const isPass = v === "PASS" || v === "NO";
      const isFail = v === "FAIL" || v === "YES";
      return (
        <td key={k} style={{
          textAlign: "center",
          fontWeight: isFail ? 600 : undefined,
          color: isFail ? "var(--red-600, #DC2626)" : isPass ? "var(--fg-2)" : "var(--fg-4)",
        }}>
          {v || "—"}
        </td>
      );
    }

    if (["autoListWhitelist", "costInErp", "timeCheck"].includes(k)) {
      const v = row[k];
      return (
        <td key={k} style={{ textAlign: "center", color: v ? "var(--fg-1)" : "var(--fg-4)" }}>
          {v ? "✓" : "—"}
        </td>
      );
    }

    const moneyKeys = ["cost","newCost","listPrice","suggestPrice","promoPrice",
                       "u1PromoPrice","finalPrice","unitPrice","setPrice","marketPrice"];
    if (moneyKeys.includes(k)) {
      const v = row[k];
      if (v == null) return <td key={k} className="mono" style={{ color: "var(--fg-4)", textAlign: "right" }}>—</td>;
      return (
        <td key={k} className="mono" style={{ color: "var(--fg-2)", textAlign: "right" }}>
          NT${(+v).toLocaleString("zh-TW", { minimumFractionDigits: 0, maximumFractionDigits: 2 })}
        </td>
      );
    }

    if (["buyQty", "discountQty", "purchaseLimit"].includes(k)) {
      const v = row[k];
      return (
        <td key={k} className="mono" style={{ textAlign: "right", color: v != null ? "var(--fg-2)" : "var(--fg-4)" }}>
          {v ?? "—"}
        </td>
      );
    }

    const v = row[k];
    if (v == null || v === "") return <td key={k} style={{ color: "var(--fg-4)" }}>—</td>;
    return (
      <td key={k} className={col.mono ? "mono" : ""} style={{ color: "var(--fg-2)", fontSize: col.mono ? 12 : undefined }}>
        {String(v)}
      </td>
    );
  };

  // ── 欄位名稱列 th ─────────────────────────────────────────────────────────
  const renderColTh = (col) => {
    const s = { width: col.w, minWidth: col.w };
    if (col.key === "_action") return (
      <th key={col.key} style={{ ...s, textAlign: "center" }}>{col.label}</th>
    );
    // _status 以 o.status 為排序 key；其餘以 col.key
    const sortKey = col.key === "_status" ? "status" : col.key;
    const label = <SortHead colKey={sortKey} label={col.label} />;
    if (col.sticky2nd) return (
      <th key={col.key} style={{ ...s, position: "sticky", left: EO_NUM_W, zIndex: 2, boxShadow: "2px 0 4px rgba(0,0,0,.06)" }}>
        {label}
      </th>
    );
    return <th key={col.key} style={s}>{label}</th>;
  };

  // ── Render ────────────────────────────────────────────────────────────────
  return (
    <>
      <PageHead
        section={sectionLabel}
        title={titleLabel}
        subtitle={subtitleLabel}
        actions={canActAsPurchase(role) && (
          <Button variant="primary" icon="plus" onClick={onAdd}>新增品項</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: search, onChange: v => { setSearch(v); setPage(1); }, style: { width: 240 } },
          ...(hasApproval ? [{
            type: "chip", label: "狀態", multi: true,
            value: fStatus,
            options: statusOptions,
            onChange: v => { setFStatus(v); setPage(1); },
          }] : []),
          {
            type: "dateRange", label: "促進開始",
            from: fPromoStartFrom, to: fPromoStartTo,
            onApply: (f, t) => { setFPromoStartFrom(f); setFPromoStartTo(t); setPage(1); },
          },
          {
            type: "dateRange", label: "促進結束",
            from: fPromoEndFrom, to: fPromoEndTo,
            onApply: (f, t) => { setFPromoEndFrom(f); setFPromoEndTo(t); setPage(1); },
          },
          {
            type: "chip", label: "折扣種類", multi: true,
            value: fDiscountType,
            options: DISCOUNT_TYPE_OPTIONS,
            onChange: v => { setFDiscountType(v); setPage(1); },
          },
          {
            type: "dateRange", label: "菜單促銷開始",
            from: fMenuPromoStartFrom, to: fMenuPromoStartTo,
            onApply: (f, t) => { setFMenuPromoStartFrom(f); setFMenuPromoStartTo(t); setPage(1); },
          },
          {
            type: "dateRange", label: "菜單促銷結束",
            from: fMenuPromoEndFrom, to: fMenuPromoEndTo,
            onApply: (f, t) => { setFMenuPromoEndFrom(f); setFMenuPromoEndTo(t); setPage(1); },
          },
          // 申請人篩選對所有角色開放（線別可見後，同一條線可能有多位建立者）
          {
            type: "chip", label: "申請人", multi: true,
            value: fApplicant,
            options: allApplicants.map(a => ({ value: a, label: a })),
            onChange: v => { setFApplicant(v); setPage(1); },
          },
        ]}
      />

      <div className="card">
        <SkuToolbar>
          <ModeToggle mode={colMode} onChange={setColMode} />
          <span style={{ fontSize: 13, color: "var(--fg-2)", flexShrink: 0, marginLeft: 12 }}>
            共 <b style={{ color: "var(--fg-1)" }}>{sorted.length}</b> 筆
          </span>
        </SkuToolbar>

        <div className="tbl-wrap">
          <table className="tbl" style={{ borderCollapse: "separate", borderSpacing: 0, minWidth: totalWidth }}>
            <thead>
              <TableGroupHeader
                cols={dataCols}
                groupLabels={EO_LIST_GROUP_LABELS}
                leadingSlot={
                  <th rowSpan={2} style={{
                    width: EO_NUM_W, minWidth: EO_NUM_W, padding: "0 4px",
                    position: "sticky", left: 0, zIndex: 3, background: "var(--gray-50)",
                  }}>#</th>
                }
              />
              <tr>
                {dataCols.map(renderColTh)}
              </tr>
            </thead>
            <tbody>
              {paged.length === 0 && (
                <tr>
                  <td colSpan={dataCols.length + 2}>
                    <div className="empty" style={{ padding: "40px 20px" }}>
                      <div className="empty__icon"><Icon name="tag" size={36} /></div>
                      <div className="empty__title">沒有符合條件的品項</div>
                      <div className="empty__desc">試試清除篩選條件，或點右上角「新增品項」。</div>
                    </div>
                  </td>
                </tr>
              )}
              {paged.map((row, idx) => {
                const globalIdx = (page - 1) * pageSize + idx;
                return (
                  <tr key={row.uid}>
                    {renderCell({ key: "#" }, row, globalIdx)}
                    {dataCols.map(col => renderCell(col, row, globalIdx))}
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

        <Pager
          total={sorted.length} page={page} pageSize={pageSize}
          pageSizeOptions={PAGE_SIZES}
          onPage={setPage}
          onPageSize={p => { setPageSize(p); setPage(1); }}
        />
      </div>

      <Dialog
        open={!!rejectTarget}
        title="退回此品項"
        onClose={() => { setRejectTarget(null); setRejectReasonInput(""); }}
        footer={<>
          <Button variant="default" onClick={() => { setRejectTarget(null); setRejectReasonInput(""); }}>取消</Button>
          <Button variant="danger" disabled={!rejectReasonInput.trim()} onClick={confirmReject}>確認退回</Button>
        </>}
      >
        <FormField label="退回原因" required>
          <Textarea
            variant="reject"
            rows={3}
            value={rejectReasonInput}
            onChange={e => setRejectReasonInput(e.target.value)}
            placeholder="說明需修正的項目，申請人將依此修正後重新送出"
            autoFocus
          />
        </FormField>
      </Dialog>
    </>
  );
};

Object.assign(window, { EatsOfferList });