"use client";

import Link from "next/link";
import Image from "next/image";
import { usePathname, useRouter } from "next/navigation";
import { useState, useEffect } from "react";
import { useAuthStore } from "@/store/auth.store";
import { 
  Search, Bell, Briefcase, Zap, Building, Globe, 
  Menu, X, LayoutDashboard, FileText, Heart, Calendar, User, LogOut 
} from "lucide-react";
import { NotificationSidebar } from "./NotificationSidebar";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { useCurrentUser } from "@/hooks/useCurrentUser";
import { notificationService } from "@/services/notification.service";

const mobileMenuItems = [
  { name: "Dashboard", href: "/seeker/dashboard", icon: LayoutDashboard },
  { name: "Application", href: "/seeker/application", icon: FileText },
  { name: "Saved Jobs", href: "/seeker/saved-jobs", icon: Heart },
  { name: "Interviews", href: "/seeker/interviews", icon: Calendar },
  { name: "Job Alerts", href: "/seeker/job-alerts", icon: Bell },
  { name: "Profile", href: "/seeker/profile", icon: User },
];

export function Header() {
  const { user } = useCurrentUser();
  const [isMobileMenuOpen, setIsMobileMenuOpen] = 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 pathname = usePathname();
  const router = useRouter();
  const clearAuth = useAuthStore((state) => state.clearAuth);

  const handleLogout = async () => {
    await fetch("/api/auth/logout", { method: "POST" });
    clearAuth();
    setIsMobileMenuOpen(false);
    router.push("/");
  };

  return (
    <header className="h-20 bg-white border-b border-gray-100 flex items-center justify-between px-4 sm:px-8 sticky top-0 z-20">
      {/* Left side Nav Links & Mobile Hamburger */}
      <div className="flex items-center gap-4 sm:gap-8">
        <button 
          className="md:hidden p-1 text-gray-600"
          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
        >
          {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
        </button>
        
        {/* Mobile Logo (visible only when sidebar is hidden) */}
        <Link href="/" className="md:hidden">
          <Image src="/images/jobvumi-logo.png" alt="Jobvumi" width={100} height={30} className="object-contain w-auto h-auto" priority />
        </Link>

        <nav className="hidden md:flex items-center gap-8">
          <Link href="/jobs" className="flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-[#ff6b00] transition-colors">
            <Briefcase className="w-4 h-4 text-gray-400" />
            Jobs
          </Link>
          <Link href="/interview-prep" className="flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-[#ff6b00] transition-colors">
            <Zap className="w-4 h-4 text-gray-400" />
            Interview Prep
          </Link>
          <Link href="/companies" className="flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-[#ff6b00] transition-colors">
            <Building className="w-4 h-4 text-gray-400" />
            Companies
          </Link>
          <Link href="/blog" className="flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-[#ff6b00] transition-colors">
            <Globe className="w-4 h-4 text-gray-400" />
            Blog
          </Link>
        </nav>
      </div>

      {/* Right side Search & Profile */}
      <div className="flex items-center gap-4 sm:gap-6">
        {/* Mobile Search Icon */}
        {!isMobileMenuOpen && (
          <button className="md:hidden p-2 text-gray-600 hover:bg-gray-100 rounded-full transition-colors">
            <Search className="w-5 h-5" />
          </button>
        )}

        {/* Desktop Search Bar */}
        <div className="hidden md:block relative">
          <Search className="w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
          <input 
            type="text" 
            placeholder="Search job by title, company or skill"
            className="w-[200px] lg:w-[320px] h-10 pl-10 pr-4 rounded-full border border-gray-200 bg-gray-50 text-sm outline-none focus:bg-white focus:border-[#ff6b00] focus:ring-2 focus:ring-[#ff6b00]/20 transition-all placeholder:text-gray-400"
          />
        </div>

        {/* Notifications */}
        <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>

        {/* User Avatar */}
        <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-10 w-10 border-2 border-gray-100">
              <AvatarImage src={user?.seekerProfile?.profile_picture || `https://api.dicebear.com/7.x/avataaars/svg?seed=${user?.email || 'user'}`} />
              <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('/seeker/profile')}
              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={handleLogout}
              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>
      </div>

      {/* Mobile Menu Overlay */}
      {isMobileMenuOpen && (
        <div className="absolute top-20 left-0 w-full bg-white border-b border-gray-100 shadow-lg md:hidden flex flex-col max-h-[calc(100vh-80px)] overflow-y-auto">
          <div className="p-4">
            <p className="text-xs font-semibold text-gray-400 mb-4 px-2 uppercase tracking-wider">Menu</p>
            <nav className="flex flex-col gap-1.5 mb-6">
              {mobileMenuItems.map((item) => {
                const isActive = pathname === item.href;
                const Icon = item.icon;
                return (
                  <Link 
                    key={item.name} 
                    href={item.href}
                    onClick={() => setIsMobileMenuOpen(false)}
                    className={`relative flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors overflow-hidden ${
                      isActive 
                        ? "bg-[#fff2ed] text-[#ff6b00]" 
                        : "text-gray-500 hover:bg-gray-50 hover:text-gray-900"
                    }`}
                  >
                    {isActive && (
                      <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-3/4 bg-[#ff6b00] rounded-r-md"></div>
                    )}
                    <Icon className={`w-4 h-4 flex-shrink-0 ${isActive ? "text-[#ff6b00]" : "text-gray-400"}`} />
                    {item.name}
                  </Link>
                );
              })}
            </nav>
              <div className="p-4 border-t border-gray-100">
                <button 
                  onClick={handleLogout}
                  className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-red-500 hover:bg-red-50 w-full transition-colors"
                >
                  <LogOut className="w-4 h-4 flex-shrink-0" />
                Log out
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Notification Modal */}
      <NotificationSidebar isOpen={isNotifOpen} onClose={() => setIsNotifOpen(false)} />
    </header>
  );
}