import { useState } from 'react';
import { motion } from 'motion/react';
import { ArrowLeft, Clock, Users, Calendar, MapPin, Star, Check, X, ChevronLeft, ChevronRight } from 'lucide-react';
import { Button } from './ui/button';
import { Badge } from './ui/badge';
import { Card, CardContent } from './ui/card';
import { Separator } from './ui/separator';
import { Calendar as CalendarComponent } from './ui/calendar';
import Navbar from './Navbar';
import { Footer } from './Footer';
import { ImageWithFallback } from './figma/ImageWithFallback';

interface AttractionDetailsPageProps {
  attractionId: string;
  onBackClick: () => void;
  onHomeClick: () => void;
  onMelbourneClick: () => void;
  onPassesClick: () => void;
  onCheckoutClick: () => void;
  onSignInClick: () => void;
  onSignOutClick?: () => void;
  onAttractionsClick: () => void;
  onBlogsClick: () => void;
  onHowItWorksClick: () => void;
  onFAQClick: () => void;
  onPrivacyPolicyClick: () => void;
  onAboutUsClick: () => void;
  onProfileClick: () => void;
  onCityCardsClick: () => void;
  onMagicItineraryClick: () => void;
  onPostCardsClick: () => void;
  onOffersClick: () => void;
  onContactUsClick?: () => void;
  onEsimsClick?: () => void;
  onHotelDiscountsClick?: () => void;
  currentPage: string;
  user?: { email: string; name: string } | null;
}

