// ModuFoodService — Catalog view with filters + search + drawer (EN / KO)
function CatalogView({ onPick, catalog, lang, T }) {
  const { products, categories, badges, loading, error } = catalog;
  const ko = lang === "ko";
  const [query, setQuery] = React.useState("");
  const [cats, setCats] = React.useState(new Set());
  const [badgeSet, setBadgeSet] = React.useState(new Set());
  const [sort, setSort] = React.useState("rel");

  function pName(p) { return (ko && p.name_ko) ? p.name_ko : p.name; }
  function pNote(p) { return (ko && p.note_ko) ? p.note_ko : p.note; }

  function toggle(setter) {
    return (id) => {
      setter((prev) => {
        const n = new Set(prev);
        if (n.has(id)) n.delete(id); else n.add(id);
        return n;
      });
    };
  }
  const togCat = toggle(setCats);
  const togBadge = toggle(setBadgeSet);

  function clearAll() {
    setQuery(""); setCats(new Set()); setBadgeSet(new Set());
  }

  function priceNum(p) {
    const n = Number(p.price);
    return Number.isFinite(n) && String(p.price).trim() !== "" && !isNaN(n) ? n : Infinity;
  }

  function matches(p) {
    const q = query.trim().toLowerCase();
    if (cats.size && !cats.has(p.category)) return false;
    if (badgeSet.size && !badgeSet.has(p.badge)) return false;
    if (q && !(
      p.name.toLowerCase().includes(q) ||
      (p.name_ko && p.name_ko.toLowerCase().includes(q)) ||
      p.sku.toLowerCase().includes(q) ||
      (p.pid && p.pid.toLowerCase().includes(q)) ||
      p.note.toLowerCase().includes(q) ||
      (p.note_ko && p.note_ko.toLowerCase().includes(q))
    )) return false;
    return true;
  }

  const filtered = React.useMemo(() => {
    let list = products.filter(matches);
    if (sort === "name") list = [...list].sort((a, b) => pName(a).localeCompare(pName(b)));
    if (sort === "sku") list = [...list].sort((a, b) => a.sku.localeCompare(b.sku));
    if (sort === "price") list = [...list].sort((a, b) => priceNum(a) - priceNum(b));
    return list;
  }, [products, query, cats, badgeSet, sort, lang]);

  const catCounts = React.useMemo(() => {
    const counts = {};
    const q = query.trim().toLowerCase();
    products.forEach((p) => {
      if (badgeSet.size && !badgeSet.has(p.badge)) return;
      if (q && !(p.name.toLowerCase().includes(q) || (p.name_ko && p.name_ko.toLowerCase().includes(q)) || p.sku.toLowerCase().includes(q) || p.note.toLowerCase().includes(q))) return;
      counts[p.category] = (counts[p.category] || 0) + 1;
    });
    return counts;
  }, [products, query, badgeSet]);

  const activeFilters = cats.size + badgeSet.size + (query ? 1 : 0);

  return (
    <div className="view">
      <div className="section" style={{ borderTop: "none" }}>
        <div style={{ padding: "48px var(--pad) 32px" }}>
          <Kicker>FIG.05 · {ko ? "제품 카탈로그" : "Product catalog"} · {products.length} SKUs</Kicker>
          <h1 className="h-display">
            {ko ? (<React.Fragment>원하시는 것,<br /><em>만듭니다.</em></React.Fragment>) : (<React.Fragment>You crave.<br />We <em>craft.</em></React.Fragment>)}
          </h1>
          <p className="lede" style={{ marginTop: 16, maxWidth: "60ch" }}>
            {ko
              ? "중앙 주방에서 고객의 식탁까지. 육류, 소스, 밀키트 등 전체 카탈로그를 살펴보세요. 항목을 클릭하면 상세 정보를 확인할 수 있습니다."
              : "From our central kitchen to your table. Browse our full catalog of meats, sauces, meal kits, and more. Click any item for details."}
          </p>
          <p style={{ marginTop: 16, fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.04em", color: "var(--muted)", maxWidth: "60ch" }}>
            {ko
              ? "일부 제품은 계절별 또는 한정 수량으로 제공됩니다. 가용성, 가격 및 맞춤 주문에 대해서는 영업팀에 문의해 주세요: "
              : "Some items are seasonal or available in limited quantities. Contact our sales team at "}
            <a href="mailto:sales@modufoodservice.com" style={{ color: "var(--blue)" }}>sales@modufoodservice.com</a>
          </p>
        </div>
      </div>

      <div className="catalog-layout">
        <aside className="cat-side">
          <h4>{ko ? "검색" : "Search"}</h4>
          <div className="search" style={{ maxWidth: "none" }}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5">
              <circle cx="6" cy="6" r="4.5" />
              <path d="M9.5 9.5 L13 13" />
            </svg>
            <input
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder={ko ? "SKU, 제품명, 재료…" : "SKU, name, ingredient…"}
            />
          </div>

          <h4>{ko ? "카테고리" : "Category"}</h4>
          {categories.length === 0 ? (
            <div className="opt" style={{ color: "var(--muted)" }}>—</div>
          ) : categories.map((c) => (
            <div key={c} className="opt">
              <label>
                <input type="checkbox" checked={cats.has(c)} onChange={() => togCat(c)} />
                {c}
              </label>
              <span className="ct">{catCounts[c] || 0}</span>
            </div>
          ))}

          {badges.length > 0 && (
            <React.Fragment>
              <h4>{ko ? "등급 / 배지" : "Grade / Badge"}</h4>
              {badges.map((b) => (
                <div key={b} className="opt">
                  <label>
                    <input type="checkbox" checked={badgeSet.has(b)} onChange={() => togBadge(b)} />
                    {b}
                  </label>
                </div>
              ))}
            </React.Fragment>
          )}

          <button className="clear" onClick={clearAll}>{ko ? "필터 초기화" : "Clear all filters"}</button>
        </aside>

        <main className="cat-main">
          <div className="cat-toolbar">
            <div className="cat-count">
              <span style={{ color: "var(--ink)", fontFamily: "var(--font-mono)", fontSize: 13 }}>{String(filtered.length).padStart(3, "0")}</span>
              {" / "}{products.length} {ko ? "결과" : "results"}
              {activeFilters > 0 && (
                <button onClick={clearAll} style={{ background: "none", border: "none", color: "var(--blue)", marginLeft: 12, font: "inherit", letterSpacing: "inherit", textTransform: "inherit", cursor: "pointer" }}>
                  ↺ {ko ? "초기화" : "reset"}
                </button>
              )}
            </div>
            <select className="sort-select" value={sort} onChange={(e) => setSort(e.target.value)}>
              <option value="rel">{ko ? "정렬 · 추천" : "Sort · Featured"}</option>
              <option value="name">{ko ? "정렬 · 이름순" : "Sort · Name A→Z"}</option>
              <option value="sku">{ko ? "정렬 · SKU" : "Sort · SKU"}</option>
              <option value="price">{ko ? "정렬 · 가격" : "Sort · Price"}</option>
            </select>
          </div>

          {loading ? (
            <div className="empty">{ko ? "— 카탈로그 로딩 중…" : "— Loading catalog…"}</div>
          ) : error ? (
            <div className="empty">{ko ? "— 제품을 불러올 수 없습니다." : "— Unable to load products."} {error}</div>
          ) : (
            <React.Fragment>
              <div className="cat-table real">
                <div className="cat-row head">
                  <span />
                  <span className="col-hide">SKU</span>
                  <span>{ko ? "제품" : "Product"}</span>
                  <span className="col-hide">{ko ? "카테고리" : "Category"}</span>
                  <span className="col-hide">{ko ? "배지" : "Badge"}</span>
                  <span>{ko ? "가격" : "Price"}</span>
                  <span className="col-hide" />
                </div>
                {filtered.map((p) => (
                  <div key={p.id} className="cat-row body" onClick={() => onPick(p)}>
                    <div className="thumb">
                      {p.image ? <img src={p.image} alt={pName(p)} loading="lazy" /> : null}
                    </div>
                    <span className="sku col-hide">{p.sku}</span>
                    <div>
                      <div className="nm">{pName(p)}</div>
                      {pNote(p) ? <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>{pNote(p)}</div> : null}
                    </div>
                    <span className="ct col-hide">{p.category}</span>
                    <span className="col-hide">
                      {p.badge ? <span className="badge blue">{p.badge}</span> : <span style={{ color: "var(--muted)" }}>—</span>}
                    </span>
                    <span className="price">{fmtPrice(p.price) || "—"}</span>
                    <span className="more col-hide">SPEC →</span>
                  </div>
                ))}
                {filtered.length === 0 && (
                  <div className="empty">{ko ? "— 결과가 없습니다. 필터를 줄이거나 검색어를 변경해 보세요." : "— No results. Try clearing a filter or broadening your search."}</div>
                )}
              </div>

              <div style={{ marginTop: 24, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--muted)" }}>
                {ko ? "카탈로그 끝" : "END OF CATALOG"} · {products.length} SKUS · {ko ? "계절 품목은 변동 가능" : "SEASONAL ITEMS MAY VARY"} · <a href="mailto:sales@modufoodservice.com" style={{ color: "var(--blue)" }}>SALES@MODUFOODSERVICE.COM</a>
              </div>
            </React.Fragment>
          )}
        </main>
      </div>
    </div>
  );
}

function ProductDrawer({ product, onClose, lang }) {
  const ko = lang === "ko";
  const open = !!product;
  React.useEffect(() => {
    function onKey(e) { if (e.key === "Escape") onClose(); }
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [onClose]);

  function pName(p) { return (ko && p.name_ko) ? p.name_ko : p.name; }
  function pNote(p) { return (ko && p.note_ko) ? p.note_ko : p.note; }

  return (
    <React.Fragment>
      <div className={"drawer-scrim " + (open ? "open" : "")} onClick={onClose} />
      <aside className={"drawer " + (open ? "open" : "")} aria-hidden={!open}>
        {product && (
          <React.Fragment>
            <div className="drawer-head">
              <span className="sku">{product.sku}</span>
              <button className="drawer-close" onClick={onClose}>{ko ? "닫기" : "Close"} ✕</button>
            </div>
            <div className="drawer-body">
              <div className={"drawer-img" + (product.image ? " has-photo" : "")}>
                {product.image
                  ? <img src={product.image} alt={pName(product)} />
                  : (
                    <div className="lbl">
                      FIG.SPEC<br />
                      [ {pName(product)} ]
                    </div>
                  )}
              </div>
              <div className="kicker" style={{ marginBottom: 8 }}>{product.category}</div>
              <h3>{pName(product)}</h3>
              {pNote(product) ? <p className="note">{pNote(product)}</p> : null}

              <div className="spec-table">
                <div className="r"><div className="k">{ko ? "카테고리" : "Category"}</div><div>{product.category}</div></div>
                {product.pid ? <div className="r"><div className="k">{ko ? "제품 ID" : "Product ID"}</div><div>{product.pid}</div></div> : null}
                <div className="r"><div className="k">{ko ? "SKU / 사양" : "SKU / Specs"}</div><div>{product.sku}</div></div>
                {product.badge ? (
                  <div className="r">
                    <div className="k">{ko ? "등급" : "Grade"}</div>
                    <div className="badges"><span className="badge blue">{product.badge}</span></div>
                  </div>
                ) : null}
                {fmtPrice(product.price) ? <div className="r"><div className="k">{ko ? "가격" : "Price"}</div><div>{fmtPrice(product.price)}</div></div> : null}
                <div className="r"><div className="k">{ko ? "자체 브랜드" : "White-label"}</div><div>{ko ? "가능 — 영업팀 문의" : "Available — talk to sales"}</div></div>
              </div>

              <div style={{ display: "flex", gap: 10, marginTop: 28 }}>
                <a
                  className="cta"
                  href={"mailto:sales@modufoodservice.com?subject=" + encodeURIComponent((ko ? "샘플 요청 — " : "Sample request — ") + product.name)}
                >
                  {ko ? "샘플 요청" : "Request sample"} →
                </a>
              </div>

              <div style={{
                marginTop: 32, padding: "16px 0",
                borderTop: "1px solid var(--rule)",
                fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em",
                textTransform: "uppercase", color: "var(--muted)",
                display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8
              }}>
                <span>DOC // {product.sku}</span>
                <span style={{ textAlign: "right" }}>REV 2026.Q2</span>
              </div>
            </div>
          </React.Fragment>
        )}
      </aside>
    </React.Fragment>
  );
}

Object.assign(window, { CatalogView, ProductDrawer });