import { Link } from "react-router-dom";
import { Heart, ShoppingCart, ArrowLeft } from "lucide-react";
import { toast } from "sonner";
import { useCartStore } from "@/stores/cartStore";
import ProductCard from "@/components/features/ProductCard";

export default function WishlistPage() {
  const { wishlist, toggleWishlist, addToCart } = useCartStore();

  const addAllToCart = () => {
    wishlist.forEach((p) => {
      if (p.inStock) addToCart(p);
    });
    toast.success("تمت إضافة جميع المنتجات المتوفرة إلى السلة");
  };

  return (
    <div className="max-w-7xl mx-auto px-4 py-6">
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-3">
          <Link to="/products" className="text-orange-500 hover:text-orange-600 transition-colors">
            <ArrowLeft size={20} />
          </Link>
          <div>
            <h1 className="text-2xl font-black text-gray-800 flex items-center gap-2">
              <Heart size={24} className="text-red-500" fill="currentColor" />
              قائمة المفضلة
            </h1>
            <p className="text-gray-500 text-sm mt-0.5">{wishlist.length} منتج</p>
          </div>
        </div>
        {wishlist.length > 0 && (
          <button
            onClick={addAllToCart}
            className="flex items-center gap-2 bg-orange-500 hover:bg-orange-600 text-white text-sm font-bold px-5 py-2.5 rounded-xl transition-all duration-200 shadow-md hover:shadow-lg active:scale-95"
          >
            <ShoppingCart size={16} />
            إضافة الكل للسلة
          </button>
        )}
      </div>

      {wishlist.length === 0 ? (
        <div className="text-center py-20">
          <div className="w-24 h-24 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-6">
            <Heart size={40} className="text-red-300" />
          </div>
          <h2 className="text-xl font-black text-gray-700 mb-2">قائمتك فارغة</h2>
          <p className="text-gray-400 text-sm mb-6">أضف المنتجات المفضلة لديك هنا</p>
          <Link to="/products" className="btn-primary inline-block">
            تصفح المنتجات
          </Link>
        </div>
      ) : (
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {wishlist.map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>
      )}
    </div>
  );
}
