/* global React, Icon, Button, ModeToggle, MetaCard, useToast, ImportBanner, runImportProgress, PageHead, SkuToolbar */
// Oracle 匯出 L2 — 單批次明細（Johnny only，唯讀）
// 前綴 OD_ 避免與其他模組的 FULL_COLS / renderCell 等全域名稱衝突

const { useState } = React;

// ── Column definitions ────────────────────────────────────────────────────
const OD_col = (key, label, w, group, opts = {}) => ({ key, label, w, group, ...opts });

const OD_GROUP_LABELS = {
  A: "基本識別", B: "供應", C: "分類", D: "商務",
  E: "法規/合規", F: "配送", G: "規格", H: "商品資訊", I: "進貨資訊",
};

const OD_COMPACT_COLS = [
  OD_col("#",           "#",              48,  "A", { sticky: true }),
  OD_col("barcode",     "品號",           140, "A", { mono: true, sticky2nd: true }),
  OD_col("name",        "品名",           240, "A"),
  OD_col("supplierName","廠商名稱",        160, "B"),
  OD_col("mainCat",     "主類別",          110, "C"),
  OD_col("subCat",      "次類別",          110, "C"),
  OD_col("brand",       "品牌",            110, "C"),
  OD_col("listPrice",   "牌價",            100, "D", { num: true, nt: true }),
  OD_col("cost",        "進價（未稅）",    100, "D", { num: true, nt: true }),
  OD_col("taxRate",     "稅率",             80, "D"),
  OD_col("minOrder",    "最低訂購量",        90, "D", { num: true }),
  OD_col("deliv",       "配貨方式",          90, "F"),
  OD_col("temp",        "溫層",             80, "F"),
  OD_col("specSummary", "規格摘要",         160, "G"),
  OD_col("estSales",    "預估業績/月",      120, "I", { num: true, nt: true }),
  OD_col("origCost",    "原進價",           100, "I", { num: true, nt: true }),
  OD_col("promoCost",   "促進進價",         100, "I", { num: true, nt: true }),
  OD_col("promoStart",  "促進開始",         110, "I", { mono: true }),
  OD_col("promoEnd",    "促進結束",         110, "I", { mono: true }),
];

const OD_FULL_COLS = [
  OD_col("#",                "#",                     48,  "A", { sticky: true }),
  OD_col("barcode",          "品號",                  140, "A", { mono: true, sticky2nd: true }),
  OD_col("name",             "品名",                  240, "A"),
  OD_col("twCode",           "TW Code",               200, "A", { mono: true }),
  OD_col("supplierName",     "廠商名稱",               160, "B"),
  OD_col("supplierNo",       "廠商編號",               130, "B", { mono: true }),
  OD_col("secSupplierName",  "次要廠商名稱",            160, "B"),
  OD_col("secSupplierPartNo","次要廠商品號",            160, "B", { mono: true }),
  OD_col("mainCat",          "主類別",                 110, "C"),
  OD_col("subCat",           "次類別",                 110, "C"),
  OD_col("segment1",         "大分類(分析用)",          140, "C"),
  OD_col("segment2",         "次分類(分析用)",          140, "C"),
  OD_col("segment3",         "子分類(分析用)",          140, "C"),
  OD_col("brand",            "品牌",                   110, "C"),
  OD_col("listPrice",        "牌價",                   100, "D", { num: true, nt: true }),
  OD_col("cost",             "進價（未稅）",            100, "D", { num: true, nt: true }),
  OD_col("taxRate",          "稅率",                    80, "D"),
  OD_col("minOrder",         "最低訂購量",               90, "D", { num: true }),
  OD_col("shelfDays",        "保存期限（天）",           110, "E", { num: true }),
  OD_col("expType",          "效期類型",                130, "E"),
  OD_col("dangerousGoods",   "危險品",                  100, "E"),
  OD_col("supplierEccn",     "ECCN 分類",               110, "E", { mono: true }),
  OD_col("unNumber",         "UN 危品編號",              110, "E", { mono: true }),
  OD_col("msdsUrl",          "MSDS 連結",               180, "E"),
  OD_col("htsCode",          "HTS 關稅代碼",            130, "E", { mono: true }),
  OD_col("origin",           "產地",                    90, "E"),
  OD_col("imported",         "進口/台灣",                90, "E"),
  OD_col("deliv",            "配貨方式",                 90, "F"),
  OD_col("temp",             "溫層",                    80, "F"),
  OD_col("specNum",          "規格數字",                 90, "G", { num: true }),
  OD_col("specUnit",         "規格單位",                 90, "G"),
  OD_col("volumeUom",        "體積單位",                 90, "G"),
  OD_col("volume",           "體積",                    80, "G", { num: true }),
  OD_col("dimensionUom",     "尺寸單位",                 90, "G"),
  OD_col("weightUom",        "重量單位",                 90, "G"),
  OD_col("weightG",          "重量（g）",                80, "G", { num: true }),
  OD_col("heightCm",         "高 (cm)",                  80, "G", { num: true }),
  OD_col("widthCm",          "寬 (cm)",                  80, "G", { num: true }),
  OD_col("lengthCm",         "長 (cm)",                  80, "G", { num: true }),
  OD_col("unit",             "單位",                    70, "G"),
  OD_col("saleCount",        "銷售入數",                 90, "G", { num: true }),
  OD_col("boxCount",         "箱入數",                   80, "G", { num: true }),
  OD_col("cartonWeight",     "箱重",                    90, "G"),
  OD_col("specSheetUrl",     "規格表連結",               180, "H"),
  OD_col("manufacturer",     "製造商",                  150, "H"),
  OD_col("mfgPartNo",        "製造商品號",               150, "H", { mono: true }),
  OD_col("infoNote",         "商品資訊備註",             200, "H"),
  OD_col("estSales",         "預估業績/月",             120, "I", { num: true, nt: true }),
  OD_col("origCost",         "原進價",                  100, "I", { num: true, nt: true }),
  OD_col("promoCost",        "促進進價",                100, "I", { num: true, nt: true }),
  OD_col("promoStart",       "促進開始",                110, "I", { mono: true }),
  OD_col("promoEnd",         "促進結束",                110, "I", { mono: true }),
];

