/* ============================================================
   DIOTBRAND — Shop + Product Detail Page
   ============================================================ */
function FilterGroup({ title, children, open = true }) {
  const [o, setO] = useState(open);
  return (
    <div className="fgroup">
      <button className="fgroup-h" onClick={() => setO(!o)}>
        <span>{title}</span><Icon name={o ? "minus" : "plus"} size={16} />
      </button>
      {o && <div className="fgroup-body">{children}</div>}
    </div>
  );
}

function ShopPage({ route, onNav }) {
  const p0 = route.params || {};
  const [cat, setCat] = useState(p0.cat || null);

  useEffect(() => { setCat((route.params || {}).cat || null); }, [route]);

  const list = RB.PRODUCTS.filter((p) => !cat || p.cat === cat);
  const clearAll = () => setCat(null);
  const heading = cat || "All Pieces";

  return (
    <div className="fade-page shop-page">
      <div className="shop-hero">
        <div className="wrap-wide">
          <h1 className="serif shop-title">{heading}</h1>
          <p className="shop-sub">{list.length} piece{list.length === 1 ? "" : "s"} · Made to measure in Lagos · Enquire for pricing</p>
        </div>
      </div>

      <div className="wrap-wide shop-body">
        <aside className="shop-filters">
          <div className="spread" style={{ marginBottom: 8 }}>
            <span className="eyebrow muted">Refine</span>
            {cat && <button className="clear-btn" onClick={clearAll}>Clear</button>}
          </div>
          <FilterGroup title="Category">
            <button className={"fcheck" + (!cat ? " on" : "")} onClick={() => setCat(null)}>All categories</button>
            {RB.CATEGORIES.map((c) => (
              <button key={c} className={"fcheck" + (cat === c ? " on" : "")} onClick={() => setCat(c)}>{c}</button>
            ))}
          </FilterGroup>
        </aside>

        <div className="shop-main">
          <div className="shop-cats-mob" role="tablist" aria-label="Categories">
            <button className={"cat-pill" + (!cat ? " on" : "")} onClick={() => setCat(null)}>All</button>
            {RB.CATEGORIES.map((c) => (
              <button key={c} className={"cat-pill" + (cat === c ? " on" : "")} onClick={() => setCat(c)}>{c}</button>
            ))}
          </div>
          <div className="shop-toolbar">
            <div className="active-chips">
              {cat && <button className="achip" onClick={() => setCat(null)}>{cat} <Icon name="close" size={13} /></button>}
            </div>
          </div>

          {list.length === 0 ? (
            <div className="shop-empty">
              <p className="serif" style={{ fontSize: 28 }}>No pieces in this category yet.</p>
              <Btn variant="ghost" arrow={false} onClick={clearAll}>Clear filters</Btn>
            </div>
          ) : (
            <div className="product-grid shop-grid">
              {list.map((p, i) => (
                <Reveal key={p.id} delay={(i % 4) + 1}>
                  <ProductCard p={p} onNav={onNav} />
                </Reveal>
              ))}
            </div>
          )}

          <div className="shop-editorial">
            <div className="shop-editorial-body">
              <Eyebrow line>Don't see exactly what you want?</Eyebrow>
              <h3 className="serif" style={{ fontSize: 30, fontWeight: 500, margin: "12px 0 14px" }}>Commission it</h3>
              <p style={{ color: "var(--ink-soft)" }}>Every piece here can be a starting point for a custom commission — describe your vision and add any of these as inspiration.</p>
              <button className="link-arrow" style={{ marginTop: 18 }} onClick={() => onNav("custom", {})}>Start a custom order</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------------- PDP ---------------- */
function ProductPage({ route, onNav }) {
  const p = RB.byId(route.params.id) || RB.PRODUCTS[0];
  useEffect(() => { window.scrollTo({ top: 0, behavior: "smooth" }); }, [route.params.id]);

  const rel = RB.related(p, 4);

  return (
    <div className="fade-page pdp">
      <div className="wrap-wide pdp-grid">
        <div className="pdp-gallery" style={{ gridTemplateColumns: "1fr" }}>
          <div className="pdp-main-img zoomable">
            <Ph label={p.label} ratio="tall" />
          </div>
        </div>

        <div className="pdp-info">
          <Eyebrow>{p.cat}</Eyebrow>
          <h1 className="serif pdp-title">{p.name}</h1>
          <p className="pdp-blurb">{p.blurb}</p>
          <p style={{ color: "var(--ink-soft)", fontSize: 14, marginBottom: 24 }}><strong>Fabric &amp; construction:</strong> {p.fabric}</p>

          <div className="pdp-buy">
            <Btn block arrow={false} onClick={() => onNav("custom", { inspiration: p.name })}>Request consultation</Btn>
          </div>
        </div>
      </div>

      {rel.length > 0 && <FeaturedRow eyebrow="More from the studio" title="You may also like" products={rel} onNav={onNav} link={{ cat: p.cat }} />}
    </div>
  );
}

Object.assign(window, { ShopPage, ProductPage });