import { Routes, Route, useParams, useLocation, useNavigate } from 'react-router-dom';
import { motion, AnimatePresence } from 'motion/react';

// Import all your pages
import { MelbournePage } from './pages/MelbournePage';
import { PassesPage } from './pages/PassesPage';
import { AttractionsPage } from './pages/AttractionsPage';
import { AttractionDetailsPage } from './pages/AttractionDetailsPage';
import { CheckoutPage } from './pages/CheckoutPage';
import { SecureCheckoutPage } from './pages/SecureCheckoutPage';
import { BlogsPage } from './pages/BlogsPage';
import { BlogDetailsPage } from './pages/BlogDetailsPage';
import { HowItWorksPage } from './components/HowItWorksPage';
import { FAQPage } from './components/FAQPage';
import { PrivacyPolicyPage } from './pages/PrivacyPolicyPage';
import { AboutUsPage } from './pages/AboutUsPage';
import { ProfilePage } from './pages/ProfilePage';
import { CreateMagicItineraryPage } from './pages/CreateMagicItineraryPage';
import { ItineraryViewPage } from './pages/ItineraryViewPage';
import { OffersPage } from './pages/OffersPage';
import { CityCardsPage } from './pages/CityCardsPage';
import { MagicItineraryPage } from './pages/MagicItineraryPage';
import { PostCardsPage } from './pages/PostCardsPage';
import { DownloadAppPage } from './pages/DownloadAppPage';
import { HotelDiscountsPage } from './pages/HotelDiscountsPage';
import { ContactUsPage } from './pages/ContactUsPage';

import { pageTransition } from './utils/animations';
import { LandingPage } from './pages/landingPage';
import ComingSoonPage from './pages/ComingSoonPage';
import { SuperSavingsPage } from './pages/SuperSavingsPage';
import { WhatsIncluded } from './pages/WhatsIncluded';
import { LandingMagicItineraryPage } from './pages/LandingMagicItineraryPage';
import { DiscoverPage } from './pages/DiscoverPage';
import { CartPage } from './pages/CartPage';
import { PaymentDetailsPage } from './pages/PaymentDetailsPage';
import { CartPageDesign } from './pages/CartPageDesign';
import { CheckoutPage2 } from './pages/CheckoutPage2';

// User type definition
interface User {
    email: string;
    name: string;
}

interface AppRouterProps {
    user: User | null;
    activeCity: string;
    onCityChange: (city: string) => void;
    showLoginModal: boolean;
    onSignInClick: () => void;
    onSignOutClick: () => void;
    onLoginSuccess: (userData: User) => void;
    onCloseLoginModal: () => void;
    onCheckoutClick?: () => void;
    offersSource: 'products' | 'passes';
}

