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 '../components/ui/button';
import { Badge } from '../components/ui/badge';
import { Card, } from '../components/ui/card';
import { ImageWithFallback } from '../components/figma/ImageWithFallback';
import { Layout } from '../Layout';
import { useParams } from 'react-router-dom';
import { useGetAttractionDetailsByIdQuery } from '../Redux/services/attractions.service';
import LoadingSpinner from '../components/LoadingSpinner';

interface AttractionDetailsPageProps {
  onBackClick: () => void;
  onCheckoutClick: () => void;
  onSignInClick: () => void;
  onSignOutClick?: () => void;
  user?: { email: string; name: string } | null;
  // attractionId: string;
}

export function AttractionDetailsPage({
  onBackClick,
  onCheckoutClick,
  onSignInClick,
  onSignOutClick,
  user,
}: AttractionDetailsPageProps) {

  const { attractionId } = useParams()

  const { data: attraction, isLoading } = useGetAttractionDetailsByIdQuery(Number(attractionId));

  if (isLoading) {
    return (
     <LoadingSpinner/>
    );
  }

  return (
    <Layout
      activeCity=""
      onSignInClick={onSignInClick}
      onSignOutClick={onSignOutClick}
      user={user}
    // showCitySubmenu={false}
    >
      <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">
            {attraction.attractionBadges.map((badge: any, index: number) => (
              <Badge
                key={badge.badgeXid}
                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.badgeName}
              </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">
              {attraction.title}
            </span>{' '}
            <span className="text-[#2d3134]">
              Day Trip by {attraction.partner.businessName}
            </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={attraction.attractionGalleries[0].filePathUrl}
              alt="Main attraction image"
              className="w-full h-full object-cover rounded-lg"
            />
          </div>

          {/* Gallery images */}
          {attraction.attractionGalleries.slice().map((image: any) => (
            <div key={image.id} className="col-span-1 row-span-1">
              <ImageWithFallback
                src={image.filePathUrl}
                alt={`Gallery image ${image.id}`}
                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">
              {/* Duration */}
              <Card 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">
                  <Clock className="w-6 h-6 text-primary" />
                </div>
                <h3 className="font-normal text-primary capitalize mb-1">Duration</h3>
                <p className="text-sm text-[#717171] font-light">{attraction.durations} mins</p>
              </Card>

              {/* Group Size */}
              <Card 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">
                  <Users className="w-6 h-6 text-primary" />
                </div>
                <h3 className="font-normal text-primary capitalize mb-1">Group Size</h3>
                <p className="text-sm text-[#717171] font-light">{attraction.groupSize}</p>
              </Card>

              {/* Age Range */}
              <Card 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">
                  <Users className="w-6 h-6 text-primary" />
                </div>
                <h3 className="font-normal text-primary capitalize mb-1">Age Range</h3>
                <p className="text-sm text-[#717171] font-light">{attraction.ageRange}</p>
              </Card>

              {/* Languages */}
              <Card 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">
                  <MapPin className="w-6 h-6 text-primary" />
                </div>
                <h3 className="font-normal text-primary capitalize mb-1">Languages</h3>
                <p className="text-sm text-[#717171] font-light">
                  {attraction.attractionLanguages.map((lang: any) => lang.language.name).join(", ")}
                </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">
                {attraction.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">
                {attraction.attractionHighlights.map((highlight: any) => (
                  <li key={highlight.id} 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.title}</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>
                  {attraction.attractionInclusions.filter((inclusion: any) => inclusion.isInclusion === true)
                    .map((inclusion: any) => (
                      <div key={inclusion.id} 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">{inclusion.title}</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>
                  {attraction.attractionInclusions.filter((inclusion: any) => inclusion.isInclusion === false)
                    .map((inclusion: any) => (
                      <div key={inclusion.id} 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">{inclusion.title}</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">{attraction.title}</p>
                  <p className="text-sm text-gray-600 font-light">{attraction.address}  </p>
                </div>
              </div>
            </div>
          </div>

          {/* Right Sidebar - Calendar and Booking */}
          
        </div>
      </div>


    </Layout>
  );
}