import { useEffect, useState } from 'react';
import { motion } from 'motion/react';
import {
  ArrowLeft,
  User,
  CreditCard,
  Calendar,
  MapPin,
  Settings,
  Download,
  QrCode,
  Plus,
  Clock,
  Star,
  Badge as BadgeIcon,
  Camera
} from 'lucide-react';
import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input';
import { Label } from '../components/ui/label';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { Separator } from '../components/ui/separator';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../components/ui/select';
import { Badge } from '../components/ui/badge';
import Navbar from '../components/Navbar';
import { Footer } from '../components/Footer';
import { ImageWithFallback } from '../components/figma/ImageWithFallback';
import { useGetUserProfileDetailsQuery, useUpdateUserProfileDetailsMutation } from '../Redux/services/profile.service';
import { toast } from 'sonner';
import { useNavigate } from 'react-router-dom';
import LoadingSpinner from '../components/LoadingSpinner';

interface ProfilePageProps {
  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;
  onCreateItineraryClick: () => void;
  onViewItineraryClick?: () => void;
  onOffersClick: () => void;
  onDownloadAppClick?: () => void;
  onContactUsClick?: () => void;
  onEsimsClick?: () => void;
  onHotelDiscountsClick?: () => void;
  currentPage: string;
}

// Mock passes data
const mockPasses = [
  {
    id: '1',
    name: 'Melbourne Unlimited Card',
    city: 'Melbourne',
    type: 'Unlimited Pass',
    status: 'active',
    price: 149.00,
    originalPrice: 249.00,
    discount: 40,
    attractions: 25,
    validFrom: '2024-01-15',
    validUntil: '2024-01-22',
    daysRemaining: 3,
    image: 'https://images.unsplash.com/photo-1514395462725-fb4566210144?w=400',
    usedAttractions: 8
  },
  {
    id: '2',
    name: 'Melbourne Selective Card',
    city: 'Melbourne',
    type: 'Flexi Pass',
    status: 'active',
    price: 89.00,
    originalPrice: 149.00,
    discount: 40,
    attractions: 12,
    validFrom: '2024-02-01',
    validUntil: '2024-02-08',
    daysRemaining: 12,
    image: 'https://images.unsplash.com/photo-1502602898536-47ad22581b52?w=400',
    usedAttractions: 3
  },
  {
    id: '3',
    name: 'Sydney Explorer Pass',
    city: 'Sydney',
    type: 'Standard Pass',
    status: 'expired',
    price: 89.00,
    originalPrice: 149.00,
    discount: 40,
    attractions: 15,
    validFrom: '2023-12-01',
    validUntil: '2023-12-08',
    daysRemaining: 0,
    image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400',
    usedAttractions: 12
  }
];

// Mock itineraries data
const mockItineraries = [
  {
    id: '1',
    name: 'Melbourne Unlimited Card',
    city: 'Melbourne',
    duration: '7 days',
    attractions: 25,
    createdDate: '2024-01-15',
    status: 'active'
  }
];