export function AttractionDetailsPage({
  attractionId,
  onBackClick,
  onHomeClick,
  onMelbourneClick,
  onPassesClick,
  onCheckoutClick,
  onSignInClick,
  onSignOutClick,
  onAttractionsClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onProfileClick,
  onCityCardsClick,
  onMagicItineraryClick,
  onPostCardsClick,
  onOffersClick,
  onContactUsClick,
  onEsimsClick,
  onHotelDiscountsClick,
  currentPage,
  user,
}: AttractionDetailsPageProps) {
  const [date, setDate] = useState<Date | undefined>(new Date());

  // Featured attraction for the main display
  const featuredAttraction = {
    id: 'phi-phi',
    name: 'Phi Phi Islands Adventure Day Trip with Seaview Lunch by V. Marine Tour',
    badges: ['Bestseller', 'Free cancellation', 'Reservation Required'],
    images: {
      main: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzbm9ya2VsaW5nJTIwdHVydGxlJTIwYWR2ZW50dXJlfGVufDF8fHx8MTc1ODEwNDkwMHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
      gallery: [
        'https://images.unsplash.com/photo-1559827260-dc66d52bef19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzbm9ya2VsaW5nJTIwdHVydGxlJTIwYWR2ZW50dXJlfGVufDF8fHx8MTc1ODEwNDkwMHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
        'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpc2xhbmQlMjB0b3VyJTIwYWRvJTIwdHJvcGljYWx8ZW58MXx8fHwxNzU4MTA0OTEwfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
        'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxncmVhdCUyMG9jZWFuJTIwcm9hZCUyMGF1c3RyYWxpYXxlbnwxfHx8fDE3NTgxMDQ5Mzd8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
        'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhdHYlMjBkZXNlcnQlMjB0b3VyfGVufDF8fHx8MTc1ODEwNDg5Nnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
      ]
    },
    overview: {
      duration: '3 days',
      groupSize: '10 people',
      ages: '18-99 yrs',
      languages: 'English, Japanese'
    },
    description: 'The Phi Phi archipelago is a must-visit while in Phuket, and this speedboat trip whisks you around the islands in one day. Swim over the coral reefs of Pileh Lagoon, have lunch at Phi Phi Leh, snorkel at Bamboo Island, and visit Monkey Beach and Maya Bay, immortalized in "The Beach." Boat transfers, snacks, buffet lunch, snorkeling equipment, and Phuket hotel pickup and drop-off all included.',
    highlights: [
      'Experience the thrill of a speedboat to the stunning Phi Phi Islands',
      'Be amazed by the variety of marine life in the archepelago',
      'Enjoy relaxing in paradise with white sand beaches and azure turquoise water',
      'Feel the comfort of a tour limited to 35 passengers',
      'Catch a glimpse of the wild monkeys around Monkey Beach'
    ],
    included: [
      'Beverages, drinking water, morning tea and buffet lunch',
      'Local taxes',
      'Hotel pickup and drop-off by air-conditioned minivan',
      'Insurance Transfer to a private pier',
      'Soft drinks',
      'Tour Guide'
    ],
    notIncluded: [
      'Towel',
      'Tips',
      'Alcoholic Beverages'
    ],
    bookingOptions: [
      'By Calling on 022 2645675',
      'Email your details at islands.booking@mail.com',
      'Via CityCards Portal'
    ]
  };

  return (
    <div className="min-h-screen bg-[#f8f8f8]">
      <Navbar
        activeCity="Melbourne"
        onCityChange={(city) => {
          if (city === 'Melbourne') {
            onMelbourneClick();
          }
        }}
        onSignInClick={onSignInClick}
        onSignOutClick={onSignOutClick}
        onPassesClick={onPassesClick}
        onCheckoutClick={onCheckoutClick}
        onHomeClick={onHomeClick}
        onAttractionsClick={onAttractionsClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
        onFAQClick={onFAQClick}
        onPrivacyPolicyClick={onPrivacyPolicyClick}
        onAboutUsClick={onAboutUsClick}
        onProfileClick={onProfileClick}
        onCityCardsClick={onCityCardsClick}
        onMagicItineraryClick={onMagicItineraryClick}
        onPostCardsClick={onPostCardsClick}
        onOffersClick={onOffersClick}
        currentPage="attractions"
        isUserSignedIn={!!user}
        user={user}
      />

      <div className="container mx-auto px-4 pt-40 pb-16 max-w-6xl">
        {/* Back Button */}
        <motion.div 
          className="mb-8"
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.5 }}
        >
          <Button 
            variant="ghost" 
            onClick={onBackClick}
            className="font-poppins font-medium text-base text-gray-600 hover:text-primary transition-colors duration-200"
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            Back to Attractions
          </Button>
        </motion.div>

        {/* Title and Badges Section */}
        <div className="mb-8">
          <div className="flex flex-wrap gap-3 mb-6">
            {featuredAttraction.badges.map((badge, index) => (
              <Badge 
                key={index}
                variant={index === 0 ? "default" : "secondary"}
                className={`px-6 py-2 rounded-full text-sm transition-all duration-200 ${
                  index === 0 
                    ? 'bg-primary text-white shadow-lg' 
                    : 'bg-primary/10 text-primary border border-primary/20'
                }`}
              >
                {badge}
              </Badge>
            ))}
          </div>
          
          <h1 className="text-4xl font-bold text-[#2d3134] leading-tight">
            <span className="bg-gradient-to-r from-primary to-primary/80 bg-clip-text text-transparent">
              Phi Phi Islands Adventure
            </span>{' '}
            <span className="text-[#2d3134]">
              Day Trip with Seaview Lunch by V. Marine Tour
            </span>
          </h1>
        </div>

        {/* Image Gallery Section */}
        <div className="grid grid-cols-4 grid-rows-2 gap-4 h-[510px] mb-12">
          {/* Main large image */}
          <div className="col-span-2 row-span-2">
            <ImageWithFallback
              src={featuredAttraction.images.main}
              alt="Main attraction image"
              className="w-full h-full object-cover rounded-lg"
            />
          </div>
          
          {/* Gallery images */}
          {featuredAttraction.images.gallery.slice(0, 4).map((image, index) => (
            <div key={index} className="col-span-1 row-span-1">
              <ImageWithFallback
                src={image}
                alt={`Gallery image ${index + 1}`}
                className="w-full h-full object-cover rounded-lg"
              />
            </div>
          ))}
        </div>

        {/* Main Content Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
          {/* Left Content - Tour Details */}
          <div className="lg:col-span-2 space-y-12">
            {/* Overview Cards */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
              {Object.entries(featuredAttraction.overview).map(([key, value]) => (
                <Card key={key} className="p-4 text-center bg-white border border-primary/10 hover:border-primary/20 transition-all duration-200 hover:shadow-lg group">
                  <div className="w-12 h-12 bg-primary/10 rounded-xl mx-auto mb-3 flex items-center justify-center group-hover:bg-primary/20 transition-colors duration-200">
                    {key === 'duration' && <Clock className="w-6 h-6 text-primary" />}
                    {key === 'groupSize' && <Users className="w-6 h-6 text-primary" />}
                    {key === 'ages' && <Users className="w-6 h-6 text-primary" />}
                    {key === 'languages' && <MapPin className="w-6 h-6 text-primary" />}
                  </div>
                  <h3 className="font-normal text-primary capitalize mb-1">
                    {key === 'groupSize' ? 'Group Size' : key}
                  </h3>
                  <p className="text-sm text-[#717171] font-light">{value}</p>
                </Card>
              ))}
            </div>

            {/* Tour Overview */}
            <div>
              <div className="flex items-center gap-4 mb-6">
                <div className="h-1 w-12 bg-primary rounded-full"></div>
                <h2 className="text-3xl font-semibold text-[#2d3134]">
                  Tour <span className="text-primary">Overview</span>
                </h2>
              </div>
              <p className="text-[#2d3134] leading-relaxed text-lg font-light">
                {featuredAttraction.description}
              </p>
            </div>

            {/* Tour Highlights */}
            <div>
              <div className="flex items-center gap-4 mb-6">
                <div className="h-1 w-12 bg-primary rounded-full"></div>
                <h3 className="text-2xl font-medium text-[#2d3134]">
                  Tour <span className="text-primary">Highlights</span>
                </h3>
              </div>
              <ul className="space-y-4">
                {featuredAttraction.highlights.map((highlight, index) => (
                  <li key={index} className="flex items-start gap-3 group">
                    <div className="w-6 h-6 bg-primary/10 rounded-full mt-1 flex items-center justify-center flex-shrink-0 group-hover:bg-primary/20 transition-colors duration-200">
                      <div className="w-2 h-2 bg-primary rounded-full"></div>
                    </div>
                    <span className="text-[#2d3134] leading-relaxed font-light">{highlight}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* What's Included/Not Included */}
            <div>
              <div className="flex items-center gap-4 mb-8">
                <div className="h-1 w-12 bg-primary rounded-full"></div>
                <h3 className="text-3xl font-semibold text-[#2d3134]">
                  What's <span className="text-primary">included</span>
                </h3>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                {/* Included */}
                <div className="space-y-4">
                  <h4 className="font-medium text-primary mb-4 flex items-center gap-2">
                    <Check className="w-5 h-5" />
                    Included
                  </h4>
                  {featuredAttraction.included.map((item, index) => (
                    <div key={index} className="flex items-start gap-3 group">
                      <div className="w-6 h-6 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-primary/20 transition-colors duration-200">
                        <Check className="w-3 h-3 text-primary" />
                      </div>
                      <span className="text-[#2d3134] font-light">{item}</span>
                    </div>
                  ))}
                </div>
                
                {/* Not Included */}
                <div className="space-y-4">
                  <h4 className="font-medium text-gray-600 mb-4 flex items-center gap-2">
                    <X className="w-5 h-5" />
                    Not Included
                  </h4>
                  {featuredAttraction.notIncluded.map((item, index) => (
                    <div key={index} className="flex items-start gap-3 group">
                      <div className="w-6 h-6 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-gray-200 transition-colors duration-200">
                        <X className="w-3 h-3 text-gray-500" />
                      </div>
                      <span className="text-[#2d3134] font-light">{item}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Location on map placeholder */}
            <div>
              <div className="flex items-center gap-4 mb-8">
                <div className="h-1 w-12 bg-primary rounded-full"></div>
                <h3 className="text-3xl font-semibold text-[#2d3134]">
                  Location on <span className="text-primary">map</span>
                </h3>
              </div>
              <div className="h-80 bg-gradient-to-br from-primary/5 to-primary/10 rounded-lg flex items-center justify-center border border-primary/10 hover:border-primary/20 transition-colors duration-200">
                <div className="text-center">
                  <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                    <MapPin className="w-8 h-8 text-primary" />
                  </div>
                  <p className="text-lg font-medium text-primary mb-2">Interactive Map</p>
                  <p className="text-sm text-gray-600 font-light">Phi Phi Islands, Thailand</p>
                </div>
              </div>
            </div>
          </div>

          {/* Right Sidebar - Calendar and Booking */}
          <div className="lg:sticky lg:top-32 space-y-8 self-start">
            {/* Calendar Widget with Custom Design */}
            <Card className="p-6 bg-white shadow-lg border border-primary/10">
              <div className="mb-6">
                <h3 className="text-xl font-bold text-primary mb-1">Select Date</h3>
                <p className="text-sm text-gray-600">Choose your preferred visit date</p>
              </div>
              
              {/* Custom Calendar Design */}
              <div className="space-y-4">
                {/* Calendar Header */}
                <div className="flex items-center justify-between">
                  <button className="p-2 hover:bg-primary/10 rounded-lg transition-colors">
                    <ChevronLeft className="w-5 h-5 text-primary" />
                  </button>
                  <span className="font-semibold text-gray-900">September 2025</span>
                  <button className="p-2 hover:bg-primary/10 rounded-lg transition-colors">
                    <ChevronRight className="w-5 h-5 text-primary" />
                  </button>
                </div>

                {/* Days of week */}
                <div className="grid grid-cols-7 gap-1 text-center text-sm font-medium text-gray-500">
                  <div>Su</div>
                  <div>Mo</div>
                  <div>Tu</div>
                  <div>We</div>
                  <div>Th</div>
                  <div>Fr</div>
                  <div>Sa</div>
                </div>

                {/* Calendar Grid */}
                <div className="grid grid-cols-7 gap-1">
                  {/* Previous month */}
                  <button className="h-10 w-10 text-sm text-gray-300 hover:bg-gray-50 rounded">31</button>
                  
                  {/* Current month */}
                  {Array.from({ length: 30 }, (_, i) => {
                    const day = i + 1;
                    const isSelected = day === 27;
                    const isToday = day === 15;
                    return (
                      <button
                        key={day}
                        className={`h-10 w-10 text-sm rounded font-medium transition-all duration-200 ${
                          isSelected
                            ? 'bg-primary text-white shadow-lg scale-105'
                            : isToday 
                            ? 'bg-primary/10 text-primary border border-primary/20'
                            : 'text-gray-700 hover:bg-primary/5 hover:text-primary'
                        }`}
                      >
                        {day}
                      </button>
                    );
                  })}

                  {/* Next month */}
                  {Array.from({ length: 4 }, (_, i) => (
                    <button
                      key={`next-${i + 1}`}
                      className="h-10 w-10 text-sm text-gray-300 hover:bg-gray-50 rounded"
                    >
                      {i + 1}
                    </button>
                  ))}
                </div>
              </div>

              {/* Selected Date Display */}
              <div className="mt-6 p-4 bg-primary/5 rounded-lg border border-primary/10">
                <div className="flex items-center gap-3">
                  <Calendar className="w-5 h-5 text-primary" />
                  <div>
                    <p className="text-sm font-medium text-gray-900">Selected Date</p>
                    <p className="text-lg font-semibold text-primary">September 27, 2025</p>
                  </div>
                </div>
              </div>
            </Card>

            {/* Pricing Card */}
            <Card className="p-6 bg-gradient-to-br from-primary/5 to-primary/10 border border-primary/20">
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <span className="text-gray-600">Adult Ticket</span>
                  <span className="font-bold text-xl text-primary">$89</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-gray-600">Service Fee</span>
                  <span className="font-medium text-gray-900">$5</span>
                </div>
                <div className="border-t border-primary/20 pt-4">
                  <div className="flex items-center justify-between">
                    <span className="font-semibold text-gray-900">Total</span>
                    <span className="font-bold text-2xl text-primary">$94</span>
                  </div>
                </div>
              </div>
            </Card>

            {/* Confirm Booking Button */}
            <Button 
              className="w-full bg-primary text-white hover:bg-primary/90 py-6 text-lg rounded-xl font-semibold transition-all duration-200 shadow-lg hover:shadow-xl hover:scale-[1.02] relative overflow-hidden group"
              onClick={() => onCheckoutClick()}
            >
              <span className="relative z-10 flex items-center justify-center gap-2">
                <Check className="w-5 h-5" />
                Confirm Booking
              </span>
              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700"></div>
            </Button>

            {/* Trust Indicators */}
            <div className="flex items-center justify-center gap-4 text-sm text-gray-600">
              <div className="flex items-center gap-1">
                <Check className="w-4 h-4 text-primary" />
                <span>Instant Confirmation</span>
              </div>
              <div className="flex items-center gap-1">
                <X className="w-4 h-4 text-primary" />
                <span>Free Cancellation</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <Footer
        onHomeClick={onHomeClick}
        onAboutUsClick={onAboutUsClick}
        onPrivacyPolicyClick={onPrivacyPolicyClick}
        onHowItWorksClick={onHowItWorksClick}
        onFAQClick={onFAQClick}
        onBlogsClick={onBlogsClick}
        onContactUsClick={onContactUsClick}
      />
    </div>
  );
}