// Product detail page + Category listing page

function ProductPage({ id, navigate, addToCart }) {
  const p = window.BBOC_DATA.products.find((x) => x.id === id);
  if (!p) return <div className="container" style={{ padding: 80 }}>Not found.</div>;

  const [activeImg, setActiveImg] = useState(0);
  const [color, setColor] = useState(p.colorways[0]);
  const apparel = p.category === "apparel";
  const sizes = apparel ? ["XS", "S", "M", "L", "XL", "XXL"] : null;
  const [size, setSize] = useState(apparel ? "M" : null);
  const [qty, setQty] = useState(1);
  const [openSpec, setOpenSpec] = useState(true);
  const [openShip, setOpenShip] = useState(false);
  const [openCare, setOpenCare] = useState(false);

  const related = window.BBOC_DATA.products.filter((x) => x.id !== p.id && x.category === p.category).slice(0, 4);
  const fallback = window.BBOC_DATA.products.filter((x) => x.id !== p.id).slice(0, 4);
  const relatedFinal = related.length >= 4 ? related : [...related, ...fallback.filter((f) => !related.includes(f))].slice(0, 4);

  useEffect(() => {
    window.scrollTo(0, 0);
    setActiveImg(0);
    setColor(p.colorways[0]);
  }, [id]);

  const handleAdd = () => {
    addToCart(p, { color, size, qty });
  };

  return (
    <main className="pdp">
      <div className="container">
        <nav className="crumbs">
          <a href="#" onClick={(e) => { e.preventDefault(); navigate({ name: "home" }); }}>Home</a>
          <span>/</span>
          <a href="#" onClick={(e) => { e.preventDefault(); navigate({ name: "category", id: p.category }); }}>{p.categoryName}</a>
          <span>/</span>
          <span className="crumbs-current">{p.name}</span>
        </nav>

        <div className="pdp-grid">
          <div className="pdp-gallery">
            <div className="pdp-thumbs">
              {Array.from({ length: p.images }).map((_, i) => (
                <button
                  key={i}
                  className={`pdp-thumb ${i === activeImg ? "is-active" : ""}`}
                  onClick={() => setActiveImg(i)}
                >
                  <Placeholder label={`view ${i + 1}`} hue={p.hue + i * 6} ratio="1/1" />
                </button>
              ))}
            </div>
            <div className="pdp-main-img">
              <Placeholder
                label={`${p.name} · view ${activeImg + 1}`}
                hue={p.hue + activeImg * 6}
                ratio="4/5"
                accent={activeImg === 0}
              />
              {p.tag ? <div className="pdp-tag">{p.tag}</div> : null}
            </div>
          </div>

          <div className="pdp-info">
            <div className="pdp-cat">{p.categoryName}</div>
            <h1 className="pdp-title">{p.name}</h1>
            <div className="pdp-price-row">
              <div className="pdp-price">{fmtPrice(p.price)}</div>
              {p.compareAt ? <div className="pdp-compare">{fmtPrice(p.compareAt)}</div> : null}
              <div className="pdp-rating">
                <span className="stars">
                  {[0, 1, 2, 3, 4].map((i) => (
                    <Icon.star key={i} />
                  ))}
                </span>
                <span className="pdp-rating-count">(247 reviews)</span>
              </div>
            </div>

            <p className="pdp-blurb">{p.blurb}</p>

            <div className="pdp-opt">
              <div className="pdp-opt-label">
                COLOR <span className="pdp-opt-val">{color}</span>
              </div>
              <div className="pdp-colorways">
                {p.colorways.map((c) => (
                  <button
                    key={c}
                    className={`cw cw--lg ${c === color ? "is-active" : ""}`}
                    onClick={() => setColor(c)}
                  >
                    <span className={`cw-dot cw-${c.toLowerCase().replace(/[^a-z]/g, "")}`} />
                    <span className="cw-name">{c}</span>
                  </button>
                ))}
              </div>
            </div>

            {sizes ? (
              <div className="pdp-opt">
                <div className="pdp-opt-label">
                  SIZE <a href="#" className="link-quiet">Size guide</a>
                </div>
                <div className="size-row">
                  {sizes.map((s) => (
                    <button
                      key={s}
                      className={`size-btn ${s === size ? "is-active" : ""}`}
                      onClick={() => setSize(s)}
                    >
                      {s}
                    </button>
                  ))}
                </div>
              </div>
            ) : null}

            <div className="pdp-actions">
              <div className="qty qty--lg">
                <button onClick={() => setQty(Math.max(1, qty - 1))}>
                  <Icon.minus />
                </button>
                <span>{qty}</span>
                <button onClick={() => setQty(qty + 1)}>
                  <Icon.plus />
                </button>
              </div>
              <button className="btn btn-primary btn-lg btn-block" onClick={handleAdd}>
                ADD TO BAG — {fmtPrice(p.price * qty)}
              </button>
            </div>

            <div className="pdp-perks">
              <div className="pdp-perk">
                <div className="pdp-perk-icon">◇</div>
                <div>
                  <div className="pdp-perk-title">Free shipping over $150</div>
                  <div className="pdp-perk-sub">Insured, tracked, hand-packed</div>
                </div>
              </div>
              <div className="pdp-perk">
                <div className="pdp-perk-icon">↺</div>
                <div>
                  <div className="pdp-perk-title">30-day returns</div>
                  <div className="pdp-perk-sub">No questions on unworn pieces</div>
                </div>
              </div>
              <div className="pdp-perk">
                <div className="pdp-perk-icon">◈</div>
                <div>
                  <div className="pdp-perk-title">Built to last</div>
                  <div className="pdp-perk-sub">Lifetime repair on apparel</div>
                </div>
              </div>
            </div>

            <div className="pdp-acc">
              <button className="pdp-acc-head" onClick={() => setOpenSpec(!openSpec)}>
                <span>SPECIFICATIONS</span>
                <span className="pdp-acc-toggle">{openSpec ? "—" : "+"}</span>
              </button>
              {openSpec ? (
                <div className="pdp-acc-body">
                  <dl className="specs">
                    {p.specs.map(([k, v]) => (
                      <div className="spec-row" key={k}>
                        <dt>{k}</dt>
                        <dd>{v}</dd>
                      </div>
                    ))}
                  </dl>
                </div>
              ) : null}

              <button className="pdp-acc-head" onClick={() => setOpenShip(!openShip)}>
                <span>SHIPPING & RETURNS</span>
                <span className="pdp-acc-toggle">{openShip ? "—" : "+"}</span>
              </button>
              {openShip ? (
                <div className="pdp-acc-body">
                  <p>
                    Ships in 2–3 business days from Orange County, CA. Every glass piece is bubble-wrapped, double-boxed,
                    and insured. Returns accepted within 30 days for unused, unworn items in original packaging.
                  </p>
                </div>
              ) : null}

              <button className="pdp-acc-head" onClick={() => setOpenCare(!openCare)}>
                <span>CARE</span>
                <span className="pdp-acc-toggle">{openCare ? "—" : "+"}</span>
              </button>
              {openCare ? (
                <div className="pdp-acc-body">
                  <p>
                    Glass: clean with isopropyl + coarse salt. Avoid thermal shock. Apparel: cold wash, hang dry, inside
                    out. The longer you take care of it, the longer it lives with you.
                  </p>
                </div>
              ) : null}
            </div>
          </div>
        </div>

        <section className="pdp-reviews">
          <div className="section-head section-head--row">
            <div>
              <div className="eyebrow">— REVIEWS</div>
              <h2 className="section-title">FROM THE STREETS.</h2>
            </div>
            <div className="reviews-summary">
              <div className="reviews-summary-stars">
                <Icon.star /><Icon.star /><Icon.star /><Icon.star /><Icon.star />
              </div>
              <div className="reviews-summary-text">4.9 average · 247 reviews</div>
            </div>
          </div>
          <div className="reviews-grid">
            {window.BBOC_DATA.reviews.map((r, i) => (
              <article key={i} className="review">
                <div className="review-stars">
                  {Array.from({ length: r.stars }).map((_, k) => (
                    <Icon.star key={k} />
                  ))}
                </div>
                <p className="review-body">{r.body}</p>
                <div className="review-cite">
                  <div className="review-name">{r.name}</div>
                  <div className="review-loc">{r.city} · Verified buyer</div>
                </div>
              </article>
            ))}
          </div>
        </section>

        <section className="pdp-related">
          <div className="section-head section-head--row">
            <div>
              <div className="eyebrow">— YOU MIGHT ALSO LIKE</div>
              <h2 className="section-title">FROM THE SAME LANE.</h2>
            </div>
          </div>
          <div className="pgrid">
            {relatedFinal.map((rp) => (
              <ProductCard key={rp.id} p={rp} navigate={navigate} addToCart={addToCart} />
            ))}
          </div>
        </section>
      </div>

      <Footer navigate={navigate} />
    </main>
  );
}

