import { useState } from 'react';
import { motion } from 'motion/react';
import { Calendar, User, Clock, ArrowRight, Search, Tag, CreditCard, MapPin, Check, Smartphone, Star, Heart, Share2 } from 'lucide-react';
import { Button } from '../components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card';
import { Badge } from '../components/ui/badge';
import { Input } from '../components/ui/input';
import Navbar from '../components/Navbar';
// import { CitySubmenu } from './CitySubmenu';
import { MobileAppSection } from '../components/MobileAppSection';
import { WhyChooseCityCards } from '../components/WhyChooseCityCards';
import { EnhancedTestimonials } from '../components/EnhancedTestimonials';
import { ReviewsSection } from '../components/ReviewsSection';
import { Footer } from '../components/Footer';
import { ImageWithFallback } from '../components/figma/ImageWithFallback';
import imgFrame1597884939 from "figma:asset/5da1b0444c0d21bc7ee776c49e36e2a8ea4d3e12.png";

// Blog Mobile App Section Component
function BlogMobileAppSection() {
  return (
    <section className="bg-muted/30 relative overflow-hidden">
      {/* Subtle Background Elements */}


    </section>
  );
}

interface BlogsPageProps {
  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;
  onBlogClick?: (blogId: string) => void;
  currentPage: string;
  user?: { email: string; name: string; } | null;
}

// Mock blog data
const blogPosts = [
  {
    id: '1',
    title: 'Ultimate Melbourne Coffee Culture Guide',
    excerpt: 'Discover the hidden laneway cafes and roastery gems that make Melbourne the coffee capital of Australia.',
    author: 'Sarah Johnson',
    date: 'Dec 15, 2024',
    readTime: '5 min read',
    category: 'Food & Drink',
    featured: true,
    image: 'https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBjb2ZmZWV8ZW58MXx8fHwxNzU2MTI0MDYwfDA&ixlib=rb-4.1.0&q=80&w=1080'
  },
  {
    id: '2',
    title: 'Hidden Street Art Treasures in Melbourne',
    excerpt: 'Navigate through Melbourne\'s famous laneways and discover world-class street art that transforms the city into an open-air gallery.',
    author: 'Michael Chen',
    date: 'Dec 12, 2024',
    readTime: '4 min read',
    category: 'Entertainment',
    image: 'https://images.unsplash.com/photo-1523631278395-d65a85c7c3b3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzdHJlZXQlMjBhcnQlMjBtZWxib3VybmV8ZW58MXx8fHwxNzU2MTI0MDY5fDA&ixlib=rb-4.1.0&q=80&w=1080'
  },
  {
    id: '3',
    title: 'A Foodie\'s Guide to Queen Victoria Market',
    excerpt: 'From fresh produce to international delicacies, explore the vibrant flavors and culinary experiences at Melbourne\'s iconic market.',
    author: 'Emma Wilson',
    date: 'Dec 10, 2024',
    readTime: '6 min read',
    category: 'Food & Drink',
    image: 'https://images.unsplash.com/photo-1567306301408-9b74a2a3e9b4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtYXJrZXQlMjBmb29kfGVufDF8fHx8MTc1NjEyNDA3Mnww&ixlib=rb-4.1.0&q=80&w=1080'
  },
  {
    id: '4',
    title: 'Exploring Melbourne\'s Rooftop Bars',
    excerpt: 'Sip cocktails with stunning city views at Melbourne\'s best rooftop venues, from hidden speakeasies to glamorous sky-high lounges.',
    author: 'James Parker',
    date: 'Dec 8, 2024',
    readTime: '7 min read',
    category: 'Adventure',
    image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxvdXRiYWNrJTIwYXVzdHJhbGlhfGVufDF8fHx8MTc1NjEyNDEwMXww&ixlib=rb-4.1.0&q=80&w=1080'
  },
  {
    id: '5',
    title: 'Secrets of the Great Ocean Road',
    excerpt: 'Uncover hidden gems along one of the world\'s most scenic coastal drives, from secluded beaches to charming seaside towns.',
    author: 'Lisa Rodriguez',
    date: 'Dec 5, 2024',
    readTime: '8 min read',
    category: 'Road Trip',
    image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxncmVhdCUyMG9jZWFuJTIwcm9hZHxlbnwxfHx8fDE3NTYxMjQxMDV8MA&ixlib=rb-4.1.0&q=80&w=1080'
  },
  {
    id: '6',
    title: 'Wonders of the Great Barrier Reef',
    excerpt: 'Explore the underwater paradise of the Great Barrier Reef and discover the incredible marine life that calls this UNESCO World Heritage site home.',
    author: 'David Thompson',
    date: 'Dec 3, 2024',
    readTime: '6 min read',
    category: 'Nature',
    image: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxncmVhdCUyMGJhcnJpZXIlMjByZWVmfGVufDF8fHx8MTc1NjEyNDEwOXww&ixlib=rb-4.1.0&q=80&w=1080'
  }
];

