import { useState } from 'react';
import { Button } from './ui/button';
import { Card, CardContent } from './ui/card';
import { Badge } from './ui/badge';
import { ChevronLeft, ChevronRight, MapPin, Star, Clock } from 'lucide-react';
import { ImageWithFallback } from './figma/ImageWithFallback';

interface City {
  id: string;
  name: string;
  country: string;
  image: string;
  attractions: number;
  rating: number;
  duration: string;
  startingPrice: number;
  popular?: boolean;
  description: string;
}

const cities: City[] = [
  {
    id: 'paris',
    name: 'Paris',
    country: 'France',
    image: 'https://images.unsplash.com/photo-1431274172761-fca41d930114?q=80&w=600&auto=format&fit=crop',
    attractions: 45,
    rating: 4.9,
    duration: '3-7 days',
    startingPrice: 49,
    popular: true,
    description: 'City of Light with world-famous landmarks and art'
  },
  {
    id: 'london',
    name: 'London',
    country: 'United Kingdom',
    image: 'https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?q=80&w=600&auto=format&fit=crop',
    attractions: 38,
    rating: 4.8,
    duration: '3-7 days',
    startingPrice: 55,
    description: 'Historic capital with royal palaces and modern culture'
  },
  {
    id: 'tokyo',
    name: 'Tokyo',
    country: 'Japan',
    image: 'https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?q=80&w=600&auto=format&fit=crop',
    attractions: 52,
    rating: 4.9,
    duration: '5-10 days',
    startingPrice: 68,
    popular: true,
    description: 'Vibrant metropolis blending tradition with innovation'
  },
  {
    id: 'barcelona',
    name: 'Barcelona',
    country: 'Spain',
    image: 'https://images.unsplash.com/photo-1539037116277-4db20889f2d4?q=80&w=600&auto=format&fit=crop',
    attractions: 29,
    rating: 4.7,
    duration: '3-5 days',
    startingPrice: 42,
    description: 'Architectural wonder with beaches and vibrant culture'
  },
  {
    id: 'rome',
    name: 'Rome',
    country: 'Italy',
    image: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5?q=80&w=600&auto=format&fit=crop',
    attractions: 34,
    rating: 4.8,
    duration: '3-6 days',
    startingPrice: 45,
    description: 'Eternal city with ancient history and timeless beauty'
  },
  {
    id: 'new-york',
    name: 'New York',
    country: 'United States',
    image: 'https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?q=80&w=600&auto=format&fit=crop',
    attractions: 67,
    rating: 4.6,
    duration: '4-8 days',
    startingPrice: 75,
    description: 'The city that never sleeps with iconic skyline'
  }
];

export function FeaturedCities() {
  const [currentSlide, setCurrentSlide] = useState(0);
  
  const itemsPerSlide = 3;
  const totalSlides = Math.ceil(cities.length / itemsPerSlide);
  
  const nextSlide = () => {
    setCurrentSlide((prev) => (prev + 1) % totalSlides);
  };
  
  const prevSlide = () => {
    setCurrentSlide((prev) => (prev - 1 + totalSlides) % totalSlides);
  };
  
  const visibleCities = cities.slice(
    currentSlide * itemsPerSlide,
    (currentSlide + 1) * itemsPerSlide
  );

  return (
    <section className="py-16 md:py-24">
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between mb-12">
          <div className="space-y-2">
            <h2 className="text-3xl md:text-4xl font-bold">
              Featured Destinations
            </h2>
            <p className="text-muted-foreground">
              Discover the world's most incredible cities with our curated passes
            </p>
          </div>
          
          <div className="hidden md:flex items-center space-x-2">
            <Button 
              variant="outline" 
              className="w-16 h-16"
              onClick={prevSlide}
              disabled={currentSlide === 0}
            >
              <ChevronLeft className="w-8 h-8" />
            </Button>
            <Button 
              variant="outline" 
              className="w-16 h-16"
              onClick={nextSlide}
              disabled={currentSlide === totalSlides - 1}
            >
              <ChevronRight className="w-8 h-8" />
            </Button>
          </div>
        </div>

        {/* Desktop Grid */}
        <div className="hidden md:grid md:grid-cols-3 gap-6 mb-8">
          {visibleCities.map((city) => (
            <CityCard key={city.id} city={city} />
          ))}
        </div>

        {/* Mobile Carousel */}
        <div className="md:hidden">
          <div className="overflow-hidden">
            <div 
              className="flex transition-transform duration-300 ease-in-out"
              style={{ transform: `translateX(-${currentSlide * 100}%)` }}
            >
              {cities.map((city) => (
                <div key={city.id} className="w-full flex-shrink-0 px-2">
                  <CityCard city={city} />
                </div>
              ))}
            </div>
          </div>
          
          {/* Mobile Navigation */}
          <div className="flex items-center justify-center space-x-2 mt-6">
            {Array.from({ length: cities.length }).map((_, index) => (
              <button
                key={index}
                onClick={() => setCurrentSlide(index)}
                className={`w-2 h-2 rounded-full transition-colors ${
                  index === currentSlide ? 'bg-primary' : 'bg-muted'
                }`}
              />
            ))}
          </div>
        </div>

        <div className="text-center mt-8">
          <Button size="lg" variant="outline" className="h-14">
            View All Cities
          </Button>
        </div>
      </div>
    </section>
  );
}

function CityCard({ city }: { city: City }) {
  return (
    <Card className="group cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
      <div className="relative overflow-hidden rounded-t-lg">
        {city.popular && (
          <Badge className="absolute top-3 left-3 z-10 bg-gradient-to-r from-primary to-secondary text-white">
            Popular
          </Badge>
        )}
        
        <ImageWithFallback
          src={city.image}
          alt={`${city.name}, ${city.country}`}
          className="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300"
        />
        
        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
        
        <div className="absolute bottom-3 left-3 text-white">
          <h3 className="font-semibold">{city.name}</h3>
          <p className="text-sm opacity-90">{city.country}</p>
        </div>
      </div>
      
      <CardContent className="p-4 space-y-3">
        <p className="text-sm text-muted-foreground">{city.description}</p>
        
        <div className="flex items-center justify-between text-sm">
          <div className="flex items-center space-x-1">
            <MapPin className="w-4 h-4 text-muted-foreground" />
            <span>{city.attractions} attractions</span>
          </div>
          
          <div className="flex items-center space-x-1">
            <Star className="w-4 h-4 text-yellow-500" />
            <span>{city.rating}</span>
          </div>
        </div>
        
        <div className="flex items-center justify-between text-sm">
          <div className="flex items-center space-x-1">
            <Clock className="w-4 h-4 text-muted-foreground" />
            <span>{city.duration}</span>
          </div>
          
          <div className="font-semibold">
            From €{city.startingPrice}
          </div>
        </div>
        
        <Button className="w-full h-14" variant="outline">
          Explore {city.name}
        </Button>
      </CardContent>
    </Card>
  );
}