// Wishlist page
function WishlistPage() {
  const { wish, toggleWish, addToCart, navigate } = useStore();
  const toast = useToast();

  const items = (window.PRODUCTS || []).filter(p => wish.has(p.id));

  function handleMoveToCart(product) {
    addToCart(product);
    toggleWish(product.id);
    toast('Moved to bag');
  }

  function handleRemove(id) {
    toggleWish(id);
    toast('Removed from wishlist');
  }

  function handleShare() {
    const code = Math.random().toString(36).slice(2, 8);
    const link = `https://saanchashoes.shop/wishlist/share/${code}`;
    navigator.clipboard.writeText(link).then(() => toast('Link copied'));
  }

  return (
    <div className="container" style={{ padding: '40px 16px 80px' }}>
      <div className="crumbs" style={{ marginBottom: 24 }}>
        <a onClick={() => navigate({ name: 'home' })}>Home</a>
        <span className="sep">/</span>
        <span className="current">Wishlist</span>
      </div>

      <div style={{ marginBottom: 32 }}>
        <div className="eyebrow-gold" style={{ marginBottom: 8 }}>Saved Pieces</div>
        <h1 style={{ fontSize: 28, marginBottom: 4 }}>My Wishlist</h1>
        <p style={{ color: 'var(--color-text-mute)', fontSize: 14 }}>
          {items.length} {items.length === 1 ? 'piece' : 'pieces'} saved
        </p>
      </div>

      {items.length === 0 ? (
        <Empty
          title="Your wishlist is empty"
          hint="Tap the heart on any piece to save it here for later."
          cta="Browse Collection"
          onCta={() => navigate({ name: 'home' })}
        />
      ) : (
        <>
          <div className="product-grid">
            {items.map(p => (
              <div key={p.id} style={{ display: 'flex', flexDirection: 'column' }}>
                <ProductCard product={p} />
                <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
                  <button
                    className="btn btn-primary"
                    style={{ flex: 1, fontSize: 13, padding: '9px 12px' }}
                    onClick={() => handleMoveToCart(p)}
                  >
                    Move to Bag
                  </button>
                  <button
                    className="btn"
                    style={{ fontSize: 13, padding: '9px 12px', color: 'var(--color-text-mute)' }}
                    onClick={() => handleRemove(p.id)}
                  >
                    Remove
                  </button>
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 48, textAlign: 'center' }}>
            <button className="btn" onClick={handleShare} style={{ fontSize: 14 }}>
              Share Wishlist
            </button>
          </div>
        </>
      )}
    </div>
  );
}

window.WishlistPage = WishlistPage;