/* ============================================================
   RACK & BOX — Shop / Collections + Product Detail Page
   ============================================================ */

/* ---------------- SHOP ---------------- */
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 { addToCart, toggleWish, wishlist } = useContext(RBCtx);
  const p0 = route.params || {};
  const [cat, setCat] = useState(p0.cat || null);
  const [occasion, setOccasion] = useState(p0.occasion || null);
  const [gender, setGender] = useState(p0.gender || null);
  const [maxPrice, setMaxPrice] = useState(1000000);
  const [sort, setSort] = useState("new");
  const [mobFilters, setMobFilters] = useState(false);

  useEffect(() => {
    const p = route.params || {};
    setCat(p.cat || null); setOccasion(p.occasion || null); setGender(p.gender || null);
  }, [route]);

  let list = RB.PRODUCTS.filter((p) =>
    (!cat || p.cat === cat) &&
    (!occasion || p.occasion.includes(occasion)) &&
    (!gender || p.gender === gender) &&
    p.price <= maxPrice
  );
  if (sort === "low") list = [...list].sort((a, b) => a.price - b.price);
  if (sort === "high") list = [...list].sort((a, b) => b.price - a.price);
  if (sort === "new") list = [...list].sort((a, b) => (b.badge === "New" ? 1 : 0) - (a.badge === "New" ? 1 : 0));

  const clearAll = () => { setCat(null); setOccasion(null); setGender(null); setMaxPrice(1000000); };
  const heading = occasion || (cat ? cat + (cat.endsWith("s") ? "" : "s") : gender ? gender + "'s Edit" : "All Products");
  const activeCount = [cat, occasion, gender].filter(Boolean).length;

  const Filters = () => (
    <>
      <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>
      <FilterGroup title="Occasion">
        <button className={"fcheck" + (!occasion ? " on" : "")} onClick={() => setOccasion(null)}>Any occasion</button>
        {RB.OCCASIONS.map((o) => (
          <button key={o} className={"fcheck" + (occasion === o ? " on" : "")} onClick={() => setOccasion(o)}>{o}</button>
        ))}
      </FilterGroup>
      <FilterGroup title="Wear">
        {["Men", "Women"].map((g) => (
          <button key={g} className={"fcheck" + (gender === g ? " on" : "")} onClick={() => setGender(gender === g ? null : g)}>{g}swear</button>
        ))}
      </FilterGroup>
      <FilterGroup title="Price">
        <div className="price-range">
          <input type="range" min="80000" max="1000000" step="10000" value={maxPrice} onChange={(e) => setMaxPrice(+e.target.value)} />
          <div className="spread" style={{ fontSize: 13, color: "var(--ink-soft)" }}>
            <span>Up to</span><Price ngn={maxPrice} />
          </div>
        </div>
      </FilterGroup>
    </>
  );

  return (
    <div className="fade-page shop-page">
      <div className="shop-hero">
        <div className="wrap-wide">
          <div className="crumb"><button onClick={() => onNav("home", {})}>Home</button> / <span>Shop</span></div>
          <h1 className="serif shop-title">{heading}</h1>
          <p className="shop-sub">{list.length} pieces · Handcrafted in Nigeria · Worldwide shipping</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>
            {activeCount > 0 && <button className="clear-btn" onClick={clearAll}>Clear all</button>}
          </div>
          <Filters />
          <div className="filter-help">
            <Icon name="ruler" size={20} />
            <div><strong>Not sure on size?</strong><span>Try our Fit Finder on any product.</span></div>
          </div>
        </aside>

        <div className="shop-main">
          <div className="shop-toolbar">
            <div className="active-chips">
              {cat && <button className="achip" onClick={() => setCat(null)}>{cat} <Icon name="close" size={13} /></button>}
              {occasion && <button className="achip" onClick={() => setOccasion(null)}>{occasion} <Icon name="close" size={13} /></button>}
              {gender && <button className="achip" onClick={() => setGender(null)}>{gender}swear <Icon name="close" size={13} /></button>}
            </div>
            <div className="row" style={{ gap: 12 }}>
              <button className="mob-filter-btn" onClick={() => setMobFilters(true)}><Icon name="menu" size={16} /> Filters{activeCount ? ` (${activeCount})` : ""}</button>
              <div className="sort-wrap">
                <label>Sort</label>
                <select className="sort-select" value={sort} onChange={(e) => setSort(e.target.value)}>
                  <option value="new">Newest</option>
                  <option value="low">Price: Low to High</option>
                  <option value="high">Price: High to Low</option>
                </select>
              </div>
            </div>
          </div>

          {list.length === 0 ? (
            <div className="shop-empty">
              <p className="serif" style={{ fontSize: 28 }}>No pieces match those filters.</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} onAdd={addToCart} wished={wishlist.includes(p.id)} onWish={toggleWish} />
                </Reveal>
              ))}
            </div>
          )}

          <div className="shop-editorial">
            <div className="zoomable" style={{ overflow: "hidden", borderRadius: "var(--radius)" }}><Ph label="EDIT · STYLED LOOK" ratio="wide" /></div>
            <div className="shop-editorial-body">
              <Eyebrow line>Styling note</Eyebrow>
              <h3 className="serif" style={{ fontSize: 30, fontWeight: 500, margin: "12px 0 14px" }}>How to wear it</h3>
              <p style={{ color: "var(--ink-soft)" }}>Style it with a sculptural gele and statement earrings for owambe, or pared-back with a sleek updo for the aisle. Our designers can tailor the neckline, beadwork and length entirely to you.</p>
              <button className="link-arrow" style={{ marginTop: 18 }} onClick={() => onNav("shop", {})}>Browse the collection</button>
            </div>
          </div>
        </div>
      </div>

      {mobFilters && (
        <div className="filter-drawer-wrap">
          <div className="scrim show" onClick={() => setMobFilters(false)} />
          <div className="filter-drawer">
            <div className="spread" style={{ marginBottom: 20 }}>
              <span className="serif" style={{ fontSize: 24 }}>Filters</span>
              <button className="ic-btn" onClick={() => setMobFilters(false)}><Icon name="close" /></button>
            </div>
            <Filters />
            <Btn block style={{ marginTop: 20 }} arrow={false} onClick={() => setMobFilters(false)}>Show {list.length} results</Btn>
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------------- SIZE GUIDE MODAL ---------------- */
function SizeGuide({ onClose, gender }) {
  const rows = gender === "Women"
    ? [["UK 6", "31\"", "24\"", "34\""], ["UK 8", "33\"", "26\"", "36\""], ["UK 10", "35\"", "28\"", "38\""], ["UK 12", "37\"", "30\"", "40\""], ["UK 14", "39\"", "32\"", "42\""]]
    : [["S", "36-38\"", "30-32\"", "38\""], ["M", "39-41\"", "33-35\"", "40\""], ["L", "42-44\"", "36-38\"", "42\""], ["XL", "45-47\"", "39-41\"", "44\""], ["XXL", "48-50\"", "42-44\"", "46\""]];
  return (
    <div className="modal-wrap" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="spread" style={{ marginBottom: 18 }}>
          <div><Eyebrow>Size &amp; Fit</Eyebrow><h3 className="serif" style={{ fontSize: 28, marginTop: 6 }}>Size guide</h3></div>
          <button className="ic-btn" onClick={onClose}><Icon name="close" /></button>
        </div>
        <table className="size-table">
          <thead><tr><th>Size</th><th>Chest</th><th>Waist</th><th>Length</th></tr></thead>
          <tbody>{rows.map((r) => <tr key={r[0]}><td>{r[0]}</td><td>{r[1]}</td><td>{r[2]}</td><td>{r[3]}</td></tr>)}</tbody>
        </table>
        <p style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 16 }}>Measurements are a guide. For bridal and bespoke pieces we recommend a virtual consultation for an exact, made-to-measure fit.</p>
      </div>
    </div>
  );
}

