'use client';

import React from 'react';
import Link from 'next/link';
import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';
import {
    Home,
    User,
    BookOpen,
    Target,
    GraduationCap,
    Sparkles,
    TrendingUp
} from 'lucide-react';

interface BottomNavbarProps {
    user: any;
    pathname: string;
}

const bottomNavItems = [
    { name: 'Home', href: '/', icon: Home, activeIcon: Home, label: 'Home' },
    { name: 'Tutors', href: '/tutors', icon: GraduationCap, activeIcon: GraduationCap, label: 'Tutors' },
    { name: 'Tuition', href: '/tuitions', icon: BookOpen, activeIcon: BookOpen, label: 'Tuition' },
    { name: 'Hire', href: '/hire-tutor', icon: Target, activeIcon: Target, label: 'Hire' },
];

export default function BottomNavbar({ user, pathname }: BottomNavbarProps) {
    // Add profile/account item
    const items = [
        ...bottomNavItems,
        {
            name: user ? 'Profile' : 'Account',
            href: user ? '/profile' : '/login',
            icon: User,
            activeIcon: User,
            label: user ? 'Profile' : 'Account'
        }
    ];

    return (
        <>
            {/* Gradient Shadow Top */}
            <div className="fixed bottom-0 left-0 right-0 z-50 md:hidden">
                <div className="absolute -top-6 left-0 right-0 h-6 bg-gradient-to-t from-white via-white/80 to-transparent pointer-events-none" />

                {/* Bottom Navigation Container */}
                <div className="bg-white/95 backdrop-blur-xl border-t border-gray-200/50 shadow-2xl">
                    {/* Animated Active Indicator Line */}
                    <div className="absolute top-0 left-0 right-0 h-[2px]">
                        <div className="h-full w-full bg-gradient-to-r from-green-500 via-blue-500 to-green-500 animate-gradient-x" />
                    </div>

                    <div className="flex items-center justify-around px-3 py-2 relative">
                        {items.map((item) => {
                            const isActive = pathname === item.href;
                            const Icon = item.icon;
                            const ActiveIcon = item.activeIcon;

                            return (
                                <Link
                                    key={item.name}
                                    href={item.href}
                                    className="relative group"
                                >
                                    <div className="flex flex-col items-center justify-center min-w-[64px] py-2">
                                        {/* Active Background */}
                                        {isActive && (
                                            <motion.div
                                                layoutId="activeBottomNav"
                                                className="absolute inset-0 bg-gradient-to-r from-green-500/10 to-blue-500/10 rounded-2xl"
                                                transition={{ type: "spring", stiffness: 300, damping: 30 }}
                                            />
                                        )}

                                        {/* Icon with Spring Animation */}
                                        <motion.div
                                            className="relative"
                                            animate={{
                                                scale: isActive ? 1.1 : 1,
                                                y: isActive ? -4 : 0
                                            }}
                                            transition={{
                                                type: "spring",
                                                stiffness: 400,
                                                damping: 17
                                            }}
                                        >
                                            <div className={cn(
                                                "text-2xl transition-all duration-300",
                                                isActive && "drop-shadow-lg"
                                            )}>
                                                {isActive ? (
                                                    <div className="relative">
                                                        <motion.div
                                                            className="absolute inset-0 bg-gradient-to-r from-green-500 to-blue-600 rounded-full blur-md opacity-50"
                                                            animate={{ scale: [1, 1.2, 1] }}
                                                            transition={{ duration: 1.5, repeat: Infinity }}
                                                        />
                                                        <div className="relative">
                                                            <ActiveIcon className={cn(
                                                                "w-7 h-7 transition-all duration-300",
                                                                isActive && "text-transparent bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text"
                                                            )} />
                                                        </div>
                                                    </div>
                                                ) : (
                                                    <Icon className="w-6 h-6 text-gray-500 group-hover:text-green-500 transition-colors duration-300" />
                                                )}
                                            </div>

                                            {/* Active Dot Indicator */}
                                            {isActive && (
                                                <motion.div
                                                    initial={{ scale: 0 }}
                                                    animate={{ scale: 1 }}
                                                    className="absolute -bottom-3 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">
                                                        <div className="absolute inset-0 bg-gradient-to-r from-green-500 to-blue-600 rounded-full animate-ping opacity-75" />
                                                    </div>
                                                </motion.div>
                                            )}
                                        </motion.div>

                                        {/* Label with Gradient when Active */}
                                        <motion.span
                                            className={cn(
                                                "text-xs mt-2 font-medium transition-all duration-300",
                                                isActive
                                                    ? 'bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent font-bold'
                                                    : 'text-gray-500 group-hover:text-green-500'
                                            )}
                                            animate={{
                                                scale: isActive ? 1.05 : 1,
                                                y: isActive ? -2 : 0
                                            }}
                                        >
                                            {item.label}
                                        </motion.span>

                                        {/* Hover Tooltip for Desktop */}
                                        <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.5 rounded-lg opacity-0 group-hover:opacity-100 transition-all duration-200 pointer-events-none whitespace-nowrap shadow-xl md:block hidden">
                                            {item.label}
                                            <div className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-2 h-2 bg-gray-900 rotate-45" />
                                        </div>
                                    </div>
                                </Link>
                            );
                        })}
                    </div>

                    {/* iPhone Style Home Indicator */}
                    <div className="flex justify-center pb-2 pt-1">
                        <motion.div
                            className="w-32 h-1 bg-gradient-to-r from-green-400 via-blue-400 to-green-400 rounded-full"
                            animate={{
                                scaleX: [1, 1.1, 1],
                                opacity: [0.5, 1, 0.5]
                            }}
                            transition={{
                                duration: 2,
                                repeat: Infinity,
                                ease: "easeInOut"
                            }}
                        />
                    </div>
                </div>
            </div>

            {/* Add padding bottom to prevent content hiding behind navbar */}
            <style jsx global>{`
        @media (max-width: 768px) {
          body {
            padding-bottom: 70px;
          }
        }
      `}</style>
        </>
    );
}