/* global React, Icon, Button, Dialog, PageHead, FilterBar, Pager, UserChip, RowActions, useToast, PAGE_SIZES, CL_MODULE_CONFIG, ClCreateDialog, useSortableTable, canActAsPurchase, isPrototypeSuperUser */
// 清倉折扣 L1 — 週期列表

const { useState, useMemo } = React;

const mkClStamp = () => {
  const now = new Date();
  return now.getFullYear().toString()
    + String(now.getMonth() + 1).padStart(2, "0")
    + String(now.getDate()).padStart(2, "0") + " "
    + String(now.getHours()).padStart(2, "0") + ":"
    + String(now.getMinutes()).padStart(2, "0");
};

const ClearanceList = ({
  offers, role, currentUser,
  sectionLabel, titleLabel,
  onCreate, onOpen, onDelete,
}) => {
  const [fText,      setFText]      = useState("");
  const [fWeekFrom,  setFWeekFrom]  = useState("");
  const [fWeekTo,    setFWeekTo]    = useState("");
  const [page,       setPage]       = useState(1);
  const [pageSize,   setPageSize]   = useState(PAGE_SIZES[0]);
  const { SortHead, applySortTo }  = useSortableTable("updatedAt", "desc");
  const [showCreate, setShowCreate] = useState(false);
  const [deleteTarget, setDeleteTarget] = useState(null);
  const [exportingId, setExportingId] = useState(null);
  const { push: toast } = useToast();

  const existingWeekStarts = useMemo(() => offers.map(o => o.weekStart), [offers]);

  const filtered = useMemo(() => offers.filter(o => {
    if (fText && !o.applicant.toLowerCase().includes(fText.toLowerCase())) return false;
    if (fWeekFrom && o.weekStart < fWeekFrom) return false;
    if (fWeekTo   && o.weekStart > fWeekTo)   return false;
    return true;
  }), [offers, fText, fWeekFrom, fWeekTo]);

  const sorted = useMemo(() => applySortTo(filtered, (o, key) =>
    key === "items" ? o.items.length : (o[key] ?? "")
  ), [filtered, applySortTo]);

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

  const getActions = o => {
    const isOwner = canActAsPurchase(role) && (o.applicant === currentUser || isPrototypeSuperUser(role));
    const actions = [
      {
        label: exportingId === o.id ? "匯出中…" : "匯出",
        onClick: exportingId === o.id ? undefined : () => {
          setExportingId(o.id);
          setTimeout(() => {
            setExportingId(null);
            toast({ kind: "success", msg: `已匯出 ${o.items.length} 筆` });
          }, 900);
        },
      },
      { label: "檢視", onClick: () => onOpen(o) },
    ];
    if (isOwner) {
      actions.push({ label: "刪除", danger: true, onClick: () => setDeleteTarget(o) });
    }
    return actions;
  };

  const handleCreate = ({ weekStart, items }) => {
    const now = new Date();
    const newOffer = {
      id: `CL-${Date.now()}`,
      weekStart,
      applicant: currentUser,
      createdAt: now.toISOString().slice(0, 10),
      updatedAt: mkClStamp(),
      items,
    };
    onCreate(newOffer);
    toast({ kind: "success", msg: `清倉折扣表 ${weekStart} 已建立，共 ${items.length} 筆品項` });
  };

  const handleDelete = () => {
    onDelete(deleteTarget);
    toast({ kind: "success", msg: `清倉折扣表 ${deleteTarget.weekStart} 已刪除` });
    setDeleteTarget(null);
  };

  return (
    <>
      <PageHead
        section={sectionLabel}
        title={titleLabel}
        subtitle="每週依系統清倉標記自動彙整品項，產製一份清倉折扣表顯示於 Uber Eats app（Non CRM）。系統管理員依此表更新至商品原始檔。"
        actions={canActAsPurchase(role) && (
          <Button variant="primary" icon="plus" onClick={() => setShowCreate(true)}>
            新增清倉折扣表
          </Button>
        )}
      />

      <FilterBar
        filters={[
          {
            type: "search",
            placeholder: "搜尋申請人…",
            value: fText,
            onChange: v => { setFText(v); setPage(1); },
          },
          {
            type: "dateRange",
            label: "菜單日期",
            from: fWeekFrom,
            to: fWeekTo,
            onApply: (f, t) => { setFWeekFrom(f); setFWeekTo(t); setPage(1); },
          },
        ]}
      />

      <div className="card">
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 160 }}><SortHead colKey="updatedAt" label="更新時間" /></th>
                <th style={{ width: 100 }}><SortHead colKey="applicant" label="申請人" /></th>
                <th><SortHead colKey="weekStart" label="菜單日期" /></th>
                <th className="num"><SortHead colKey="items" label="品項筆數" /></th>
                <th style={{ width: 160 }} className="center">功能</th>
              </tr>
            </thead>
            <tbody>
              {paged.length === 0 && (
                <tr>
                  <td colSpan={5}>
                    <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">
                        {canActAsPurchase(role)
                          ? "試試清除篩選條件，或點右上角「新增清倉折扣表」。"
                          : "試試清除篩選條件。"}
                      </div>
                    </div>
                  </td>
                </tr>
              )}
              {paged.map(o => (
                <tr key={o.id}>
                  <td className="mono" style={{ color: "var(--fg-2)" }}>{o.updatedAt}</td>
                  <td><UserChip name={o.applicant} /></td>
                  <td className="mono" style={{ color: "var(--fg-1)", fontWeight: 500 }}>
                    {o.weekStart}
                  </td>
                  <td className="num">{o.items.length}</td>
                  <td className="center"><RowActions actions={getActions(o)} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <Pager
          total={sorted.length} page={page} pageSize={pageSize}
          pageSizeOptions={PAGE_SIZES}
          onPage={setPage}
          onPageSize={p => { setPageSize(p); setPage(1); }}
        />
      </div>

      <ClCreateDialog
        open={showCreate}
        onClose={() => setShowCreate(false)}
        currentUser={currentUser}
        existingWeekStarts={existingWeekStarts}
        onConfirm={handleCreate}
      />

      {deleteTarget && (
        <Dialog
          open
          title="刪除清倉折扣表"
          onClose={() => setDeleteTarget(null)}
          footer={
            <>
              <Button variant="text" onClick={() => setDeleteTarget(null)}>取消</Button>
              <Button variant="danger" onClick={handleDelete}>確認刪除</Button>
            </>
          }
        >
          <p style={{ fontSize: 14, color: "var(--fg-1)", lineHeight: 1.6 }}>
            確定要刪除 <b>{deleteTarget.weekStart}</b> 的清倉折扣表？<br />
            此操作無法還原。
          </p>
        </Dialog>
      )}
    </>
  );
};

Object.assign(window, { ClearanceList });