/* global React, Icon, Button, PageHead, Pager, ModeToggle, SkuToolbar, EmptyState, PAGE_SIZES, useSortableTable, useToast */
// 菜單預覽 L2 — 品項列表（唯讀）

const { useState, useMemo } = React;

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

const MP_GROUP_LABELS = {
  A: "商品識別", B: "菜單分類", C: "商品基本資訊", D: "售價與促銷",
  E: "商品屬性", F: "銷售期間", G: "規格與包裝", H: "進價與毛利",
  I: "廠商", J: "庫存", K: "法規", L: "圖片", M: "其他",
};

// 精選欄位（16 欄）
const MP_COMPACT_COLS = [
  mc("#",           "#",          48,  "A", { stickyNum: true }),
  mc("ean",         "條碼（EAN）", 150, "A", { mono: true, sticky2nd: true }),
  mc("title",       "商品名稱",    220, "C"),
  mc("brand",       "品牌",        110, "C"),
  mc("menu",        "菜單一級分類",160, "B"),
  mc("category",    "菜單二級分類",160, "B"),
  mc("price",       "售價",         80, "D", { num: true, nt: true }),
  mc("promoPrice",  "促銷價",       80, "D", { num: true, nt: true }),
  mc("promoType",   "促銷類型",    120, "D"),
  mc("regularPrice","常態售價",     90, "D", { num: true, nt: true }),
  mc("grade",       "品項分級",     80, "E"),
  mc("tempLayer",   "溫層",         70, "E"),
  mc("saleRegion",  "銷售地區",     90, "E"),
  mc("saleStatus",  "商品狀態",     90, "E"),
  mc("totalStock",  "各店總庫存",   90, "J", { num: true }),
  mc("imageUrl",    "圖片",         70, "L"),
];

