/* global React, Dialog, Button, Field, InfoNote, CLEARANCE_SKUS */
// 新增清倉折扣表 Dialog

const { useState } = React;

const ClCreateDialog = ({ open, onClose, currentUser, existingWeekStarts, onConfirm }) => {
  const [weekStart, setWeekStart] = useState("");
  const [phase, setPhase] = useState("input"); // "input" | "loading" | "nodata"

  const isDuplicate = !!weekStart && existingWeekStarts.includes(weekStart);
  const canSubmit = !!weekStart && !isDuplicate && phase === "input";

  const handleGenerate = () => {
    if (!canSubmit) return;
    setPhase("loading");
    setTimeout(() => {
      if (!weekStart.startsWith("2026")) {
        setPhase("nodata");
        return;
      }
      const items = CLEARANCE_SKUS.map((s, i) => ({
        uid: `ci-${weekStart}-${i}`,
        ...s,
      }));
      onConfirm({ weekStart, items });
      handleClose();
    }, 1500);
  };

  const handleClose = () => {
    setWeekStart("");
    setPhase("input");
    onClose();
  };

  if (!open) return null;

  return (
    <Dialog
      open={open}
      title="新增清倉折扣表"
      onClose={phase === "loading" ? undefined : handleClose}
      footer={
        <>
          <Button variant="text" onClick={handleClose} disabled={phase === "loading"}>取消</Button>
          <Button variant="primary" onClick={handleGenerate} disabled={!canSubmit}>
            開始產生菜單
          </Button>
        </>
      }
    >
      <div className="cl-create-body">
        <div className="cl-create-row">
          <span className="lab req">菜單日期</span>
          <Field
            type="date"
            value={weekStart}
            onChange={e => {
              setWeekStart(e.target.value);
              if (phase !== "input") setPhase("input");
            }}
            disabled={phase === "loading"}
            error={isDuplicate}
          />
        </div>

        {isDuplicate && (
          <div className="help err">此週期已存在，請至列表檢視原有清倉折扣表。</div>
        )}

        {phase === "loading" && (
          <div className="cl-status">
            <div className="cl-spinner" />
            <span>系統正在撈取清倉商品資料，請稍候…</span>
          </div>
        )}

        {phase === "nodata" && (
          <div className="cl-error-block">
            <strong>無法產生菜單</strong>
            此週期目前沒有清倉折扣商品，請確認日期或聯絡系統管理員。
          </div>
        )}

        {phase === "input" && !isDuplicate && (
          <InfoNote>系統將自動撈取此週期內所有標記為清倉的商品品項。</InfoNote>
        )}
      </div>
    </Dialog>
  );
};

Object.assign(window, { ClCreateDialog });