"use client";

import Link from "next/link";
import Image from "next/image";
import { usePathname, useRouter } from "next/navigation";
import { useAuthStore } from "@/store/auth.store";
import { 
  LayoutDashboard, 
  FileText, 
  Heart, 
  Calendar, 
  Bell, 
  User, 
  LogOut,
  Menu as MenuIcon
} from "lucide-react";
import { useSidebarStore } from "@/store/sidebar.store";

const menuItems = [
  { 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 Sidebar() {
  const pathname = usePathname();
  const router = useRouter();
  const clearAuth = useAuthStore((state) => state.clearAuth);
  const { isCollapsed, toggleSidebar } = useSidebarStore();

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

  return (
    <aside className={`hidden md:flex ${isCollapsed ? 'w-[80px]' : 'w-[240px]'} transition-all duration-300 bg-white border-r border-gray-100 flex-col h-screen sticky top-0 flex-shrink-0`}>
      {/* Logo */}
      <div className={`p-6 flex items-center ${isCollapsed ? 'justify-center px-4' : ''}`}>
        <Link href="/">
          {isCollapsed ? (
            <div className="w-8 h-8 bg-black text-white font-bold flex items-center justify-center rounded-md">JV</div>
          ) : (
            <Image src="/images/jobvumi-logo.png" alt="Jobvumi" width={120} height={36} className="object-contain w-auto h-auto" priority />
          )}
        </Link>
      </div>

      {/* Menu */}
      <div className="flex-1 px-4 py-2 overflow-y-auto">
        <div className={`flex items-center mb-4 px-2 ${isCollapsed ? 'justify-center' : 'justify-between'}`}>
          {!isCollapsed && <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Menu</p>}
          <button 
            onClick={toggleSidebar} 
            className="p-1 text-gray-400 hover:text-gray-900 hover:bg-gray-100 rounded transition-colors"
            title="Toggle Sidebar"
          >
            <MenuIcon className="w-4 h-4" />
          </button>
        </div>
        <nav className="flex flex-col gap-1.5">
          {menuItems.map((item) => {
            const isActive = pathname === item.href;
            const Icon = item.icon;
            
            return (
              <Link 
                key={item.name} 
                href={item.href}
                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"
                } ${isCollapsed ? 'justify-center' : ''}`}
                title={isCollapsed ? item.name : undefined}
              >
                {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"}`} />
                {!isCollapsed && <span className="whitespace-nowrap">{item.name}</span>}
              </Link>
            );
          })}
        </nav>
      </div>

      {/* Bottom Actions */}
      <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 transition-colors ${isCollapsed ? 'justify-center w-full' : 'w-full'}`}
          title={isCollapsed ? "Log out" : undefined}
        >
          <LogOut className="w-4 h-4 flex-shrink-0" />
          {!isCollapsed && <span>Log out</span>}
        </button>
      </div>
    </aside>
  );
}