// 全欄位（90 欄）
const MP_FULL_COLS = [
  // A 商品識別
  mc("#",              "#",                   48,  "A", { stickyNum: true }),
  mc("ean",            "條碼（EAN）",         150, "A", { mono: true, sticky2nd: true }),
  mc("externalId",     "External ID",         150, "A", { mono: true }),
  mc("unCode",         "UN 碼",               130, "A", { mono: true }),
  mc("casCode",        "CAS 碼",              120, "A", { mono: true }),
  // B 菜單分類
  mc("menu",           "菜單一級分類",        160, "B"),
  mc("category",       "菜單二級分類",        180, "B"),
  mc("isMainCategory", "主分類",               80, "B"),
  mc("isMainCategoryOri", "主分類（原始）",    90, "B"),
  // C 商品基本資訊
  mc("itemName",       "商品名稱（系統）",    220, "C"),
  mc("title",          "商品名稱（顯示）",    220, "C"),
  mc("description",    "商品說明",            260, "C"),
  mc("generalDesc",    "一般敘述",            200, "C"),
  mc("brand",          "品牌",                110, "C"),
  mc("series",         "系列",                110, "C"),
  mc("origin",         "產地",                 90, "C"),
  mc("originFull",     "商品產地",            120, "C"),
  // D 售價與促銷
  mc("listPrice",      "牌價",                 80, "D", { num: true, nt: true }),
  mc("regularPrice",   "常態售價",             90, "D", { num: true, nt: true }),
  mc("price",          "售價",                 80, "D", { num: true, nt: true }),
  mc("promoPrice",     "促銷價",               80, "D", { num: true, nt: true }),
  mc("u1PromoPrice",   "Uber One 促銷價",     110, "D", { num: true, nt: true }),
  mc("salesPrice",     "組合銷售價",           90, "D", { num: true, nt: true }),
  mc("promoType",      "促銷類型",            130, "D"),
  mc("purchaseQty",    "組合購買數量",         90, "D", { num: true }),
  // E 商品屬性
  mc("grade",          "品項分級",             80, "E"),
  mc("tempLayer",      "溫層",                 70, "E"),
  mc("saleRegion",     "銷售地區",            100, "E"),
  mc("saleStatus",     "商品狀態",             90, "E"),
  mc("taxType",        "應稅未稅",             80, "E"),
  mc("vat",            "VAT",                  60, "E", { num: true }),
  mc("vegetarian",     "素食別",               80, "E"),
  mc("meatOrigin",     "肉類來源",            110, "E"),
  mc("attributeTag",   "Attribute Tag",        120, "E"),
  mc("moq",            "最低訂購量",           80, "E", { num: true }),
  // F 銷售期間
  mc("saleStart",      "啟售日",              110, "F", { mono: true }),
  mc("saleEnd",        "停售日",              110, "F", { mono: true }),
  mc("exitDate",       "成功退場日",          110, "F", { mono: true }),
  // G 規格與包裝
  mc("dimL",           "長（cm）",             70, "G", { num: true }),
  mc("dimW",           "寬（cm）",             70, "G", { num: true }),
  mc("dimH",           "高（cm）",             70, "G", { num: true }),
  mc("weight",         "重量毛重",             90, "G"),
  mc("unit",           "單位",                 60, "G"),
  mc("specNum",        "規格數字",             80, "G"),
  mc("specUnit",       "規格單位",             80, "G"),
  mc("saleQty",        "銷售入數",             80, "G", { num: true }),
  mc("packQty",        "單包入數",             80, "G", { num: true }),
  mc("expiry",         "效期（天）",           80, "G", { num: true }),
  mc("clearanceDays",  "出清天數",             80, "G", { num: true }),
  // H 進價與毛利
  mc("regularCost",    "常態進價",             90, "H", { num: true, nt: true }),
  mc("costExTax",      "目前進價（未稅）",    110, "H", { num: true, nt: true }),
  mc("costIncTax",     "目前進價（含稅）",    110, "H", { num: true, nt: true }),
  mc("margin",         "毛利率",               80, "H", { num: true }),
  // I 廠商
  mc("supplierNo",     "廠商代號",            100, "I", { mono: true }),
  mc("supplierName",   "廠商",               160, "I"),
  // J 庫存
  mc("totalStock",     "各店總庫存",           90, "J", { num: true }),
  mc("stock_zhongshan","中山店",               70, "J", { num: true }),
  mc("stock_zhonghe",  "中和店",               70, "J", { num: true }),
  mc("stock_neihu",    "內湖店",               70, "J", { num: true }),
  mc("stock_sanchong", "三重店",               70, "J", { num: true }),
  mc("stock_xindian",  "新店店",               70, "J", { num: true }),
  mc("stock_daan",     "大安店",               70, "J", { num: true }),
  mc("stock_beitou",   "北投店",               70, "J", { num: true }),
  mc("stock_shulin",   "樹林店",               70, "J", { num: true }),
  mc("stock_jingwu",   "精武店",               70, "J", { num: true }),
  mc("stock_taoyuan",  "桃園店",               70, "J", { num: true }),
  mc("stock_nantun",   "南屯店",               70, "J", { num: true }),
  mc("stock_hsinchu",  "新竹店",               70, "J", { num: true }),
  // K 法規
  mc("foodBizNo",      "食品業者登錄字號",    160, "K"),
  mc("productLiabIns", "產品責任險",          160, "K"),
  mc("medDeviceNo",    "醫材許可證字號",      160, "K"),
  mc("medDeviceOwner", "許可證所有人",        200, "K"),
  mc("manufacturer",   "製造業者名稱及地址",  200, "K"),
  // L 圖片
  mc("imageUrl",       "圖片（主圖）",         80, "L"),
  mc("imageGeneral",   "一般圖檔",            140, "L"),
  mc("imageBackup",    "一般圖檔（備份）",    140, "L"),
  mc("imageBadge",     "角標圖檔",            130, "L"),
  mc("imagePromo",     "活動圖檔",            130, "L"),
  mc("imageScene1",    "情境圖 1",            120, "L"),
  mc("imageScene2",    "情境圖 2",            120, "L"),
  mc("imageScene3",    "情境圖 3",            120, "L"),
  mc("imageScene4",    "情境圖 4",            120, "L"),
  mc("imageCalorie",   "包裝熱量照",          130, "L"),
  mc("imageSource",    "圖檔來源",            140, "L"),
  // M 其他
  mc("buyer",          "採購",                90, "M"),
  mc("returnDays",     "可退換天數",           90, "M"),
  mc("deliveryMethod", "商品配貨方式",        110, "M"),
  mc("expiryDisplay",  "效期呈現方式",        110, "M"),
  mc("zone",           "專區",                60, "M", { num: true }),
  mc("discountedQty",  "折扣數量",             80, "M", { num: true }),
];

// ── 計算欄位群組（兩種 mode 通用）────────────────────────────────────────────
const buildGroups = (cols) => {
  const groups = [];
  let cur = null;
  cols.forEach(c => {
    if (!cur || cur.group !== c.group) {
      cur = { group: c.group, span: 1 };
      groups.push(cur);
    } else {
      cur.span++;
    }
  });
  return groups;
};

// ── Sticky class helper（th 和 td 共用）─────────────────────────────────────
const mpThClass = (c) =>
  [c.stickyNum ? "stk-l-0 center" : "", c.sticky2nd ? "stk-l-48 stk-shadow" : "", c.num ? "num" : ""]
    .filter(Boolean).join(" ") || undefined;

