import { FileText, Bell, Settings, HelpCircle, LogOut, User } from "lucide-react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarSeparator,
  useSidebar,
} from "@/components/ui/sidebar";
import { useAuth } from "@/contexts/AuthContext";
const LOGO_SRC = "/logo.svg";
import {
  getFreshApplicantDashboardHref,
  prepareFreshApplicantDashboardNavigation,
} from "@/lib/applicantRegistrationSession";
import {
  ApplicantSidebarMenuItem,
  type MenuItemDescriptor,
} from "@/components/applicant/ApplicantSidebarMenuItem";

const mainMenuItems: MenuItemDescriptor[] = [
  {
    title: "Lịch sử đăng ký",
    icon: FileText,
    kind: "link",
    url: "/dashboard/documents",
  },
  {
    title: "Hồ sơ cá nhân",
    icon: User,
    kind: "link",
    url: "/applicant/profile",
  },
];

const systemItems: MenuItemDescriptor[] = [
  { title: "Thông báo", icon: Bell, kind: "link", url: "/dashboard/notifications" },
  { title: "Cài đặt", icon: Settings, kind: "link", url: "/dashboard/settings" },
  { title: "Trợ giúp", icon: HelpCircle, kind: "link", url: "/dashboard/help" },
];

export function ApplicantDashboardSidebar() {
  const location = useLocation();
  const navigate = useNavigate();
  const { state } = useSidebar();
  const { logout } = useAuth();
  const isCollapsed = state === "collapsed";

  const handleLogout = async () => {
    await logout();
    navigate('/login');
  };

  const handleFreshRegistration = () => {
    prepareFreshApplicantDashboardNavigation();
    window.location.assign(getFreshApplicantDashboardHref());
  };

  return (
    <Sidebar collapsible="icon">
      <SidebarHeader className="border-b border-sidebar-border p-4">
        <Link to="/dashboard" className="flex items-center gap-2">
          <img 
            src={LOGO_SRC} 
            alt="UMP Logo" 
            className="h-8 w-8 object-contain flex-shrink-0"
          />
          {!isCollapsed && (
            <span className="font-serif text-lg font-semibold text-sidebar-foreground">
              UMP
            </span>
          )}
        </Link>
      </SidebarHeader>
      
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              {mainMenuItems.map((item) => (
                <ApplicantSidebarMenuItem
                  key={item.url}
                  item={item}
                  pathname={location.pathname}
                  onFreshRegistration={handleFreshRegistration}
                />
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <SidebarSeparator />

        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              {systemItems.map((item) => (
                <ApplicantSidebarMenuItem
                  key={item.url}
                  item={item}
                  pathname={location.pathname}
                  onFreshRegistration={handleFreshRegistration}
                />
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter className="border-t border-sidebar-border p-2">
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton 
              onClick={handleLogout}
              tooltip="Đăng xuất"
              className="text-destructive text-bg-black hover:text-destructive cursor-pointer"
            >
              <LogOut className="h-4 w-4" />
              <span>Đăng xuất</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
    </Sidebar>
  );
}
