import { useState, useMemo, useEffect, useRef, forwardRef } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { Search, ChevronUp, ChevronDown, Globe, ShoppingBag, Menu, X } from 'lucide-react';
import { ImageWithFallback } from '../components/figma/ImageWithFallback';
import { Button } from '../components/ui/button';
import { Badge } from '../components/ui/badge';
import { Input } from '../components/ui/input';
import { MobileAppSection } from '../components/MobileAppSection';
import { WhyChooseCityCards } from '../components/WhyChooseCityCards';
import { Card, CardContent } from '../components/ui/card';
import { Layout } from '../Layout';
const logoImage = 'https://images.unsplash.com/photo-1759365400065-ab88a7b8e82f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtb2Rlcm4lMjB0cmF2ZWwlMjBsb2dvfGVufDF8fHx8MTc2MDYwMTc0MHww&ixlib=rb-4.1.0&q=80&w=1080';

interface FAQ {
    id: number;
    question: string;
    answer: string;
    category: string;
}

interface DropdownItem {
    id: string;
    label: string;
    icon?: React.ReactNode;
    action?: () => void;
    badge?: string | number;
}

interface CartItem {
    id: string;
    name: string;
    price: string;
    image?: string;
    quantity: number;
}

interface DropdownProps {
    isOpen: boolean;
    onToggle: () => void;
    items: DropdownItem[];
    trigger: React.ReactNode;
    title?: string;
    className?: string;
}

interface FAQPageProps {
    onHomeClick?: () => void;
    onPassesClick?: () => void;
    onSignInClick?: () => void;
    onBackClick: () => void;
    onMelbourneClick: () => void;
    onCheckoutClick: () => 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;
}

interface LayoutProps {
  activeCity?: string;
  onSignInClick?: () => void;
  onSignOutClick?: () => void;
  user?: { email: string; name: string } | null;
  showCitySubmenu?: boolean;
  children: React.ReactNode;
}


