/* global React, PageHead, Button, Field, FormField, SectionCard, FormSectionDivider,
   CellEditor, DeleteRowBtn, useToast, ImportBanner, runImportProgress, PRODUCT_MASTER, PURCHASERS */

const { useState, useMemo, useRef } = React;

const tsUid = () => "ts-r" + Math.random().toString(36).slice(2, 9);

const EMPTY_TIMESLOT = {
  id: "",
  campaignStart: "",
  campaignEnd: "",
  effectiveSlot: "22:00–23:08",
  scheduleName: "",
  applicant: "NEILSON",
  status: "coDraft",
  updatedAt: "",
  createdAt: "",
  rows: [],
};

const TS_SKU_COLS = [
  { key: "buyer", label: "採購", w: 90 },
  { key: "barcode", label: "品號", w: 160, mono: true },
  { key: "name", label: "品名", w: 220 },
  { key: "suggestPrice", label: "常態售價", w: 100, money: true, readonly: true },
  { key: "promoPrice", label: "促銷售價", w: 100, money: true },
  { key: "promoKind", label: "促銷種類", w: 100 },
  { key: "_action", label: "刪除", w: 56, action: true },
];

const TS_BUYER_FIELD = {
  type: "select",
  options: PURCHASERS.map(p => ({ value: p, label: p })),
};
const TS_BARCODE_FIELD = { type: "str", mono: true };
const TS_PROMO_PRICE_FIELD = { type: "num", unit: "NT$" };
const TS_PROMO_KIND_FIELD = { type: "str" };

const fmtMoney = (v) => (v != null && v !== "" && +v > 0)
  ? `NT$${Number(v).toLocaleString("zh-TW")}`
  : "—";

const autoFillSku = (barcode) => {
  const master = PRODUCT_MASTER.find(p => p.barcode === barcode);
  if (!master) return null;
  return {
    barcode,
    name: master.name,
    suggestPrice: master.suggestPrice ?? null,
    promoPrice: master.suggestPrice ? Math.round(master.suggestPrice * 0.9) : null,
    promoKind: "限時價",
    buyer: PURCHASERS[0] || "NEILSON",
  };
};

const newSkuRow = () => ({
  uid: tsUid(),
  buyer: PURCHASERS[0] || "NEILSON",
  barcode: "",
  name: "",
  suggestPrice: null,
  promoPrice: null,
  promoKind: "",
});

