'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import ProductCard from '@/components/product/ProductCard';
import { useWishlistStore } from '@/lib/store';
import type { Product } from '@/lib/types';

export default function WishlistPage() {
  const ids = useWishlistStore(s => s.ids);
  const clearWishlist = useWishlistStore(s => s.clear);
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchProducts() {
      if (ids.length === 0) { setProducts([]); setLoading(false); return; }
      try {
        const res = await fetch(`/api/products?ids=${ids.join(',')}`);
        const data = await res.json();
        setProducts(data.data || []);
      } catch {
        setProducts([]);
      }
      setLoading(false);
    }
    fetchProducts();
  }, [ids]);

  if (loading) {
    return (
      <div className="max-w-7xl mx-auto px-4 py-20 text-center">
        <div className="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto"></div>
        <p className="text-gray-500 mt-4">Loading your wishlist...</p>
      </div>
    );
  }

  if (ids.length === 0) {
    return (
      <div className="max-w-7xl mx-auto px-4 py-20 text-center">
        <div className="text-7xl mb-6">❤️</div>
        <h1 className="text-3xl font-black text-gray-900 mb-3">Your wishlist is empty</h1>
        <p className="text-gray-500 mb-6">Save items you love to find them later!</p>
        <Link href="/category" className="btn-primary px-8 py-3.5 rounded-xl font-bold text-sm inline-block">Browse Products</Link>
      </div>
    );
  }

  return (
    <div className="max-w-7xl mx-auto px-4 py-6">
      <nav className="flex items-center gap-2 text-sm text-gray-500 mb-6">
        <Link href="/" className="hover:text-primary">Home</Link>
        <span>/</span>
        <span className="text-gray-800 font-semibold">Wishlist ({ids.length} items)</span>
      </nav>

      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-black text-gray-900">My Wishlist</h1>
        <button onClick={clearWishlist} className="text-sm text-red-500 font-semibold hover:underline">Clear All</button>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {products.map(p => <ProductCard key={p.id} product={p} />)}
      </div>
    </div>
  );
}