const faqs: FAQ[] = [
    {
        id: 1,
        question: "What is CityCards?",
        answer: "CityCards is a digital pass that gives you access to multiple attractions, experiences, and tours in major cities. With one card, you can explore museums, landmarks, tours, and activities while saving money and time.",
        category: "General"
    },
    {
        id: 2,
        question: "How does CityCards work?",
        answer: "Purchase a CityCard for your chosen city, receive it instantly on your mobile device, and show it at participating attractions to gain entry. It's that simple! No need to print tickets or stand in long queues.",
        category: "General"
    },
    {
        id: 3,
        question: "Which cities are available?",
        answer: "CityCards is currently available in Melbourne, Sydney, Brisbane, Perth, and Adelaide. We're constantly expanding to new cities across Australia and around the world.",
        category: "General"
    },
    {
        id: 4,
        question: "How much can I save with CityCards?",
        answer: "On average, customers save 40-50% compared to buying individual attraction tickets. The more attractions you visit, the more you save! Some passes offer savings of up to 60% on popular experiences.",
        category: "Pricing"
    },
    {
        id: 5,
        question: "What's included in a CityCard?",
        answer: "Each CityCard includes entry to 30-50+ top attractions, museums, tours, and experiences. You'll also get skip-the-line access at select venues, exclusive discounts, and a digital guidebook with insider tips.",
        category: "Features"
    },
    {
        id: 6,
        question: "How long is the CityCard valid?",
        answer: "CityCards are valid for 1, 2, 3, or 7 consecutive days from first use, depending on which pass you choose. The countdown starts when you visit your first attraction, giving you flexibility to plan your trip.",
        category: "Usage"
    },
    {
        id: 7,
        question: "Can I share my CityCard with others?",
        answer: "No, CityCards are non-transferable and can only be used by the person whose name is on the card. Each person in your group will need their own card.",
        category: "Usage"
    },
    {
        id: 8,
        question: "Do I need to book attractions in advance?",
        answer: "Most attractions don't require advance booking - just show up with your CityCard. However, some popular venues may require reservations during peak times. Check the app for specific requirements.",
        category: "Booking"
    },
    {
        id: 9,
        question: "Is the CityCard available on mobile?",
        answer: "Yes! Our mobile app is available for iOS and Android. You can store your card, plan your itinerary, check attraction hours, and get directions - all in one place.",
        category: "Technology"
    },
    {
        id: 10,
        question: "What if an attraction is closed?",
        answer: "If an attraction is temporarily closed, we'll notify you via the app and suggest alternatives. Your card validity will be extended to compensate for closures beyond our control.",
        category: "Usage"
    },
    {
        id: 11,
        question: "Can I get a refund?",
        answer: "Unused CityCards can be refunded within 90 days of purchase, as long as the card hasn't been activated. Once activated, the card is non-refundable but can be modified for a small fee.",
        category: "Pricing"
    },
    {
        id: 12,
        question: "Are there discounts for children?",
        answer: "Yes! We offer discounted rates for children (ages 3-15) and youth (ages 16-25). Children under 3 can often enter attractions for free when accompanied by an adult with a valid CityCard.",
        category: "Pricing"
    },
    {
        id: 13,
        question: "How do I activate my CityCard?",
        answer: "Your CityCard activates automatically when you visit your first attraction. Simply show your digital card at the entrance, and the venue will scan it to begin your pass validity period.",
        category: "Getting Started"
    },
    {
        id: 14,
        question: "Can I pause my CityCard?",
        answer: "CityCards run on consecutive days and cannot be paused. However, you can choose when to activate it by selecting your first attraction visit date.",
        category: "Usage"
    },
    {
        id: 15,
        question: "What if I lose my phone?",
        answer: "No worries! Your CityCard is linked to your email account. Simply log in on another device or contact our support team to recover your card information.",
        category: "Technology"
    },
    {
        id: 16,
        question: "Is there customer support?",
        answer: "Yes! Our customer support team is available 24/7 via phone, email, and live chat. We're here to help you make the most of your CityCards experience.",
        category: "Support"
    },
    {
        id: 17,
        question: "Can I visit the same attraction twice?",
        answer: "Each attraction can typically be visited once per card validity period. However, some experiences like hop-on-hop-off buses allow multiple uses throughout the day.",
        category: "Usage"
    },
    {
        id: 18,
        question: "Do I need to print anything?",
        answer: "No printing required! Your CityCard is completely digital. Just show it on your smartphone at each attraction. Make sure your phone is charged and have a backup battery pack just in case.",
        category: "Technology"
    },
    {
        id: 19,
        question: "Are guided tours included?",
        answer: "Yes! Many CityCards include access to guided walking tours, bus tours, and audio guides at museums. Check your specific card's attraction list for details.",
        category: "Features"
    },
    {
        id: 20,
        question: "How do skip-the-line benefits work?",
        answer: "At participating venues, you can use the priority entrance lane by showing your CityCard. Some attractions may have specific time slots for CityCard holders - check the app for details.",
        category: "Features"
    },
    {
        id: 21,
        question: "Can I buy CityCards as a gift?",
        answer: "Absolutely! CityCards make perfect gifts. You can purchase a gift card and send it directly to the recipient's email with a personalized message.",
        category: "Booking"
    },
    {
        id: 22,
        question: "What payment methods do you accept?",
        answer: "We accept all major credit cards (Visa, Mastercard, American Express), PayPal, Apple Pay, and Google Pay. All transactions are secure and encrypted.",
        category: "Pricing"
    },
    {
        id: 23,
        question: "Is there a group discount?",
        answer: "Yes! Groups of 10 or more can receive special discounted rates. Contact our group sales team for a custom quote and additional perks.",
        category: "Pricing"
    },
    {
        id: 24,
        question: "How often are new attractions added?",
        answer: "We regularly partner with new venues and update our attraction lists quarterly. CityCard holders get notified about new additions and can access them immediately.",
        category: "Features"
    }
];

const categories = ["General", "Pricing", "Features", "Usage", "Booking", "Technology", "Support", "Getting Started"];

