import Link from 'next/link';
import { ArrowRight } from 'lucide-react';
import { Button } from '@/components/ui/button';

import { prisma } from '@/lib/db';

const defaultDestinations = [
  {
    name: 'Luanda',
    description: 'Capital vibrante com praias deslumbrantes',
    image: 'https://images.unsplash.com/photo-1580746738099-1cb8c6b2c3b6?w=800&q=80',
    tours: 24,
  },
  {
    name: 'Benguela',
    description: 'Praias paradisíacas e história colonial',
    image: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=800&q=80',
    tours: 12,
  },
  {
    name: 'Namibe',
    description: 'Deserto misterioso e paisagens únicas',
    image: 'https://images.unsplash.com/photo-1509316785289-025f5b846b35?w=800&q=80',
    tours: 8,
  },
  {
    name: 'Serra da Leba',
    description: 'Vistas espetaculares e clima ameno',
    image: 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=800&q=80',
    tours: 6,
  },
  {
    name: 'Kalandula',
    description: 'Cachoeiras impressionantes',
    image: 'https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?w=800&q=80',
    tours: 5,
  },
  {
    name: 'Kissama',
    description: 'Parque Nacional com vida selvagem',
    image: 'https://images.unsplash.com/photo-1516426122078-c23e76319801?w=800&q=80',
    tours: 10,
  },
];

export async function DestinationsSection() {
  let dbDestinations = [];
  try {
    dbDestinations = await prisma.destination.findMany({
      where: { isActive: true },
      include: {
        _count: {
          select: { tours: true }
        }
      },
      take: 6,
      orderBy: { tours: { _count: 'desc' } }
    });
  } catch (error) {
    console.error("Prisma error fetching destinations:", error);
  }

  const destinations = dbDestinations.length > 0 ? dbDestinations.map((d: any) => ({
    name: d.name,
    description: d.description || `Explore as maravilhas de ${d.name}`,
    image: d.image || 'https://images.unsplash.com/photo-1580746738099-1cb8c6b2c3b6?w=800&q=80',
    tours: d._count.tours,
  })) : defaultDestinations;

  return (
    <section className="py-16 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-gray-900">Destinos Populares</h2>
          <p className="text-gray-600 mt-2">
            Descubra os locais mais incríveis de Angola
          </p>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
          {destinations.map((dest) => (
            <Link
              key={dest.name}
              href={`#destino-${dest.name.toLowerCase()}`}
              className="group relative aspect-3/4 rounded-xl overflow-hidden"
            >
              <img
                src={dest.image}
                alt={dest.name}
                className="object-cover w-full h-full group-hover:scale-110 transition-transform duration-500"
              />
              <div className="absolute inset-0 bg-linear-to-t from-black/70 to-transparent" />
              <div className="absolute bottom-0 left-0 right-0 p-4">
                <h3 className="font-semibold text-white text-lg">{dest.name}</h3>
                <p className="text-sm text-gray-200 line-clamp-1">{dest.description}</p>
                <p className="text-xs text-orange-400 mt-1">{dest.tours} tours</p>
              </div>
            </Link>
          ))}
        </div>

        <div className="mt-8 text-center">
          <Button variant="outline" size="lg">
            Ver todos os destinos
            <ArrowRight className="ml-2 h-4 w-4" />
          </Button>
        </div>
      </div>
    </section>
  );
}