'use client';

import { useState } from "react";
import { Menu, X, User, ChevronRight, ChevronDown } from "lucide-react";
import { useAuthStore } from '@/stores/authStore';
import { useLogout } from "@/hooks/useAuth";
import Link from "next/link";
import Image from "next/image";
import { useRouter } from "next/navigation";

export default function Navbar() {
    const [isOpen, setIsOpen] = useState(false);     // Mobile menu
    const [open, setOpen] = useState(false);         // Dropdown menu

    const router = useRouter();
    const { mutate: logoutUser } = useLogout?.() || {};

    const userData = useAuthStore((state) => state.user);
    const user = userData?.profile || null;

    const handleLogout = () => {
    if (logoutUser) logoutUser();
    router.push('/login');
  };


    return (
        <nav className="w-full px-6 py-4 bg-white border-b border-blue-100 shadow-sm fixed top-0 left-0 z-50">
            <div className="flex justify-between items-center max-w-7xl mx-auto">
                <Image
                    src="/images/logo.png"
                    alt="Med Bridge Afrik Logo"
                    width={80}
                    height={30}
                    priority
                />

                {/* Desktop Menu */}
                <ul className="hidden md:flex items-center gap-8 text-blue-800 font-medium">
                    {["Home", "About", "Services", "Contact"].map((item) => (
                        <li key={item}>
                            <Link
                                href={`/${item.toLowerCase().replace(/\s/g, "")}`}
                                className="relative hover:text-blue-600 transition duration-200"
                            >
                                {item}
                                <span className="absolute -bottom-1 left-0 w-0 h-[2px] bg-blue-600 transition-all duration-300 hover:w-full"></span>
                            </Link>
                        </li>
                    ))}

                    {!user ? (
                        <li className="flex items-center gap-3 bg-white text-blue-900 hover:text-blue-600 hover:shadow-md transition-all duration-200 rounded-xl border border-blue-200 px-4 py-3 shadow-sm">
                            <div className="bg-blue-100 text-blue-700 p-2 rounded-full">
                                <User className="w-5 h-5" />
                            </div>
                            <div className="flex flex-col leading-tight">
                                <span className="text-xs text-gray-500">Login / Sign up</span>
                                <Link href="/login" className="flex items-center gap-1 font-semibold text-base">
                                    My health <ChevronRight className="w-4 h-4" />
                                </Link>
                            </div>
                        </li>
                    ) : (
                        <div className="relative">
                            <button
                                onClick={() => setOpen(!open)}
                                className="flex items-center gap-3 bg-white text-blue-900 hover:text-blue-600 hover:shadow-md transition-all duration-200 rounded-xl border border-blue-200 px-4 py-3 shadow-sm w-full"
                            >
                                <div className="bg-blue-100 text-blue-700 p-2 rounded-full">
                                    <User className="w-5 h-5" />
                                </div>
                                <div className="flex flex-col leading-tight text-left">
                                    <span className="text-xs text-gray-500">Welcome, {user.firstName || user.email}</span>
                                    <span className="flex items-center gap-1 font-semibold text-base">
                                        {user.role ? `${user.role.charAt(0).toUpperCase() + user.role.slice(1)} Dashboard` : 'My Account'}
                                        <ChevronDown className="w-4 h-4" />
                                    </span>
                                </div>
                            </button>

                            {open && (
                                <ul className="absolute top-full mt-2 left-0 bg-white border border-blue-100 shadow-lg rounded-md w-60 z-50">
                                    {user.role && (
                                        <li>
                                            <Link
                                                href={`/dashboard/${user.role.toLowerCase()}`}
                                                className="block px-4 py-2 hover:bg-blue-50 text-sm text-blue-800 transition-all"
                                            >
                                                {`${user.role.charAt(0).toUpperCase() + user.role.slice(1)} Dashboard`}
                                            </Link>
                                        </li>
                                    )}
                                    <li>
                                        <Link
                                            href={`/dashboard/${user.role}/profile`}
                                            className="block px-4 py-2 hover:bg-blue-50 text-sm text-blue-800 transition-all"
                                        >
                                            My Profile
                                        </Link>
                                    </li>
                                    <li>
                                        <button
                                            onClick={handleLogout}
                                            className="block w-full text-left px-4 py-2 hover:bg-blue-50 text-sm text-blue-800 transition-all"
                                        >
                                            Logout
                                        </button>
                                    </li>
                                </ul>
                            )}
                        </div>
                    )}
                </ul>

                {/* Hamburger */}
                <button
                    onClick={() => setIsOpen(!isOpen)}
                    className="md:hidden text-blue-700 focus:outline-none"
                >
                    {isOpen ? <X size={28} /> : <Menu size={28} />}
                </button>
            </div>

            {/* Mobile Dropdown */}
            {isOpen && (
                <ul className="md:hidden mt-4 flex flex-col gap-4 text-blue-800 font-medium bg-blue-50 p-4 rounded-md shadow-md">
                    {["Home", "About", "Services", "Contact"].map((item) => (
                        <li key={item}>
                            <Link
                                href={`/${item.toLowerCase().replace(/\s/g, "")}`}
                                onClick={() => setIsOpen(false)}
                                className="block hover:text-blue-600 transition-colors"
                            >
                                {item}
                            </Link>
                        </li>
                    ))}

                    {!user ? (
                        <li className="flex items-center gap-3 bg-white text-blue-900 hover:text-blue-600 hover:shadow-md transition-all duration-200 rounded-xl border border-blue-200 px-4 py-3 shadow-sm">
                            <div className="bg-blue-100 text-blue-700 p-2 rounded-full">
                                <User className="w-5 h-5" />
                            </div>
                            <div className="flex flex-col leading-tight">
                                <span className="text-xs text-gray-500">Login / Sign up</span>
                                <Link href="/login" className="flex items-center gap-1 font-semibold text-base">
                                    My health <ChevronRight className="w-4 h-4" />
                                </Link>
                            </div>
                        </li>
                    ) : (
                        <div className="relative">
                            <button
                                onClick={() => setOpen(!open)}
                                className="flex items-center gap-3 bg-white text-blue-900 hover:text-blue-600 hover:shadow-md transition-all duration-200 rounded-xl border border-blue-200 px-4 py-3 shadow-sm w-full"
                            >
                                <div className="bg-blue-100 text-blue-700 p-2 rounded-full">
                                    <User className="w-5 h-5" />
                                </div>
                                <div className="flex flex-col leading-tight text-left">
                                    <span className="text-xs text-gray-500">Welcome, {user.firstName || user.email}</span>
                                    <span className="flex items-center gap-1 font-semibold text-base">
                                        {user.role ? `${user.role.charAt(0).toUpperCase() + user.role.slice(1)} Dashboard` : 'My Account'}
                                        <ChevronDown className="w-4 h-4" />
                                    </span>
                                </div>
                            </button>

                            {open && (
                                <ul className="absolute top-full mt-2 left-0 bg-white border border-blue-100 shadow-lg rounded-md w-60 z-50">
                                    {user.role && (
                                        <li>
                                            <Link
                                                href={`/dashboard/${user.role.toLowerCase()}`}
                                                onClick={() => setIsOpen(false)}
                                                className="block px-4 py-2 hover:bg-blue-50 text-sm text-blue-800 transition-all"
                                            >
                                                {`${user.role.charAt(0).toUpperCase() + user.role.slice(1)} Dashboard`}
                                            </Link>
                                        </li>
                                    )}
                                    <li>
                                        <Link
                                            href={`/dashboard/${user.role}/profile`}
                                            onClick={() => setIsOpen(false)}
                                            className="block px-4 py-2 hover:bg-blue-50 text-sm text-blue-800 transition-all"
                                        >
                                            My Profile
                                        </Link>
                                    </li>
                                    <li>
                                        <button
                                            onClick={handleLogout}
                                            className="block w-full text-left px-4 py-2 hover:bg-blue-50 text-sm text-blue-800 transition-all"
                                        >
                                            Logout
                                        </button>
                                    </li>
                                </ul>
                            )}
                        </div>
                    )}
                </ul>
            )}
        </nav>
    );
}
