/* global React, PageHead, Button, Field, FormField, FormSectionDivider, PortalSelect, Textarea,
   NumInput, CellEditor, DeleteRowBtn, useToast, ImportBanner, runImportProgress, SectionCard,
   PRODUCT_MASTER, MAIN_CATS, CATEGORY_TREE */

const { useState, useMemo, useRef } = React;

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

const EMPTY_MERCH_GROUP = {
  id: "",
  name: "",
  campaignStart: "",
  campaignEnd: "",
  menu: "",
  category: "",
  externalId: "",
  description: "",
  purchaseLimit: "無限制",
  imageUrl: "",
  price: "",
  tax: "",
  applicant: "NEILSON",
  status: "coDraft",
  updatedAt: "",
  createdAt: "",
  rows: [],
};

const MG_TYPE_OPTS = [
  { value: "Parent", label: "Parent" },
  { value: "Child", label: "Child" },
  { value: "Item", label: "Item" },
];

const PURCHASE_LIMIT_OPTS = [
  { value: "無限制", label: "無限制" },
  { value: "1", label: "1" },
  { value: "2", label: "2" },
  { value: "3", label: "3" },
  { value: "5", label: "5" },
  { value: "10", label: "10" },
];

const MG_SKU_COLS = [
  { key: "mgType", label: "類型", w: 80 },
  { key: "mgParent", label: "MG_Parent", w: 100 },
  { key: "mgItem", label: "MG項目", w: 90 },
  { key: "barcode", label: "品號", w: 150, mono: true },
  { key: "name", label: "品名", w: 180 },
  { key: "mgContentQty", label: "MG內容數", w: 90 },
  { key: "ruleLv1", label: "第一層規則數", w: 110 },
  { key: "comboLv2", label: "第二層組合參數", w: 120 },
  { key: "mgBlockTotal", label: "MG區塊總含金額", w: 120, money: true },
  { key: "mgBuilderAmt", label: "MG組建者金額", w: 110, money: true },
  { key: "note", label: "備註", w: 100 },
  { key: "_action", label: "移除", w: 56, action: true },
];

const MG_TYPE_FIELD = { type: "select", options: MG_TYPE_OPTS };
const MG_BARCODE_FIELD = { type: "str", mono: true };
const MG_MONEY_FIELD = { type: "num", unit: "NT$" };
const MG_STR_FIELD = { type: "str" };

const mgFieldForCol = (col) => {
  if (col.key === "mgType") return MG_TYPE_FIELD;
  if (col.key === "barcode") return MG_BARCODE_FIELD;
  if (col.money) return MG_MONEY_FIELD;
  return MG_STR_FIELD;
};

const autoFillSku = (barcode) => {
  const master = PRODUCT_MASTER.find(p => p.barcode === barcode);
  if (!master) return null;
  return { barcode, name: master.name };
};

