import { Link } from "react-router"
import { useCart } from "@/context/CartContext"
import { Zap, Timer, ShoppingCart, Star, TrendingDown, Loader2 } from "lucide-react"
import { useState, useEffect, useCallback } from "react"
import { getOnSaleProducts, getProductImage, type Product } from "@/data/staticData"
import { SEO } from "@/components/SEO"

export default function Deals() {
  const { addItem } = useCart()
  const [addingId, setAddingId] = useState<string | null>(null)
  const [timeLeft, setTimeLeft] = useState(6 * 3600 + 45 * 60)

  const handleAdd = useCallback((productId: string) => {
    setAddingId(productId)
    addItem(productId)
    setTimeout(() => setAddingId(null), 600)
  }, [addItem])
  useEffect(() => { const t = setInterval(() => setTimeLeft(p => p > 0 ? p - 1 : 6 * 3600), 1000); return () => clearInterval(t) }, [])
  const h = Math.floor(timeLeft / 3600), m = Math.floor((timeLeft % 3600) / 60), s = timeLeft % 60
  const deals = getOnSaleProducts().slice(0, 12)

  return (
    <>
      <SEO
        title="Deals & Flash Sales | Up to 96% Off Premium Subscriptions"
        description="Flash deals on Netflix, Spotify, ChatGPT Plus, Canva Pro, Adobe Creative Cloud & more. Limited time offers up to 96% off. Instant delivery."
        keywords="premium subscription deals, flash sale software, Netflix discount, Spotify deal, ChatGPT Plus sale, cheap software deals"
        path="/deals"
      />
    <div className="min-h-screen pt-28 pb-16 px-4">
      <div className="max-w-7xl mx-auto">
        <div className="glass-card p-8 md:p-12 text-center mb-12 relative overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-r from-[#f97316]/10 to-[#22c55e]/10" />
          <div className="relative z-10">
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#f97316]/20 mb-6"><Zap className="w-5 h-5 text-[#f97316]" /><span className="font-bold text-[#f97316]">MEGA SALE</span></div>
            <h1 className="text-4xl md:text-6xl font-bold mb-4">Best Deals of the Week</h1>
            <p className="text-slate-400 mb-6 max-w-xl mx-auto">Up to 96% off on premium subscriptions. Limited time only!</p>
            <div className="flex items-center justify-center gap-2 glass-card px-6 py-3 inline-flex mx-auto">
              <Timer className="w-5 h-5 text-[#f97316] animate-pulse" />
              <span className="text-slate-400">Ends in:</span>
              <span className="font-mono text-2xl font-bold text-[#f97316]">{String(h).padStart(2,"0")}:{String(m).padStart(2,"0")}:{String(s).padStart(2,"0")}</span>
            </div>
          </div>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
          {deals.map((p: Product) => { const discount = Math.round(((p.originalPrice - p.price) / p.originalPrice) * 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">
              <Link to={`/product/${p.slug}`} className="block relative h-48 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" />
                <div className="absolute top-3 left-3 px-3 py-1 rounded-full bg-red-500 font-bold text-sm">{discount}% OFF</div>
                <div className="absolute bottom-3 right-3 px-2 py-1 rounded-full bg-[#f97316]/80 text-xs font-bold flex items-center gap-1"><TrendingDown className="w-3 h-3" />Best Price</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]" />)}</div>
                <Link to={`/product/${p.slug}`}><h3 className="font-semibold mb-1 group-hover:text-[#f97316] transition-colors">{p.name}</h3></Link>
                <div className="flex items-baseline gap-2 mb-3"><span className="text-2xl font-bold text-[#f97316]">${p.price}</span><span className="text-sm text-slate-500 line-through">${p.originalPrice}</span><span className="text-xs text-green-400">Save ${(p.originalPrice - p.price).toFixed(0)}</span></div>
                <button
                  onClick={() => handleAdd(p.id)}
                  disabled={addingId === p.id}
                  className="btn-primary w-full text-sm py-2.5 flex items-center justify-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
                >
                  {addingId === p.id ? <Loader2 className="w-4 h-4 animate-spin" /> : <><ShoppingCart className="w-4 h-4" />Add to Cart</>}
                </button>
              </div>
            </div>
          })}
        </div>
      </div>
    </div>
    </>
  )
}