import { Clock, Users, Star, ArrowRight } from 'lucide-react';
import { Card, CardContent, CardFooter } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';

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

const defaultTours = [
  {
    id: '1',
    title: 'Descoberta de Luanda',
    destination: 'Luanda',
    duration: 3,
    price: 150000,
    originalPrice: 180000,
    rating: 4.8,
    reviews: 124,
    image: 'https://images.unsplash.com/photo-1580746738099-1cb8c6b2c3b6?w=800&q=80',
    category: 'Cultural',
    featured: true,
  },
  {
    id: '2',
    title: 'Safari no Parque da Kissama',
    destination: 'Luanda',
    duration: 2,
    price: 200000,
    rating: 4.9,
    reviews: 89,
    image: 'https://images.unsplash.com/photo-1516426122078-c23e76319801?w=800&q=80',
    category: 'Safari',
    featured: true,
  },
  {
    id: '3',
    title: 'Maravilhas do Namibe',
    destination: 'Namibe',
    duration: 4,
    price: 280000,
    rating: 4.7,
    reviews: 67,
    image: 'https://images.unsplash.com/photo-1509316785289-025f5b846b35?w=800&q=80',
    category: 'Aventura',
    featured: true,
  },
  {
    id: '4',
    title: 'Quedas de Kalandula',
    destination: 'Malanje',
    duration: 3,
    price: 180000,
    rating: 4.6,
    reviews: 156,
    image: 'https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?w=800&q=80',
    category: 'Aventura',
  },
];

export async function FeaturedTours() {
  let dbTours = [];
  try {
    dbTours = await prisma.tour.findMany({
      where: { isActive: true, isFeatured: true },
      include: { category: true, destination: true },
      take: 4,
      orderBy: { createdAt: 'desc' },
    });
  } catch (error) {
    console.error("Prisma error fetching featured tours:", error);
  }

  const featuredTours = dbTours.length > 0 ? dbTours.map((t: any) => ({
    id: t.id,
    title: t.title,
    destination: t.destination?.name || 'Angola',
    duration: t.duration,
    price: t.priceKz,
    originalPrice: t.discountPercent ? t.priceKz * (1 + (t.discountPercent/100)) : undefined,
    rating: 4.8, 
    reviews: 0,
    image: t.featuredImage || 'https://images.unsplash.com/photo-1580746738099-1cb8c6b2c3b6?w=800&q=80',
    category: t.category?.name || 'Aventura',
    featured: t.isFeatured,
  })) : defaultTours;

  return (
    <section className="py-16 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="flex justify-between items-end mb-8">
          <div>
            <h2 className="text-3xl font-bold text-gray-900">Tours em Destaque</h2>
            <p className="text-gray-600 mt-2">
              Explore os pacotes mais populares e experiências únicas em Angola
            </p>
          </div>
          <Button variant="outline" className="hidden md:flex">
            Ver todos os tours
            <ArrowRight className="ml-2 h-4 w-4" />
          </Button>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {featuredTours.map((tour) => (
            <Card
              key={tour.id}
              className="overflow-hidden group hover:shadow-xl transition-all duration-300"
            >
              <div className="relative aspect-4/3">
                <img
                  src={tour.image}
                  alt={tour.title}
                  className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300"
                />
                <div className="absolute top-3 left-3">
                  <Badge className="bg-orange-600">{tour.category}</Badge>
                </div>
                {tour.originalPrice && (
                  <div className="absolute top-3 right-3">
                    <Badge variant="destructive">-17%</Badge>
                  </div>
                )}
              </div>

              <CardContent className="p-4">
                <div className="flex items-center gap-1 text-sm text-gray-500 mb-2">
                  <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                  <span className="font-medium text-gray-900">{tour.rating}</span>
                  <span>({tour.reviews} avaliações)</span>
                </div>
                <h3 className="font-semibold text-lg text-gray-900 mb-2 line-clamp-1">
                  {tour.title}
                </h3>
                <div className="flex items-center gap-4 text-sm text-gray-500">
                  <div className="flex items-center gap-1">
                    <Clock className="h-4 w-4" />
                    <span>{tour.duration} dias</span>
                  </div>
                  <div className="flex items-center gap-1">
                    <Users className="h-4 w-4" />
                    <span>Grupos</span>
                  </div>
                </div>
              </CardContent>

              <CardFooter className="p-4 pt-0 flex justify-between items-center">
                <div>
                  <span className="text-lg font-bold text-orange-600">
                    {tour.price.toLocaleString()} Kz
                  </span>
                  {tour.originalPrice && (
                    <span className="text-sm text-gray-400 line-through ml-2">
                      {tour.originalPrice.toLocaleString()} Kz
                    </span>
                  )}
                  <p className="text-xs text-gray-500">por pessoa</p>
                </div>
                <Button size="sm" className="bg-orange-600 hover:bg-orange-700">
                  Reservar
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>

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