export function ProfilePage({
  onBackClick,
  onHomeClick,
  onMelbourneClick,
  onPassesClick,
  onCheckoutClick,
  onSignInClick,
  onSignOutClick,
  onAttractionsClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onProfileClick,
  onCityCardsClick,
  onMagicItineraryClick,
  onPostCardsClick,
  onCreateItineraryClick,
  onViewItineraryClick,
  onOffersClick,
  onDownloadAppClick,
  onContactUsClick,
  onEsimsClick,
  onHotelDiscountsClick,
  currentPage
}: ProfilePageProps) {
  const [activeTab, setActiveTab] = useState('profile');
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    phone: '',
    country: '',
    address1: '',
    address2: '',
    city: '',
    postalCode: ''
  });

  const navigate = useNavigate()
  const userId = localStorage.getItem("userId")
  const { data: userDetails, isLoading } = useGetUserProfileDetailsQuery(userId)
  const [updateUserProfileDetails, { isLoading: savingChanges }] = useUpdateUserProfileDetailsMutation();
  const { data: passes, isLoading: loadingPasses } = useGetUserProfileDetailsQuery(userId)

  useEffect(() => {
    if (userDetails) {
      setFormData({
        firstName: userDetails?.firstName,
        lastName: userDetails?.lastName,
        email: userDetails?.emailAddress,
        phone: userDetails?.mobileNumber,
        country: userDetails?.country,
        address1: userDetails?.address1,
        address2: userDetails?.address2,
        city: userDetails?.cityName,
        postalCode: userDetails?.zipCode
      })
    }

  }, [userDetails])


  const handleInputChange = (field: string, value: string) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  const handleSaveProfile = async () => {
    try {
      console.log("Saving profile...", formData);
      const response = await updateUserProfileDetails({ userDetails: formData, userId });
      console.log(response)
      toast.success("Profile updated successfully!");
    } catch (error) {
      console.error("Error saving profile:", error);
      toast.error("Failed to update profile. Please try again.");
    }
  };

  const activePasses = mockPasses.filter(pass => pass.status === 'active');
  const expiredPasses = mockPasses.filter(pass => pass.status === 'expired');

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

  return (
    <div className="min-h-screen bg-background">
      {/* Navbar */}
      <Navbar
        activeCity=""
        onSignInClick={onSignInClick}
        onSignOutClick={onSignOutClick}
        isUserSignedIn={true}
        user={{ email: "user@example.com", name: "John Doe" }}
        onCityChange={function (city: string): void {
          throw new Error('Function not implemented.');
        }} />

      {/* Header Section */}
      <section className="pt-40 pb-8 bg-gradient-to-br from-muted/30 to-background">
        <div className="container mx-auto px-4">
          {/* Back Button */}
          <motion.button
            onClick={() => navigate(-1)}
            className="flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-6 transition-colors duration-200 cursor-pointer"
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5 }}
          >
            <ArrowLeft className="w-5 h-5" />
            <span className="font-normal">Back</span>
          </motion.button>

          {/* Page Title */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.1 }}
          >
            <h1 className="font-poppins text-3xl md:text-4xl lg:text-5xl mb-4">
              <span className="font-light">My</span>{' '}
              <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent pr-2">Profile</span>
            </h1>
            <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600">
              Manage your account, passes, and travel itineraries
            </p>
          </motion.div>
        </div>
      </section>

      {/* Main Content */}
      <section className="py-12">
        <div className="container mx-auto px-4">
          <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-8">
            {/* Tab Navigation */}
            <TabsList className="grid w-full grid-cols-3 lg:w-[400px]">
              <TabsTrigger value="profile" className="font-poppins font-light">My Profile</TabsTrigger>
              <TabsTrigger value="passes" className="font-poppins font-light">My Passes</TabsTrigger>
              <TabsTrigger value="itineraries" className="font-poppins font-light">My Itineraries</TabsTrigger>
            </TabsList>

            {/* My Profile Tab */}
            <TabsContent value="profile" className="space-y-8">
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                {/* Profile Form */}
                <div className="lg:col-span-2">
                  <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.5, delay: 0.2 }}
                  >
                    <Card>
                      <CardHeader>
                        <CardTitle className="flex items-center gap-2 font-poppins font-normal">
                          <User className="w-5 h-5" />
                          Personal Information
                        </CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-6">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                          <div>
                            <Label htmlFor="firstName" className="font-poppins font-light">First Name</Label>
                            <Input
                              id="firstName"
                              value={formData.firstName}
                              onChange={(e) => handleInputChange('firstName', e.target.value)}
                              className="mt-1 font-poppins font-light"
                            />
                          </div>
                          <div>
                            <Label htmlFor="lastName" className="font-poppins font-light">Last Name</Label>
                            <Input
                              id="lastName"
                              value={formData.lastName}
                              onChange={(e) => handleInputChange('lastName', e.target.value)}
                              className="mt-1 font-poppins font-light"
                            />
                          </div>
                        </div>

                        <div>
                          <Label htmlFor="email" className="font-poppins font-light">Email Address</Label>
                          <Input
                            id="email"
                            type="email"
                            value={formData.email}
                            onChange={(e) => handleInputChange('email', e.target.value)}
                            className="mt-1 font-poppins font-light"
                          />
                        </div>

                        <div>
                          <Label htmlFor="phone" className="font-poppins font-light">Phone Number</Label>
                          <Input
                            id="phone"
                            type="tel"
                            value={formData.phone}
                            onChange={(e) => handleInputChange('phone', e.target.value)}
                            className="mt-1 font-poppins font-light"
                          />
                        </div>

                        <Separator />

                        <h3 className="font-poppins font-normal">Billing Address</h3>

                        <div>
                          <Label htmlFor="country" className="font-poppins font-light">Country</Label>
                          {/* <Select value={formData.country} onValueChange={(value) => handleInputChange('country', value)}>
                            <SelectTrigger className="mt-1">
                              <SelectValue placeholder="Select country" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="us">United States</SelectItem>
                              <SelectItem value="au">Australia</SelectItem>
                              <SelectItem value="uk">United Kingdom</SelectItem>
                              <SelectItem value="ca">Canada</SelectItem>
                              <SelectItem value="de">Germany</SelectItem>
                              <SelectItem value="fr">France</SelectItem>
                              <SelectItem value="in">India</SelectItem>
                              <SelectItem value="jp">Japan</SelectItem>
                            </SelectContent>
                          </Select> */}
                          <Input
                            id="country"
                            value={formData.country}
                            onChange={(e) => handleInputChange('country', e.target.value)}
                            className="mt-1 font-poppins font-light"
                          />
                        </div>

                        <div>
                          <Label htmlFor="address1" className="font-poppins font-light">
                            Address Line 1
                          </Label>
                          <Input
                            id="address1"
                            value={formData.address1}
                            onChange={(e) => handleInputChange('address1', e.target.value)}
                            className="mt-1 font-poppins font-light mb-4"
                          />

                          <Label htmlFor="address2" className="font-poppins font-light">
                            Address Line 2
                          </Label>
                          <Input
                            id="address2"
                            value={formData.address2}
                            onChange={(e) => handleInputChange('address2', e.target.value)}
                            className="mt-1 font-poppins font-light"
                          />
                        </div>

                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                          <div>
                            <Label htmlFor="city" className="font-poppins font-light">City</Label>
                            <Input
                              id="city"
                              value={formData.city}
                              onChange={(e) => handleInputChange('city', e.target.value)}
                              className="mt-1 font-poppins font-light"
                            />
                          </div>
                          <div>
                            <Label htmlFor="postalCode" className="font-poppins font-light">Postal Code</Label>
                            <Input
                              id="postalCode"
                              value={formData.postalCode}
                              onChange={(e) => handleInputChange('postalCode', e.target.value)}
                              className="mt-1 font-poppins font-light"
                            />
                          </div>
                        </div>

                        <Button
                          onClick={handleSaveProfile}
                          className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-normal py-3 font-poppins cursor-pointer"
                        >
                          {savingChanges ? "Saving Changes..." : "Save Changes"}
                        </Button>
                      </CardContent>
                    </Card>
                  </motion.div>
                </div>

                {/* App Download Section */}
                <div className="lg:col-span-1">
                  <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.5, delay: 0.4 }}
                  >
                    <Card className="border border-gray-200 shadow-sm">
                      <CardContent className="p-8 space-y-6">
                        {(() => {
                          // Determine which pass type to show
                          const hasUnlimitedPass = activePasses.some(pass => pass.type === 'Unlimited Pass');
                          const hasSelectivePass = activePasses.some(pass => pass.type === 'Flexi Pass');

                          if (hasUnlimitedPass) {
                            return (
                              <>
                                <div className="space-y-3">
                                  <h3 className="font-poppins text-xl font-normal">
                                    Get{' '}
                                    <span className="text-primary">Melbourne Unlimited Card</span>
                                  </h3>
                                  <p className="text-sm text-gray-600 font-poppins leading-relaxed font-light">
                                    Unlimited access to 25+ attractions. Visit as many places as you want with one simple card.
                                    Save up to 40% compared to individual tickets.
                                  </p>
                                </div>

                                {/* Card Benefits */}
                                <div className="bg-gradient-to-br from-primary/5 to-secondary/5 rounded-lg p-4 space-y-2">
                                  <div className="flex items-center gap-2 text-sm font-poppins font-normal">
                                    <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
                                      <CreditCard className="w-3 h-3 text-white" />
                                    </div>
                                    <span>Unlimited entries to all attractions</span>
                                  </div>
                                  <div className="flex items-center gap-2 text-sm font-poppins font-normal">
                                    <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
                                      <Calendar className="w-3 h-3 text-white" />
                                    </div>
                                    <span>Valid for 7 consecutive days</span>
                                  </div>
                                  <div className="flex items-center gap-2 text-sm font-poppins font-normal">
                                    <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
                                      <MapPin className="w-3 h-3 text-white" />
                                    </div>
                                    <span>Skip the queue at major venues</span>
                                  </div>
                                </div>

                                {/* Purchase CTA */}
                                <div className="space-y-3">
                                  <Button
                                    onClick={onPassesClick}
                                    className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins font-medium h-12"
                                  >
                                    Purchase Unlimited Card
                                  </Button>
                                  <Button
                                    variant="outline"
                                    onClick={onCityCardsClick}
                                    className="w-full font-poppins font-normal"
                                  >
                                    Learn More
                                  </Button>
                                </div>
                              </>
                            );
                          } else if (hasSelectivePass) {
                            return (
                              <>
                                <div className="space-y-3">
                                  <h3 className="font-poppins text-xl font-normal">
                                    Get{' '}
                                    <span className="text-primary">Selective Card</span>
                                    {' '}now
                                  </h3>
                                  <p className="text-sm text-gray-600 font-poppins leading-relaxed font-light">
                                    Choose your own adventure with 12 hand-picked attractions. Perfect for visitors
                                    who want flexibility and value.
                                  </p>
                                </div>

                                {/* Card Benefits */}
                                <div className="bg-gradient-to-br from-primary/5 to-secondary/5 rounded-lg p-4 space-y-2">
                                  <div className="flex items-center gap-2 text-sm font-poppins font-normal">
                                    <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
                                      <CreditCard className="w-3 h-3 text-white" />
                                    </div>
                                    <span>Choose from 12 curated attractions</span>
                                  </div>
                                  <div className="flex items-center gap-2 text-sm font-poppins font-normal">
                                    <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
                                      <Calendar className="w-3 h-3 text-white" />
                                    </div>
                                    <span>Flexible 7-day validity period</span>
                                  </div>
                                  <div className="flex items-center gap-2 text-sm font-poppins font-normal">
                                    <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
                                      <Star className="w-3 h-3 text-white" />
                                    </div>
                                    <span>Save 40% on combined ticket price</span>
                                  </div>
                                </div>

                                {/* Purchase CTA */}
                                <div className="space-y-3">
                                  <Button
                                    onClick={onPassesClick}
                                    className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins font-medium h-12"
                                  >
                                    Purchase Selective Card
                                  </Button>
                                  <Button
                                    variant="outline"
                                    onClick={onCityCardsClick}
                                    className="w-full font-poppins font-normal"
                                  >
                                    View All Attractions
                                  </Button>
                                </div>
                              </>
                            );
                          } else {
                            return (
                              <>
                                <div className="space-y-3">
                                  <h3 className="font-poppins text-xl font-normal">
                                    Get{' '}
                                    <span className="text-primary">CityCards</span>
                                    {' '}now
                                  </h3>
                                  <p className="text-sm text-gray-600 font-poppins leading-relaxed font-light">
                                    Explore Melbourne's best attractions with our flexible card options.
                                    Choose unlimited access or select your favorites.
                                  </p>
                                </div>

                                {/* Card Options */}
                                <div className="space-y-3">
                                  <div className="bg-gradient-to-br from-primary/5 to-secondary/5 rounded-lg p-4">
                                    <div className="flex items-start justify-between mb-2">
                                      <div>
                                        <h4 className="font-poppins text-base font-medium mb-1">Unlimited Card</h4>
                                        <p className="text-xs text-gray-600 font-poppins font-light">25+ attractions, unlimited visits</p>
                                      </div>
                                      <Badge className="bg-primary text-white">Popular</Badge>
                                    </div>
                                    <div className="text-2xl font-poppins font-semibold text-primary">$149</div>
                                  </div>

                                  <div className="bg-gray-50 rounded-lg p-4">
                                    <div className="flex items-start justify-between mb-2">
                                      <div>
                                        <h4 className="font-poppins text-base font-medium mb-1">Selective Card</h4>
                                        <p className="text-xs text-gray-600 font-poppins font-light">12 attractions of your choice</p>
                                      </div>
                                    </div>
                                    <div className="text-2xl font-poppins font-semibold text-primary">$89</div>
                                  </div>
                                </div>

                                {/* Purchase CTA */}
                                <div className="space-y-3">
                                  <Button
                                    onClick={onPassesClick}
                                    className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins font-medium h-12"
                                  >
                                    Explore All Cards
                                  </Button>
                                  <Button
                                    variant="outline"
                                    onClick={onCityCardsClick}
                                    className="w-full font-poppins font-normal"
                                  >
                                    Learn More
                                  </Button>
                                </div>
                              </>
                            );
                          }
                        })()}
                      </CardContent>
                    </Card>
                  </motion.div>
                </div>
              </div>
            </TabsContent>

            {/* My Passes Tab */}
            <TabsContent value="passes" className="space-y-8">
              {/* Active Passes */}
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.2 }}
              >
                <h2 className="font-poppins text-2xl mb-6 font-normal">Active Passes</h2>
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                  {activePasses.map((pass) => (
                    <Card key={pass.id} className="overflow-hidden">
                      <div
                        className="flex cursor-pointer hover:bg-gray-50 transition-colors duration-200 rounded-lg p-2 -m-2"
                        onClick={() => onDownloadAppClick?.()}
                      >
                        <div className="w-32 h-32 flex-shrink-0">
                          <ImageWithFallback
                            src={pass.image}
                            alt={pass.city}
                            className="w-full h-full object-cover"
                          />
                        </div>
                        <div className="flex-1 p-6">
                          <div className="flex items-start justify-between mb-2">
                            <div>
                              <h3 className="font-normal font-poppins">{pass.name}</h3>
                              <Badge variant={pass.status === 'active' ? 'default' : 'secondary'} className="mt-1">
                                {pass.status}
                              </Badge>
                            </div>
                            <div className="text-right">
                              <div className="font-semibold text-lg font-poppins">${pass.price}</div>
                              <div className="text-sm text-gray-500 line-through font-poppins font-light">${pass.originalPrice}</div>
                            </div>
                          </div>

                          <div className="space-y-2 text-sm font-poppins font-light">
                            <div className="flex justify-between">
                              <span>Attractions:</span>
                              <span>{pass.usedAttractions}/{pass.attractions}</span>
                            </div>
                            <div className="flex justify-between">
                              <span>Valid until:</span>
                              <span>{new Date(pass.validUntil).toLocaleDateString()}</span>
                            </div>
                            <div className="flex justify-between">
                              <span>Days remaining:</span>
                              <span className="text-primary font-normal">{pass.daysRemaining} days</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </Card>
                  ))}
                </div>

                {/* Offers Button */}
                <div className="mt-8 text-center">
                  <Button
                    onClick={onOffersClick}
                    className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins px-8 py-3 font-normal"
                  >
                    <Star className="w-4 h-4 mr-2" />
                    View Special Offers
                  </Button>
                </div>
              </motion.div>

              {/* Expired Passes */}
              {expiredPasses.length > 0 && (
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: 0.4 }}
                >
                  <h2 className="font-poppins text-2xl mb-6 font-normal">Expired Passes</h2>
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    {expiredPasses.map((pass) => (
                      <Card key={pass.id} className="overflow-hidden opacity-60">
                        <div className="flex">
                          <div className="w-32 h-32 flex-shrink-0">
                            <ImageWithFallback
                              src={pass.image}
                              alt={pass.city}
                              className="w-full h-full object-cover grayscale"
                            />
                          </div>
                          <div className="flex-1 p-6">
                            <div className="flex items-start justify-between mb-2">
                              <div>
                                <h3 className="font-normal font-poppins">{pass.name}</h3>
                                <Badge variant="secondary" className="mt-1">
                                  {pass.status}
                                </Badge>
                              </div>
                              <div className="text-right">
                                <div className="font-semibold text-lg font-poppins">${pass.price}</div>
                              </div>
                            </div>

                            <div className="space-y-2 text-sm font-poppins font-light">
                              <div className="flex justify-between">
                                <span>Attractions visited:</span>
                                <span>{pass.usedAttractions}/{pass.attractions}</span>
                              </div>
                              <div className="flex justify-between">
                                <span>Expired on:</span>
                                <span>{new Date(pass.validUntil).toLocaleDateString()}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </Card>
                    ))}
                  </div>
                </motion.div>
              )}
            </TabsContent>

            {/* My Itineraries Tab */}
            <TabsContent value="itineraries" className="space-y-8">
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.2 }}
              >
                <div className="flex items-center justify-between mb-6">
                  <h2 className="font-poppins text-2xl font-normal">My Itineraries</h2>
                  <Button
                    className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins font-normal"
                    onClick={onCreateItineraryClick}
                  >
                    <Plus className="w-4 h-4 mr-2" />
                    Create Itinerary
                  </Button>
                </div>

                {mockItineraries.length > 0 ? (
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    {mockItineraries.map((itinerary) => (
                      <Card key={itinerary.id}>
                        <CardContent className="p-6">
                          <div className="flex items-start justify-between mb-4">
                            <div>
                              <h3 className="font-normal font-poppins">{itinerary.name}</h3>
                              <p className="text-sm text-gray-600 font-poppins font-light">{itinerary.city}</p>
                            </div>
                            <Badge variant={itinerary.status === 'active' ? 'default' : 'secondary'}>
                              {itinerary.status}
                            </Badge>
                          </div>

                          <div className="space-y-2 text-sm font-poppins font-light">
                            <div className="flex items-center gap-2">
                              <Calendar className="w-4 h-4 text-gray-500" />
                              <span>{itinerary.duration}</span>
                            </div>
                            <div className="flex items-center gap-2">
                              <MapPin className="w-4 h-4 text-gray-500" />
                              <span>{itinerary.attractions} attractions</span>
                            </div>
                            <div className="flex items-center gap-2">
                              <Clock className="w-4 h-4 text-gray-500" />
                              <span>Created {new Date(itinerary.createdDate).toLocaleDateString()}</span>
                            </div>
                          </div>

                          <Button
                            variant="outline"
                            className="w-full mt-4 font-poppins font-normal"
                            onClick={onViewItineraryClick}
                          >
                            View Itinerary
                          </Button>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-16">
                    <div className="max-w-md mx-auto">
                      <div className="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <Calendar className="w-12 h-12 text-gray-400" />
                      </div>
                      <h3 className="font-poppins text-xl mb-4 font-normal">You don't have an itinerary yet</h3>
                      <p className="text-gray-600 mb-6 font-poppins font-light">
                        Create your first itinerary to plan your perfect trip
                      </p>
                      <Button
                        className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins font-normal"
                        onClick={onCreateItineraryClick}
                      >
                        <Plus className="w-4 h-4 mr-2" />
                        Create Itinerary
                      </Button>
                    </div>
                  </div>
                )}
              </motion.div>
            </TabsContent>
          </Tabs>
        </div>
      </section>

      {/* Footer */}
      <Footer
        onHomeClick={onHomeClick}
        onMelbourneClick={onMelbourneClick}
        onPassesClick={onPassesClick}
        onSignInClick={onSignInClick}
        onAttractionsClick={onAttractionsClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
        onFAQClick={onFAQClick}
        onPrivacyPolicyClick={onPrivacyPolicyClick}
        onContactUsClick={onContactUsClick}
        currentPage={currentPage}
      />
    </div>
  );
}

export default ProfilePage;