/* Shop catalog — for-sale works with filter/sort + add to cart. */

function ShopPage({ data, navigate, addToCart, cart, dark, route }) {
  const PAGE_SIZE = 24;
  const [field, setField] = React.useState("All");
  const [sort, setSort] = React.useState("featured");
  const [artistFilter, setArtistFilter] = React.useState(route.artist || "All");
  const [page, setPage] = React.useState(1);
  const inCart = (id) => cart.some((c) => c.id === id);

  React.useEffect(() => { setPage(1); }, [field, sort, artistFilter]);

  React.useEffect(() => { if (route.artist) setArtistFilter(route.artist); }, [route.artist]);

  let works = data.allWorks.filter((w) => w.forSale && !w.sold);
  if (field !== "All") works = works.filter((w) => w.artist.field === field);
  if (artistFilter !== "All") works = works.filter((w) => w.artist.id === artistFilter);

  works = works.slice().sort((a, b) => {
    if (sort === "low") return a.price - b.price;
    if (sort === "high") return b.price - a.price;
    if (sort === "featured") return (b.artist.featured ? 1 : 0) - (a.artist.featured ? 1 : 0) || a.price - b.price;
    return 0;
  });

  const fieldsWithSale = Array.from(new Set(data.allWorks.filter((w) => w.forSale).map((w) => w.artist.field)));
  const sellingArtist = artistFilter !== "All" ? data.artists.find((a) => a.id === artistFilter) : null;

  return (
    <div className="shop">
      <div className="shop-masthead">
        <Eyebrow>The shop · {works.length.toLocaleString()} works available · ships worldwide</Eyebrow>
        <h1 className="shop-title">SHOP</h1>
        <p className="shop-intro">
          Original works and limited editions, sold directly in support of the artists.
        </p>
      </div>

      {sellingArtist && (
        <div className="shop-artist-banner">
          Showing works by <strong>{sellingArtist.name}</strong>
          <button className="link-btn" onClick={() => setArtistFilter("All")}>Show all ✕</button>
        </div>
      )}

      <div className="shop-toolbar">
        <div className="chip-wrap">
          <button className={"chip" + (field === "All" ? " on" : "")} onClick={() => setField("All")}>All fields</button>
          {fieldsWithSale.map((f) => (
            <button key={f} className={"chip" + (field === f ? " on" : "")} onClick={() => setField(f)}>{f}</button>
          ))}
        </div>
        <div className="dir-sort">
          <span className="sort-label">Sort</span>
          <select className="filter-select small" value={sort} onChange={(e) => setSort(e.target.value)}>
            <option value="featured">Featured</option>
            <option value="low">Price (low–high)</option>
            <option value="high">Price (high–low)</option>
          </select>
        </div>
      </div>

      {works.length === 0 ? (
        <div className="no-results"><h3>Nothing matches.</h3>
          <button className="btn-ghost" onClick={() => { setField("All"); setArtistFilter("All"); }}>Clear</button>
        </div>
      ) : (
        <React.Fragment>
          <div className="work-grid shop-grid">
            {works.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE).map((w) => (
              <WorkCard key={w.id} work={w} navigate={navigate} addToCart={addToCart} inCart={inCart(w.id)} dark={dark} />
            ))}
          </div>
          <Pagination page={page} totalPages={Math.ceil(works.length / PAGE_SIZE)} onChange={setPage} />
        </React.Fragment>
      )}
    </div>
  );
}

Object.assign(window, { ShopPage });