const stampNow = () => {
  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 TimeslotDetail = ({ campaign: campaignProp, isNew, sectionLabel, titleLabel, onBack, onSave, onDirtyChange }) => {
  const [campaign, setCampaign] = useState(() => campaignProp || { ...EMPTY_TIMESLOT, rows: [newSkuRow()] });
  const [dirty, setDirty] = useState(false);
  const [showErrors, setShowErrors] = useState(false);
  const [importPhase, setImportPhase] = useState(null);
  const [importDone, setImportDone] = useState(0);
  const [importTotal, setImportTotal] = useState(0);
  const fileInputRef = useRef(null);
  const { push: toast } = useToast();

  const markDirty = (next) => {
    setDirty(true);
    onDirtyChange?.(true);
    setCampaign(next);
  };

  const patch = (key, value) => markDirty({ ...campaign, [key]: value });

  const patchRow = (uid, key, value) => {
    const rows = campaign.rows.map(r => {
      if (r.uid !== uid) return r;
      if (key === "barcode") {
        const filled = autoFillSku(value);
        return filled ? { ...r, ...filled } : { ...r, barcode: value };
      }
      return { ...r, [key]: value };
    });
    markDirty({ ...campaign, rows });
  };

  const addRow = () => markDirty({ ...campaign, rows: [...campaign.rows, newSkuRow()] });
  const deleteRow = (uid) => markDirty({ ...campaign, rows: campaign.rows.filter(r => r.uid !== uid) });

  const formErrors = useMemo(() => ({
    campaignStart: !campaign.campaignStart?.trim() ? "必填" : null,
    campaignEnd: !campaign.campaignEnd?.trim() ? "必填" : null,
    effectiveSlot: !campaign.effectiveSlot?.trim() ? "必填" : null,
    scheduleName: !campaign.scheduleName?.trim() ? "必填" : null,
  }), [campaign]);

  const hasFormErrors = Object.values(formErrors).some(Boolean);

  const validate = () => {
    setShowErrors(true);
    if (hasFormErrors) return false;
    if (!campaign.rows.length || campaign.rows.some(r => !r.barcode?.trim())) {
      toast({ kind: "warning", msg: "請至少新增一筆有效品項（品號必填）" });
      return false;
    }
    return true;
  };

  const handleSaveDraft = () => {
    if (!validate()) return;
    const saved = {
      ...campaign,
      updatedAt: stampNow(),
      createdAt: campaign.createdAt || stampNow().slice(0, 10),
      status: "coDraft",
      itemCount: campaign.rows.filter(r => r.barcode?.trim()).length,
    };
    onSave(saved, isNew);
    setDirty(false);
    onDirtyChange?.(false);
    toast({ kind: "success", msg: "草稿已儲存" });
  };

  const handleSend = () => {
    if (!validate()) return;
    const saved = {
      ...campaign,
      updatedAt: stampNow(),
      createdAt: campaign.createdAt || stampNow().slice(0, 10),
      status: "coUnderReview",
      itemCount: campaign.rows.filter(r => r.barcode?.trim()).length,
    };
    onSave(saved, isNew);
    setDirty(false);
    onDirtyChange?.(false);
    toast({ kind: "success", msg: "已送出時段特殊價格表" });
    onBack();
  };

  const runFakeImport = () => {
    const samples = PRODUCT_MASTER.slice(0, 4).map((p, i) => ({
      uid: tsUid(),
      buyer: PURCHASERS[i % PURCHASERS.length] || "NEILSON",
      barcode: p.barcode,
      name: p.name,
      suggestPrice: p.suggestPrice,
      promoPrice: p.suggestPrice ? Math.round(p.suggestPrice * 0.88) : null,
      promoKind: "限時價",
    }));
    setImportTotal(samples.length);
    setImportDone(0);
    setImportPhase("parsing");
    runImportProgress(samples.length, setImportDone, () => {
      markDirty({ ...campaign, rows: [...campaign.rows.filter(r => r.barcode), ...samples] });
      setImportPhase("ok");
      setTimeout(() => setImportPhase(null), 1200);
      toast({ kind: "success", msg: `已匯入 ${samples.length} 筆品項` });
    });
  };

  const cardSummary = [
    campaign.scheduleName || "（未命名檔期）",
    campaign.campaignStart && campaign.campaignEnd ? `${campaign.campaignStart} – ${campaign.campaignEnd}` : null,
    campaign.effectiveSlot,
    `${campaign.rows.length} 筆品項`,
  ].filter(Boolean).join(" · ");

  return (
    <>
      <PageHead
        crumbs={[
          { label: sectionLabel },
          { label: titleLabel, onClick: onBack },
          { label: isNew ? "新增" : (campaign.scheduleName || "編輯"), current: true },
        ]}
        title={isNew ? "新增時段特殊價格" : (campaign.scheduleName || "編輯時段特殊價格")}
        dirty={dirty}
        actions={(
          <>
            <Button variant="default" onClick={onBack}>取消</Button>
            <Button variant="default" onClick={handleSaveDraft}>儲存草稿</Button>
            <Button variant="primary" onClick={handleSend}>送出</Button>
          </>
        )}
      />

      {importPhase && (
        <ImportBanner
          phase={importPhase}
          parsingTitle="匯入處理中…"
          total={importTotal}
          done={importDone}
          okTitle={`已匯入 ${importTotal} 筆`}
          okDesc=""
        />
      )}

      <SectionCard title="檔期資訊" summary={cardSummary} defaultOpen>
        <div className="form-grid">
          <FormSectionDivider badge="A" label="Campaign 設定" first />
          <FormField label="Campaign 開始日期" required error={showErrors ? formErrors.campaignStart : null}>
            <Field type="date" value={campaign.campaignStart} error={showErrors && !!formErrors.campaignStart}
              onChange={e => patch("campaignStart", e.target.value)} />
          </FormField>
          <FormField label="Campaign 結束日期" required error={showErrors ? formErrors.campaignEnd : null}>
            <Field type="date" value={campaign.campaignEnd} error={showErrors && !!formErrors.campaignEnd}
              onChange={e => patch("campaignEnd", e.target.value)} />
          </FormField>
          <FormField label="Campaign 生效時段" required error={showErrors ? formErrors.effectiveSlot : null}>
            <Field value={campaign.effectiveSlot} placeholder="22:00–23:08" error={showErrors && !!formErrors.effectiveSlot}
              onChange={e => patch("effectiveSlot", e.target.value)} />
          </FormField>
          <FormField label="檔期名稱" required error={showErrors ? formErrors.scheduleName : null}>
            <Field value={campaign.scheduleName} placeholder="例：晚間限時優惠" error={showErrors && !!formErrors.scheduleName}
              onChange={e => patch("scheduleName", e.target.value)} />
          </FormField>
        </div>
      </SectionCard>

      <div className="card" style={{ marginTop: 16 }}>
        <div className="sku-toolbar" style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 12px" }}>
          <span style={{ fontWeight: "var(--fw-medium)" }}>SKU 明細</span>
          <Button variant="default" size="sm" icon="plus" onClick={addRow}>新增 SKU</Button>
          <Button variant="default" size="sm" icon="download" onClick={() => toast({ kind: "success", msg: "已下載匯入格式（原型模擬）" })}>
            匯入格式下載
          </Button>
          <Button variant="default" size="sm" icon="upload" onClick={() => fileInputRef.current?.click()}>匯入</Button>
          <input ref={fileInputRef} type="file" accept=".xlsx,.xls,.csv" style={{ display: "none" }}
            onChange={() => { if (fileInputRef.current) fileInputRef.current.value = ""; runFakeImport(); }} />
        </div>
        <div className="tbl-wrap">
          <table className="tbl" style={{ tableLayout: "auto" }}>
            <thead>
              <tr>
                <th style={{ width: 40 }}>#</th>
                {TS_SKU_COLS.map(c => (
                  <th key={c.key} style={{ width: c.w }} className={c.action ? "center" : undefined}>{c.label}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {campaign.rows.map((row, idx) => (
                <tr key={row.uid}>
                  <td className="mono" style={{ color: "var(--fg-3)" }}>{idx + 1}</td>
                  {TS_SKU_COLS.map(col => {
                    if (col.action) {
                      return (
                        <td key={col.key} className="center">
                          <DeleteRowBtn onClick={() => deleteRow(row.uid)} />
                        </td>
                      );
                    }
                    if (col.key === "buyer") {
                      return (
                        <td key={col.key}>
                          <CellEditor alwaysOn field={TS_BUYER_FIELD} value={row.buyer} row={row}
                            onCommit={val => patchRow(row.uid, "buyer", val)} />
                        </td>
                      );
                    }
                    if (col.key === "barcode") {
                      return (
                        <td key={col.key}>
                          <CellEditor alwaysOn field={TS_BARCODE_FIELD} value={row.barcode} row={row}
                            placeholder="輸入品號…"
                            onCommit={val => patchRow(row.uid, "barcode", val)} />
                        </td>
                      );
                    }
                    if (col.key === "name") {
                      return <td key={col.key}>{row.name || "—"}</td>;
                    }
                    if (col.readonly) {
                      return <td key={col.key} className="mono">{fmtMoney(row[col.key])}</td>;
                    }
                    if (col.key === "promoPrice") {
                      return (
                        <td key={col.key}>
                          <CellEditor alwaysOn field={TS_PROMO_PRICE_FIELD} value={row.promoPrice} row={row}
                            onCommit={val => patchRow(row.uid, "promoPrice", val)} />
                        </td>
                      );
                    }
                    if (col.key === "promoKind") {
                      return (
                        <td key={col.key}>
                          <CellEditor alwaysOn field={TS_PROMO_KIND_FIELD} value={row.promoKind || ""} row={row}
                            placeholder="限時價"
                            onCommit={val => patchRow(row.uid, "promoKind", val)} />
                        </td>
                      );
                    }
                    return <td key={col.key}>—</td>;
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <button type="button" className="tbl-add-row" onClick={addRow}>+ 新增一列</button>
      </div>
    </>
  );
};

Object.assign(window, { TimeslotDetail, EMPTY_TIMESLOT });