'use client';

import React from 'react';
import Link from 'next/link';
import { motion, AnimatePresence } from 'framer-motion';
import { Button } from '@/components/ui/button';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { cn } from '@/lib/utils';
import { useAuth } from '@/contexts/AuthContext';
import { Menu, X, Home, User, BookOpen, Target, LogOut, GraduationCap } from 'lucide-react';

interface MobileHeaderProps {
    scrolled: boolean;
    isMobileMenuOpen: boolean;
    setIsMobileMenuOpen: (open: boolean) => void;
    user: any;
    pathname: string;
}

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

export default function MobileHeader({
                                         scrolled,
                                         isMobileMenuOpen,
                                         setIsMobileMenuOpen,
                                         user,
                                         pathname
                                     }: MobileHeaderProps) {
    const { logout } = useAuth();

    return (
        <>
            {/* Mobile Header Bar */}
            <div className={cn(
                "fixed top-0 left-0 right-0 z-50 transition-all duration-500 md:hidden",
                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="px-4 h-16 flex items-center justify-between">
                    {/* Logo */}
                    <Link href="/" className="flex items-center space-x-2">
                        <div 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 rounded-xl shadow-lg">
                                <GraduationCap className="h-6 w-6 text-white" />
                            </div>
                        </div>
                        <div>
              <span className="text-lg font-bold bg-gradient-to-r from-green-600 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 ml-1">.bd</span>
                        </div>
                    </Link>

                    {/* Menu Button */}
                    <Sheet open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
                        <SheetTrigger asChild>
                            <Button
                                variant="ghost"
                                size="icon"
                                className="relative w-10 h-10 rounded-xl bg-gradient-to-r from-green-500 to-blue-600 text-white hover:shadow-lg transition-all duration-300"
                            >
                                <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-green-500 to-blue-600 animate-ping opacity-20" />
                                <Menu className="h-5 w-5 relative z-10" />
                            </Button>
                        </SheetTrigger>

                        <SheetContent side="top" className="h-full pt-20 bg-gradient-to-br from-white via-gray-50 to-white border-b border-gray-200">
                            <div className="flex flex-col h-full">
                                {/* User Profile Section */}
                                {user && (
                                    <div className="mb-6 p-4 bg-gradient-to-r from-green-50 to-blue-50 rounded-2xl">
                                        <div className="flex items-center space-x-3">
                                            <Avatar className="h-14 w-14 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 text-lg">
                                                    {user.name.charAt(0).toUpperCase()}
                                                </AvatarFallback>
                                            </Avatar>
                                            <div>
                                                <p className="font-bold text-gray-800 text-lg">{user.name}</p>
                                                <p className="text-sm text-gray-500">{user.email}</p>
                                            </div>
                                        </div>
                                    </div>
                                )}

                                {/* Navigation Links */}
                                <div className="flex-1 space-y-2">
                                    {navigation.map((item) => {
                                        const Icon = item.icon;
                                        const isActive = pathname === item.href;
                                        return (
                                            <Link
                                                key={item.name}
                                                href={item.href}
                                                onClick={() => setIsMobileMenuOpen(false)}
                                            >
                                                <motion.div
                                                    whileTap={{ scale: 0.98 }}
                                                    className={cn(
                                                        "flex items-center space-x-3 px-4 py-4 rounded-xl transition-all duration-200",
                                                        isActive
                                                            ? 'bg-gradient-to-r from-green-50 to-blue-50 text-blue-600 shadow-sm'
                                                            : 'text-gray-700 hover:bg-gray-100'
                                                    )}
                                                >
                                                    <Icon className={cn("w-5 h-5", isActive && "text-blue-600")} />
                                                    <span className="font-semibold flex-1">{item.name}</span>
                                                    {isActive && (
                                                        <motion.div
                                                            layoutId="activeMobileNav"
                                                            className="w-1.5 h-1.5 rounded-full bg-gradient-to-r from-green-500 to-blue-600"
                                                        />
                                                    )}
                                                </motion.div>
                                            </Link>
                                        );
                                    })}
                                </div>

                                {/* Auth Section */}
                                <div className="pt-4 border-t border-gray-200 space-y-2">
                                    {user ? (
                                        <>
                                            <Link
                                                href="/profile"
                                                onClick={() => setIsMobileMenuOpen(false)}
                                            >
                                                <div className="flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-green-50 transition-all">
                                                    <User className="w-5 h-5" />
                                                    <span>My Profile</span>
                                                </div>
                                            </Link>
                                            <Link
                                                href="/my-tuitions"
                                                onClick={() => setIsMobileMenuOpen(false)}
                                            >
                                                <div className="flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-green-50 transition-all">
                                                    <BookOpen className="w-5 h-5" />
                                                    <span>My Tuitions</span>
                                                </div>
                                            </Link>
                                            <button
                                                onClick={() => {
                                                    logout();
                                                    setIsMobileMenuOpen(false);
                                                }}
                                                className="w-full flex items-center space-x-3 px-4 py-3 rounded-xl text-red-600 hover:bg-red-50 transition-all"
                                            >
                                                <LogOut className="w-5 h-5" />
                                                <span>Logout</span>
                                            </button>
                                        </>
                                    ) : (
                                        <>
                                            <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>

            {/* Bottom Padding for fixed header */}
            <div className="h-16 md:hidden" />
        </>
    );
}