/* global React, Icon, Button, Field, Tag, ChipFilter, Pager, PageHead, FilterBar, ImportBanner, runImportProgress, IMG_SLOTS, IMG_SKUS, HoverPreview, UserChip, useSortableTable, RowActions */
// L1 — 圖片調整列表

const { useState, useMemo } = React;

// ── SlotPresenceFilter ─────────────────────────────────────────────────────
// slotFilters: { [slotKey]: "any" | "has" | "none" }
const SlotPresenceFilter = ({ value, onChange }) => {
  const [open, setOpen] = useState(false);

  const activeCount = useMemo(
    () => Object.values(value).filter(v => v !== "any").length,
    [value]
  );

  const chipValue = useMemo(() => {
    const active = IMG_SLOTS.filter(s => value[s.key] && value[s.key] !== "any");
    if (!active.length) return null;
    const first = `${active[0].label}:${value[active[0].key] === "has" ? "有" : "無"}`;
    return active.length === 1 ? first : `${first} +${active.length - 1}`;
  }, [value]);

  const setSlot = (key, val) => onChange({ ...value, [key]: val });

  const clearAll = (e) => {
    e && e.stopPropagation();
    const reset = {};
    IMG_SLOTS.forEach(s => { reset[s.key] = "any"; });
    onChange(reset);
  };

  return (
    <div className="chip-wrap">
      <button
        type="button"
        className={"chip" + (activeCount > 0 ? " chip--active" : "")}
        onClick={() => setOpen(o => !o)}
      >
        <span className="chip__lbl">圖片欄位</span>
        {chipValue && <span className="chip__val">{chipValue}</span>}
        {chipValue
          ? <span onClick={clearAll} className="chip__clear"><Icon name="close" size={12} /></span>
          : <Icon name="chevDown" size={12} />}
      </button>
      {open && (
        <>
          <div className="chip-mask" onClick={() => setOpen(false)} />
          <div className="chip-pop chip-pop--searchable chip-pop--slots">
            <div className="chip-pop__list">
              {IMG_SLOTS.map(slot => (
                <div key={slot.key} className="slot-flt__row">
                  <span className="slot-flt__label">{slot.label}</span>
                  <div className="slot-flt__seg">
                    {[["any","不限"],["has","有"],["none","無"]].map(([v, lbl]) => (
                      <button
                        key={v}
                        className={"slot-flt__seg-btn" + ((value[slot.key] || "any") === v ? " is-active" : "")}
                        onClick={() => setSlot(slot.key, v)}
                      >{lbl}</button>
                    ))}
                  </div>
                </div>
              ))}
            </div>
            <div className="chip-pop__foot">
              <span>已套用 <b>{activeCount}</b> 個欄位</span>
              <button
                type="button"
                className="chip-pop__clear"
                disabled={activeCount === 0}
                onClick={clearAll}
              >清除</button>
            </div>
          </div>
        </>
      )}
    </div>
  );
};

// ── ThumbStrip ─────────────────────────────────────────────────────────────
const ThumbStrip = ({ sku }) => (
  <div className="img-strip">
    {IMG_SLOTS.map(slot => {
      const src = sku[slot.key];
      return (
        <HoverPreview key={slot.key} src={src || null}>
          <div className="img-thumb-wrap img-thumb-wrap--sm" title={`${slot.label}${src ? "" : "（未上傳）"}`}>
            {src
              ? <img src={src} alt={slot.label} loading="lazy" />
              : <div className="img-thumb-empty"><Icon name="image" size={16} /></div>
            }
          </div>
        </HoverPreview>
      );
    })}
  </div>
);

// ── PROMO_TYPES (L1 篩選用) ────────────────────────────────────────────────
const PROMO_TYPES = ["EO", "BOGO", "DCT", "M%"];