function OD_buildGroups(cols) {
  const groups = [];
  let i = 0;
  while (i < cols.length) {
    const g = cols[i].group;
    let j = i;
    while (j < cols.length && cols[j].group === g) j++;
    groups.push({ group: g, colSpan: j - i });
    i = j;
  }
  return groups;
}

const OD_renderCell = (sku, c, idx) => {
  if (c.key === "#") return <span style={{ color: "var(--fg-3)", fontSize: 12 }}>{idx + 1}</span>;
  if (c.key === "twCode") return <span className="mono" style={{ fontSize: 12 }}>{`Uber TW DG ${sku.barcode}`}</span>;
  const v = sku[c.key];
  if (v === "" || v == null) return <span className="cell-empty">—</span>;
  if (c.nt) return <span className="mono">{`NT$${Number(v).toLocaleString()}`}</span>;
  if (c.mono) return <span className="mono" style={{ fontSize: 12 }}>{v}</span>;
  return v;
};

// ── OracleDetail ──────────────────────────────────────────────────────────
const OracleDetail = ({ phase, onBack }) => {
  const [mode, setMode] = useState("compact");
  const [exportPhase, setExportPhase] = useState(null);
  const [exportDone,  setExportDone]  = useState(0);

  const cols = mode === "compact" ? OD_COMPACT_COLS : OD_FULL_COLS;

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

  return (
    <>
      <PageHead
        crumbs={[
          { label: "商品資料" },
          { label: "新商品 Oracle 表", onClick: onBack },
          { label: phase.batch, current: true },
        ]}
        title={phase.batch}
        actions={
          <Button variant="primary" icon="download" onClick={doExport} disabled={exportPhase === "parsing"}>
            {exportPhase === "parsing" ? "匯出中…" : "匯出 Oracle"}
          </Button>
        }
      />
      <ImportBanner
        phase={exportPhase}
        parsingTitle="匯出準備中…"
        total={phase.items.length}
        done={exportDone}
        okTitle="已匯出 Oracle CSV"
        okDesc=""
      />

      <MetaCard
        summary={`${phase.batch} · ${phase.items.length} 筆`}
        sectionTitle="批次資訊"
      >
        <div className="meta-card__row">
          <dt>建立日期</dt>
          <dd><span className="mono">{phase.created}</span></dd>
        </div>
        <div className="meta-card__row">
          <dt>更新時間</dt>
          <dd><span className="mono">{phase.updated}</span></dd>
        </div>
        <div className="meta-card__row">
          <dt>新商品所屬批次</dt>
          <dd><span className="mono">{phase.batch}</span></dd>
        </div>
        <div className="meta-card__row">
          <dt>新商品筆數</dt>
          <dd><b>{phase.items.length}</b> 筆</dd>
        </div>
      </MetaCard>

      <div className="card sku-card">
        <SkuToolbar>
          <ModeToggle mode={mode} onChange={setMode} />
          <span style={{ color: "var(--fg-2)", fontSize: 13, whiteSpace: "nowrap" }}>
            共 <b style={{ color: "var(--fg-1)" }}>{phase.items.length}</b> 筆
          </span>
        </SkuToolbar>

        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr className="sku-tbl__thead-r1">
                {OD_buildGroups(cols).map((g, i) => (
                  <th key={i} colSpan={g.colSpan}
                    className={`sku-tbl__th-group th-${['a','b','c','d','e','f','g','h'][i % 8]}`}>
                    {OD_GROUP_LABELS[g.group]}
                  </th>
                ))}
              </tr>
              <tr className="sku-tbl__thead-r2">
                {cols.map(c => (
                  <th
                    key={c.key}
                    style={{ width: c.w, minWidth: c.w }}
                    className={[
                      c.sticky    ? "stk-l-0 center"       : "",
                      c.sticky2nd ? "stk-l-48 stk-shadow"  : "",
                      c.num ? "num" : "",
                    ].filter(Boolean).join(" ")}
                  >
                    {c.label}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {phase.items.map((sku, idx) => (
                <tr key={sku.uid}>
                  {cols.map(c => (
                    <td
                      key={c.key}
                      className={[
                        c.sticky    ? "stk-l-0 center"       : "",
                        c.sticky2nd ? "stk-l-48 stk-shadow"  : "",
                        c.num ? "num" : "",
                      ].filter(Boolean).join(" ")}
                    >
                      {OD_renderCell(sku, c, idx)}
                    </td>
                  ))}
                </tr>
              ))}
              {phase.items.length === 0 && (
                <tr><td colSpan={cols.length}>
                  <div className="empty">
                    <div className="empty__icon"><Icon name="inbox" size={56} /></div>
                    <div className="empty__title">此批次無品項</div>
                  </div>
                </td></tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
};

Object.assign(window, { OracleDetail });