/* global React, Icon, Button, Dialog, PageHead, useToast, ImportBanner, runImportProgress, canActAsPurchase, isPrototypeSuperUser */
// 清倉折扣 L2 — 週期明細（唯讀）

const { useState } = React;

const ClearanceDetail = ({ offer, role, currentUser, onBack, onDelete }) => {
  const [showConfirm, setShowConfirm] = useState(false);
  const [exportPhase, setExportPhase] = useState(null);
  const [exportDone,  setExportDone]  = useState(0);
  const { push: toast } = useToast();
  const isOwner = canActAsPurchase(role) && (offer.applicant === currentUser || isPrototypeSuperUser(role));

  const handleExport = () => {
    const total = offer.items.length;
    setExportDone(0);
    setExportPhase("parsing");
    runImportProgress(total || 1, setExportDone, () => {
      setExportPhase("ok");
      setTimeout(() => setExportPhase(null), 1500);
    });
  };

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

  return (
    <>
      <PageHead
        crumbs={[
          { label: "優惠與活動" },
          { label: "清倉折扣", onClick: onBack },
          { label: offer.weekStart, current: true },
        ]}
        title={offer.weekStart}
        actions={<>
          <Button variant="default" icon="download" onClick={handleExport} disabled={exportPhase === "parsing"}>
            {exportPhase === "parsing" ? "匯出中…" : "匯出"}
          </Button>
          {isOwner && (
            <Button variant="danger" onClick={() => setShowConfirm(true)}>刪除</Button>
          )}
        </>}
      />

      <ImportBanner
        phase={exportPhase}
        parsingTitle="匯出準備中…"
        total={offer.items.length}
        done={exportDone}
        okTitle={`已匯出 ${offer.items.length} 筆`}
        okDesc=""
      />

      {/* Meta strip */}
      <div className="card" style={{ marginBottom: 12 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: "12px 24px", padding: "16px 20px" }}>
          {[
            ["菜單日期", offer.weekStart, true],
            ["申請人",   offer.applicant,  false],
            ["建立日期", offer.createdAt,  true],
            ["更新時間", offer.updatedAt,  true],
          ].map(([label, val, mono]) => (
            <div key={label}>
              <div style={{ fontSize: 11, color: "var(--fg-3)", marginBottom: 2 }}>{label}</div>
              <div style={{
                fontSize: 13, color: "var(--fg-1)", fontWeight: 500,
                fontFamily: mono ? "var(--font-mono)" : undefined,
              }}>
                {val || "—"}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Items table */}
      <div className="card">
        <div style={{ padding: "10px 16px", borderBottom: "1px solid var(--border)", fontSize: 13, color: "var(--fg-2)" }}>
          共 <b style={{ color: "var(--fg-1)" }}>{offer.items.length}</b> 筆品項
        </div>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 32, textAlign: "center" }}>#</th>
                <th style={{ width: 160 }}>品號</th>
                <th>品名</th>
                <th style={{ width: 140 }}>菜單分類</th>
                <th style={{ width: 120 }}>次分類</th>
              </tr>
            </thead>
            <tbody>
              {offer.items.length === 0 && (
                <tr>
                  <td colSpan={5} style={{ textAlign: "center", padding: 24, color: "var(--fg-3)" }}>
                    此清倉折扣表目前沒有品項
                  </td>
                </tr>
              )}
              {offer.items.map((item, idx) => (
                <tr key={item.uid}>
                  <td style={{ textAlign: "center", color: "var(--fg-3)" }}>{idx + 1}</td>
                  <td className="mono" style={{ fontSize: 12 }}>{item.barcode}</td>
                  <td>{item.name}</td>
                  <td style={{ color: "var(--fg-2)" }}>{item.clearanceMenu || "—"}</td>
                  <td style={{ color: "var(--fg-2)" }}>{item.clearanceSubCat || "—"}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

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

Object.assign(window, { ClearanceDetail });