import { Link } from "react-router"
import { useCart } from "@/context/CartContext"
import { TrendingUp, Eye, ShoppingCart, Star, Loader2 } from "lucide-react"
import { useState, useCallback } from "react"
import { getTrendingProducts, getProductImage, type Product } from "@/data/staticData"

export function TrendingSection() {
  const { addItem } = useCart()
  const [addingId, setAddingId] = useState<string | null>(null)
  const products = getTrendingProducts()

  const handleAdd = useCallback((productId: string) => {
    setAddingId(productId)
    addItem(productId)
    setTimeout(() => setAddingId(null), 600)
  }, [addItem])

  return (
    <section className="py-20 px-4">
      <div className="max-w-7xl mx-auto">
        <div className="flex items-center gap-3 mb-10">
          <div className="w-10 h-10 rounded-full bg-[#22c55e]/20 flex items-center justify-center">
            <TrendingUp className="w-5 h-5 text-[#22c55e]" />
          </div>
          <div><h2 className="text-3xl md:text-4xl font-bold">Trending Now</h2><p className="text-slate-400 text-sm">Most popular subscriptions this week</p></div>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
          {products.map((p: Product) => {
            const price = p.price, original = p.originalPrice
            const discount = Math.round(((original - price) / original) * 100)
            const img = getProductImage(p.slug, p.category)
            return (
              <div key={p.id} className="group glass-card overflow-hidden hover:border-[#f97316]/30 transition-all duration-300">
                <Link to={`/product/${p.slug}`} className="block relative h-44 overflow-hidden">
                  <img src={img} alt={p.name} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" loading="lazy" />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
                  {p.badge && <div className="absolute top-3 left-3 px-3 py-1 rounded-full bg-[#f97316] text-xs font-bold">{p.badge}</div>}
                  <div className="absolute top-3 right-3 px-2 py-1 rounded-full bg-red-500/80 text-xs font-bold">{discount}% OFF</div>
                  <div className="absolute bottom-3 left-3 flex items-center gap-1 px-2 py-1 rounded-full bg-black/50 backdrop-blur-sm text-xs"><Eye className="w-3 h-3" /><span>{Math.floor(Math.random() * 50) + 15} viewing</span></div>
                </Link>
                <div className="p-4">
                  <div className="flex items-center gap-1 mb-1">
                    {[1,2,3,4,5].map(s => <Star key={s} className="w-3 h-3 fill-[#f97316] text-[#f97316]" />)}
                    <span className="text-xs text-slate-400 ml-1">5.0</span>
                  </div>
                  <Link to={`/product/${p.slug}`}><h3 className="font-semibold mb-1 group-hover:text-[#f97316] transition-colors line-clamp-1">{p.name}</h3></Link>
                  <p className="text-xs text-slate-400 mb-3 line-clamp-2">{(p.shortDesc as string) || ""}</p>
                  <div className="flex items-center justify-between">
                    <div><span className="text-lg font-bold text-[#f97316]">${p.price}</span><span className="text-xs text-slate-500 line-through ml-2">${p.originalPrice}</span></div>
                    <button
                        onClick={e => { e.preventDefault(); handleAdd(p.id) }}
                        disabled={addingId === p.id}
                        className="p-2 rounded-full bg-[#f97316]/10 hover:bg-[#f97316] hover:text-white transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                        aria-label="Add to cart"
                      >
                        {addingId === p.id ? <Loader2 className="w-4 h-4 animate-spin" /> : <ShoppingCart className="w-4 h-4" />}
                      </button>
                  </div>
                  <div className="mt-2 flex items-center gap-1 text-xs text-slate-500"><span className="text-[#f97316]">🔥</span><span>{Math.floor(Math.random() * 200) + 30} sold this week</span></div>
                </div>
              </div>
            )
          })}
        </div>
        <div className="text-center mt-10">
          <Link to="/shop" className="inline-flex items-center gap-2 px-8 py-3 rounded-full border border-white/20 hover:bg-white/5 transition-all">View All Products<TrendingUp className="w-4 h-4" /></Link>
        </div>
      </div>
    </section>
  )
}