// ── Cell render ───────────────────────────────────────────────────────────────
const renderMpCell = (item, c, rowIdx) => {
  if (c.key === "#") {
    return <span style={{ color: "var(--fg-3)", fontFamily: "var(--font-mono)", fontSize: "var(--fs-12)" }}>{rowIdx + 1}</span>;
  }
  const v = item[c.key];
  if (v === null || v === undefined || v === "") {
    return <span style={{ color: "var(--fg-4)" }}>—</span>;
  }
  // 圖片連結
  if (c.key === "imageUrl" || (c.group === "L" && typeof v === "string" && v.startsWith("http"))) {
    return (
      <a href={v} target="_blank" rel="noopener noreferrer"
        style={{ display: "inline-flex", alignItems: "center", gap: 4, color: "var(--brand-primary)", fontSize: "var(--fs-12)", textDecoration: "none" }}>
        <Icon name="image" size={12} /><span>圖片連結</span>
      </a>
    );
  }
  if (typeof v === "boolean") return <span>{v ? "✓" : "✕"}</span>;
  if (c.nt && typeof v === "number") {
    return <span style={{ fontFamily: "var(--font-mono)" }}>NT${v.toLocaleString()}</span>;
  }
  if (c.num && typeof v === "number") {
    if (c.key === "margin") return <span style={{ fontFamily: "var(--font-mono)" }}>{(v * 100).toFixed(1)}%</span>;
    return <span style={{ fontFamily: "var(--font-mono)" }}>{v.toLocaleString()}</span>;
  }
  if (c.mono) return <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--fs-12)" }}>{String(v)}</span>;
  return <span>{String(v)}</span>;
};

// ── MenuPreviewDetail ─────────────────────────────────────────────────────────
const MenuPreviewDetail = ({ preview, onBack }) => {
  const [tableMode, setTableMode] = useState("compact");
  const [page, setPage]   = useState(1);
  const [pageSize, setPageSize] = useState(PAGE_SIZES[0]);
  const { SortHead, applySortTo } = useSortableTable("ean", "asc");
  const toast = useToast();

  const items   = preview.items || [];
  const cols    = tableMode === "compact" ? MP_COMPACT_COLS : MP_FULL_COLS;
  const groups  = buildGroups(cols);
  const minWidth = cols.reduce((s, c) => s + c.w, 0);

  const sorted   = useMemo(() => applySortTo(items), [items, applySortTo]);
  const pageStart = (page - 1) * pageSize;
  const paged    = sorted.slice(pageStart, pageStart + pageSize);

  return (
    <>
      <PageHead
        crumbs={[
          { label: "菜單" },
          { label: "歷史菜單及預覽", onClick: onBack },
          { label: preview.name, current: true },
        ]}
        title={preview.name}
        actions={
          <Button variant="primary" icon="download" onClick={() => toast.push({ msg: `${preview.name} 已匯出` })}>
            匯出
          </Button>
        }
      />

      <div className="card sku-card">
        <SkuToolbar>
          <ModeToggle mode={tableMode} onChange={m => { setTableMode(m); setPage(1); }} />
          <span style={{ color: "var(--fg-2)", fontSize: "var(--fs-13)", whiteSpace: "nowrap", marginLeft: "auto" }}>
            共 <b style={{ color: "var(--fg-1)" }}>{items.length}</b> 筆
          </span>
        </SkuToolbar>

        <div className="tbl-wrap">
          <table className="tbl" style={{ minWidth }}>
            <thead>
              {/* 群組 header（兩種模式都顯示） */}
              <tr className="sku-tbl__thead-r1">
                {groups.map((g, i) => (
                  <th key={i} colSpan={g.span}
                    className={`sku-tbl__th-group th-${['a','b','c','d','e','f','g','h'][i % 8]}`}>
                    {MP_GROUP_LABELS[g.group] || g.group}
                  </th>
                ))}
              </tr>
              {/* 欄位 header */}
              <tr className="sku-tbl__thead-r2">
                {cols.map(c => (
                  <th key={c.key} style={{ width: c.w, minWidth: c.w }}
                    className={mpThClass(c)}>
                    {c.key === "#" ? "#" : <SortHead colKey={c.key} label={c.label} />}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {paged.length === 0 ? (
                <tr>
                  <td colSpan={cols.length}>
                    <EmptyState icon="box" title="此版本無品項資料" style={{ padding: "40px 0" }} />
                  </td>
                </tr>
              ) : (
                paged.map((item, ri) => (
                  <tr key={String(item.ean) + ri}>
                    {cols.map(c => (
                      <td key={c.key} className={mpThClass(c)} style={{ fontSize: "var(--fs-13)" }}>
                        {renderMpCell(item, c, pageStart + ri)}
                      </td>
                    ))}
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>

        <Pager
          total={items.length}
          page={page}
          pageSize={pageSize}
          onPageChange={setPage}
          onSizeChange={s => { setPageSize(s); setPage(1); }}
        />
      </div>
    </>
  );
};

Object.assign(window, { MenuPreviewDetail });