/* ---------------- FIT FINDER ---------------- */
function FitFinder({ sizes, onPick }) {
  const [step, setStep] = useState(0);
  const [h, setH] = useState(""); const [w, setW] = useState(""); const [fit, setFit] = useState("Regular");
  const result = sizes[Math.min(sizes.length - 1, Math.max(0, (fit === "Relaxed" ? 1 : 0) + (parseInt(w) > 85 ? 3 : parseInt(w) > 75 ? 2 : 1)))];
  return (
    <div className="fitfinder">
      {step === 0 && (
        <div className="ff-step">
          <Icon name="ruler" size={24} />
          <div><strong>Find your perfect fit</strong><span>Answer 3 quick questions for a size recommendation.</span></div>
          <button className="ff-go" onClick={() => setStep(1)}>Start <Icon name="arrow" size={15} /></button>
        </div>
      )}
      {step === 1 && (
        <div className="ff-q">
          <label>Your height (cm)</label>
          <input className="input" type="number" placeholder="e.g. 178" value={h} onChange={(e) => setH(e.target.value)} />
          <label style={{ marginTop: 12 }}>Your weight (kg)</label>
          <input className="input" type="number" placeholder="e.g. 78" value={w} onChange={(e) => setW(e.target.value)} />
          <div className="row" style={{ gap: 8, marginTop: 14, flexWrap: "wrap" }}>
            {["Slim", "Regular", "Relaxed"].map((f) => <button key={f} className={"chip" + (fit === f ? " active" : "")} onClick={() => setFit(f)}>{f}</button>)}
          </div>
          <Btn block arrow={false} style={{ marginTop: 16 }} onClick={() => setStep(2)}>See my size</Btn>
        </div>
      )}
      {step === 2 && (
        <div className="ff-result">
          <span className="mono">Recommended</span>
          <span className="serif" style={{ fontSize: 44 }}>{result}</span>
          <p>Based on a {fit.toLowerCase()} fit. You can adjust at checkout.</p>
          <div className="row" style={{ gap: 10 }}>
            <Btn arrow={false} onClick={() => onPick(result)}>Select {result}</Btn>
            <button className="link-arrow" onClick={() => setStep(1)}>Redo</button>
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------------- PDP ---------------- */
function ProductPage({ route, onNav }) {
  const { addToCart, toggleWish, wishlist, openCart } = useContext(RBCtx);
  const p = RB.byId(route.params.id) || RB.PRODUCTS[0];
  const [size, setSize] = useState(null);
  const [color, setColor] = useState(p.colors[0]);
  const [qty, setQty] = useState(1);
  const [activeImg, setActiveImg] = useState(0);
  const [acc, setAcc] = useState("details");
  const [showSize, setShowSize] = useState(false);
  const [showFit, setShowFit] = useState(false);
  const [err, setErr] = useState(false);

  useEffect(() => {
    setSize(null); setColor(p.colors[0]); setQty(1); setActiveImg(0); setShowFit(false);
    window.scrollTo({ top: 0, behavior: "smooth" });
  }, [route.params.id]);

  const imgs = [p.label, "DETAIL · FABRIC", "BACK · " + p.cat.toUpperCase(), "STYLED · LOOK"];
  const add = () => {
    if (!size) { setErr(true); return; }
    addToCart(p, { size, color: color.name, qty });
    openCart();
  };
  const look = RB.completeLook(p);
  const rel = RB.related(p, 4);

  return (
    <div className="fade-page pdp">
      <div className="wrap-wide">
        <div className="crumb pdp-crumb">
          <button onClick={() => onNav("home", {})}>Home</button> / <button onClick={() => onNav("shop", { cat: p.cat })}>{p.cat}</button> / <span>{p.name}</span>
        </div>
      </div>

      <div className="wrap-wide pdp-grid">
        {/* gallery */}
        <div className="pdp-gallery">
          <div className="pdp-thumbs">
            {imgs.map((im, i) => (
              <button key={i} className={"pdp-thumb" + (activeImg === i ? " on" : "")} onClick={() => setActiveImg(i)}>
                <Ph label={im} ratio="portrait" />
              </button>
            ))}
          </div>
          <div className="pdp-main-img zoomable">
            {p.badge && <span className="pcard-tag" style={{ top: 18, left: 18 }}>{p.badge}</span>}
            <Ph label={imgs[activeImg]} ratio="tall" />
          </div>
        </div>

        {/* info */}
        <div className="pdp-info">
          <Eyebrow>{p.cat}</Eyebrow>
          <h1 className="serif pdp-title">{p.name}</h1>
          <div className="row" style={{ gap: 14, marginBottom: 16 }}>
            <Stars value={5} size={15} /><span style={{ fontSize: 13, color: "var(--ink-soft)" }}>48 reviews</span>
          </div>
          <div className="pdp-price"><Price ngn={p.price} old={p.oldPrice} /></div>
          <p className="pdp-blurb">{p.blurb}</p>

          <div className="pdp-opt">
            <div className="spread"><span className="opt-label">Colour — {color.name}</span></div>
            <div className="row" style={{ gap: 10, marginTop: 10 }}>
              {p.colors.map((c) => (
                <button key={c.name} className={"color-dot" + (color.name === c.name ? " on" : "")} style={{ background: c.hex }} onClick={() => setColor(c)} title={c.name} />
              ))}
            </div>
          </div>

          <div className="pdp-opt">
            <div className="spread">
              <span className="opt-label">Size{size ? ` — ${size}` : ""}</span>
              <button className="opt-link" onClick={() => setShowSize(true)}>Size guide</button>
            </div>
            <div className={"size-row" + (err ? " err" : "")} style={{ marginTop: 10 }}>
              {p.sizes.map((s) => (
                <button key={s} className={"size-btn" + (size === s ? " on" : "")} onClick={() => { setSize(s); setErr(false); }}>{s}</button>
              ))}
            </div>
            {err && <span className="size-err">Please select a size</span>}
            <button className="opt-link fit-toggle" onClick={() => setShowFit(!showFit)}><Icon name="ruler" size={15} /> {showFit ? "Hide" : "Use"} Fit Finder</button>
            {showFit && <FitFinder sizes={p.sizes} onPick={(s) => { setSize(s); setShowFit(false); setErr(false); }} />}
          </div>

          <div className="pdp-buy">
            <div className="qty">
              <button onClick={() => setQty(Math.max(1, qty - 1))}><Icon name="minus" size={15} /></button>
              <span>{qty}</span>
              <button onClick={() => setQty(qty + 1)}><Icon name="plus" size={15} /></button>
            </div>
            <Btn block arrow={false} onClick={add}>Add to bag — <Price ngn={p.price * qty} /></Btn>
            <button className={"pdp-wish" + (wishlist.includes(p.id) ? " on" : "")} onClick={() => toggleWish(p.id)} aria-label="Wishlist">
              <Icon name={wishlist.includes(p.id) ? "star-f" : "heart"} size={20} />
            </button>
          </div>
          <button className="pdp-bespoke" onClick={() => onNav("bespoke", {})}>
            <Icon name="scissors" size={18} /> Prefer it made-to-measure? <strong>Book a fitting →</strong>
          </button>

          <div className="pdp-assure">
            {[["truck", "Worldwide shipping"]].map(([ic, t]) => (
              <div key={t} className="assure-item"><Icon name={ic} size={18} /><span>{t}</span></div>
            ))}
          </div>

          {/* accordions */}
          <div className="pdp-acc">
            {[
              ["details", "Details", <ul className="acc-list"><li>{p.blurb}</li><li>Cut for a contemporary feminine silhouette</li><li>Designed &amp; hand-finished in Nigeria</li><li>Model is 5'9\" / 1.75m wearing size {p.sizes[1] || p.sizes[0]}</li></ul>],
              ["fabric", "Fabric & Care", <div><p style={{ marginBottom: 10 }}><strong>{p.fabric}</strong></p><p style={{ color: "var(--ink-soft)" }}>Dry clean only. Store on a padded hanger away from direct sunlight. Steam lightly to refresh between wears.</p></div>],
              ["shipping", "Shipping & Returns", <div><p style={{ marginBottom: 8 }}>Complimentary Port Harcourt &amp; Lagos delivery. Worldwide via tracked DHL Express (4–9 days).</p><p style={{ color: "var(--ink-soft)" }}>Ready-to-wear returnable within 14 days, unworn with tags. Bespoke pieces include one complimentary alteration.</p></div>],
            ].map(([k, label, body]) => (
              <div className={"acc-item" + (acc === k ? " open" : "")} key={k}>
                <button className="acc-h" onClick={() => setAcc(acc === k ? "" : k)}>{label}<Icon name={acc === k ? "minus" : "plus"} size={18} /></button>
                <div className="acc-body"><div className="acc-inner">{body}</div></div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* complete the look */}
      {look.length > 0 && (
        <section className="section-pad ctl-sec">
          <div className="wrap-wide">
            <div className="section-head" style={{ marginBottom: 40 }}>
              <div><Eyebrow>Styled together</Eyebrow><h2 className="serif" style={{ marginTop: 12 }}>Complete the look</h2></div>
            </div>
            <div className="ctl-grid">
              <div className="ctl-hero zoomable"><Ph label="THE FULL LOOK · STYLED" ratio="portrait" /></div>
              <div className="ctl-items">
                {[p, ...look].map((item, i) => (
                  <button key={item.id + i} className="ctl-item" onClick={() => i === 0 ? null : onNav("product", { id: item.id })}>
                    <Ph label="" ratio="square" style={{ width: 78, height: 78 }} />
                    <div className="ctl-item-body">
                      <span className="pcard-cat">{i === 0 ? "This piece" : item.cat}</span>
                      <span className="serif" style={{ fontSize: 19 }}>{item.name}</span>
                      <Price ngn={item.price} style={{ fontSize: 14, color: "var(--ink-soft)" }} />
                    </div>
                    {i !== 0 && <span className="ctl-add" onClick={(e) => { e.stopPropagation(); addToCart(item, { size: item.sizes[1] || item.sizes[0], color: item.colors[0].name }); }}>Add</span>}
                  </button>
                ))}
              </div>
            </div>
          </div>
        </section>
      )}

      {/* related */}
      <FeaturedRow eyebrow="You may also like" title="More from the collection" products={rel} onNav={onNav} link={{ cat: p.cat }} />

      {showSize && <SizeGuide gender={p.gender} onClose={() => setShowSize(false)} />}
    </div>
  );
}

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