export function FAQPage({ onHomeClick,
  onPassesClick,
  onSignInClick,
  onSignOutClick,
  currentPage = 'faq',}: FAQPageProps) {
    const [searchQuery, setSearchQuery] = useState('');
    const [selectedCategory, setSelectedCategory] = useState('All');
    const [expandedFAQs, setExpandedFAQs] = useState<Set<number>>(new Set());
    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
    const [isScrolled, setIsScrolled] = useState(false);
    const [activeLanguageDropdown, setActiveLanguageDropdown] = useState(false);
    const [activeCartDropdown, setActiveCartDropdown] = useState(false);

    const languageRef = useRef<HTMLDivElement>(null);
    const cartRef = useRef<HTMLDivElement>(null);

    // Languages available
    const languages: DropdownItem[] = [
        { id: 'en', label: 'English', icon: <span className="text-base">🇺🇸</span> },
        { id: 'es', label: 'Español', icon: <span className="text-base">🇪🇸</span> },
        { id: 'fr', label: 'Français', icon: <span className="text-base">🇫🇷</span> },
        { id: 'de', label: 'Deutsch', icon: <span className="text-base">🇩🇪</span> },
        { id: 'it', label: 'Italiano', icon: <span className="text-base">🇮🇹</span> },
    ];

    // Mock cart items
    const cartItems: CartItem[] = [
        { id: '1', name: 'Sydney 2-Day Pass', price: '$89', quantity: 1 },
        { id: '2', name: 'Melbourne Premium Pass', price: '$129', quantity: 1 },
    ];

    const toggleFAQ = (id: number) => {
        setExpandedFAQs(prev => {
            const newSet = new Set(prev);
            if (newSet.has(id)) {
                newSet.delete(id);
            } else {
                newSet.add(id);
            }
            return newSet;
        });
    };

    const filteredFAQs = useMemo(() => {
        return faqs.filter(faq => {
            const matchesSearch = faq.question.toLowerCase().includes(searchQuery.toLowerCase()) ||
                faq.answer.toLowerCase().includes(searchQuery.toLowerCase());
            const matchesCategory = selectedCategory === 'All' || faq.category === selectedCategory;
            return matchesSearch && matchesCategory;
        });
    }, [searchQuery, selectedCategory]);

    const faqPairs = useMemo(() => {
        const pairs = [];
        for (let i = 0; i < filteredFAQs.length; i += 2) {
            pairs.push(filteredFAQs.slice(i, i + 2));
        }
        return pairs;
    }, [filteredFAQs]);

    // Detect scroll for navbar styling
    useEffect(() => {
        const handleScroll = () => {
            const scrolled = window.scrollY > 20;
            setIsScrolled(scrolled);
        };

        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    // Close dropdowns when clicking outside
    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (languageRef.current && !languageRef.current.contains(event.target as Node)) {
                setActiveLanguageDropdown(false);
            }
            if (cartRef.current && !cartRef.current.contains(event.target as Node)) {
                setActiveCartDropdown(false);
            }
        };

        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    }, []);

    // Close mobile menu on escape key
    useEffect(() => {
        const handleEscape = (e: KeyboardEvent) => {
            if (e.key === 'Escape') {
                setIsMobileMenuOpen(false);
                setActiveLanguageDropdown(false);
                setActiveCartDropdown(false);
            }
        };

        document.addEventListener('keydown', handleEscape);
        return () => document.removeEventListener('keydown', handleEscape);
    }, []);

    // Calculate cart total
    const cartTotal = cartItems.reduce((total, item) => {
        const price = parseFloat(item.price.replace('$', ''));
        return total + (price * item.quantity);
    }, 0);

    // Create click handlers for the navbar elements
    const handleNavClick = (section: string) => {
        switch (section) {
            case 'about':
                onHomeClick?.();
                break;
            case 'products':
                onPassesClick?.();
                break;
            case 'faq':
                // Already on FAQ page
                break;
            case 'card':
                onHomeClick?.();
                break;
            default:
                break;
        }
    };

    // Check if navigation item is active
    const isNavItemActive = (action: string) => {
        return currentPage === action;
    };

    // Dropdown component with proper ref forwarding
    const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(({
        isOpen,
        onToggle,
        items,
        trigger,
        title,
        className = ""
    }, ref) => (
        <div ref={ref} className={`relative ${className}`}>
            <motion.button
                onClick={onToggle}
                className="relative"
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
            >
                {trigger}
            </motion.button>

            <AnimatePresence>
                {isOpen && (
                    <motion.div
                        initial={{ opacity: 0, y: 10, scale: 0.95 }}
                        animate={{ opacity: 1, y: 0, scale: 1 }}
                        exit={{ opacity: 0, y: 10, scale: 0.95 }}
                        transition={{ duration: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
                        className="absolute top-full right-0 mt-2 bg-white rounded-2xl shadow-xl border border-gray-100 min-w-[220px] overflow-hidden z-50"
                    >
                        {title && (
                            <div className="px-5 py-4 border-b border-gray-100">
                                <h3 className="font-poppins font-semibold text-gray-900 text-base">{title}</h3>
                            </div>
                        )}

                        <div className="py-2">
                            {items.map((item, index) => (
                                <motion.button
                                    key={item.id}
                                    onClick={() => {
                                        item.action?.();
                                        onToggle();
                                    }}
                                    className="w-full flex items-center justify-between px-5 py-3 text-left hover:bg-gray-50 transition-colors duration-200"
                                    initial={{ opacity: 0, x: -10 }}
                                    animate={{ opacity: 1, x: 0 }}
                                    transition={{ delay: index * 0.05 }}
                                    whileHover={{ x: 4 }}
                                >
                                    <div className="flex items-center space-x-3">
                                        {item.icon}
                                        <span className="font-poppins text-gray-700 text-base font-normal">{item.label}</span>
                                    </div>
                                    {item.badge && (
                                        <span className="bg-primary text-primary-foreground text-xs px-2 py-1 rounded-full font-poppins font-medium">
                                            {item.badge}
                                        </span>
                                    )}
                                </motion.button>
                            ))}
                        </div>
                    </motion.div>
                )}
            </AnimatePresence>
        </div>
    ));

    Dropdown.displayName = 'Dropdown';

    return (
        <div className="min-h-screen bg-white">
            <Layout
                activeCity=""
                onSignInClick={onSignInClick}
                onSignOutClick={onSignOutClick}
                // user={user}
                // showCitySubmenu={false}
            >

                {/* Main Content */}
                <div className="container mx-auto px-4 pt-32 lg:pt-52 pb-12">
                    {/* Page Header */}
                    <motion.div
                        className="text-center mb-12"
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.6 }}
                    >
                        <motion.div
                            className="font-poppins tracking-wider text-primary mb-4"
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            transition={{ duration: 0.4, delay: 0.2 }}
                        >
                            GET STARTED NOW
                        </motion.div>

                        <h1 className="font-poppins text-4xl md:text-5xl lg:text-6xl leading-tight text-gray-900 mb-6">
                            <span className="font-light">Frequently Asked</span>{' '}
                            <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                                Questions
                            </span>
                        </h1>

                        <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 max-w-3xl mx-auto">
                            Find answers to the most common questions about CityCards, bookings, and your city exploration experience
                        </p>
                    </motion.div>

                    {/* Search and Filter Section */}
                    <motion.div
                        className="mb-12 max-w-4xl mx-auto"
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.6, delay: 0.3 }}
                    >
                        {/* Search Bar */}
                        <div className="relative mb-8">
                            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
                            <Input
                                type="text"
                                placeholder="Search for questions..."
                                value={searchQuery}
                                onChange={(e) => setSearchQuery(e.target.value)}
                                className="pl-12 pr-4 py-6 bg-white border-2 border-gray-200 rounded-2xl focus:border-primary focus:ring-4 focus:ring-primary/10 transition-all duration-200 font-poppins"
                            />
                        </div>

                        {/* Category Tags */}
                        <div className="flex flex-wrap gap-3 justify-center">
                            <Badge
                                variant={selectedCategory === 'All' ? 'default' : 'secondary'}
                                className={`px-6 py-3 cursor-pointer transition-all duration-200 hover:scale-105 font-poppins ${selectedCategory === 'All'
                                    ? 'bg-primary text-white shadow-lg'
                                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                                    }`}
                                onClick={() => setSelectedCategory('All')}
                            >
                                All
                            </Badge>
                            {categories.map((category) => (
                                <Badge
                                    key={category}
                                    variant={selectedCategory === category ? 'default' : 'secondary'}
                                    className={`px-6 py-3 cursor-pointer transition-all duration-200 hover:scale-105 font-poppins ${selectedCategory === category
                                        ? 'bg-primary text-white shadow-lg'
                                        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                                        }`}
                                    onClick={() => setSelectedCategory(category)}
                                >
                                    {category}
                                </Badge>
                            ))}
                        </div>
                    </motion.div>

                    {/* FAQ Content */}
                    <div className="w-full">
                        {faqPairs.length === 0 ? (
                            <motion.div
                                className="text-center py-12"
                                initial={{ opacity: 0 }}
                                animate={{ opacity: 1 }}
                                transition={{ duration: 0.4 }}
                            >
                                <p className="font-poppins text-xl leading-relaxed font-normal text-gray-500">No questions found matching your search.</p>
                            </motion.div>
                        ) : (
                            <div className="space-y-8">
                                {faqPairs.map((pair, pairIndex) => (
                                    <motion.div
                                        key={pairIndex}
                                        className="grid grid-cols-1 lg:grid-cols-2 gap-8"
                                        initial={{ opacity: 0, y: 20 }}
                                        animate={{ opacity: 1, y: 0 }}
                                        transition={{ duration: 0.5, delay: pairIndex * 0.1 }}
                                    >
                                        {pair.map((faq) => {
                                            const isExpanded = expandedFAQs.has(faq.id);

                                            return (
                                                <div
                                                    key={faq.id}
                                                    className="faq-card bg-white rounded-2xl shadow-sm hover:shadow-md transition-all duration-300 relative overflow-hidden"
                                                >
                                                    <button
                                                        onClick={() => toggleFAQ(faq.id)}
                                                        className="w-full p-8 text-left hover:bg-gray-100/50 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-primary/10"
                                                    >
                                                        <div className="flex items-start gap-4 mb-4">
                                                            <span className="w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center flex-shrink-0 font-poppins font-semibold">
                                                                {faq.id}
                                                            </span>
                                                            <div className="flex-1">
                                                                <h3 className="font-poppins text-xl leading-tight font-medium text-gray-900 mb-2">
                                                                    {faq.question}
                                                                </h3>
                                                                <div className="flex items-center justify-between">
                                                                    <Badge variant="secondary" className="px-3 py-1 bg-gray-100 text-gray-600 font-poppins font-normal">
                                                                        {faq.category}
                                                                    </Badge>
                                                                    <div className="flex-shrink-0">
                                                                        {isExpanded ? (
                                                                            <ChevronUp className="w-5 h-5 text-primary" />
                                                                        ) : (
                                                                            <ChevronDown className="w-5 h-5 text-gray-400" />
                                                                        )}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </button>

                                                    {/* Answer Content */}
                                                    <AnimatePresence>
                                                        {isExpanded && (
                                                            <motion.div
                                                                initial={{ height: 0, opacity: 0 }}
                                                                animate={{ height: 'auto', opacity: 1 }}
                                                                exit={{ height: 0, opacity: 0 }}
                                                                transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
                                                                className="overflow-hidden"
                                                            >
                                                                <div className="px-8 pb-8">
                                                                    <div className="border-t border-gray-200 pt-6">
                                                                        <p className="font-poppins text-base leading-relaxed font-normal text-gray-600">
                                                                            {faq.answer}
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </motion.div>
                                                        )}
                                                    </AnimatePresence>
                                                </div>
                                            );
                                        })}

                                        {/* If odd number of FAQs, add empty space for the last row */}
                                        {pair.length === 1 && (
                                            <div className="hidden lg:block" />
                                        )}
                                    </motion.div>
                                ))}
                            </div>
                        )}
                    </div>

                    {/* Mobile App Section */}
                    <motion.div
                        className="mt-20"
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.6, delay: 0.5 }}
                    >
                        <div className="bg-muted/30 relative overflow-hidden rounded-3xl">
                            <div className="absolute inset-0">
                                <div className="absolute top-1/3 left-1/6 w-64 h-64 bg-primary/3 rounded-full blur-3xl"></div>
                                <div className="absolute bottom-1/2 right-1/6 w-48 h-48 bg-secondary/3 rounded-full blur-3xl"></div>
                            </div>

                            <MobileAppSection />
                        </div>
                    </motion.div>

                    {/* Why Choose Us Section */}
                    <motion.div
                        className="mt-20"
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.6, delay: 0.6 }}
                    >
                        <WhyChooseCityCards />
                    </motion.div>

                    {/* Contact Support Section */}
                    <motion.div
                        className="mt-20 text-center"
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.6, delay: 0.7 }}
                    >
                        <Card className="max-w-2xl mx-auto bg-gradient-to-br from-primary/5 to-secondary/5 border-2 border-primary/20 rounded-3xl p-8">
                            <CardContent className="p-0">
                                <h3 className="font-poppins text-2xl leading-tight font-medium text-gray-900 mb-4">
                                    Still have questions?
                                </h3>
                                <p className="font-poppins text-base leading-relaxed font-normal text-gray-600 mb-6">
                                    Our support team is available 24/7 to help you with any questions or concerns about your CityCards experience.
                                </p>
                                <div className="flex flex-col sm:flex-row gap-4 justify-center">
                                    <a
                                        href="mailto:support@citycards.com"
                                        className="px-8 py-3 bg-primary text-white rounded-full hover:bg-primary/90 transition-colors duration-200 font-poppins font-medium"
                                    >
                                        Email Support
                                    </a>
                                    <a
                                        href="tel:+1-800-CITYCARD"
                                        className="px-8 py-3 bg-white text-primary border-2 border-primary rounded-full hover:bg-primary/5 transition-colors duration-200 font-poppins font-medium"
                                    >
                                        Call Us
                                    </a>
                                </div>
                            </CardContent>
                        </Card>
                    </motion.div>
                </div>

            </Layout >
        </div>
    );
}
