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

const { useState, useMemo, useRef } = React;

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

const EMPTY_COLLECTION_PAGE = {
  id: "",
  name: "",
  campaignStart: "",
  campaignEnd: "",
  showInStore: "是",
  applicant: "NEILSON",
  status: "coDraft",
  updatedAt: "",
  createdAt: "",
  rows: [],
};

const CP_SKU_COLS = [
  { key: "buyer", label: "採購", w: 90 },
  { key: "barcode", label: "品號", w: 160, mono: true },
  { key: "name", label: "品名", w: 220 },
  { key: "pinned", label: "品項是否置頂？", w: 120 },
  { key: "_action", label: "刪除", w: 56, action: true },
];

const CP_BUYER_FIELD = {
  type: "select",
  options: PURCHASERS.map(p => ({ value: p, label: p })),
};
const CP_BARCODE_FIELD = { type: "str", mono: true };
const CP_PINNED_FIELD = {
  type: "select",
  options: [{ value: "是", label: "是" }, { value: "否", label: "否" }],
};

const SHOW_IN_STORE_OPTS = [
  { value: "是", label: "是" },
  { value: "否", label: "否" },
];

const autoFillSku = (barcode) => {
  const master = PRODUCT_MASTER.find(p => p.barcode === barcode);
  if (!master) return null;
  return {
    barcode,
    name: master.name,
    buyer: PURCHASERS[0] || "NEILSON",
    pinned: false,
  };
};

const newSkuRow = () => ({
  uid: cpUid(),
  buyer: PURCHASERS[0] || "NEILSON",
  barcode: "",
  name: "",
  pinned: false,
});

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 CollectionPageDetail = ({ page: pageProp, isNew, sectionLabel, titleLabel, onBack, onSave, onDirtyChange }) => {
  const [page, setPage] = useState(() => pageProp || { ...EMPTY_COLLECTION_PAGE, 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);
    setPage(next);
  };

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

  const patchRow = (uid, key, value) => {
    const rows = page.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({ ...page, rows });
  };

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

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

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

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

  const handleSaveDraft = () => {
    if (!validate()) return;
    const saved = {
      ...page,
      updatedAt: stampNow(),
      createdAt: page.createdAt || stampNow().slice(0, 10),
      status: "coDraft",
      itemCount: page.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 = {
      ...page,
      updatedAt: stampNow(),
      createdAt: page.createdAt || stampNow().slice(0, 10),
      status: "coUnderReview",
      itemCount: page.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: cpUid(),
      buyer: PURCHASERS[i % PURCHASERS.length] || "NEILSON",
      barcode: p.barcode,
      name: p.name,
      pinned: i === 0,
    }));
    setImportTotal(samples.length);
    setImportDone(0);
    setImportPhase("parsing");
    runImportProgress(samples.length, setImportDone, () => {
      markDirty({ ...page, rows: [...page.rows.filter(r => r.barcode), ...samples] });
      setImportPhase("ok");
      setTimeout(() => setImportPhase(null), 1200);
      toast({ kind: "success", msg: `已匯入 ${samples.length} 筆品項` });
    });
  };

  const cardSummary = [
    page.name || "（未命名檔期）",
    page.campaignStart && page.campaignEnd ? `${page.campaignStart} – ${page.campaignEnd}` : null,
    `顯示於店內：${page.showInStore || "—"}`,
    `${page.rows.length} 筆品項`,
  ].filter(Boolean).join(" · ");

  return (
    <>
      <PageHead
        crumbs={[
          { label: sectionLabel },
          { label: titleLabel, onClick: onBack },
          { label: isNew ? "新增" : (page.name || "編輯"), current: true },
        ]}
        title={isNew ? "新增專案頁" : (page.name || "編輯專案頁")}
        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="基本資料" first />
          <FormField label="檔期名稱" required error={showErrors ? formErrors.name : null}>
            <Field value={page.name} placeholder="例：618 飲料專區頁"
              error={showErrors && !!formErrors.name}
              onChange={e => patch("name", e.target.value)} />
          </FormField>
          <FormField label="活動開始日" required error={showErrors ? formErrors.campaignStart : null}>
            <Field type="date" value={page.campaignStart}
              error={showErrors && !!formErrors.campaignStart}
              onChange={e => patch("campaignStart", e.target.value)} />
          </FormField>
          <FormField label="活動結束日" required error={showErrors ? formErrors.campaignEnd : null}>
            <Field type="date" value={page.campaignEnd}
              error={showErrors && !!formErrors.campaignEnd}
              onChange={e => patch("campaignEnd", e.target.value)} />
          </FormField>
          <FormField label="此檔期是否顯示在店內？">
            <PortalSelect
              value={page.showInStore}
              options={SHOW_IN_STORE_OPTS}
              onChange={val => patch("showInStore", val)}
              triggerClassName="field-trigger"
            />
          </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)" }}>品項明細</span>
          <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>
                {CP_SKU_COLS.map(c => (
                  <th key={c.key} style={{ width: c.w }} className={c.action ? "center" : undefined}>{c.label}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {page.rows.map((row, idx) => (
                <tr key={row.uid}>
                  <td className="mono" style={{ color: "var(--fg-3)" }}>{idx + 1}</td>
                  {CP_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={CP_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={CP_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.key === "pinned") {
                      return (
                        <td key={col.key} className="center">
                          <CellEditor alwaysOn field={CP_PINNED_FIELD}
                            value={row.pinned ? "是" : "否"} row={row}
                            onCommit={val => patchRow(row.uid, "pinned", 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, { CollectionPageDetail, EMPTY_COLLECTION_PAGE });