import { Link } from "react-router"
import { useCart } from "@/context/CartContext"
import { Heart, ShoppingCart, X } from "lucide-react"
import { toast } from "sonner"
import { useState, useEffect } from "react"
import { PRODUCTS, type Product } from "@/data/products"
import { getProductImage } from "@/data/staticData"

export default function Wishlist() {
  const { addItem } = useCart()
  const [wishlistIds, setWishlistIds] = useState<string[]>([])

  useEffect(() => {
    const stored = JSON.parse(localStorage.getItem("wishlist") || "[]") as string[]
    setWishlistIds(stored)
  }, [])

  const removeFromWishlist = (productId: string) => {
    const newWishlist = wishlistIds.filter(id => id !== productId)
    localStorage.setItem("wishlist", JSON.stringify(newWishlist))
    setWishlistIds(newWishlist)
    toast.success("Removed from wishlist")
  }

  const items: Product[] = wishlistIds.map(id => PRODUCTS.find(p => p.id === id)).filter(Boolean) as Product[]

  return (
    <div className="min-h-screen pt-28 pb-16 px-4">
      <div className="max-w-6xl mx-auto">
        <h1 className="text-3xl font-bold mb-8 flex items-center gap-3"><Heart className="w-8 h-8 text-red-400" />Your Wishlist</h1>
        {items.length === 0 ? (
          <div className="text-center py-20 glass-card"><Heart className="w-16 h-16 mx-auto mb-4 text-slate-600" /><p className="text-slate-400 mb-4">Your wishlist is empty</p><Link to="/shop" className="btn-primary">Browse Products</Link></div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
            {items.map(item => { const img = getProductImage(item.slug, item.category || "")
              return <div key={item.id} className="glass-card overflow-hidden">
                <Link to={`/product/${item.slug}`} className="block relative h-40 overflow-hidden"><img src={img} alt={item.name || ""} className="w-full h-full object-cover hover:scale-110 transition-transform duration-500" loading="lazy" /><button onClick={e => { e.preventDefault(); removeFromWishlist(item.id) }} className="absolute top-2 right-2 p-1.5 rounded-full bg-black/50 hover:bg-red-500/50 transition-colors"><X className="w-4 h-4" /></button></Link>
                <div className="p-4"><Link to={`/product/${item.slug}`}><h3 className="font-medium mb-2 hover:text-[#f97316] transition-colors">{item.name}</h3></Link><div className="flex items-center justify-between"><div><span className="font-bold text-[#f97316]">${item.price}</span><span className="text-xs text-slate-500 line-through ml-2">${item.originalPrice}</span></div><button onClick={() => addItem(item.id)} className="p-2 rounded-full bg-[#f97316]/10 hover:bg-[#f97316] hover:text-white transition-all"><ShoppingCart className="w-4 h-4" /></button></div></div>
              </div>
            })}
          </div>
        )}
      </div>
    </div>
  )
}