'use client';
import { useMedusaProducts } from '@/hooks/useMedusaProducts';
import Image from 'next/image';
import Link from 'next/link';
import Button from '@/components/ui/Button';
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/Card';
import Badge from '@/components/ui/Badge';
import { TrendingUp } from 'lucide-react';

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

export default function BestsellersGridSection() {
  const { products, isLoading } = useMedusaProducts(6);

  if (isLoading) {
    return (
      <div data-vula-section="bestsellersgrid" className="flex justify-center py-16">
        <div className="w-8 h-8 rounded-full border-2 border-[#6b8e23] border-t-transparent animate-spin" />
      </div>
    );
  }
  if (!products || products.length === 0) return null;

  return (
    <section id="bestsellers-grid" className="py-20 bg-[#f4f5f2]">
      <div className="max-w-7xl mx-auto px-4">
        <h2 className="text-3xl md:text-4xl font-bold text-[#2c331f] text-center mb-2">Top Picks Loved by Our Community</h2>
        <p className="text-center text-[#8b5a3c] mb-10 max-w-xl mx-auto">Real results, trusted by thousands across South Africa.</p>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
          {products.map((product) => {
            const price = product.variants?.[0]?.prices?.[0];
            return (
              <Card key={product.id} className="rounded-[20px] shadow-lg hover:shadow-xl transition-shadow duration-200 overflow-hidden bg-white">
                <div className="relative aspect-square overflow-hidden">
                  <Image
                    src={product.thumbnail ?? '/placeholder-product.svg'}
                    alt={product.title}
                    fill
                    className="object-cover hover:scale-105 transition-transform duration-500"
                    sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, 33vw"
                  />
                  <Badge variant="default" className="absolute top-3 left-3 bg-[#8b5a3c] text-white text-xs px-3 py-1">
                    <TrendingUp className="w-3 h-3 inline mr-1" />Bestseller
                  </Badge>
                </div>
                <CardHeader className="px-4 pt-4 pb-0">
                  <CardTitle className="text-sm font-semibold text-[#2c331f]">{product.title}</CardTitle>
                </CardHeader>
                <CardContent className="px-4 pb-4">
                  {price && (
                    <p className="text-lg font-bold text-[#6b8e23]">{formatPrice(price.amount, price.currency_code)}</p>
                  )}
                  <p className="text-xs text-[#8b5a3c] mt-1">Deep hydration &amp; gentle care</p>
                </CardContent>
                <CardFooter className="px-4 pb-4">
                  <Link href={`/products/${product.id}`}>
                    <Button variant="outline" size="sm" className="w-full border-[#6b8e23] text-[#6b8e23] hover:bg-[#6b8e23] hover:text-white transition-all duration-200">
                      Shop Now
                    </Button>
                  </Link>
                </CardFooter>
              </Card>
            );
          })}
        </div>
      </div>
    </section>
  );
}