function CategoryPage({ id, navigate, addToCart }) {
  const all = window.BBOC_DATA.products;
  let list = all;
  let title = "All Products";
  let blurb = "Everything, all at once.";

  if (id === "glass") { list = all.filter((p) => p.category === "glass"); title = "Glass Dab Rigs"; blurb = "Quality dabrigs at BrokeBois Prices! Dont break the bank for a new rig, save that for some quality honey!"; }
  else if (id === "apparel") { list = all.filter((p) => p.category === "apparel"); title = "Apparel"; blurb = "Heavyweight cut & sewn."; }
  else if (id === "accessories") { list = all.filter((p) => p.category === "accessories"); title = "Accessories"; blurb = "The supporting cast. Just as essential."; }
  else if (id === "drops") { list = all.filter((p) => p.tag === "DROP 04" || p.tag === "NEW" || p.tag === "LIMITED"); title = "Mystery Box"; blurb = " "; }
  else if (id === "sale") { list = all.filter((p) => p.compareAt); title = "Sale"; blurb = "Discounted heat from past seasons. Once they're gone."; }

  const [sort, setSort] = useState("featured");
  const [filter, setFilter] = useState("all");

  let sorted = [...list];
  if (filter !== "all") sorted = sorted.filter((p) => p.category === filter);
  if (sort === "price-asc") sorted.sort((a, b) => a.price - b.price);
  if (sort === "price-desc") sorted.sort((a, b) => b.price - a.price);
  if (sort === "name") sorted.sort((a, b) => a.name.localeCompare(b.name));

  useEffect(() => { window.scrollTo(0, 0); }, [id]);

  return (
    <main className="cat">
      <section className="cat-hero">
        <div className="container">
          <div className="crumbs">
            <a href="#" onClick={(e) => { e.preventDefault(); navigate({ name: "home" }); }}>Home</a>
            <span>/</span>
            <span className="crumbs-current">{title}</span>
          </div>
          <div className="cat-hero-row">
            <div>
              <div className="eyebrow">— SHOP</div>
              <h1 className="cat-hero-title">{title.toUpperCase()}.</h1>
              <p className="cat-hero-blurb">{blurb}</p>
            </div>
            <div className="cat-hero-meta">
              <div className="cat-hero-num">{String(sorted.length).padStart(2, "0")}</div>
              <div className="cat-hero-num-label">pieces<br />in stock</div>
            </div>
          </div>
        </div>
      </section>

      <section className="cat-list">
        <div className="container">
          {/* <div className="cat-toolbar">
            <div className="cat-filters">
              {[
                ["all", "All"],
                ["glass", "Glass"],
                ["apparel", "Apparel"],
                ["accessories", "Accessories"],
              ].map(([k, l]) => (
                <button
                  key={k}
                  className={`chip ${filter === k ? "is-active" : ""}`}
                  onClick={() => setFilter(k)}
                >
                  {l}
                </button>
              ))}
            </div>
            <div className="cat-sort">
              <label>Sort</label>
              <select value={sort} onChange={(e) => setSort(e.target.value)}>
                <option value="featured">Featured</option>
                <option value="price-asc">Price: Low → High</option>
                <option value="price-desc">Price: High → Low</option>
                <option value="name">A → Z</option>
              </select>
            </div>
          </div> */}

          {sorted.length === 0 ? (
            <div className="cat-empty">
              <div className="eyebrow">Nothing here</div>
              <h3>No pieces match that filter.</h3>
              <button className="btn btn-ghost" onClick={() => setFilter("all")}>RESET FILTERS</button>
            </div>
          ) : (
            <div className="pgrid">
              {sorted.map((p) => (
                <ProductCard key={p.id} p={p} navigate={navigate} addToCart={addToCart} />
              ))}
            </div>
          )}
        </div>
      </section>

      <Footer navigate={navigate} />
    </main>
  );
}

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