/* ============================================================
   KHAL DESIGN — 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 { addToCart, toggleWish, wishlist } = useContext(RBCtx);
  const p0 = route.params || {};
  const [cat, setCat] = useState(p0.cat || null);
  const [sort, setSort] = useState("featured");
  const [mobFilters, setMobFilters] = useState(false);

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

  let list = RB.PRODUCTS.filter((p) => !cat || p.cat === cat);
  if (sort === "new") list = [...list].sort((a, b) => (b.badge === "New" ? 1 : 0) - (a.badge === "New" ? 1 : 0));

  const clearAll = () => setCat(null);
  const heading = cat || "All Footwear";
  const activeCount = cat ? 1 : 0;

  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>
  );

  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} styles · Handcrafted in Lagos · Made to order</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>Book a fitting and we'll measure you.</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>}
            </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="featured">Featured</option>
                  <option value="new">Newest</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="ATELIER · WORKSHOP" ratio="wide" /></div>
            <div className="shop-editorial-body">
              <Eyebrow line>From the workshop</Eyebrow>
              <h3 className="serif" style={{ fontSize: 30, fontWeight: 500, margin: "12px 0 14px" }}>Not sure what fits?</h3>
              <p style={{ color: "var(--ink-soft)" }}>Book a fitting and we'll measure you in person or walk you through sizing virtually before you commit to a pair.</p>
              <button className="link-arrow" style={{ marginTop: 18 }} onClick={() => onNav("booking", {})}>Book a fitting</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 }) {
  const rows = [["40", "25.5 cm"], ["41", "26.2 cm"], ["42", "27 cm"], ["43", "27.8 cm"], ["44", "28.5 cm"], ["45", "29.3 cm"]];
  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 }}>Shoe size guide</h3></div>
          <button className="ic-btn" onClick={onClose}><Icon name="close" /></button>
        </div>
        <table className="size-table">
          <thead><tr><th>EU size</th><th>Foot length</th></tr></thead>
          <tbody>{rows.map((r) => <tr key={r[0]}><td>{r[0]}</td><td>{r[1]}</td></tr>)}</tbody>
        </table>
        <p style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 16 }}>Between sizes or want a bespoke fit? Book a fitting and we'll measure you directly.</p>
      </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 [acc, setAcc] = useState("details");
  const [showSize, setShowSize] = useState(false);
  const [err, setErr] = useState(false);

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

  const add = () => {
    if (!size) { setErr(true); return; }
    addToCart(p, { size, color: color.name, qty });
    openCart();
  };
  const rel = RB.related(p, 4);

  return (
    <div className="fade-page pdp">
      <div className="wrap-wide pdp-grid">
        <div className="pdp-gallery">
          <div className="pdp-main-img zoomable">
            {p.badge && <span className="pcard-tag" style={{ top: 18, left: 18 }}>{p.badge}</span>}
            <Ph label={p.label} ratio="tall" />
          </div>
        </div>

        <div className="pdp-info">
          <Eyebrow>{p.cat}</Eyebrow>
          <h1 className="serif pdp-title">{p.name}</h1>
          <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 ? ` — EU ${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>}
          </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 enquiry — <Price ngn={p.price} /></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("custom", {})}>
            <Icon name="scissors" size={18} /> Want it made to your foot? <strong>Start a bespoke commission →</strong>
          </button>

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

          <div className="pdp-acc">
            {[
              ["details", "Details", <ul className="acc-list"><li>{p.blurb}</li><li>Cut and finished by hand in the Khal Design workshop</li></ul>],
              ["fabric", "Materials & Care", <div><p style={{ marginBottom: 10 }}><strong>{p.fabric}</strong></p><p style={{ color: "var(--ink-soft)" }}>Leather and suede uppers — keep away from prolonged moisture and condition regularly to preserve the finish.</p></div>],
              ["shipping", "Delivery & Enquiries", <div><p style={{ marginBottom: 8 }}>Delivery options and timing are confirmed once your enquiry is reviewed.</p><p style={{ color: "var(--ink-soft)" }}>Message the workshop directly on Instagram for quick questions.</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>

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

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

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