// Page: Shop
function ShopPage({ lang, navigate, wishlist, toggleWish, onWaOrder, tweaks, initialCat }) {
  const t = I18N[lang];
  const [cat, setCat] = useState(initialCat || 'all');
  const [search, setSearch] = useState('');
  const [sort, setSort] = useState('new');
  useReveal();

  useEffect(() => { window.scrollTo(0, 0); }, []);
  useEffect(() => { if (initialCat) setCat(initialCat); }, [initialCat]);

  const filtered = useMemo(() => {
    let list = [...PRODUCTS];
    if (cat !== 'all') list = list.filter(p => p.category === cat);
    if (search) {
      const q = search.toLowerCase();
      list = list.filter(p => p.name[lang].toLowerCase().includes(q) || p.name.en.toLowerCase().includes(q));
    }
    if (sort === 'priceLow') list.sort((a,b) => a.price - b.price);
    else if (sort === 'priceHigh') list.sort((a,b) => b.price - a.price);
    else if (sort === 'popular') list.sort((a,b) => b.sales - a.sales);
    return list;
  }, [cat, search, sort, lang]);

  return (
    <main>
      <div className="shop-hero">
        <h1>{t.shop.title}</h1>
        <p>{t.shop.sub}</p>
      </div>
      <div className="container">
        <div className="shop-toolbar">
          <span className="results">{filtered.length} {t.shop.results}</span>
          <div className="right">
            <div className="shop-search">
              <Icon.Search size={16}/>
              <input
                type="text"
                placeholder={t.nav.search}
                value={search}
                onChange={(e) => setSearch(e.target.value)}
              />
            </div>
            <select className="shop-select" value={sort} onChange={(e) => setSort(e.target.value)}>
              <option value="new">{t.shop.sortNew}</option>
              <option value="priceLow">{t.shop.sortPriceLow}</option>
              <option value="priceHigh">{t.shop.sortPriceHigh}</option>
              <option value="popular">{t.shop.sortPopular}</option>
            </select>
          </div>
        </div>

        <div className="shop-layout">
          <aside className="shop-filter">
            <h4>{t.shop.categories}</h4>
            <ul>
              <li><button className={cat === 'all' ? 'active' : ''} onClick={() => setCat('all')}>{t.shop.all}</button></li>
              {CATEGORIES.map(c => (
                <li key={c.id}>
                  <button className={cat === c.id ? 'active' : ''} onClick={() => setCat(c.id)}>{c[lang]}</button>
                </li>
              ))}
            </ul>
          </aside>
          <div>
            {filtered.length === 0 ? (
              <div style={{padding: '80px 0', textAlign:'center', color:'var(--ink-muted)'}}>
                <p style={{fontSize:18, fontStyle:'italic', marginBottom:16}}>{t.shop.empty}</p>
                <button className="btn btn-outline" onClick={() => { setCat('all'); setSearch(''); }}>{t.shop.clear}</button>
              </div>
            ) : (
              <div className={`pgrid cols-${tweaks.gridCols} reveal in`}>
                {filtered.map(p => (
                  <ProductCard key={p.id} product={p} lang={lang} variant={tweaks.cardStyle}
                    onClick={(pr) => navigate('product', { id: pr.id })}
                    wishlist={wishlist} toggleWish={toggleWish} onWaOrder={onWaOrder}/>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </main>
  );
}

window.ShopPage = ShopPage;