'use client'

import { useMedusaProducts } from '@/hooks/useMedusaProducts'
import { useMedusaCart } from '@/hooks/useMedusaCart'
import Link from 'next/link'
import Image from 'next/image'
import Button from '@/components/ui/Button'
import Badge from '@/components/ui/Badge'
import { Card, CardContent, CardFooter } from '@/components/ui/Card'

export default function MzansiFeaturedSection() {
  const { products, isLoading } = useMedusaProducts(8)
  const { addToCart } = useMedusaCart()

  if (isLoading) {
    return (
      <div data-vula-section="mzansifeatured" className="flex justify-center py-16">
        <div className="w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin" />
      </div>
    )
  }

  if (products.length === 0) return null

  const CURRENCY_SYMBOLS: Record<string, string> = { zar: 'R', usd: '$', eur: '€', gbp: '£', kes: 'KSh', ngn: '₦', ghs: '₵' }
  const formatPrice = (amount: number, code?: string) => {
    const sym = CURRENCY_SYMBOLS[(code ?? '').toLowerCase()] ?? (code?.toUpperCase() ?? '')
    return `${sym}${(amount / 100).toFixed(2)}`
  }

  const handleAddToCart = (variantId: string) => {
    addToCart(variantId, 1)
    window.dispatchEvent(new CustomEvent('cart-drawer-open'))
  }

  return (
    <section id="featured-products" className="py-20 bg-white">
      <div className="container mx-auto px-4">
        <div className="text-center mb-14">
          <h2 className="font-['Archivo_Black'] uppercase text-4xl lg:text-5xl text-[#18181b]">
            MZANSI FEATURED
          </h2>
          <p className="mt-3 text-lg text-[#101418]/70 uppercase tracking-wide">
            8 exclusive drops — limited stock, serious style
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {products.map((product) => {
            const variant = product.variants?.[0]
            const price = variant?.prices?.[0]
            const lowestPrice = price ? formatPrice(price.amount, price.currency_code) : '—'

            return (
              <Card key={product.id} className="group border-2 border-[#18181b] rounded-none shadow-[6px_6px_0_0_#18181b] hover:shadow-[8px_8px_0_0_#dc2626] transition-all duration-200 ease-out cursor-pointer">
                <Link href={`/products/${product.id}`} className="block">
                  <div className="relative aspect-square overflow-hidden">
                    <Image
                      src={product.thumbnail ?? '/placeholder-product.svg'}
                      alt={product.title}
                      fill
                      sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
                      className="object-cover transition-transform duration-500 ease-out group-hover:scale-105"
                    />
                    <div className="absolute top-2 left-2 z-10">
                      <Badge variant="accent" size="sm" className="bg-[#dc2626] text-white border-0 uppercase text-xs">
                        Limited Drop
                      </Badge>
                    </div>
                  </div>
                </Link>
                <CardContent className="p-4">
                  <h3 className="font-bold text-lg uppercase text-[#18181b]">{product.title}</h3>
                  <p className="text-2xl font-extrabold text-[#dc2626] mt-1">{lowestPrice}</p>
                </CardContent>
                <CardFooter className="p-4 pt-0">
                  <Button
                    variant="default"
                    size="sm"
                    className="w-full bg-[#18181b] text-white border-2 border-[#18181b] hover:bg-[#dc2626] hover:border-[#dc2626] shadow-[3px_3px_0_0_#d4af37] transition-all duration-200 ease-out"
                    onClick={() => variant && handleAddToCart(variant.id)}
                  >
                    Add to Cart
                  </Button>
                </CardFooter>
              </Card>
            )
          })}
        </div>
      </div>
    </section>
  )
}