'use client';

import { useEffect } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/lib/auth-context';
import { useWishlist } from '@/lib/wishlist-context';
import ProductCard from '@/components/product/ProductCard';

export default function WishlistPage() {
  const { isLoggedIn, isLoading: authLoading } = useAuth();
  const { wishlistProducts, isLoading, removeFromWishlist, refreshWishlist } = useWishlist();
  const router = useRouter();

  useEffect(() => {
    if (!authLoading && !isLoggedIn) {
      router.push('/account/login?redirect=/wishlist');
    }
  }, [isLoggedIn, authLoading, router]);

  useEffect(() => {
    if (isLoggedIn) {
      refreshWishlist();
    }
  }, [isLoggedIn, refreshWishlist]);

  if (authLoading || (!isLoggedIn && !authLoading)) {
    return (
      <div className="max-w-7xl mx-auto px-6 py-20 text-center">
        <div className="w-8 h-8 border-2 border-brand-500 border-t-transparent rounded-full animate-spin mx-auto" />
      </div>
    );
  }

  return (
    <div className="max-w-7xl mx-auto px-6 py-10">
      <h1 className="text-3xl font-bold text-surface-900 mb-8">Your Wishlist</h1>

      {isLoading ? (
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6">
          {[...Array(4)].map((_, i) => (
            <div key={i} className="animate-pulse">
              <div className="bg-surface-100 rounded-xl aspect-square mb-3" />
              <div className="h-4 bg-surface-100 rounded mb-2" />
              <div className="h-4 bg-surface-100 rounded w-2/3" />
            </div>
          ))}
        </div>
      ) : wishlistProducts.length === 0 ? (
        <div className="text-center py-24">
          <div className="w-24 h-24 mx-auto mb-6 text-surface-200">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1}>
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
              />
            </svg>
          </div>
          <h2 className="text-xl font-semibold text-surface-700 mb-2">Your wishlist is empty</h2>
          <p className="text-surface-400 mb-8">
            Save products you love by clicking the heart icon.
          </p>
          <Link
            href="/"
            className="inline-block px-6 py-3 bg-brand-500 hover:bg-brand-600 text-white font-semibold rounded-xl transition-colors"
          >
            Continue Shopping
          </Link>
        </div>
      ) : (
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6">
          {wishlistProducts.map((product) => (
            <div key={product.id} className="relative">
              {/* Remove from wishlist × button */}
              <button
                onClick={() => removeFromWishlist(product.id)}
                aria-label="Remove from wishlist"
                className="absolute top-2 right-2 z-10 w-7 h-7 flex items-center justify-center bg-white rounded-full shadow text-surface-400 hover:text-red-500 transition-colors"
              >
                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>

              <ProductCard product={product} />
            </div>
          ))}
        </div>
      )}
    </div>
  );
}