// ── ImageAdjustList (L1 主元件) ────────────────────────────────────────────
const ImageAdjustList = ({ skus, role, onOpenDrawer, onViewDrawer, onGoWorksheet }) => {
  const [search,      setSearch]      = useState("");
  const [filterBrand, setFilterBrand] = useState([]);
  const [filterCat,   setFilterCat]   = useState([]);
  const [filterPromo, setFilterPromo] = useState("");
  const [slotFilters, setSlotFilters] = useState(
    () => Object.fromEntries(IMG_SLOTS.map(s => [s.key, "any"]))
  );
  const [page,     setPage]     = useState(1);
  const [pageSize, setPageSize] = useState(20);
  const { SortHead, applySortTo } = useSortableTable("lastUpdated", "desc");
  const [exportPhase, setExportPhase] = useState(null);
  const [exportTotal, setExportTotal] = useState(0);
  const [exportDone,  setExportDone]  = useState(0);

  const brands  = useMemo(() => [...new Set(skus.map(s => s.brand).filter(Boolean))].sort(), [skus]);
  const mainCats = useMemo(() => [...new Set(skus.map(s => s.mainCat).filter(Boolean))].sort(), [skus]);

  const anyFilter = search || filterBrand.length || filterCat.length || filterPromo ||
    Object.values(slotFilters).some(v => v !== "any");

  const filtered = useMemo(() => {
    let list = skus;
    if (search) {
      const q = search.toLowerCase();
      list = list.filter(s =>
        s.barcode.includes(q) ||
        s.name.toLowerCase().includes(q) ||
        (s.brand || "").toLowerCase().includes(q)
      );
    }
    if (filterBrand.length) list = list.filter(s => filterBrand.includes(s.brand));
    if (filterCat.length)   list = list.filter(s => filterCat.includes(s.mainCat));
    if (filterPromo) {
      if (filterPromo === "（無）") list = list.filter(s => !s.promoType);
      else list = list.filter(s => (s.promoType || "").includes(filterPromo));
    }
    IMG_SLOTS.forEach(slot => {
      const rule = slotFilters[slot.key];
      if (rule === "has")  list = list.filter(s => !!s[slot.key]);
      if (rule === "none") list = list.filter(s => !s[slot.key]);
    });
    return list;
  }, [skus, search, filterBrand, filterCat, filterPromo, slotFilters]);

  const clearFilters = () => {
    setSearch(""); setFilterBrand([]); setFilterCat([]); setFilterPromo("");
    setSlotFilters(Object.fromEntries(IMG_SLOTS.map(s => [s.key, "any"])));
    setPage(1);
  };

  const sorted = useMemo(() => applySortTo(filtered, (s, key) => {
    if (key === "imgCount") return IMG_SLOTS.filter(sl => s[sl.key]).length;
    return s[key] ?? "";
  }), [filtered, applySortTo]);

  const paged = sorted.slice((page - 1) * pageSize, page * pageSize);

  const ctaLabel = (base) =>
    anyFilter && filtered.length > 0
      ? `${base}(${filtered.length})`
      : base;

  const handleWorksheet = () => {
    onGoWorksheet(anyFilter ? filtered : null);
  };

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

  return (
    <>
      <PageHead
        section="商品調整"
        title="商品圖片調整"
        subtitle="檢視所有品項的商品主圖、活動圖檔、包裝熱量照與情境圖。可篩選後匯出 Excel、批次調整、或單筆編輯。"
        actions={
          <>
            <Button
              variant="default"
              icon="download"
              disabled={(anyFilter && filtered.length === 0) || exportPhase === "parsing"}
              onClick={doExport}
            >
              {exportPhase === "parsing" ? "匯出中…" : ctaLabel("匯出 Excel")}
            </Button>
            {role === "samantha" && (
              <Button
                variant="primary"
                icon="grid"
                disabled={anyFilter && filtered.length === 0}
                onClick={handleWorksheet}
              >
                {ctaLabel("批次調整圖片")}
              </Button>
            )}
          </>
        }
      />

      <ImportBanner
        phase={exportPhase}
        parsingTitle="匯出準備中…"
        total={exportTotal}
        done={exportDone}
        okTitle={`已匯出 ${exportTotal} 筆`}
        okDesc=""
      />

      <div className="filter-bar">
        <Field
          leading="search"
          placeholder="品號 / 品名 / 條碼 / 品牌"
          value={search}
          onChange={e => { setSearch(e.target.value); setPage(1); }}
          style={{ width: 280 }}
        />
        <ChipFilter
          label="品牌"
          value={filterBrand}
          options={brands.map(b => ({ label: b, value: b }))}
          onChange={v => { setFilterBrand(v); setPage(1); }}
          multi
        />
        <ChipFilter
          label="主類別"
          value={filterCat}
          options={mainCats.map(c => ({ label: c, value: c }))}
          onChange={v => { setFilterCat(v); setPage(1); }}
          multi
        />
        <ChipFilter
          label="促銷類型"
          value={filterPromo}
          options={[...PROMO_TYPES, "（無）"].map(p => ({ label: p, value: p }))}
          onChange={v => { setFilterPromo(v); setPage(1); }}
        />
        <SlotPresenceFilter
          value={slotFilters}
          onChange={v => { setSlotFilters(v); setPage(1); }}
        />

        <span className="filter-bar__count" style={{ marginLeft: "auto" }}>
          共 {filtered.length} 筆
        </span>
      </div>

      <div className="card">
        <div className="tbl-wrap">
          {filtered.length === 0 ? (
            <div style={{ padding: "48px 24px", textAlign: "center", color: "var(--fg-3)" }}>
              {anyFilter
                ? <>查無符合的品項<br /><small>放寬篩選條件再試一次。</small><br />
                    <Button variant="text" size="sm" onClick={clearFilters} style={{ marginTop: 8 }}>清除所有篩選</Button>
                  </>
                : "目前商品主檔尚無資料。"
              }
            </div>
          ) : (
            <table className="tbl tbl--img-list">
              <thead>
                <tr>
                  <th style={{ width: 140 }}><SortHead colKey="lastUpdated" label="更新時間" /></th>
                  <th style={{ width: 100 }}><SortHead colKey="updatedBy" label="操作人" /></th>
                  <th style={{ width: 150 }}><SortHead colKey="barcode" label="品號" /></th>
                  <th style={{ minWidth: 280 }}><SortHead colKey="name" label="品名" /></th>
                  <th style={{ width: 80 }}><SortHead colKey="promoType" label="促銷" /></th>
                  <th style={{ minWidth: 340 }}><SortHead colKey="imgCount" label="圖片現況" /></th>
                  <th style={{ width: 90 }} className="center">功能</th>
                </tr>
              </thead>
              <tbody>
                {paged.map(sku => (
                  <tr key={sku.skuId}>
                    <td className="mono" style={{ color: "var(--fg-2)" }}>{sku.lastUpdated}</td>
                    <td><UserChip name={sku.updatedBy} /></td>
                    <td><span className="img-list__sku-id">{sku.barcode}</span></td>
                    <td>
                      <a className="tbl-link" onClick={() => role === "samantha" ? onOpenDrawer(sku) : onViewDrawer(sku)}>{sku.name}</a>
                      <div className="img-list__meta">{sku.brand} · {sku.mainCat}</div>
                    </td>
                    <td>
                      {sku.promoType
                        ? <span className="img-list__sku-id">{sku.promoType}</span>
                        : <span style={{ color: "var(--fg-4)" }}>—</span>
                      }
                    </td>
                    <td><ThumbStrip sku={sku} /></td>
                    <td className="center">
                      <RowActions actions={role === "samantha"
                        ? [{ label: "編輯", onClick: () => onOpenDrawer(sku) }]
                        : [{ label: "檢視", onClick: () => onViewDrawer(sku) }]
                      } />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
        {filtered.length > 0 && (
          <Pager
            total={filtered.length}
            page={page}
            pageSize={pageSize}
            onPageChange={setPage}
            onSizeChange={sz => { setPageSize(sz); setPage(1); }}

            pageSizes={[20, 50, 100]}
          />
        )}
      </div>
    </>
  );
};

Object.assign(window, { ImageAdjustList, SlotPresenceFilter, ThumbStrip });