// === Products list with inline price edit ===
// 라이브 모드: 검색/필터는 모두 클라이언트 측 처리 (allProducts 전체 로드 후 로컬 필터).
// 네이버 검색 API가 searchKeyword 필드를 무시하는 이슈 때문 (productName/searchKeywordType 둘 다 실패).
// 페이지네이션도 클라이언트 측.
function ProductsScreen({ products, setProducts, goto, openDetail,
                          productsSource, productsLoading, productsError, productsMeta,
                          productsPage, productsSearch, reloadProducts,
                          allProducts, setAllProducts, allProductsLoading, allProductsProgress, loadAllProducts }) {
  const { CATEGORIES } = window.MOCK;
  const isLive = productsSource === "live";
  const [search, setSearch] = useState("");
  const [activeCat, setActiveCat] = useState("all");
  const [activeStatus, setActiveStatus] = useState("all");
  const [selected, setSelected] = useState(new Set());
  const [edits, setEdits] = useState({});           // pid -> new salePrice (number)
  const [discountEdits, setDiscountEdits] = useState({}); // pid -> new immediateDiscount (number)
  const [confirmSave, setConfirmSave] = useState(false);
  const [naverSaving, setNaverSaving] = useState(false);
  const [saveProgress, setSaveProgress] = useState(null); // { done, total, succeeded:[], failed:[] }
  const [page, setPage] = useState(1);
  const PAGE_SIZE = 100;

  // 사용자 메타데이터 (매입처, 모델) — Supabase 또는 localStorage. 페이지 진입 시 로드.
  const [metaMap, setMetaMap] = useState(new Map());    // originProductNo → {supplier, model, ...}
  const [metaEdits, setMetaEdits] = useState({});       // pid → { supplier?, model? } 변경 대기

  useEffect(() => {
    if (!window.MetaStore || sourceList.length === 0) return;
    const ids = sourceList.map(p => p.originProductNo).filter(Boolean).map(String);
    if (ids.length === 0) return;
    window.MetaStore.getMany(ids).then(m => setMetaMap(m)).catch(err => console.warn("[meta load]", err));
  }, [sourceList]);

  const saveMeta = async (pid, field, value) => {
    const p = sourceList.find(x => x.id === pid);
    const opn = p?.originProductNo;
    if (!opn) return;
    try {
      const updated = await window.MetaStore.set(String(opn), { [field]: value });
      setMetaMap(prev => { const n = new Map(prev); n.set(String(opn), updated); return n; });
      setMetaEdits(prev => { const n = { ...prev }; if (n[pid]) { delete n[pid][field]; if (Object.keys(n[pid]).length === 0) delete n[pid]; } return n; });
    } catch (err) {
      toast("저장 실패: " + err.message);
    }
  };

  const setMetaEdit = (pid, field, value) => {
    setMetaEdits(prev => ({ ...prev, [pid]: { ...(prev[pid] || {}), [field]: value } }));
  };

  // 라이브 모드: 전체 상품 자동 로드. 일괄과 동일 패턴.
  useEffect(() => {
    if (!isLive) return;
    if (allProducts) return;
    if (allProductsLoading) return;
    if (!loadAllProducts) return;
    const totalInStore = productsMeta?.totalElements || 0;
    if (totalInStore && totalInStore <= products.length) return; // 이미 다 들어있음
    loadAllProducts().catch(err => {
      console.error("[products auto-load all]", err);
      toast("전체 상품 로드 실패: " + err.message);
    });
  }, [isLive, allProducts, allProductsLoading]);

  // 데이터 소스 선택: 라이브 + 전체 로드되면 전체, 아니면 페이지된 products (또는 mock)
  const sourceList = (isLive && allProducts) ? allProducts : products;
  const isUsingFullList = isLive && !!allProducts;

  // 클라이언트 측 검색/필터
  const filtered = useMemo(() => {
    const q = search.trim().toLowerCase();
    return sourceList.filter(p => {
      if (activeCat !== "all" && p.category !== activeCat) return false;
      if (activeStatus !== "all" && p.status !== activeStatus) return false;
      if (q) {
        const name = (p.name || "").toLowerCase();
        const sku = (p.sku || "").toLowerCase();
        if (!name.includes(q) && !sku.includes(q)) return false;
      }
      return true;
    });
  }, [sourceList, search, activeCat, activeStatus]);

  // 검색/필터 바뀌면 페이지 리셋
  useEffect(() => { setPage(1); }, [search, activeCat, activeStatus]);

  // 페이지네이션 (클라이언트)
  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
  const currentPage = Math.min(page, totalPages);
  const pageStart = (currentPage - 1) * PAGE_SIZE;
  const pageItems = filtered.slice(pageStart, pageStart + PAGE_SIZE);

  // 검색창 입력 핸들러 — 즉시 (디바운스 불필요, 로컬 필터라서)
  const handleSearchChange = (e) => setSearch(e.target.value);
  const clearSearch = () => setSearch("");

  const toggleAll = () => {
    // 현재 페이지 전체 선택/해제 (전체 필터된 결과 아님 — UX 혼란 방지)
    const pageIds = new Set(pageItems.map(p => p.id));
    const allOnPageSelected = pageItems.every(p => selected.has(p.id));
    if (allOnPageSelected) {
      const n = new Set(selected);
      pageIds.forEach(id => n.delete(id));
      setSelected(n);
    } else {
      const n = new Set(selected);
      pageIds.forEach(id => n.add(id));
      setSelected(n);
    }
  };
  const toggleOne = (id) => {
    const s = new Set(selected);
    if (s.has(id)) s.delete(id); else s.add(id);
    setSelected(s);
  };

  // 어떤 상품이라도 dirty(가격 또는 즉시할인 변경 대기)인지 카운트
  const dirtyPids = useMemo(() => {
    const s = new Set();
    Object.keys(edits).forEach(k => s.add(k));
    Object.keys(discountEdits).forEach(k => s.add(k));
    return s;
  }, [edits, discountEdits]);
  const dirtyCount = dirtyPids.size;

  // 변경 대기 목록 (실제로 가격 또는 즉시할인 값이 다른 것만)
  const dirtyList = useMemo(() => {
    const out = [];
    dirtyPids.forEach(pid => {
      const p = sourceList.find(x => x.id === pid);
      if (!p) return;
      const oldPrice = p.price || 0;
      const oldDiscount = (p.price || 0) - (p.discountedPrice || p.price || 0);
      // edits/discountEdits 값이 있으면 사용, 없으면 기존 값 유지
      const priceRaw = edits[pid];
      const discountRaw = discountEdits[pid];
      const newPrice = priceRaw !== undefined
        ? parseInt(String(priceRaw).replace(/[^0-9]/g, ""), 10)
        : oldPrice;
      const newDiscount = discountRaw !== undefined
        ? parseInt(String(discountRaw).replace(/[^0-9]/g, ""), 10)
        : oldDiscount;
      const priceChanged = !isNaN(newPrice) && newPrice >= 0 && newPrice !== oldPrice;
      const discountChanged = !isNaN(newDiscount) && newDiscount >= 0 && newDiscount !== oldDiscount;
      if (!priceChanged && !discountChanged) return;
      const newDiscountedPrice = Math.max(0, newPrice - newDiscount);
      out.push({
        pid, name: p.name || pid,
        oldPrice, newPrice, priceChanged,
        oldDiscount, newDiscount, discountChanged,
        oldDiscountedPrice: Math.max(0, oldPrice - oldDiscount),
        newDiscountedPrice,
        invalidUnit: (priceChanged && newPrice % 10 !== 0) || (discountChanged && newDiscount % 10 !== 0),
        originProductNo: p.originProductNo,
      });
    });
    return out;
  }, [dirtyPids, edits, discountEdits, sourceList]);

  const hasInvalidUnits = dirtyList.some(e => e.invalidUnit);

  const savePrice = (pid) => {
    const v = parseInt(edits[pid].toString().replace(/[^0-9]/g, ""), 10);
    if (isNaN(v) || v < 0) { toast("올바른 가격을 입력하세요"); return; }
    if (isLive) {
      // 라이브 모드: 10원 단위 정규화 후 edits 유지. 사용자가 "네이버에 적용..."으로 모달 띄움.
      const normalized = Math.floor(v / 10) * 10;
      if (normalized !== v) toast(`10원 단위로 자동 조정: ${formatKRW(normalized)}`);
      setEdits(prev => ({ ...prev, [pid]: normalized }));
      return;
    }
    setProducts(prev => prev.map(p => p.id === pid ? { ...p, price: v } : p));
    setEdits(prev => { const n = { ...prev }; delete n[pid]; return n; });
    toast("판매가가 저장되었습니다");
  };

  // 즉시할인 amount 변경 (라이브 모드 전용)
  const saveDiscount = (pid) => {
    const raw = discountEdits[pid];
    if (raw === undefined) return;
    const v = parseInt(String(raw).replace(/[^0-9]/g, ""), 10);
    if (isNaN(v) || v < 0) { toast("올바른 즉시할인 금액을 입력하세요"); return; }
    const normalized = Math.floor(v / 10) * 10;
    if (normalized !== v) toast(`즉시할인 10원 단위로 자동 조정: ${formatNum(normalized)}원`);
    // 판매가보다 큰 할인은 불가
    const p = products.find(x => x.id === pid);
    const priceForCap = (edits[pid] !== undefined ? edits[pid] : p?.price) || 0;
    if (normalized > priceForCap) {
      toast(`즉시할인이 판매가(${formatKRW(priceForCap)})를 넘을 수 없습니다`);
      setDiscountEdits(prev => ({ ...prev, [pid]: priceForCap }));
      return;
    }
    setDiscountEdits(prev => ({ ...prev, [pid]: normalized }));
  };

  const saveAllEdits = () => {
    if (isLive) {
      if (dirtyList.length === 0) { toast("변경된 값이 없습니다"); return; }
      setSaveProgress(null);
      setConfirmSave(true);
      return;
    }
    setProducts(prev => prev.map(p => {
      if (edits[p.id] === undefined) return p;
      const v = parseInt(edits[p.id].toString().replace(/[^0-9]/g, ""), 10);
      if (isNaN(v) || v < 0) return p;
      return { ...p, price: v };
    }));
    setEdits({});
    toast(`${dirtyCount}개 상품의 판매가가 저장되었습니다`);
  };

  const discardEdits = () => {
    setEdits({});
    setDiscountEdits({});
    toast("변경사항이 취소되었습니다");
  };

  // 라이브 모드 — 모달 확인 후 호출. 순차 PUT (salePrice + immediateDiscount 동시 변경 지원).
  const saveAllEditsToNaver = async () => {
    setNaverSaving(true);
    const succeeded = [];
    const failed = [];
    setSaveProgress({ done: 0, total: dirtyList.length, succeeded: [], failed: [] });
    for (let i = 0; i < dirtyList.length; i++) {
      const item = dirtyList[i];
      try {
        if (!item.originProductNo) throw new Error("originProductNo 누락 — 라이브 상품 아님");
        const changes = {};
        if (item.priceChanged) changes.salePrice = item.newPrice;
        if (item.discountChanged) changes.immediateDiscount = item.newDiscount;
        await window.API.naverChangeProductPricing(item.originProductNo, changes);
        succeeded.push(item);
      } catch (err) {
        console.error("[saveToNaver]", item.pid, err);
        failed.push({ ...item, error: err.message });
      }
      setSaveProgress({ done: i + 1, total: dirtyList.length, succeeded: [...succeeded], failed: [...failed] });
    }

    // 성공한 것만 products + allProducts(전체 캐시)에 반영
    if (succeeded.length > 0) {
      const okIds = new Set(succeeded.map(x => x.pid));
      const applyUpdate = (p) => {
        if (!okIds.has(p.id)) return p;
        const item = succeeded.find(x => x.pid === p.id);
        return { ...p, price: item.newPrice, discountedPrice: item.newDiscountedPrice };
      };
      setProducts(prev => prev.map(applyUpdate));
      if (setAllProducts && allProducts) {
        setAllProducts(prev => prev ? prev.map(applyUpdate) : prev);
      }
      setEdits(prev => { const n = { ...prev }; okIds.forEach(id => delete n[id]); return n; });
      setDiscountEdits(prev => { const n = { ...prev }; okIds.forEach(id => delete n[id]); return n; });
    }

    setNaverSaving(false);
    if (failed.length === 0) {
      toast(`${succeeded.length}개 변경사항이 네이버에 반영되었습니다`);
      setTimeout(() => setConfirmSave(false), 1500);
    } else {
      toast(`${succeeded.length}개 성공, ${failed.length}개 실패 — 모달에서 확인`);
    }
  };

  return (
    <div className="page">
      <div className="page-header" style={{ display: "flex", alignItems: "flex-end", gap: 16 }}>
        <div style={{ flex: 1 }}>
          <h1 className="page-title">상품 관리</h1>
          <p className="page-desc">
            {isLive
              ? (allProductsLoading
                  ? `전체 상품 불러오는 중... ${allProductsProgress?.done || 0}/${allProductsProgress?.total || "?"}`
                  : <>
                      네이버 라이브 전체 {sourceList.length}개
                      {(search || activeCat !== "all" || activeStatus !== "all") && (
                        <> · 필터 결과 <span style={{ color: "var(--accent)", fontWeight: 600 }}>{filtered.length}개</span></>
                      )}
                      {!isUsingFullList && productsMeta && (
                        <> · <span style={{ color: "var(--warning)" }}>페이지된 {products.length}개만 표시 (전체 로드 중)</span></>
                      )}
                    </>)
              : productsLoading
                ? "네이버에서 불러오는 중..."
                : productsError
                  ? `네이버 조회 실패 — 샘플 데이터 표시 중`
                  : `샘플 데이터 ${products.length}개 (API 설정에서 자격증명 입력 시 라이브 표시)`}
          </p>
        </div>
        <div className="row gap-2">
          {isLive && loadAllProducts && (
            <button className="btn"
                    onClick={() => loadAllProducts().catch(err => toast("로드 실패: " + err.message))}
                    disabled={allProductsLoading}>
              <window.I.Refresh size={14} /> {allProductsLoading ? "로드 중..." : "새로고침"}
            </button>
          )}
          <button className="btn" onClick={() => goto("bulk")}>
            <window.I.Filter size={14} /> 일괄 수정
          </button>
          <button className="btn btn-primary" onClick={() => goto("isvm")}>
            <window.I.Plus size={14} /> 신규 등록
          </button>
        </div>
      </div>

      {isLive && allProductsLoading && (
        <div style={{
          marginBottom: 12, padding: "8px 14px", borderRadius: 8,
          background: "var(--accent-soft)", border: "1px solid var(--accent)",
          fontSize: 12, display: "flex", alignItems: "center", gap: 10
        }}>
          <div style={{ flex: 1 }}>
            네이버에서 전체 상품 불러오는 중 · 페이지 {allProductsProgress?.page || 1}/{allProductsProgress?.totalPages || "?"}
            <div style={{ height: 6, background: "var(--border)", borderRadius: 3, marginTop: 6, overflow: "hidden" }}>
              <div style={{
                height: "100%",
                width: allProductsProgress?.total
                  ? `${Math.min(100, (allProductsProgress.done / allProductsProgress.total) * 100)}%`
                  : "10%",
                background: "var(--accent)",
                transition: "width 0.3s",
              }} />
            </div>
          </div>
          <span className="tabular muted">{allProductsProgress?.done || 0}/{allProductsProgress?.total || "?"}</span>
        </div>
      )}

      {isLive && dirtyCount === 0 && (
        <div style={{
          padding: "8px 14px", marginBottom: 12, borderRadius: 8,
          background: "var(--accent-soft)", border: "1px solid var(--accent)",
          fontSize: 12, color: "var(--text-muted)", display: "flex", gap: 8, alignItems: "center"
        }}>
          <window.I.AlertCircle size={14} stroke="var(--accent)" />
          <span>
            가격 칸을 클릭해 수정 후 <strong style={{ color: "var(--text)" }}>"네이버에 적용..."</strong> 버튼을 누르면 확인 모달이 뜹니다.
            한 번에 여러 상품을 모아서 일괄 적용할 수 있어요.
          </span>
        </div>
      )}
      {productsError && (
        <div style={{
          padding: "10px 14px", marginBottom: 12, borderRadius: 8,
          background: "rgba(239, 68, 68, 0.08)", border: "1px solid rgba(239, 68, 68, 0.35)",
          fontSize: 12, color: "var(--danger)", display: "flex", gap: 8, alignItems: "center"
        }}>
          <window.I.AlertCircle size={14} stroke="var(--danger)" />
          <span>네이버 조회 실패: {productsError}</span>
          {reloadProducts && (
            <button className="btn btn-sm" style={{ marginLeft: "auto" }} onClick={() => reloadProducts()}>다시 시도</button>
          )}
        </div>
      )}

      {/* Toolbar */}
      <div className="toolbar">
        <div style={{ display: "flex", gap: 6, flex: 1, maxWidth: 460, alignItems: "stretch" }}>
          <div className="input-with-icon" style={{ flex: 1, position: "relative" }}>
            <window.I.Search size={14} className="input-icon" />
            <input className="input"
                   placeholder={isLive ? `상품명/SKU 검색 (전체 ${sourceList.length}개에서)` : "상품명 또는 SKU 검색..."}
                   value={search}
                   onChange={handleSearchChange}
                   onKeyDown={e => {
                     if (e.key === "Escape") { e.preventDefault(); clearSearch(); }
                   }}
                   style={{ paddingRight: search ? 32 : 12 }} />
            {search && (
              <button
                type="button"
                onClick={clearSearch}
                title="검색어 지우기 (Esc)"
                style={{
                  position: "absolute", right: 6, top: "50%", transform: "translateY(-50%)",
                  background: "transparent", border: "none", cursor: "pointer",
                  color: "var(--text-muted)", padding: 4, lineHeight: 0, borderRadius: 4,
                }}>
                <window.I.X size={14} />
              </button>
            )}
          </div>
        </div>
        <div className="toolbar-divider" />
        <div className="toolbar-group" style={{ flexWrap: "wrap" }}>
          <button className={"chip " + (activeCat === "all" ? "active" : "")} onClick={() => setActiveCat("all")}>전체 카테고리</button>
          {CATEGORIES.map(c => (
            <button key={c.id} className={"chip " + (activeCat === c.id ? "active" : "")} onClick={() => setActiveCat(c.id)}>
              {c.name}
            </button>
          ))}
        </div>
        <div className="toolbar-divider" />
        <div className="seg">
          <button className={"seg-btn " + (activeStatus === "all" ? "active" : "")} onClick={() => setActiveStatus("all")}>전체</button>
          <button className={"seg-btn " + (activeStatus === "active" ? "active" : "")} onClick={() => setActiveStatus("active")}>판매중</button>
          <button className={"seg-btn " + (activeStatus === "outofstock" ? "active" : "")} onClick={() => setActiveStatus("outofstock")}>품절</button>
        </div>
      </div>

      {/* Selection / dirty bar */}
      {(selected.size > 0 || dirtyCount > 0) && (
        <div style={{
          padding: "10px 16px",
          background: "var(--accent-soft)",
          border: "1px solid var(--accent)",
          borderRadius: 8,
          marginBottom: 12,
          display: "flex", alignItems: "center", gap: 12,
        }}>
          {selected.size > 0 && (
            <>
              <window.I.Check size={14} stroke="var(--accent)" />
              <span style={{ fontSize: 13, fontWeight: 500 }}>{selected.size}개 선택됨</span>
              <button className="btn btn-sm" onClick={() => setSelected(new Set())}>해제</button>
            </>
          )}
          {dirtyCount > 0 && (
            <>
              <span style={{ marginLeft: selected.size > 0 ? 12 : 0, fontSize: 13, fontWeight: 500 }}>
                {dirtyCount}개 항목 {isLive ? "네이버 적용 대기 (판매가/즉시할인)" : "변경 대기"}
              </span>
              <div className="right row gap-2">
                <button className="btn btn-sm" onClick={discardEdits}>취소</button>
                <button className="btn btn-primary btn-sm" onClick={saveAllEdits}>
                  {isLive ? <><window.I.Check size={14} /> 네이버에 적용...</> : "전체 저장"}
                </button>
              </div>
            </>
          )}
        </div>
      )}

      {/* Table */}
      <div className="table-wrap">
        <table className="table">
          <thead>
            <tr>
              <th className="table-checkbox">
                <input type="checkbox" className="checkbox"
                       checked={pageItems.length > 0 && pageItems.every(p => selected.has(p.id))}
                       onChange={toggleAll}
                       title="현재 페이지 전체 선택/해제" />
              </th>
              <th>상품정보</th>
              <th style={{ width: 8 }} title="상태"></th>
              <th style={{ width: 110 }}>매입처</th>
              <th style={{ width: 110 }}>Model</th>
              <th className="numeric" style={{ width: 70 }}>재고</th>
              <th className="numeric" style={{ width: 100 }}>판매가</th>
              <th className="numeric" style={{ width: 80 }}>즉시할인</th>
              <th className="numeric" style={{ width: 100 }}>최종가</th>
              <th className="numeric" style={{ width: 90 }}>30일 판매</th>
              <th style={{ width: 50 }}></th>
            </tr>
          </thead>
          <tbody>
            {pageItems.map(p => {
              const margin = ((p.price - p.costPrice) / p.price * 100).toFixed(1);
              const isDirty = edits[p.id] !== undefined;
              const isDiscountDirty = discountEdits[p.id] !== undefined;
              // 현재 표시할 값: dirty면 edits 값, 아니면 product 값
              const currentPrice = isDirty ? edits[p.id] : p.price;
              const currentDiscount = isDiscountDirty
                ? discountEdits[p.id]
                : (p.price - (p.discountedPrice || p.price));
              const currentDiscountedPrice = Math.max(0, (parseInt(currentPrice) || 0) - (parseInt(currentDiscount) || 0));
              const rowDirty = isDirty || isDiscountDirty;
              // 상태 색상 dot
              const statusColor = p.status === "outofstock" ? "var(--danger)"
                                : p.status === "suspension" ? "var(--text-muted)"
                                : "var(--success)";
              const statusLabel = p.status === "outofstock" ? "품절"
                                : p.status === "suspension" ? "판매중지" : "판매중";
              // 메타데이터 (매입처/모델)
              const opn = p.originProductNo ? String(p.originProductNo) : null;
              const meta = (opn && metaMap.get(opn)) || {};
              const supplierEdit = metaEdits[p.id]?.supplier;
              const modelEdit = metaEdits[p.id]?.model;
              const supplierVal = supplierEdit !== undefined ? supplierEdit : (meta.supplier || "");
              const modelVal = modelEdit !== undefined ? modelEdit : (meta.model || "");
              return (
                <tr key={p.id} className={selected.has(p.id) ? "selected" : ""}>
                  <td>
                    <input type="checkbox" className="checkbox" checked={selected.has(p.id)} onChange={() => toggleOne(p.id)} />
                  </td>
                  <td>
                    <div className="product-cell">
                      <ProductThumb tone={p.tone} name={p.name} size={40} imageUrl={p.imageUrl} />
                      <div style={{ minWidth: 0 }}>
                        <div className="product-name" style={{ cursor: "pointer" }} onClick={() => openDetail(p.id)}>{p.name}</div>
                        <div className="product-meta">{p.sku} · {p.brand}</div>
                      </div>
                    </div>
                  </td>
                  {/* 상태 — 색깔 dot (호버 시 라벨) */}
                  <td style={{ padding: 0, textAlign: "center" }}>
                    <span title={statusLabel}
                          style={{ display: "inline-block", width: 10, height: 10, borderRadius: "50%", background: statusColor }} />
                  </td>
                  {/* 매입처 — 값 있으면 진하게, 없으면 placeholder가 연하게 */}
                  <td>
                    <input
                      className={"price-edit " + (supplierEdit !== undefined ? "dirty" : "")}
                      type="text"
                      style={{
                        textAlign: "left", paddingLeft: 6,
                        color: supplierVal ? "var(--text)" : "var(--text-muted)",
                        fontWeight: supplierVal ? 500 : 400,
                      }}
                      value={supplierVal}
                      onChange={e => setMetaEdit(p.id, "supplier", e.target.value)}
                      onBlur={() => supplierEdit !== undefined && saveMeta(p.id, "supplier", supplierEdit)}
                      onKeyDown={e => {
                        if (e.key === "Enter") e.target.blur();
                        if (e.key === "Escape") setMetaEdits(prev => { const n = { ...prev }; if (n[p.id]) { delete n[p.id].supplier; if (Object.keys(n[p.id]).length === 0) delete n[p.id]; } return n; });
                      }}
                      placeholder="매입처"
                      title="매입처"
                    />
                  </td>
                  {/* Model — 값 있으면 진하게, 없으면 placeholder 연하게 */}
                  <td>
                    <input
                      className={"price-edit " + (modelEdit !== undefined ? "dirty" : "")}
                      type="text"
                      style={{
                        textAlign: "left", paddingLeft: 6,
                        color: modelVal ? "var(--text)" : "var(--text-muted)",
                        fontWeight: modelVal ? 500 : 400,
                      }}
                      value={modelVal}
                      onChange={e => setMetaEdit(p.id, "model", e.target.value)}
                      onBlur={() => modelEdit !== undefined && saveMeta(p.id, "model", modelEdit)}
                      onKeyDown={e => {
                        if (e.key === "Enter") e.target.blur();
                        if (e.key === "Escape") setMetaEdits(prev => { const n = { ...prev }; if (n[p.id]) { delete n[p.id].model; if (Object.keys(n[p.id]).length === 0) delete n[p.id]; } return n; });
                      }}
                      placeholder="모델"
                      title="모델명 (사용자 메모)"
                    />
                  </td>
                  <td className="numeric">
                    <span style={{ color: p.stock === 0 ? "var(--danger)" : p.stock < 50 ? "var(--warning)" : "var(--text)" }}>
                      {formatNum(p.stock)}
                    </span>
                  </td>
                  {/* 판매가 (편집 가능) */}
                  <td className="numeric">
                    <input
                      className={"price-edit " + (isDirty ? "dirty" : "")}
                      type="text"
                      value={isDirty ? edits[p.id] : formatNum(p.price)}
                      onChange={e => setEdits(prev => ({ ...prev, [p.id]: e.target.value.replace(/[^0-9]/g, "") }))}
                      onBlur={() => isDirty && savePrice(p.id)}
                      onKeyDown={e => {
                        if (e.key === "Enter") { e.target.blur(); }
                        if (e.key === "Escape") { setEdits(prev => { const n = { ...prev }; delete n[p.id]; return n; }); }
                      }}
                      title="판매가 (정가)"
                    />
                    {!isLive && (
                      <div className="text-xs muted" style={{ marginTop: 2 }}>마진 {margin}%</div>
                    )}
                  </td>
                  {/* 즉시할인 — 폭 20% 축소 (input 자체 너비 제한) */}
                  <td className="numeric">
                    {isLive ? (
                      <input
                        className={"price-edit " + (isDiscountDirty ? "dirty" : "")}
                        type="text"
                        style={{ width: "80%" }}
                        value={isDiscountDirty ? discountEdits[p.id] : formatNum(p.price - (p.discountedPrice || p.price))}
                        onChange={e => setDiscountEdits(prev => ({ ...prev, [p.id]: e.target.value.replace(/[^0-9]/g, "") }))}
                        onBlur={() => isDiscountDirty && saveDiscount(p.id)}
                        onKeyDown={e => {
                          if (e.key === "Enter") { e.target.blur(); }
                          if (e.key === "Escape") { setDiscountEdits(prev => { const n = { ...prev }; delete n[p.id]; return n; }); }
                        }}
                        title="즉시할인 (0 = 할인 안 함)"
                      />
                    ) : (
                      <span className="muted">—</span>
                    )}
                  </td>
                  {/* 최종가 (자동 계산, 편집 불가) */}
                  <td className="numeric">
                    {isLive ? (
                      <>
                        <div style={{ fontWeight: 600, color: "var(--accent)" }}>
                          {formatKRW(currentDiscountedPrice)}
                        </div>
                        {rowDirty && (
                          <div className="text-xs muted" style={{ marginTop: 2 }}>(미적용)</div>
                        )}
                      </>
                    ) : (
                      <span className="muted">{formatKRW(p.price)}</span>
                    )}
                  </td>
                  <td className="numeric">
                    <div style={{ fontWeight: 600 }}>{p.sales30d}건</div>
                    <div className="text-xs muted">{formatKRW(p.sales30d * p.price)}</div>
                  </td>
                  <td>
                    <button className="btn btn-icon btn-sm btn-ghost" onClick={() => openDetail(p.id)}>
                      <window.I.Eye size={14} />
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        {filtered.length === 0 && (
          <div className="empty">
            <window.I.Search size={32} className="empty-icon" />
            <div>{(productsLoading || allProductsLoading) ? "불러오는 중..." : "검색 결과가 없습니다"}</div>
          </div>
        )}
      </div>

      {/* 페이지네이션 (클라이언트 측) */}
      {totalPages > 1 && (
        <div style={{
          marginTop: 12, padding: "10px 14px",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          background: "var(--bg-elev)", borderRadius: 8, border: "1px solid var(--border)"
        }}>
          <div className="text-sm muted">
            {pageStart + 1}~{Math.min(pageStart + PAGE_SIZE, filtered.length)} / {filtered.length}개
            {(search || activeCat !== "all" || activeStatus !== "all") && filtered.length < sourceList.length && (
              <span> (전체 {sourceList.length}개 중 필터링)</span>
            )}
          </div>
          <div className="row gap-2" style={{ alignItems: "center" }}>
            <button className="btn btn-sm"
                    disabled={currentPage <= 1}
                    onClick={() => setPage(currentPage - 1)}>
              <window.I.ChevronRight size={12} style={{ transform: "rotate(180deg)" }} /> 이전
            </button>
            <span className="text-sm" style={{ minWidth: 80, textAlign: "center" }}>
              <strong>{currentPage}</strong> / {totalPages}
            </span>
            <button className="btn btn-sm"
                    disabled={currentPage >= totalPages}
                    onClick={() => setPage(currentPage + 1)}>
              다음 <window.I.ChevronRight size={12} />
            </button>
          </div>
        </div>
      )}

      {/* 네이버 가격 적용 확인 모달 (라이브 모드 전용) */}
      <window.Modal
        open={confirmSave}
        onClose={() => { if (!naverSaving) { setConfirmSave(false); setSaveProgress(null); } }}
        title="네이버에 가격 변경 적용"
        size="lg"
        footer={
          !saveProgress ? (
            <>
              <button className="btn" onClick={() => setConfirmSave(false)}>취소</button>
              <button className="btn btn-primary" onClick={saveAllEditsToNaver}>
                <window.I.Check size={14} /> {dirtyList.length}개 네이버에 적용
              </button>
            </>
          ) : naverSaving ? (
            <button className="btn" disabled>
              저장 중... ({saveProgress.done}/{saveProgress.total})
            </button>
          ) : (
            <button className="btn btn-primary" onClick={() => { setConfirmSave(false); setSaveProgress(null); }}>
              닫기
            </button>
          )
        }>
        {!saveProgress ? (
          <>
            <p style={{ marginBottom: 12, fontSize: 13 }}>
              다음 <strong>{dirtyList.length}개 상품</strong>의 판매가를 네이버 스토어에 즉시 반영합니다.
            </p>
            <div style={{ maxHeight: 340, overflow: "auto", border: "1px solid var(--border)", borderRadius: 6 }}>
              <table className="table">
                <thead>
                  <tr>
                    <th>상품명 · 할인가 변동</th>
                    <th className="numeric">판매가</th>
                    <th className="numeric">즉시할인</th>
                  </tr>
                </thead>
                <tbody>
                  {dirtyList.map(item => {
                    const priceDiff = item.newPrice - item.oldPrice;
                    const discountDiff = item.newDiscount - item.oldDiscount;
                    return (
                      <tr key={item.pid}>
                        <td style={{ maxWidth: 280, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }} title={item.name}>
                          {item.name}
                          <div className="text-xs" style={{ marginTop: 2, color: "var(--accent)" }}>
                            할인가 {formatKRW(item.oldDiscountedPrice)} → {formatKRW(item.newDiscountedPrice)}
                          </div>
                        </td>
                        <td className="numeric" style={{ fontSize: 12 }}>
                          {item.priceChanged ? (
                            <>
                              <div className="muted">{formatKRW(item.oldPrice)}</div>
                              <div style={{ fontWeight: 600 }}>→ {formatKRW(item.newPrice)}</div>
                              <div style={{ color: priceDiff > 0 ? "var(--success)" : "var(--danger)", fontSize: 11 }}>
                                {priceDiff > 0 ? "+" : ""}{formatNum(priceDiff)}
                              </div>
                            </>
                          ) : <span className="muted">{formatKRW(item.oldPrice)}</span>}
                        </td>
                        <td className="numeric" style={{ fontSize: 12 }}>
                          {item.discountChanged ? (
                            <>
                              <div className="muted">{formatNum(item.oldDiscount)}원</div>
                              <div style={{ fontWeight: 600 }}>→ {formatNum(item.newDiscount)}원</div>
                              <div style={{ color: discountDiff > 0 ? "var(--success)" : "var(--danger)", fontSize: 11 }}>
                                {discountDiff > 0 ? "+" : ""}{formatNum(discountDiff)}
                              </div>
                            </>
                          ) : <span className="muted">{formatNum(item.oldDiscount)}원</span>}
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
            <div style={{
              marginTop: 12, padding: "10px 12px", borderRadius: 6,
              background: "rgba(245, 158, 11, 0.08)", border: "1px solid rgba(245, 158, 11, 0.35)",
              fontSize: 12, color: "var(--text-muted)", display: "flex", gap: 8, alignItems: "flex-start"
            }}>
              <window.I.AlertCircle size={14} stroke="var(--warning)" style={{ flexShrink: 0, marginTop: 1 }} />
              <span>
                <strong style={{ color: "var(--text)" }}>주의:</strong> 적용은 즉시 네이버 스토어에 반영됩니다.
                되돌리려면 다시 가격을 변경해야 합니다.
                (참고: 첫 PUT 시 상품의 detailContent 일부 메타데이터가 sanitize됩니다 — 이미지/텍스트 표시는 정상 유지)
              </span>
            </div>
          </>
        ) : (
          <>
            <div style={{ marginBottom: 12 }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6, fontSize: 13 }}>
                <span>{naverSaving ? "네이버에 적용 중..." : "완료"}</span>
                <span>{saveProgress.done} / {saveProgress.total}</span>
              </div>
              <div style={{ height: 8, background: "var(--border)", borderRadius: 4, overflow: "hidden" }}>
                <div style={{
                  height: "100%",
                  width: `${saveProgress.total ? (saveProgress.done / saveProgress.total * 100) : 0}%`,
                  background: "var(--accent)",
                  transition: "width 0.2s",
                }} />
              </div>
            </div>
            <div style={{ display: "flex", gap: 16, fontSize: 13, marginBottom: 12 }}>
              <span><strong style={{ color: "var(--success)" }}>{saveProgress.succeeded.length}</strong> 성공</span>
              <span><strong style={{ color: "var(--danger)" }}>{saveProgress.failed.length}</strong> 실패</span>
            </div>
            {saveProgress.failed.length > 0 && (
              <div style={{ marginTop: 8, padding: 10, background: "rgba(239, 68, 68, 0.05)", border: "1px solid rgba(239, 68, 68, 0.2)", borderRadius: 6, fontSize: 12, maxHeight: 220, overflow: "auto" }}>
                <div style={{ fontWeight: 600, marginBottom: 6 }}>실패 목록 (다시 시도 가능):</div>
                {saveProgress.failed.map(f => (
                  <div key={f.pid} style={{ marginBottom: 6 }}>
                    <div style={{ color: "var(--text)" }}>{f.name}</div>
                    <div className="muted" style={{ paddingLeft: 8, fontSize: 11 }}>{f.error}</div>
                  </div>
                ))}
              </div>
            )}
          </>
        )}
      </window.Modal>
    </div>
  );
}

window.ProductsScreen = ProductsScreen;