const categories = ['All', 'Travel Guide', 'Food & Drink', 'Entertainment', 'Adventure', 'Road Trip', 'Nature'];

const exploreMoreItems = [
  {
    title: 'Melbourne City Guide',
    description: 'Complete guide to exploring Melbourne',
    category: 'Guide'
  },
  {
    title: 'Best Attractions',
    description: 'Top-rated attractions in Melbourne',
    category: 'Attractions'
  },
  {
    title: 'Food & Culture',
    description: 'Culinary experiences and cultural insights',
    category: 'Culture'
  },
  {
    title: 'Events Calendar',
    description: 'Upcoming events and festivals',
    category: 'Events'
  },
  {
    title: 'Travel Tips',
    description: 'Essential tips for visiting Melbourne',
    category: 'Tips'
  },
  {
    title: 'Photography Spots',
    description: 'Instagram-worthy locations in the city',
    category: 'Photography'
  }
];



export function BlogsPage({ 
  onHomeClick, 
  onMelbourneClick, 
  onPassesClick,
  onCheckoutClick,
  onSignInClick, 
  onSignOutClick,
  onAttractionsClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onProfileClick,
  onCityCardsClick,
  onMagicItineraryClick,
  onPostCardsClick,
  onOffersClick,
  onContactUsClick,
  onEsimsClick,
  onHotelDiscountsClick,
  onBlogClick,
  currentPage,
  user
}: BlogsPageProps) {
  const [selectedCategory, setSelectedCategory] = useState<string>('All');
  const [searchQuery, setSearchQuery] = useState<string>('');

  const filteredPosts = blogPosts.filter(post => {
    const matchesCategory = selectedCategory === 'All' || post.category === selectedCategory;
    const matchesSearch = post.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         post.excerpt.toLowerCase().includes(searchQuery.toLowerCase());
    return matchesCategory && matchesSearch;
  });

  const featuredPost = blogPosts.find(post => post.featured);
  const latestPosts = blogPosts.slice(0, 4);

  return (
    <div className="min-h-screen bg-background">
      {/* Navigation */}
      <Navbar 
        activeCity="Melbourne"
        onCityChange={(city) => {
          if (city === 'Melbourne') {
            onMelbourneClick();
          }
        }}
        onHomeClick={onHomeClick}
        onSignInClick={onSignInClick}
        onSignOutClick={onSignOutClick}
        onPassesClick={onPassesClick}
        onCheckoutClick={onCheckoutClick}
        onAttractionsClick={onAttractionsClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
        onFAQClick={onFAQClick}
        onPrivacyPolicyClick={onPrivacyPolicyClick}
        onAboutUsClick={onAboutUsClick}
        onProfileClick={onProfileClick}
        onCityCardsClick={onCityCardsClick}
        onMagicItineraryClick={onMagicItineraryClick}
        onPostCardsClick={onPostCardsClick}
        onOffersClick={onOffersClick}
        onEsimsClick={onEsimsClick}
        onHotelDiscountsClick={onHotelDiscountsClick}
        currentPage={currentPage}
        isUserSignedIn={!!user}
        user={user}
      />
      
      {/* <CitySubmenu 
        currentPage={currentPage}
        onClose={() => {}}
        onHomeClick={onHomeClick}
        onMelbourneClick={onMelbourneClick}
        onAttractionsClick={onAttractionsClick}
        onPassesClick={onPassesClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
      /> */}

      <div className="container mx-auto px-4 pt-52 pb-12 relative z-10">
        {/* Page Header */}
        <motion.div 
          className="text-center mb-16"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <h1 className="font-poppins text-4xl md:text-5xl lg:text-6xl leading-tight mb-4">
            <span className="font-light">Explore more with the</span>{' '}
            <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
              Blogs
            </span>
          </h1>
          <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 max-w-3xl mx-auto">
            Discover insider tips, hidden gems, and travel stories from Melbourne and beyond
          </p>
        </motion.div>

        {/* Search and Filter Section */}
        <motion.div 
          className="mb-12"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.1 }}
        >
          <div className="flex flex-col md:flex-row gap-6 items-center justify-between">
            {/* Search Bar */}
            <div className="relative w-full md:w-96">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
              <Input
                placeholder="Search blogs..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="font-poppins font-normal text-base pl-10 py-3 rounded-xl border-gray-200 focus:border-primary"
              />
            </div>

            {/* Category Filter */}
            <div className="flex gap-2 flex-wrap justify-center">
              {categories.map((category) => (
                <Button
                  key={category}
                  variant={selectedCategory === category ? "default" : "outline"}
                  size="sm"
                  onClick={() => setSelectedCategory(category)}
                  className={`font-poppins font-medium text-base rounded-full px-4 py-2 transition-all duration-200 ${
                    selectedCategory === category 
                      ? 'bg-primary text-white shadow-lg' 
                      : 'hover:bg-gray-50 hover:border-primary'
                  }`}
                >
                  {category}
                </Button>
              ))}
            </div>
          </div>
        </motion.div>

        {/* Main Content Grid */}
        <div className="grid lg:grid-cols-12 gap-12 mb-20">
          {/* Left Side - Latest Blogs */}
          <motion.div 
            className="lg:col-span-8"
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            <div className="mb-8">
              <h2 className="font-poppins text-2xl font-normal text-gray-900 mb-6">
                Latest Blogs
              </h2>
              
              {/* Featured Blog */}
              {featuredPost && (
                <Card 
                  className="mb-8 overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300 h-[767px] flex flex-col cursor-pointer"
                  onClick={() => onBlogClick?.(featuredPost.id)}
                >
                  <div className="relative h-[555px]">
                    <ImageWithFallback
                      src={featuredPost.image}
                      alt={featuredPost.title}
                      className="w-full h-full object-cover"
                    />
                    <Badge className="absolute top-4 left-4 bg-primary text-white font-normal">
                      Featured
                    </Badge>
                  </div>
                  <div className="flex flex-col pt-[12px] px-[14px]">
                    <div>
                      <div className="flex items-center gap-2 mb-3">
                        <Badge variant="outline" className="text-sm font-light">
                          {featuredPost.category}
                        </Badge>
                      </div>
                      <h3 className="font-poppins font-normal text-gray-900 mb-3 line-clamp-2 text-xl">
                        {featuredPost.title}
                      </h3>
                      <p className="font-poppins text-base text-gray-600 mb-4 line-clamp-2 font-light">
                        {featuredPost.excerpt}
                      </p>
                    </div>
                    <div className="flex items-center justify-between text-sm text-gray-500 font-light">
                      <div className="flex items-center gap-3">
                        <div className="flex items-center gap-1">
                          <User className="w-3 h-3" />
                          <span>{featuredPost.author}</span>
                        </div>
                        <div className="flex items-center gap-1">
                          <Calendar className="w-3 h-3" />
                          <span>{featuredPost.date}</span>
                        </div>
                      </div>
                      <Button 
                        variant="ghost" 
                        size="sm" 
                        className="text-primary hover:text-primary/80 h-auto p-1 font-normal"
                        onClick={(e) => {
                          e.stopPropagation();
                          onBlogClick?.(featuredPost.id);
                        }}
                      >
                        <ArrowRight className="w-4 h-4" />
                      </Button>
                    </div>
                  </div>
                </Card>
              )}

              {/* Blog List */}
              <div className="space-y-6">
                {filteredPosts.filter(post => !post.featured).map((post, index) => (
                  <motion.div
                    key={post.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6, delay: 0.1 * index }}
                  >
                    <Card 
                      className="overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer"
                      onClick={() => onBlogClick?.(post.id)}
                    >
                      <div className="md:flex">
                        <div className="md:w-48 md:flex-shrink-0">
                          <div className="relative h-48 md:h-full">
                            <ImageWithFallback
                              src={post.image}
                              alt={post.title}
                              className="w-full h-full object-cover"
                            />
                          </div>
                        </div>
                        <div className="p-6 flex-1">
                          <div className="flex items-center gap-2 mb-3">
                            <Badge variant="outline" className="text-xs font-light">
                              {post.category}
                            </Badge>
                          </div>
                          <h3 className="font-merchant text-xl font-normal text-gray-900 mb-3 line-clamp-2">
                            {post.title}
                          </h3>
                          <p className="font-poppins text-gray-600 mb-4 line-clamp-2 font-light">
                            {post.excerpt}
                          </p>
                          <div className="flex items-center justify-between">
                            <div className="flex items-center gap-4 text-sm text-gray-500 font-light">
                              <div className="flex items-center gap-1">
                                <User className="w-4 h-4" />
                                <span>{post.author}</span>
                              </div>
                              <div className="flex items-center gap-1">
                                <Calendar className="w-4 h-4" />
                                <span>{post.date}</span>
                              </div>
                              <div className="flex items-center gap-1">
                                <Clock className="w-4 h-4" />
                                <span>{post.readTime}</span>
                              </div>
                            </div>
                            <Button 
                              variant="ghost" 
                              size="sm" 
                              className="text-primary hover:text-primary/80 font-normal"
                              onClick={(e) => {
                                e.stopPropagation();
                                onBlogClick?.(post.id);
                              }}
                            >
                              Read More <ArrowRight className="w-4 h-4 ml-1" />
                            </Button>
                          </div>
                        </div>
                      </div>
                    </Card>
                  </motion.div>
                ))}
              </div>
            </div>
          </motion.div>

          {/* Right Side - Explore More */}
          <motion.div 
            className="lg:col-span-4"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.3 }}
          >
            <div className="sticky top-24">
              <h3 className="font-merchant text-xl font-normal text-gray-900 mb-6">
                Explore More
              </h3>
              <div className="space-y-4">
                {exploreMoreItems.map((item, index) => (
                  <Card key={index} className="p-4 hover:shadow-md transition-shadow duration-200 cursor-pointer">
                    <div className="flex items-center justify-between">
                      <div>
                        <h4 className="font-merchant font-normal text-gray-900 mb-1">
                          {item.title}
                        </h4>
                        <p className="font-poppins text-sm text-gray-600 font-light">
                          {item.description}
                        </p>
                      </div>
                      <ArrowRight className="w-4 h-4 text-gray-400" />
                    </div>
                  </Card>
                ))}
              </div>

              {/* Newsletter Signup */}
              <Card className="mt-8 p-6 bg-gradient-to-br from-primary/5 to-secondary/5 border-primary/20">
                <h4 className="font-merchant font-normal text-gray-900 mb-2">
                  Stay Updated
                </h4>
                <p className="font-poppins text-sm text-gray-600 mb-4 font-light">
                  Get the latest travel tips and city guides delivered to your inbox.
                </p>
                <div className="space-y-3">
                  <Input 
                    placeholder="Enter your email"
                    className="bg-white border-gray-200 font-light"
                  />
                  <Button className="w-full bg-primary hover:bg-primary/90 font-normal">
                    Subscribe
                  </Button>
                </div>
              </Card>
            </div>
          </motion.div>
        </div>

        {/* Access Your CityCards Section */}
        <div className="my-20">
          <MobileAppSection />
        </div>

        {/* Why Choose CityCards Section */}
        <div className="my-20">
          <WhyChooseCityCards />
        </div>

        {/* Enhanced Testimonials Section */}
        <EnhancedTestimonials />

        {/* Blog Mobile App Section */}
        <BlogMobileAppSection />

        {/* Reviews Section */}
        <ReviewsSection />
      </div>

      <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 BlogsPage;