'use client';

import React from 'react';
import Link from 'next/link';
import { useWishlist } from '@/context/WishlistContext';
import { useLanguage } from '@/context/LanguageContext';
import { products } from '@/lib/data/products';
import ProductCard from '@/components/ui/ProductCard';
import styles from './wishlist.module.css';

export default function WishlistPage() {
  const { items, clearWishlist } = useWishlist();
  const { t, language } = useLanguage();
  const wishlistProducts = products.filter(p => items.some(i => i.id === p.id));

  return (
    <div className={styles.page}>
        <div className="container">
          <div className={styles.header}>
            <div>
              <h1 className={styles.title}>❤️ {language === 'ar' ? 'المفضلة' : 'My Wishlist'}</h1>
              <p className={styles.subtitle}>{wishlistProducts.length} {language === 'ar' ? 'عناصر' : 'items'}</p>
            </div>
            {wishlistProducts.length > 0 && (
              <button className="btn btn-outline" onClick={clearWishlist}>
                {language === 'ar' ? 'مسح الكل' : 'Clear All'}
              </button>
            )}
          </div>

          {wishlistProducts.length > 0 ? (
            <div className="products-grid">
              {wishlistProducts.map(product => (
                <ProductCard key={product.id} product={product} />
              ))}
            </div>
          ) : (
            <div className={styles.empty}>
              <div className={styles.emptyIcon}>💔</div>
              <h2 className={styles.emptyTitle}>{language === 'ar' ? 'قائمتك فارغة' : 'Your wishlist is empty'}</h2>
              <p className={styles.emptySubtitle}>
                {language === 'ar' ? 'أضف منتجاتك المفضلة هنا لشرائها لاحقاً.' : 'Save your favorite items here to buy them later.'}
              </p>
              <Link href="/products" className="btn btn-primary">{t.cart.continueShopping}</Link>
            </div>
          )}
        </div>
      </div>
  );
}