export function AppRouter({
    user,
    activeCity,
    onCityChange,
    showLoginModal,
    onSignInClick,
    onSignOutClick,
    onLoginSuccess,
    onCloseLoginModal,
    onCheckoutClick,
    offersSource
}: AppRouterProps) {
    const location = useLocation();
    const { attractionId, blogId } = useParams();

    // Common navigation handlers for all pages
    const commonNavHandlers = {
        onSignInClick,
        onSignOutClick,
        user,
    };

    const navigate = useNavigate();

    return (
        <>
            <AnimatePresence mode="wait">
                <Routes location={location} key={location.pathname}>
                    {/* Landing Page Route */}
                    <Route path="/" element={
                        <motion.div key="landing" {...pageTransition}>
                            <LandingPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    {/* Home Route */}
                    <Route path="/:cityName" element={
                        <motion.div key="home" {...pageTransition}>
                            <MelbournePage {...commonNavHandlers} />
                        </motion.div>
                        } />

                    {/* Passes Route */}
                    <Route path="/passes" element={
                        <motion.div key="passes" {...pageTransition}>
                            <PassesPage
                                {...commonNavHandlers}
                                onCheckoutClick={onCheckoutClick}
                                onLoginSuccess={onLoginSuccess}
                            />
                        </motion.div>
                    } />

                    {/* Attractions Routes */}
                    <Route path="/attractions" element={
                        <motion.div key="attractions" {...pageTransition}>
                            <AttractionsPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/attractions/:attractionId" element={
                        <motion.div key="attraction-details" {...pageTransition}>
                            <AttractionDetailsPage
                                // attractionId={attractionId || ''}
                                {...commonNavHandlers}
                                onBackClick={() => navigate(-1)}
                                onCheckoutClick={() => navigate('/checkout')}
                            />
                        </motion.div>
                    } />

                    {/* Checkout Routes */}
                    {/* <Route path="/checkout" element={
                        <motion.div key="checkout" {...pageTransition}>
                            <CheckoutPage {...commonNavHandlers} />
                        </motion.div>
                    } /> */}

                    <Route path="/secure-checkout" element={
                        <motion.div key="secure-checkout" {...pageTransition}>
                            <SecureCheckoutPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    {/* Blog Routes */}
                    <Route path="/blogs" element={
                        <motion.div key="blogs" {...pageTransition}>
                            <BlogsPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/blogs/:blogId" element={
                        <motion.div key="blog-details" {...pageTransition}>
                            <BlogDetailsPage
                                blogId={blogId || ''}
                                {...commonNavHandlers}
                            />
                        </motion.div>
                    } />

                    {/* Information Pages */}
                    <Route path="/how-it-works" element={
                        <motion.div key="how-it-works" {...pageTransition}>
                            <DiscoverPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/discover" element={
                        <motion.div key="discover" {...pageTransition}>
                            <DiscoverPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/faq" element={
                        <motion.div key="faq" {...pageTransition}>
                            <FAQPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/privacy-policy" element={
                        <motion.div key="privacy-policy" {...pageTransition}>
                            <PrivacyPolicyPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/about-us" element={
                        <motion.div key="about-us" {...pageTransition}>
                            <AboutUsPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    {/* User Routes */}
                    <Route path="/profile" element={
                        <motion.div key="profile" {...pageTransition}>
                            <ProfilePage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    {/* Itinerary Routes */}
                    <Route path="/create-itinerary" element={
                        <motion.div key="create-itinerary" {...pageTransition}>
                            <CreateMagicItineraryPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/itinerary-view" element={
                        <motion.div key="itinerary-view" {...pageTransition}>
                            <ItineraryViewPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/magic-itinerary" element={
                        <motion.div key="magic-itinerary" {...pageTransition}>
                            <MagicItineraryPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    {/* Products Routes */}
                    <Route path="/offers" element={
                        <motion.div key="offers" {...pageTransition}>
                            <OffersPage fromSource={offersSource} {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/citycards" element={
                        <motion.div key="citycards" {...pageTransition}>
                            <CityCardsPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/postcards" element={
                        <motion.div key="postcards" {...pageTransition}>
                            <PostCardsPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/landing-magic-itinerary" element={
                        <motion.div key="landing-magic-itinerary" {...pageTransition}>
                            <LandingMagicItineraryPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/whats-included" element={
                        <motion.div key="whats-included" {...pageTransition}>
                            <WhatsIncluded {...commonNavHandlers} />
                        </motion.div>
                    } />


                    <Route path="/hotel-discounts" element={
                        <motion.div key="hotel-discounts" {...pageTransition}>
                            <HotelDiscountsPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/download-app" element={
                        <motion.div key="download-app" {...pageTransition}>
                            <DownloadAppPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/contact-us" element={
                        <motion.div key="contact-us" {...pageTransition}>
                            <ContactUsPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/comming-soon" element={
                        <motion.div key="comming-soon" {...pageTransition}>
                            <ComingSoonPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/super-savings" element={
                        <motion.div key="super-savings" {...pageTransition}>
                            <SuperSavingsPage {...commonNavHandlers} />
                        </motion.div>
                    } />

                    <Route path="/cart" element={
                        <motion.div key="super-savings" {...pageTransition}>
                            <CartPage {...commonNavHandlers} />
                        </motion.div>
                    } />
                    <Route path="/checkout" element={
                        <motion.div key="super-savings" {...pageTransition}>
                            <CheckoutPage2 {...commonNavHandlers} />
                        </motion.div>
                    } />
                    <Route path="/cart-design" element={
                        <motion.div key="super-savings" {...pageTransition}>
                            <CartPageDesign {...commonNavHandlers} />
                        </motion.div>
                    } />
                    <Route path="/payment/:bookingId" element={
                        <motion.div key="super-savings" {...pageTransition}>
                            <PaymentDetailsPage {...commonNavHandlers} />
                        </motion.div>
                    } />
                </Routes>
            </AnimatePresence>
        </>
    );
}