const newMgRow = () => ({
  uid: mgUid(),
  mgType: "Item",
  mgParent: "",
  mgItem: "",
  barcode: "",
  name: "",
  mgContentQty: "",
  ruleLv1: "",
  comboLv2: "",
  mgBlockTotal: null,
  mgBuilderAmt: null,
  note: "",
});

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 MerchGroupDetail = ({ group: groupProp, isNew, sectionLabel, titleLabel, onBack, onSave, onDirtyChange }) => {
  const [group, setGroup] = useState(() => groupProp || { ...EMPTY_MERCH_GROUP, rows: [newMgRow()] });
  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 categoryOpts = useMemo(() => {
    if (!group.menu || !CATEGORY_TREE[group.menu]) return [];
    return CATEGORY_TREE[group.menu].map(c => ({ value: c, label: c }));
  }, [group.menu]);

  const menuOpts = useMemo(() => MAIN_CATS.map(m => ({ value: m, label: m })), []);

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

  const patch = (key, value) => {
    if (key === "menu") {
      markDirty({ ...group, menu: value, category: "" });
      return;
    }
    markDirty({ ...group, [key]: value });
  };

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

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

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

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

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

  const handleSaveDraft = () => {
    if (!validate()) return;
    const saved = {
      ...group,
      updatedAt: stampNow(),
      createdAt: group.createdAt || stampNow().slice(0, 10),
      status: "coDraft",
      itemCount: group.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 = {
      ...group,
      updatedAt: stampNow(),
      createdAt: group.createdAt || stampNow().slice(0, 10),
      status: "coUnderReview",
      itemCount: group.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, 3).map((p, i) => ({
      uid: mgUid(),
      mgType: i === 0 ? "Parent" : "Item",
      mgParent: i === 0 ? "MG-001" : "MG-001",
      mgItem: `項目${i + 1}`,
      barcode: p.barcode,
      name: p.name,
      mgContentQty: String(i + 1),
      ruleLv1: "1",
      comboLv2: "",
      mgBlockTotal: p.suggestPrice || null,
      mgBuilderAmt: p.cost || null,
      note: "",
    }));
    setImportTotal(samples.length);
    setImportDone(0);
    setImportPhase("parsing");
    runImportProgress(samples.length, setImportDone, () => {
      markDirty({ ...group, rows: [...group.rows.filter(r => r.barcode), ...samples] });
      setImportPhase("ok");
      setTimeout(() => setImportPhase(null), 1200);
      toast({ kind: "success", msg: `已匯入 ${samples.length} 筆 MG 明細` });
    });
  };

  const cardSummary = [
    group.name || "（未命名檔期）",
    group.menu && group.category ? `${group.menu} / ${group.category}` : null,
    group.campaignStart && group.campaignEnd ? `${group.campaignStart} – ${group.campaignEnd}` : null,
    `${group.rows.length} 筆 MG 明細`,
  ].filter(Boolean).join(" · ");

  const renderMgCell = (col, row) => {
    if (col.action) {
      return (
        <td key={col.key} className="center">
          <DeleteRowBtn onClick={() => deleteRow(row.uid)} />
        </td>
      );
    }
    if (col.key === "name") {
      return <td key={col.key}>{row.name || "—"}</td>;
    }
    return (
      <td key={col.key}>
        <CellEditor
          alwaysOn
          field={mgFieldForCol(col)}
          value={row[col.key] ?? ""}
          row={row}
          placeholder={col.key === "barcode" ? "輸入品號…" : "—"}
          onCommit={val => patchRow(row.uid, col.key, val)}
        />
      </td>
    );
  };

  return (
    <>
      <PageHead
        crumbs={[
          { label: sectionLabel },
          { label: titleLabel, onClick: onBack },
          { label: isNew ? "新增" : (group.name || "編輯"), current: true },
        ]}
        title={isNew ? "新增商品組合" : (group.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="Campaign 設定" first />
          <FormField label="Campaign 開始日" required error={showErrors ? formErrors.campaignStart : null}>
            <Field type="date" value={group.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={group.campaignEnd}
              error={showErrors && !!formErrors.campaignEnd}
              onChange={e => patch("campaignEnd", e.target.value)} />
          </FormField>
          <FormField label="Menu">
            <PortalSelect value={group.menu} options={menuOpts} placeholder="選擇 Menu"
              onChange={val => patch("menu", val)} triggerClassName="field-trigger" />
          </FormField>
          <FormField label="Category">
            <PortalSelect value={group.category} options={categoryOpts} placeholder="選擇 Category"
              disabled={!group.menu}
              onChange={val => patch("category", val)} triggerClassName="field-trigger" />
          </FormField>
          <FormField label="External ID (Dummy)">
            <Field value={group.externalId} placeholder="外部識別碼"
              onChange={e => patch("externalId", e.target.value)} />
          </FormField>
          <FormField label="優惠名稱" required error={showErrors ? formErrors.name : null}>
            <Field value={group.name} placeholder="組合優惠名稱"
              error={showErrors && !!formErrors.name}
              onChange={e => patch("name", e.target.value)} />
          </FormField>
          <FormField label="Description" required error={showErrors ? formErrors.description : null}
            style={{ gridColumn: "1 / -1" }}>
            <Textarea value={group.description} rows={2} placeholder="組合說明文字"
              onChange={e => patch("description", e.target.value)} />
          </FormField>
          <FormField label="單筆限購">
            <PortalSelect value={group.purchaseLimit} options={PURCHASE_LIMIT_OPTS}
              onChange={val => patch("purchaseLimit", val)} triggerClassName="field-trigger" />
          </FormField>
          <FormField label="ImageURL">
            <Field value={group.imageUrl} placeholder="https://…"
              onChange={e => patch("imageUrl", e.target.value)} />
          </FormField>
          <FormField label="Price">
            <NumInput value={group.price} unit="NT$" placeholder="0"
              onChange={e => patch("price", e.target.value)} />
          </FormField>
          <FormField label="Tax">
            <NumInput value={group.tax} placeholder="0"
              onChange={e => patch("tax", 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)" }}>MG Parent 明細</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>
          <Button variant="default" size="sm" icon="plus" onClick={addRow}>新增</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>
                {MG_SKU_COLS.map(c => (
                  <th key={c.key} style={{ width: c.w }} className={c.action ? "center" : undefined}>{c.label}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {group.rows.map((row, idx) => (
                <tr key={row.uid}>
                  <td className="mono" style={{ color: "var(--fg-3)" }}>{idx + 1}</td>
                  {MG_SKU_COLS.map(col => renderMgCell(col, row))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <button type="button" className="tbl-add-row" onClick={addRow}>+ 新增一列</button>
      </div>
    </>
  );
};

Object.assign(window, { MerchGroupDetail, EMPTY_MERCH_GROUP });