'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { motion } from 'framer-motion';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { cn } from '@/lib/utils';
import { useAuth } from '@/contexts/AuthContext';
import {
    Home,
    User,
    BookOpen,
    Target,
    LogOut,
    Settings,
    LayoutDashboard,
    GraduationCap
} from 'lucide-react';

interface DesktopNavbarProps {
    scrolled: boolean;
    user: any;
    pathname: string;
}

const navigation = [
    { name: 'Hire Tutor', href: '/hire-tutor', icon: Target, description: 'Find best tutors' },
    { name: 'Tutors', href: '/tutors', icon: GraduationCap, description: 'Expert teachers' },
    { name: 'Tuition', href: '/tuitions', icon: BookOpen, description: 'Tuition jobs' },
];

export default function DesktopNavbar({ scrolled, user, pathname }: DesktopNavbarProps) {
    const { logout } = useAuth();

    return (
        <TooltipProvider>
            <nav className={cn(
                "fixed top-0 left-0 right-0 z-50 transition-all duration-500 hidden md:block",
                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 */}
                        <Link href="/" className="group relative flex items-center space-x-3">
                            <motion.div
                                whileHover={{ scale: 1.05 }}
                                transition={{ type: "spring", stiffness: 400, damping: 10 }}
                                className="relative"
                            >
                                <div className="absolute inset-0 bg-gradient-to-r from-green-500 to-blue-600 rounded-xl blur animate-pulse" />
                                <div className="relative bg-gradient-to-br from-green-500 via-emerald-500 to-blue-600 p-2.5 rounded-xl shadow-2xl">
                                    <GraduationCap className="h-7 w-7 text-white" />
                                </div>
                            </motion.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>

                        {/* Navigation Links */}
                        <div className="flex items-center space-x-1 lg:space-x-2">
                            {navigation.map((item) => {
                                const Icon = item.icon;
                                const isActive = pathname === item.href;
                                return (
                                    <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",
                                                    isActive
                                                        ? '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">
                          <Icon className="w-5 h-5 transition-transform duration-300 group-hover:scale-110" />
                          <span className="font-medium">{item.name}</span>
                        </span>
                                                {isActive && (
                                                    <motion.div
                                                        layoutId="activeNav"
                                                        className="absolute bottom-0 left-2 right-2 h-0.5 bg-gradient-to-r from-green-500 to-blue-600 rounded-full"
                                                    />
                                                )}
                                            </Link>
                                        </TooltipTrigger>
                                        <TooltipContent side="bottom" className="bg-gray-900 text-white border-none">
                                            <p>{item.description}</p>
                                        </TooltipContent>
                                    </Tooltip>
                                );
                            })}
                        </div>

                        {/* Auth Section */}
                        <div className="flex items-center space-x-3">
                            {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 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">
                                                <User className="w-4 h-4" />
                                                <span>My Profile</span>
                                            </Link>
                                        </DropdownMenuItem>
                                        <DropdownMenuItem asChild className="cursor-pointer">
                                            <Link href="/my-tuitions" className="flex items-center space-x-3">
                                                <BookOpen className="w-4 h-4" />
                                                <span>My Tuitions</span>
                                            </Link>
                                        </DropdownMenuItem>
                                        <DropdownMenuItem asChild className="cursor-pointer">
                                            <Link href="/dashboard" className="flex items-center space-x-3">
                                                <LayoutDashboard className="w-4 h-4" />
                                                <span>Dashboard</span>
                                            </Link>
                                        </DropdownMenuItem>
                                        <DropdownMenuItem asChild className="cursor-pointer">
                                            <Link href="/settings" className="flex items-center space-x-3">
                                                <Settings className="w-4 h-4" />
                                                <span>Settings</span>
                                            </Link>
                                        </DropdownMenuItem>
                                        <DropdownMenuSeparator />
                                        <DropdownMenuItem onClick={logout} className="text-red-600 cursor-pointer">
                                            <div className="flex items-center space-x-3">
                                                <LogOut className="w-4 h-4" />
                                                <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">
                                            <motion.div
                                                className="absolute inset-0 bg-gradient-to-r from-green-600 to-emerald-700"
                                                initial={{ y: '100%' }}
                                                whileHover={{ y: 0 }}
                                                transition={{ duration: 0.3 }}
                                            />
                                            <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">
                                            <motion.div
                                                className="absolute inset-0 bg-gradient-to-r from-blue-700 to-cyan-700"
                                                initial={{ y: '100%' }}
                                                whileHover={{ y: 0 }}
                                                transition={{ duration: 0.3 }}
                                            />
                                            <span className="relative flex items-center space-x-2">
                        <span>🔑</span>
                        <span>LOGIN</span>
                      </span>
                                        </Button>
                                    </Link>
                                </>
                            )}
                        </div>
                    </div>
                </div>
            </nav>
        </TooltipProvider>
    );
}