"use client";

import { useAuthStore } from "@/store/auth.store";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { Briefcase, Mic, Building2, Globe, ArrowUpRight, Menu, X, LayoutDashboard, Bell, User, LogOut, ChevronDown } from "lucide-react";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { useState, useEffect } from "react";
import { CandidateAuthModal } from "../auth/CandidateAuthModal";
import { JobsMegaMenu } from "./JobsMegaMenu";

import { useCurrentUser } from "@/hooks/useCurrentUser";
import { NotificationSidebar } from "@/components/seeker/dashboard/NotificationSidebar";
import { notificationService } from "@/services/notification.service";

export function Navbar() {
  const router = useRouter();
  const { user, isLoading } = useCurrentUser();
  const clearAuth = useAuthStore((state) => state.clearAuth);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
  const [isNotifOpen, setIsNotifOpen] = useState(false);
  const [unreadCount, setUnreadCount] = useState(0);

  useEffect(() => {
    if (user?.id) {
      if (!isNotifOpen) {
        notificationService.getUnreadCount(user.id).then(setUnreadCount).catch(console.error);
      }
    }
  }, [user?.id, isNotifOpen]);
  const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);

  const handleLogout = async () => {
    // Clear session
    await fetch("/api/auth/logout", { method: "POST" });
    // Clear Zustand store and cookies
    clearAuth();
    setIsMobileMenuOpen(false);
    // Redirect to home
    router.push("/");
  };

  const navLinks = [
    { href: "/jobs", icon: Briefcase, label: "Jobs" },
    { href: "/interview-prep", icon: Mic, label: "Interview Prep" },
    { href: "/companies", icon: Building2, label: "Companies" },
    { href: "https://jobvumi.com/blog/", icon: Globe, label: "Blog" },
    ...(user ? [{
      href: user.role === 'seeker' ? '/seeker/dashboard' : '/recruiter/dashboard',
      icon: LayoutDashboard,
      label: 'Dashboard'
    }] : []),
  ];

  return (
    <header className="sticky top-0 z-50 border-b bg-white">
      <div className="container mx-auto px-4">
        <div className="flex h-16 items-center justify-between">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-1.5 z-50 relative">
            <div className="flex h-8 w-8 items-center justify-center rounded bg-black text-lg font-bold text-white">
              JV
            </div>
            <span className="text-xl font-black tracking-tight text-black">JOBVUMI</span>
          </Link>

          {/* Desktop Navigation */}
          <nav className="hidden lg:flex items-center gap-8 h-full">
            {navLinks.map((link) => (
              <div key={link.label} className="relative group h-full flex items-center">
                <Link href={link.href} className="flex items-center gap-2 text-md font-medium text-gray-500 hover:text-black transition-colors py-4">
                  <link.icon className="h-4 w-4" />
                  {link.label}
                  {link.label === "Jobs" && (
                    <ChevronDown className="h-4 w-4 transition-transform duration-200 group-hover:-rotate-180" />
                  )}
                </Link>
                {link.label === "Jobs" && <JobsMegaMenu />}
              </div>
            ))}
          </nav>

          {/* Desktop Right Actions */}
          <div className="hidden lg:flex items-center gap-4">
            {isLoading ? (
               <div className="h-8 w-8 rounded-full border-2 border-[#fc6123] border-t-transparent animate-spin" />
            ) : user ? (
              <>
                <button 
                  onClick={() => setIsNotifOpen(true)}
                  className="relative p-2 text-gray-600 hover:bg-gray-100 rounded-full transition-colors"
                >
                  <Bell className="w-5 h-5" />
                  {unreadCount > 0 && (
                    <span className="absolute top-1.5 right-1.5 w-1.5 h-1.5 bg-red-500 rounded-full border border-white"></span>
                  )}
                </button>

                <DropdownMenu>
                  <DropdownMenuTrigger className="outline-none focus:outline-none rounded-full cursor-pointer p-0 border-none bg-transparent flex items-center justify-center transition-opacity hover:opacity-80">
                    <Avatar className="h-9 w-9 border border-gray-200">
                      <AvatarImage src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${user.email}`} />
                      <AvatarFallback className="bg-gray-100 text-gray-600 font-semibold text-sm">
                        {user.email?.charAt(0).toUpperCase() || 'U'}
                      </AvatarFallback>
                    </Avatar>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-48 mt-1 p-2">
                    <DropdownMenuItem 
                      onClick={() => router.push(user.role === 'seeker' ? '/seeker/dashboard' : '/recruiter/dashboard')}
                      className="cursor-pointer flex items-center gap-2 py-2.5 font-medium text-gray-700 focus:bg-gray-50 focus:text-gray-900 rounded-md"
                    >
                      <User className="h-4 w-4" />
                      View Profile
                    </DropdownMenuItem>
                    <DropdownMenuItem 
                      onClick={() => setIsLogoutModalOpen(true)}
                      className="cursor-pointer flex items-center gap-2 py-2.5 font-medium text-red-600 focus:bg-red-50 focus:text-red-700 rounded-md mt-1"
                    >
                      <LogOut className="h-4 w-4" />
                      Logout
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </>
            ) : (
              <>
                <Button 
                  className="bg-[#fc6123] hover:bg-[#F4511E] text-white px-6 py-5 font-medium border-0" 
                  onClick={() => setIsAuthModalOpen(true)}
                >
                  Candidate Login
                </Button>
                <Button 
                  variant="outline" 
                  className="gap-2 border-gray-300 text-black hover:bg-gray-50 font-medium px-5 py-5" 
                  onClick={() => router.push("/login?type=employer")}
                >
                  Employer Login <ArrowUpRight className="h-4 w-4" />
                </Button>
              </>
            )}
          </div>

          {/* Mobile Menu Toggle Button */}
          <button 
            className="lg:hidden flex items-center z-50 relative text-gray-700 p-1" 
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            aria-label="Toggle Menu"
          >
            {isMobileMenuOpen ? <X className="h-7 w-7" /> : <Menu className="h-7 w-7" />}
          </button>
        </div>

        {/* Mobile Dropdown Menu */}
        {isMobileMenuOpen && (
          <div className="lg:hidden fixed inset-0 top-16 bg-white z-40 px-6 pt-8 pb-8 flex flex-col gap-8 h-[calc(100vh-4rem)] overflow-y-auto">
            <nav className="flex flex-col gap-6">
              {navLinks.map((link) => (
                <Link 
                  key={link.label} 
                  href={link.href} 
                  className="flex items-center gap-4 text-xl font-medium text-gray-600 hover:text-black hover:bg-gray-50 p-3 rounded-lg transition-colors"
                  onClick={() => setIsMobileMenuOpen(false)}
                >
                  <link.icon className="h-6 w-6 text-[#fc6123]" />
                  {link.label}
                </Link>
              ))}
            </nav>
            
            <div className="flex flex-col gap-4 pt-6 border-t mt-auto">
              {isLoading ? (
                <div className="flex justify-center p-4">
                  <div className="h-8 w-8 rounded-full border-2 border-[#fc6123] border-t-transparent animate-spin" />
                </div>
              ) : user ? (
                <>
                  <span className="text-sm font-medium text-gray-700 text-center pb-2">Welcome, {user.email}</span>
                  <Button variant="outline" className="w-full" onClick={() => { setIsMobileMenuOpen(false); setIsLogoutModalOpen(true); }}>
                    Logout
                  </Button>
                </>
              ) : (
                <>
                  <Button 
                    className="bg-[#fc6123] hover:bg-[#F4511E] text-white w-full py-6 font-medium border-0" 
                    onClick={() => {
                      setIsMobileMenuOpen(false);
                      setIsAuthModalOpen(true);
                    }}
                  >
                    Candidate Login
                  </Button>
                  <Button 
                    variant="outline" 
                    className="gap-2 border-gray-300 text-black w-full hover:bg-gray-50 font-medium py-6" 
                    onClick={() => {
                      setIsMobileMenuOpen(false);
                      router.push("/login?type=employer");
                    }}
                  >
                    Employer Login <ArrowUpRight className="h-4 w-4" />
                  </Button>
                </>
              )}
            </div>
          </div>
        )}
      </div>
      
      {/* Auth Modal */}
      <CandidateAuthModal isOpen={isAuthModalOpen} onClose={() => setIsAuthModalOpen(false)} />
      
      {/* Notification Sidebar */}
      <NotificationSidebar isOpen={isNotifOpen} onClose={() => setIsNotifOpen(false)} />

      {/* Logout Modal */}
      <Dialog open={isLogoutModalOpen} onOpenChange={setIsLogoutModalOpen}>
        <DialogContent className="sm:max-w-md border-0 bg-white shadow-2xl rounded-2xl p-6">
          <DialogHeader className="mb-6 pt-4">
            <DialogTitle className="text-center text-[19px] font-bold text-gray-900 leading-tight">
              Are you sure you want to log<br/>out of Jobvumi?
            </DialogTitle>
          </DialogHeader>
          <DialogFooter className="sm:justify-center flex-col sm:flex-row gap-4">
            <Button
              type="button"
              variant="outline"
              onClick={() => setIsLogoutModalOpen(false)}
              className="flex-1 rounded-xl h-11 text-[15px] font-semibold border-gray-300 hover:bg-gray-50 text-black"
            >
              Cancel
            </Button>
            <Button
              type="button"
              className="flex-1 rounded-xl h-11 text-[15px] font-semibold bg-[#ff1010] hover:bg-[#e00a0a] text-white border-0"
              onClick={() => {
                setIsLogoutModalOpen(false);
                handleLogout();
              }}
            >
              Log Out
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </header>
  );
}