/* AMBER & ZAFRAN — Wishlist */
function Wishlist({ t, lang, go, onOpen, wish, toggleWish }) {
  const [items, setItems] = useState([]);
  const [status, setStatus] = useState('loading'); // 'loading' | 'ready' | 'error'

  const load = useCallback(() => {
    setStatus('loading');
    AZCatalog.fetchProductsByIds(wish)
      .then((p) => { setItems(p); setStatus('ready'); })
      .catch((e) => { console.error('Wishlist: failed to load', e); setStatus('error'); });
    // eslint-disable-next-line
  }, [wish.join(',')]);
  useEffect(load, [load]);

  return (
    <div>
      <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' ? 'مختاراتك' : 'Your Selections'}</div>
        <h1 className="sec-title" style={{ fontSize: 'clamp(44px,14vw,58px)', color: 'var(--white)', marginTop: 14 }}>{t.wishlist}</h1>
        <div style={{ marginTop: 14, fontFamily: 'var(--sans)', fontSize: 11, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--rose)' }}>{items.length} {t.shopCount}</div>
      </section>

      {status === 'loading' && <LoadingState lang={lang} />}
      {status === 'error' && <ErrorState lang={lang} onRetry={load} />}

      {status === 'ready' && (items.length === 0 ? (
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22, padding: '70px 40px', textAlign: 'center' }}>
          <img src="assets/mark-black.png" alt="" style={{ width: 70, opacity: .45 }} />
          <p className="lede">{t.wishlistEmpty}</p>
          <button className="btn btn-fill" onClick={() => go('shop')}>{t.continue}</button>
        </div>
      ) : (
        <section style={{ padding: '28px 22px 60px' }}>
          <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={true} onWish={toggleWish} />
              </Reveal>
            ))}
          </div>
        </section>
      ))}

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

Object.assign(window, { Wishlist });