// CoolSouq Marketplace — Catalog / search results screen.
const NSc = window.CoolSouqDesignSystem_f4ec4c;

function FilterFacet({ title, children, defaultOpen = true }) {
  const [open, setOpen] = React.useState(defaultOpen);
  return (
    <div style={{ borderBottom: "1px solid var(--border-faint)", padding: "16px 0" }}>
      <button onClick={() => setOpen(o => !o)} style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", background: "none", border: "none", padding: 0, cursor: "pointer", fontFamily: "var(--font-display)", fontSize: 14, fontWeight: 600, color: "var(--text-strong)", letterSpacing: "-0.01em" }}>
        {title}
        <span style={{ display: "inline-flex", transform: open ? "rotate(180deg)" : "none", transition: "transform .15s", color: "var(--text-faint)" }}>{window.CS_I.chevron}</span>
      </button>
      {open && <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 11 }}>{children}</div>}
    </div>
  );
}

function CatalogScreen({ query, onOpenProduct, onCompare, compareIds }) {
  const { Checkbox, Select, Tag, Switch, Badge, ProductCard, Pagination } = NSc;
  const [stockOnly, setStockOnly] = React.useState(false);
  const [verified, setVerified] = React.useState(true);
  const [page, setPage] = React.useState(1);
  const [kw, setKw] = React.useState(800);
  const [saved, setSaved] = React.useState({});
  const products = window.CS_PRODUCTS;
  const activeChips = ["Chillers", "Air-cooled", "R410A", "Used", "UAE"];

  return (
    <div style={{ background: "var(--bg-page)", minHeight: "70vh" }}>
      {/* breadcrumb + result head */}
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "20px 24px 0" }}>
        <div style={{ fontFamily: "var(--font-sans)", fontSize: 12.5, color: "var(--text-muted)", display: "flex", gap: 8, alignItems: "center" }}>
          <span style={{ cursor: "pointer" }}>Home</span><span style={{ color: "var(--text-faint)" }}>›</span>
          <span style={{ cursor: "pointer" }}>Chillers</span><span style={{ color: "var(--text-faint)" }}>›</span>
          <span style={{ color: "var(--text-strong)", fontWeight: 600 }}>Air-cooled chillers</span>
        </div>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginTop: 12, flexWrap: "wrap", gap: 12 }}>
          <div>
            <h1 style={{ fontFamily: "var(--font-display)", fontSize: 30, fontWeight: 700, color: "var(--text-strong)", margin: 0, letterSpacing: "-0.02em" }}>
              {query ? `“${query}”` : "Air-cooled chillers"}
            </h1>
            <div style={{ fontFamily: "var(--font-sans)", fontSize: 13.5, color: "var(--text-muted)", marginTop: 4 }}>
              <strong style={{ fontFamily: "var(--font-mono)", color: "var(--text-body)" }}>1,284</strong> listings · <strong style={{ fontFamily: "var(--font-mono)", color: "var(--text-body)" }}>312</strong> in stock now
            </div>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <Switch label="In stock only" checked={stockOnly} onChange={e => setStockOnly(e.target.checked)} />
            <div style={{ width: 200 }}><Select options={[{ value: "rel", label: "Sort: Relevance" }, { value: "p1", label: "Lowest price" }, { value: "p2", label: "Highest capacity" }, { value: "y", label: "Newest year" }]} /></div>
          </div>
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 16, alignItems: "center" }}>
          {activeChips.map(c => <Tag key={c} selected onRemove={() => {}}>{c}</Tag>)}
          <button style={{ background: "none", border: "none", color: "var(--text-link)", fontFamily: "var(--font-sans)", fontSize: 12.5, fontWeight: 600, cursor: "pointer" }}>Clear all</button>
        </div>
      </div>

      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "20px 24px 48px", display: "grid", gridTemplateColumns: "264px 1fr", gap: 28, alignItems: "start" }}>
        {/* Filter rail */}
        <aside style={{ background: "var(--surface-card)", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", padding: "4px 18px 12px", position: "sticky", top: 134 }}>
          <FilterFacet title="Equipment type">
            {[["Air-cooled chiller", 824], ["Water-cooled chiller", 460], ["Absorption", 38], ["Modular", 112]].map(([l, n], i) =>
              <Checkbox key={l} label={l} count={n} checked={i === 0} onChange={() => {}} />)}
          </FilterFacet>
          <FilterFacet title="Cooling capacity">
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-body)", display: "flex", justifyContent: "space-between" }}>
              <span>50 kW</span><span style={{ color: "var(--accent-ink)", fontWeight: 600 }}>≤ {kw} kW</span><span>2000 kW</span>
            </div>
            <input type="range" min={50} max={2000} step={10} value={kw} onChange={e => setKw(+e.target.value)} style={{ width: "100%", accentColor: "var(--brand)" }} />
          </FilterFacet>
          <FilterFacet title="Refrigerant">
            {[["R410A", 512], ["R134a", 388], ["R32", 96], ["R513A", 41]].map(([l, n], i) =>
              <Checkbox key={l} label={l} count={n} checked={i < 2} onChange={() => {}} />)}
          </FilterFacet>
          <FilterFacet title="Condition" defaultOpen={false}>
            {["New", "Refurbished", "Used", "For parts"].map(l => <Checkbox key={l} label={l} checked={l === "Used"} onChange={() => {}} />)}
          </FilterFacet>
          <FilterFacet title="Seller">
            <Switch label="Verified dealers only" checked={verified} onChange={e => setVerified(e.target.checked)} />
          </FilterFacet>
        </aside>

        {/* Result grid */}
        <div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
            {products.map(p => (
              <ProductCard key={p.id} {...p} saved={!!saved[p.id]} onSave={() => setSaved(s => ({ ...s, [p.id]: !s[p.id] }))}
                onCta={() => onOpenProduct(p)} href="#" onClick={() => onOpenProduct(p)}
                compareChecked={compareIds.includes(p.id)} onCompare={() => onCompare(p.id)}
                style={{ cursor: "pointer" }} onClickCapture={() => {}} />
            ))}
          </div>
          <div style={{ display: "flex", justifyContent: "center", marginTop: 32 }}>
            <Pagination page={page} total={37} onChange={setPage} />
          </div>
        </div>
      </div>
    </div>
  );
}
window.CatalogScreen = CatalogScreen;