'use client';

import { useState, useEffect, ReactNode } from 'react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
} from '@/components/ui/tooltip';
import { cn } from '@/lib/utils';

// Types
interface NavigationItem {
    name: string;
    href: string;
    icon: string;
    description: string;
}

interface BottomNavItem {
    name: string;
    href: string;
    icon: string;
    activeIcon: string;
}

interface FooterLink {
    name: string;
    href: string;
    icon: string;
}

interface FooterSection {
    title: string;
    description: string;
    logo: string;
}

interface ContactInfo {
    phone: string;
    email: string;
    address: string;
    hours: string;
}

interface FooterSections {
    company: FooterSection;
    quickLinks: FooterLink[];
    services: FooterLink[];
    support: FooterLink[];
    contact: ContactInfo;
}

interface User {
    name: string;
    email: string;
    avatar?: string | null;
}

interface MainLayoutProps {
    children: ReactNode;
}

const MainLayout = ({ children }: MainLayoutProps) => {
    const pathname = usePathname();
    const router = useRouter();
    const [scrolled, setScrolled] = useState<boolean>(false);
    const [showScrollTop, setShowScrollTop] = useState<boolean>(false);
    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState<boolean>(false);

    // Auth state
    const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
    const [user, setUser] = useState<User | null>(null);

    // Handle scroll effects
    useEffect(() => {
        const handleScroll = (): void => {
            setScrolled(window.scrollY > 20);
            setShowScrollTop(window.scrollY > 500);
        };

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

    // Scroll to top function
    const scrollToTop = (): void => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    };

    // Check auth status on mount
    useEffect(() => {
        const token = localStorage.getItem('token');
        const userData = localStorage.getItem('user');

        if (token && userData) {
            try {
                const parsedUser: User = JSON.parse(userData);
                setIsLoggedIn(true);
                setUser(parsedUser);
            } catch (error) {
                console.error('Failed to parse user data:', error);
            }
        }
    }, []);

    const navigation: NavigationItem[] = [
        { name: 'HIRE A TUTOR', href: '/hire-tutor', icon: '🎯', description: 'Find best tutors' },
        { name: 'TUTORS', href: '/tutors', icon: '👨‍🏫', description: 'Expert teachers' },
        { name: 'TUITION', href: '/tuitions', icon: '📚', description: 'Tuition jobs' },
    ];

    // Bottom navigation items
    const bottomNavItems: BottomNavItem[] = [
        { name: 'Home', href: '/', icon: '🏠', activeIcon: '🏠' },
        { name: 'Tutors', href: '/tutors', icon: '👨‍🏫', activeIcon: '👨‍🏫' },
        { name: 'Tuition', href: '/tuitions', icon: '📚', activeIcon: '📚' },
        { name: 'Hire', href: '/hire-tutor', icon: '🎯', activeIcon: '🎯' },
        {
            name: isLoggedIn ? 'Profile' : 'Account',
            href: isLoggedIn ? '/profile' : '/login',
            icon: isLoggedIn ? '👤' : '🔑',
            activeIcon: isLoggedIn ? '👤' : '🔑'
        },
    ];

    const footerSections: FooterSections = {
        company: {
            title: 'DeshTutor',
            description: 'বাংলাদেশের সবচেয়ে বিশ্বস্ত টিউশন মিডিয়া প্ল্যাটফর্ম। আমরা শিক্ষার্থী ও টিউটরদের মধ্যে সেতুবন্ধন তৈরি করি।',
            logo: '🎓'
        },
        quickLinks: [
            { name: 'About Us', href: '/about', icon: 'ℹ️' },
            { name: 'How It Works', href: '/how-it-works', icon: '⚙️' },
            { name: 'Success Stories', href: '/stories', icon: '⭐' },
            { name: 'Blog', href: '/blog', icon: '📝' },
            { name: 'Contact Us', href: '/contact', icon: '📞' },
        ],
        services: [
            { name: 'Hire a Tutor', href: '/hire-tutor', icon: '🎯' },
            { name: 'Become a Tutor', href: '/register', icon: '👨‍🏫' },
            { name: 'Tuition List', href: '/tuitions', icon: '📢' },
            { name: 'Online Tutoring', href: '/online-tutoring', icon: '💻' },
            { name: 'Group Tuition', href: '/group-tuition', icon: '👥' },
        ],
        support: [
            { name: 'Help Center', href: '/help', icon: '❓' },
            { name: 'Terms & Conditions', href: '/terms-and-conditions', icon: '📜' },
            { name: 'Privacy Policy', href: '/privacy-policy', icon: '🔒' },
            { name: 'Refund Policy', href: '/refund-policy', icon: '💰' },
            { name: 'HOW To Works', href: '/how-it-works', icon: '💬' },
        ],
        contact: {
            phone: '+880 16-1952 1962',
            email: 'info@deshtutor.com',
            address: '125, 1 Tejkunipara Rd, Dhaka 1215, Bangladesh',
            hours: 'Sat - Thu, 9AM - 9PM'
        }
    };

    const handleLogout = (): void => {
        localStorage.removeItem('token');
        localStorage.removeItem('user');
        setIsLoggedIn(false);
        setUser(null);
        router.push('/login');
    };

    return (
        <TooltipProvider>
            <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-100">
                {/* Desktop Navbar */}
                <nav className={cn(
                    "fixed top-0 left-0 right-0 z-50 transition-all duration-500",
                    scrolled
                        ? 'bg-white/95 backdrop-blur-xl shadow-2xl border-b border-gray-200/50'
                        : 'bg-white/80 backdrop-blur-md border-b border-gray-100'
                )}>
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                        <div className="flex justify-between items-center h-16 lg:h-20">
                            {/* Logo Section */}
                            <div className="flex items-center">
                                <Link href="/" className="group relative flex items-center space-x-3">
                                    <div className="absolute -inset-3 bg-gradient-to-r from-green-400 via-blue-500 to-emerald-500 rounded-2xl blur-xl opacity-0 group-hover:opacity-30 transition-all duration-700 animate-pulse"></div>

                                    <div className="relative">
                                        <div className="absolute inset-0 bg-gradient-to-r from-green-500 to-blue-600 rounded-xl blur animate-pulse"></div>
                                        <div className="relative bg-gradient-to-br from-green-500 via-emerald-500 to-blue-600 p-2.5 rounded-xl shadow-2xl transform transition-all duration-500 group-hover:scale-105">
                                            <svg className="h-7 w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                                            </svg>
                                        </div>
                                    </div>

                                    <div className="hidden sm:block">
                                        <div className="flex items-baseline space-x-2">
                      <span className="text-2xl font-black bg-gradient-to-r from-green-600 via-emerald-500 to-blue-600 bg-clip-text text-transparent">
                        TutorBangla
                      </span>
                                            <span className="text-xs font-semibold bg-gradient-to-r from-green-500 to-blue-500 text-transparent bg-clip-text">.bd</span>
                                        </div>
                                        <p className="text-xs text-gray-500 tracking-wide">Trusted Tutoring Platform</p>
                                    </div>
                                </Link>
                            </div>

                            {/* Desktop Navigation Links */}
                            <div className="hidden md:flex items-center space-x-1 lg:space-x-2">
                                {navigation.map((item) => (
                                    <Tooltip key={item.name}>
                                        <TooltipTrigger asChild>
                                            <Link
                                                href={item.href}
                                                className={cn(
                                                    "group relative px-4 lg:px-6 py-2.5 rounded-xl font-semibold text-sm lg:text-base transition-all duration-300",
                                                    pathname === item.href
                                                        ? 'text-blue-600 bg-gradient-to-r from-blue-50 to-green-50 shadow-sm'
                                                        : 'text-gray-700 hover:text-green-600 hover:bg-gradient-to-r hover:from-green-50 hover:to-blue-50'
                                                )}
                                            >
                        <span className="relative z-10 flex items-center space-x-2">
                          <span className="text-xl transition-transform duration-300 group-hover:scale-110">{item.icon}</span>
                          <span className="font-medium">{item.name}</span>
                        </span>
                                                {pathname === item.href && (
                                                    <div className="absolute bottom-0 left-2 right-2 h-0.5 bg-gradient-to-r from-green-500 to-blue-600 rounded-full"></div>
                                                )}
                                            </Link>
                                        </TooltipTrigger>
                                        <TooltipContent side="bottom" className="bg-gray-900 text-white border-none">
                                            <p>{item.description}</p>
                                        </TooltipContent>
                                    </Tooltip>
                                ))}
                            </div>

                            {/* Auth Section */}
                            <div className="hidden md:flex items-center space-x-3">
                                {isLoggedIn && user ? (
                                    <DropdownMenu>
                                        <DropdownMenuTrigger asChild>
                                            <Button
                                                variant="ghost"
                                                className="flex items-center space-x-3 px-4 py-2 rounded-xl bg-gradient-to-r from-green-50 to-blue-50 hover:from-green-100 hover:to-blue-100 transition-all duration-300 border border-gray-200 shadow-sm hover:shadow-md"
                                            >
                                                <div className="relative">
                                                    <Avatar className="h-9 w-9 ring-2 ring-green-500">
                                                        <AvatarImage src={user.avatar || undefined} alt={user.name} />
                                                        <AvatarFallback className="bg-gradient-to-r from-green-500 to-blue-600 text-white">
                                                            {user.name.charAt(0).toUpperCase()}
                                                        </AvatarFallback>
                                                    </Avatar>
                                                    <div className="absolute -top-1 -right-1 w-3.5 h-3.5 bg-green-500 rounded-full border-2 border-white animate-pulse"></div>
                                                </div>
                                                <div className="text-left">
                                                    <p className="text-sm font-bold text-gray-800">{user.name.split(' ')[0]}</p>
                                                    <p className="text-xs text-gray-500">My Account</p>
                                                </div>
                                            </Button>
                                        </DropdownMenuTrigger>
                                        <DropdownMenuContent className="w-64" align="end">
                                            <DropdownMenuLabel className="p-3 bg-gradient-to-r from-green-50 to-blue-50">
                                                <p className="text-sm font-semibold text-gray-800">{user.name}</p>
                                                <p className="text-xs text-gray-500">{user.email}</p>
                                            </DropdownMenuLabel>
                                            <DropdownMenuSeparator />
                                            <DropdownMenuItem asChild className="cursor-pointer">
                                                <Link href="/profile" className="flex items-center space-x-3">
                                                    <span>👤</span>
                                                    <span>My Profile</span>
                                                </Link>
                                            </DropdownMenuItem>
                                            <DropdownMenuItem asChild className="cursor-pointer">
                                                <Link href="/my-tuitions" className="flex items-center space-x-3">
                                                    <span>📚</span>
                                                    <span>My Tuitions</span>
                                                </Link>
                                            </DropdownMenuItem>
                                            <DropdownMenuItem asChild className="cursor-pointer">
                                                <Link href="/dashboard" className="flex items-center space-x-3">
                                                    <span>📊</span>
                                                    <span>Dashboard</span>
                                                </Link>
                                            </DropdownMenuItem>
                                            <DropdownMenuItem asChild className="cursor-pointer">
                                                <Link href="/settings" className="flex items-center space-x-3">
                                                    <span>⚙️</span>
                                                    <span>Settings</span>
                                                </Link>
                                            </DropdownMenuItem>
                                            <DropdownMenuSeparator />
                                            <DropdownMenuItem onClick={handleLogout} className="text-red-600 cursor-pointer">
                                                <div className="flex items-center space-x-3">
                                                    <span>🚪</span>
                                                    <span>Logout</span>
                                                </div>
                                            </DropdownMenuItem>
                                        </DropdownMenuContent>
                                    </DropdownMenu>
                                ) : (
                                    <>
                                        <Link href="/register">
                                            <Button className="group relative px-5 py-2.5 rounded-xl bg-gradient-to-r from-green-500 to-emerald-600 text-white font-semibold overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:scale-105">
                                                <div className="absolute inset-0 bg-gradient-to-r from-green-600 to-emerald-700 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
                                                <span className="relative flex items-center space-x-2">
                          <span>📝</span>
                          <span>REGISTER</span>
                        </span>
                                            </Button>
                                        </Link>
                                        <Link href="/login">
                                            <Button className="group relative px-5 py-2.5 rounded-xl bg-gradient-to-r from-blue-600 to-cyan-600 text-white font-semibold overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:scale-105">
                                                <div className="absolute inset-0 bg-gradient-to-r from-blue-700 to-cyan-700 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
                                                <span className="relative flex items-center space-x-2">
                          <span>🔑</span>
                          <span>LOGIN</span>
                        </span>
                                            </Button>
                                        </Link>
                                    </>
                                )}
                            </div>

                            {/* Mobile menu button */}
                            <div className="md:hidden">
                                <Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
                                    <SheetTrigger asChild>
                                        <Button
                                            variant="ghost"
                                            className="relative w-11 h-11 rounded-xl bg-gradient-to-r from-green-500 to-blue-600 text-white hover:bg-gradient-to-r hover:from-green-600 hover:to-blue-700"
                                        >
                                            <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-green-500 to-blue-600 animate-ping opacity-20"></div>
                                            <svg className="h-5 w-5 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M4 6h16M4 12h16M4 18h16" />
                                            </svg>
                                        </Button>
                                    </SheetTrigger>
                                    <SheetContent side="top" className="pt-16 bg-white/95 backdrop-blur-xl">
                                        <div className="space-y-2">
                                            {navigation.map((item) => (
                                                <Link
                                                    key={item.name}
                                                    href={item.href}
                                                    className={cn(
                                                        "flex items-center space-x-3 px-4 py-3.5 rounded-xl transition-all duration-200",
                                                        pathname === item.href
                                                            ? 'bg-gradient-to-r from-green-50 to-blue-50 text-blue-600 shadow-sm'
                                                            : 'text-gray-700 hover:bg-gray-50'
                                                    )}
                                                    onClick={() => setIsMobileMenuOpen(false)}
                                                >
                                                    <span className="text-2xl">{item.icon}</span>
                                                    <span className="font-semibold">{item.name}</span>
                                                    {pathname === item.href && (
                                                        <div className="ml-auto w-1.5 h-1.5 rounded-full bg-gradient-to-r from-green-500 to-blue-600"></div>
                                                    )}
                                                </Link>
                                            ))}

                                            <hr className="my-3 border-gray-200" />

                                            {isLoggedIn && user ? (
                                                <>
                                                    <div className="flex items-center space-x-3 px-4 py-3 bg-gradient-to-r from-green-50 to-blue-50 rounded-xl">
                                                        <Avatar className="h-12 w-12">
                                                            <AvatarImage src={user.avatar || undefined} alt={user.name} />
                                                            <AvatarFallback className="bg-gradient-to-r from-green-500 to-blue-600 text-white text-xl">
                                                                {user.name.charAt(0).toUpperCase()}
                                                            </AvatarFallback>
                                                        </Avatar>
                                                        <div className="flex-1">
                                                            <p className="font-bold text-gray-800">{user.name}</p>
                                                            <p className="text-xs text-gray-500">Logged in</p>
                                                        </div>
                                                    </div>
                                                    <Link
                                                        href="/profile"
                                                        className="flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-green-50"
                                                        onClick={() => setIsMobileMenuOpen(false)}
                                                    >
                                                        <span className="text-2xl">👤</span>
                                                        <span>Profile</span>
                                                    </Link>
                                                    <Link
                                                        href="/my-tuitions"
                                                        className="flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-green-50"
                                                        onClick={() => setIsMobileMenuOpen(false)}
                                                    >
                                                        <span className="text-2xl">📚</span>
                                                        <span>My Tuitions</span>
                                                    </Link>
                                                    <button
                                                        onClick={() => {
                                                            handleLogout();
                                                            setIsMobileMenuOpen(false);
                                                        }}
                                                        className="flex items-center space-x-3 px-4 py-3 rounded-xl text-red-600 hover:bg-red-50 w-full"
                                                    >
                                                        <span className="text-2xl">🚪</span>
                                                        <span>Logout</span>
                                                    </button>
                                                </>
                                            ) : (
                                                <div className="space-y-2">
                                                    <Link href="/register" onClick={() => setIsMobileMenuOpen(false)}>
                                                        <Button className="w-full bg-gradient-to-r from-green-500 to-emerald-600 text-white">
                                                            <span>📝</span>
                                                            <span className="ml-2">REGISTER</span>
                                                        </Button>
                                                    </Link>
                                                    <Link href="/login" onClick={() => setIsMobileMenuOpen(false)}>
                                                        <Button className="w-full bg-gradient-to-r from-blue-600 to-cyan-600 text-white">
                                                            <span>🔑</span>
                                                            <span className="ml-2">LOGIN</span>
                                                        </Button>
                                                    </Link>
                                                </div>
                                            )}
                                        </div>
                                    </SheetContent>
                                </Sheet>
                            </div>
                        </div>
                    </div>
                </nav>

                {/* Main Content */}
                <main className="pt-16 lg:pt-20">
                    {children}
                </main>

                {/* Desktop Footer */}
                <footer className="hidden md:block bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white mt-20 relative overflow-hidden">
                    <div className="absolute inset-0 bg-gradient-to-r from-green-500/10 via-blue-500/10 to-emerald-500/10 animate-pulse"></div>
                    <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-green-500 to-transparent"></div>

                    <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
                        <div className="grid grid-cols-1 lg:grid-cols-5 gap-12">
                            <div className="lg:col-span-1.5 space-y-4">
                                <div className="flex items-center space-x-3">
                                    <div className="bg-gradient-to-br from-green-500 to-blue-600 p-2.5 rounded-xl shadow-xl">
                                        <span className="text-2xl">{footerSections.company.logo}</span>
                                    </div>
                                    <div>
                                        <h2 className="text-2xl font-black bg-gradient-to-r from-green-400 to-blue-400 bg-clip-text text-transparent">
                                            {footerSections.company.title}
                                        </h2>
                                        <p className="text-xs text-gray-400">Est. 2024</p>
                                    </div>
                                </div>
                                <p className="text-gray-300 text-sm leading-relaxed">
                                    {footerSections.company.description}
                                </p>
                                <div className="flex space-x-4 pt-2">
                                    {['facebook', 'twitter', 'github', 'instagram'].map((social) => (
                                        <a key={social} href="#" className="w-10 h-10 rounded-full bg-gray-800 hover:bg-gradient-to-r from-green-500 to-blue-600 flex items-center justify-center transition-all duration-300 transform hover:scale-110">
                                            <div className="w-5 h-5 bg-current rounded-full"></div>
                                        </a>
                                    ))}
                                </div>
                            </div>

                            {[
                                { title: 'Quick Links', icon: '🔗', items: footerSections.quickLinks },
                                { title: 'Services', icon: '📚', items: footerSections.services },
                                { title: 'Support', icon: '🛡️', items: footerSections.support }
                            ].map((section) => (
                                <div key={section.title}>
                                    <h3 className="text-lg font-bold mb-6 flex items-center space-x-2">
                                        <span className="w-8 h-8 bg-gradient-to-r from-green-500 to-blue-600 rounded-lg flex items-center justify-center">{section.icon}</span>
                                        <span>{section.title}</span>
                                    </h3>
                                    <ul className="space-y-3">
                                        {section.items.map((item: FooterLink) => (
                                            <li key={item.name}>
                                                <Link href={item.href} className="flex items-center space-x-2 text-gray-300 hover:text-green-400 transition-all duration-300 group">
                                                    <span className="text-lg group-hover:translate-x-1 transition-transform">{item.icon}</span>
                                                    <span className="group-hover:translate-x-1 transition-transform">{item.name}</span>
                                                </Link>
                                            </li>
                                        ))}
                                    </ul>
                                </div>
                            ))}

                            <div>
                                <h3 className="text-lg font-bold mb-6 flex items-center space-x-2">
                                    <span className="w-8 h-8 bg-gradient-to-r from-green-500 to-blue-600 rounded-lg flex items-center justify-center">📞</span>
                                    <span>Contact Us</span>
                                </h3>
                                <ul className="space-y-4">
                                    <li className="flex items-start space-x-3 text-gray-300">
                                        <span className="text-xl">📞</span>
                                        <span>{footerSections.contact.phone}</span>
                                    </li>
                                    <li className="flex items-start space-x-3 text-gray-300">
                                        <span className="text-xl">✉️</span>
                                        <span>{footerSections.contact.email}</span>
                                    </li>
                                    <li className="flex items-start space-x-3 text-gray-300">
                                        <span className="text-xl">📍</span>
                                        <span>{footerSections.contact.address}</span>
                                    </li>
                                    <li className="flex items-start space-x-3 text-gray-300">
                                        <span className="text-xl">🕐</span>
                                        <span>{footerSections.contact.hours}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div className="mt-12 pt-8 border-t border-gray-800">
                            <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                                <p className="text-gray-400 text-sm">
                                    &copy; {new Date().getFullYear()} TutorBangla. All rights reserved.
                                </p>
                                <div className="flex space-x-6">
                                    <Link href="/terms" className="text-gray-400 hover:text-green-400 text-sm transition">Terms</Link>
                                    <Link href="/privacy" className="text-gray-400 hover:text-green-400 text-sm transition">Privacy</Link>
                                    <Link href="/cookies" className="text-gray-400 hover:text-green-400 text-sm transition">Cookies</Link>
                                </div>
                            </div>
                        </div>
                    </div>
                </footer>

                {/* Bottom Navigation Bar (Mobile Only) */}
                <div className="md:hidden fixed bottom-0 left-0 right-0 z-50">
                    <div className="absolute -top-6 left-0 right-0 h-6 bg-gradient-to-t from-white via-white/80 to-transparent"></div>

                    <div className="bg-white/95 backdrop-blur-xl border-t border-gray-200/50 shadow-2xl">
                        <div className="flex items-center justify-around px-3 py-2">
                            {bottomNavItems.map((item: BottomNavItem) => {
                                const isActive = pathname === item.href;
                                return (
                                    <Link
                                        key={item.name}
                                        href={item.href}
                                        className="relative group"
                                    >
                                        <div className="flex flex-col items-center justify-center min-w-[60px] py-1.5">
                                            {isActive && (
                                                <div className="absolute inset-0 bg-gradient-to-r from-green-500/10 to-blue-500/10 rounded-2xl animate-pulse"></div>
                                            )}

                                            <div className={cn(
                                                "relative transform transition-all duration-500",
                                                isActive ? 'scale-110 -translate-y-1.5' : 'scale-100 group-hover:scale-105'
                                            )}>
                                                <div className={cn(
                                                    "text-2xl transition-all duration-300",
                                                    isActive && 'drop-shadow-lg'
                                                )}>
                                                    {isActive ? (
                                                        <div className="relative">
                                                            <div className="absolute inset-0 bg-gradient-to-r from-green-500 to-blue-600 rounded-full blur-md opacity-50 animate-pulse"></div>
                                                            <span className="relative">{item.activeIcon}</span>
                                                        </div>
                                                    ) : (
                                                        <span className="group-hover:scale-110 transition-transform inline-block">
                              {item.icon}
                            </span>
                                                    )}
                                                </div>

                                                {isActive && (
                                                    <>
                                                        <div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2">
                                                            <div className="w-1.5 h-1.5 bg-gradient-to-r from-green-500 to-blue-600 rounded-full animate-pulse"></div>
                                                        </div>
                                                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-green-500 rounded-full animate-ping"></div>
                                                    </>
                                                )}
                                            </div>

                                            <span className={cn(
                                                "text-xs mt-1.5 font-medium transition-all duration-300",
                                                isActive
                                                    ? 'bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent font-bold scale-105'
                                                    : 'text-gray-500 group-hover:text-green-500'
                                            )}>
                        {item.name}
                      </span>

                                            <div className="absolute -top-10 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-xs px-2.5 py-1 rounded-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none whitespace-nowrap shadow-xl">
                                                {item.name}
                                                <div className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-2 h-2 bg-gray-900 rotate-45"></div>
                                            </div>
                                        </div>
                                    </Link>
                                );
                            })}
                        </div>

                        <div className="flex justify-center pb-2 pt-1">
                            <div className="w-32 h-1 bg-gradient-to-r from-green-400 via-blue-400 to-green-400 rounded-full animate-pulse"></div>
                        </div>
                    </div>
                </div>

                {/* Scroll to Top Button */}
                {showScrollTop && (
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <button
                                onClick={scrollToTop}
                                className="fixed bottom-24 md:bottom-8 right-4 z-50 group"
                                aria-label="Scroll to top"
                            >
                                <div className="absolute inset-0 bg-gradient-to-r from-green-500 to-blue-600 rounded-full blur-xl opacity-75 group-hover:opacity-100 transition-opacity animate-pulse"></div>

                                <div className="relative w-12 h-12 md:w-14 md:h-14 bg-gradient-to-r from-green-500 to-blue-600 rounded-full shadow-2xl flex items-center justify-center text-white transform transition-all duration-300 group-hover:scale-110 group-hover:rotate-3 cursor-pointer">
                                    <div className="absolute inset-0 rounded-full bg-gradient-to-r from-green-400 to-blue-500 opacity-0 group-hover:opacity-100 transition-opacity"></div>

                                    <svg className="w-6 h-6 md:w-7 md:h-7 relative z-10 group-hover:-translate-y-1 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 10l7-7m0 0l7 7m-7-7v18" />
                                    </svg>

                                    <div className="absolute inset-0 rounded-full border-2 border-white/30 animate-spin-slow"></div>
                                </div>
                            </button>
                        </TooltipTrigger>
                        <TooltipContent side="left" className="bg-gray-900 text-white border-none">
                            <p>Scroll to Top</p>
                        </TooltipContent>
                    </Tooltip>
                )}
            </div>
        </TooltipProvider>
    );
};

export default MainLayout;