/* AMBER & ZAFRAN — Shop / Boutique */
function Shop({ t, lang, go, onOpen, wish, toggleWish, initialCollectionId }) {
  const [cat, setCat] = useState('all');
  const [sort, setSort] = useState(0);
  const [sortOpen, setSortOpen] = useState(false);
  const [allProducts, setAllProducts] = useState([]);
  const [collectionProducts, setCollectionProducts] = useState(null); // null = no collection filter active
  const [status, setStatus] = useState('loading'); // 'loading' | 'ready' | 'error'

  const load = useCallback(() => {
    setStatus('loading');
    const collectionFetch = initialCollectionId
      ? AZCatalog.fetchProductsByCollection(initialCollectionId)
      : Promise.resolve(null);
    Promise.all([AZCatalog.fetchAllProducts(), collectionFetch])
      .then(([all, coll]) => { setAllProducts(all); setCollectionProducts(coll); setStatus('ready'); })
      .catch((e) => { console.error('Shop: failed to load catalog data', e); setStatus('error'); });
  }, [initialCollectionId]);
  useEffect(load, [load]);

  if (status === 'loading') return <LoadingState lang={lang} />;
  if (status === 'error') return <ErrorState lang={lang} onRetry={load} />;

  // A collection filter (arrived here by tapping a Collection banner)
  // only scopes the "All" category view — picking any specific category
  // chip (including tapping "All" again later) searches the whole
  // catalog, same as before Collection filtering existed. This avoids
  // adding any new "clear filter" UI: the existing category chips already
  // double as the way out of a collection-scoped view.
  const base = (cat === 'all' && collectionProducts) ? collectionProducts : allProducts;

  let items = base.filter(p => {
    if (cat === 'all') return true;
    if (cat === 'limited') return p.badge === 'limited';
    if (cat === 'gift') return true;
    return p.cat === cat;
  });
  items = [...items];
  if (sort === 1) items.sort((a, b) => a.price - b.price);
  if (sort === 2) items.sort((a, b) => b.price - a.price);
  if (sort === 3) items.reverse();

  return (
    <div>
      {/* editorial header */}
      <section style={{ background: 'radial-gradient(120% 90% at 50% 0%,#2a1116,#160a0d)', color: 'var(--white)', padding: '78px 24px 38px', textAlign: 'center' }}>
        <div className="kicker solo center" style={{ justifyContent: 'center', color: 'var(--gold)' }}>{lang === 'ar' ? 'الدار' : 'Maison de Parfum'}</div>
        <h1 className="sec-title" style={{ fontSize: 'clamp(44px,14vw,58px)', color: 'var(--white)', marginTop: 14 }}>{t.shopTitle}</h1>
        <div style={{ marginTop: 14, fontFamily: 'var(--sans)', fontSize: 11, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--rose)' }}>{allProducts.length} {t.shopCount}</div>
      </section>

      {/* sticky filter bar */}
      <div style={{ position: 'sticky', top: 0, zIndex: 20, background: 'rgba(251,248,243,.92)', backdropFilter: 'blur(16px)', borderBottom: '1px solid var(--line-2)' }}>
        <div className="hscroll" style={{ padding: '16px 22px 14px' }}>
          {AZ.CATEGORIES.map(([id, en, ar]) => (
            <button key={id} className={`chip ${cat === id ? 'on' : ''}`} onClick={() => setCat(id)}>{lang === 'ar' ? ar : en}</button>
          ))}
        </div>
        <div className="rule" style={{ background: 'var(--line-2)' }}></div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 22px' }}>
          <span style={{ fontFamily: 'var(--sans)', fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>{items.length} {t.shopCount}</span>
          <div style={{ position: 'relative' }}>
            <button onClick={() => setSortOpen(o => !o)} style={{ display: 'flex', alignItems: 'center', gap: 9, fontFamily: 'var(--sans)', fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase' }}>
              <Icon.sliders /> {t.sortBy} · {t.sorts[sort]}
            </button>
            {sortOpen && (
              <>
                <div style={{ position: 'fixed', inset: 0, zIndex: 1 }} onClick={() => setSortOpen(false)}></div>
                <div style={{ position: 'absolute', top: 30, right: 0, zIndex: 2, background: 'var(--paper)', boxShadow: '0 20px 50px rgba(0,0,0,.25)', minWidth: 200, border: '1px solid var(--line)' }}>
                  {t.sorts.map((s, i) => (
                    <button key={i} onClick={() => { setSort(i); setSortOpen(false); }} style={{ display: 'block', width: '100%', textAlign: lang === 'ar' ? 'right' : 'left', padding: '13px 18px', fontFamily: lang === 'ar' ? 'var(--arabic)' : 'var(--sans)', fontSize: 13, color: sort === i ? 'var(--burgundy)' : 'var(--ink)', borderBottom: i < 3 ? '1px solid var(--line-2)' : 'none' }}>{s}</button>
                  ))}
                </div>
              </>
            )}
          </div>
        </div>
      </div>

      {/* product grid */}
      <section style={{ padding: '28px 22px 60px' }}>
        {items.length === 0 ? (
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, padding: '60px 0', textAlign: 'center' }}>
            <img src="assets/mark-black.png" alt="" style={{ width: 64, opacity: .4 }} />
            <p className="lede">{lang === 'ar' ? 'لا توجد عطور هنا حالياً' : 'No fragrances here yet'}</p>
            <p className="body">{lang === 'ar' ? 'يُضاف هذا الاختيار قريباً.' : 'This selection is being curated — check back soon.'}</p>
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '30px 16px' }}>
            {items.map((p, i) => (
              <Reveal key={p.id} delay={(i % 2) * 70}>
                <ProductCard p={p} lang={lang} t={t} onOpen={onOpen} wished={wish.includes(p.id)} onWish={toggleWish} />
              </Reveal>
            ))}
          </div>
        )}

        {/* editorial inset banner */}
        <Reveal style={{ marginTop: 44 }}>
          <div style={{ background: 'linear-gradient(150deg,#762538,#3a0e18)', color: 'var(--white)', padding: '40px 26px', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
            <img src="assets/mark-gold.png" alt="" style={{ width: 56, margin: '0 auto 16px' }} />
            <div className="kicker solo center" style={{ justifyContent: 'center', color: 'var(--gold)' }}>{t.giftK}</div>
            <h3 className="sec-title h-md" style={{ color: 'var(--white)', marginTop: 10 }}>{lang === 'ar' ? 'لا تجد بصمتك؟' : 'Seeking your signature?'}</h3>
            <p className="body" style={{ color: 'rgba(253,253,253,.8)', maxWidth: 280, margin: '10px auto 22px' }}>{lang === 'ar' ? 'دع مستشار العطور يرشدك إلى تركيبتك المثالية.' : 'Let our concierge guide you to your perfect composition.'}</p>
            <button className="btn btn-gold" onClick={() => go('search')}>{t.concierge}</button>
          </div>
        </Reveal>
      </section>

      <Footer t={t} lang={lang} go={go} />
    </div>
  );
}

Object.assign(window, { Shop });