import { Database, FileText, FileStack, Bell, Settings, HelpCircle, LogOut, User } from "lucide-react";
import { Link, useLocation, useNavigate } from "react-router-dom";

import { useAuth, getRoleDisplayName, type Role } from "@ump/shared";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarSeparator,
  useSidebar,
} from "@/components/ui/sidebar";
import {
  ApplicantSidebarMenuItem,
  type MenuItemDescriptor,
} from "@/components/applicant/ApplicantSidebarMenuItem";

const LOGO_SRC = "/logo.png";

// Static applicant menu — mirrors fe0's ApplicantDashboardSidebar item list verbatim.
// (fe0 filters these through a useMyMenuPermissions hook that does not exist in this app;
// the applicant always sees this full set, so it is hardcoded here.)
const mainMenuItems: MenuItemDescriptor[] = [
  { title: "Bộ dữ liệu nhóm", icon: Database, url: "/dashboard/datasets" },
  { title: "Lịch sử đăng ký", icon: FileText, url: "/dashboard/documents" },
  { title: "Mẫu tài liệu", icon: FileStack, url: "/dashboard/templates" },
  { title: "Hồ sơ cá nhân", icon: User, url: "/applicant/profile" },
];

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

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

  const handleLogout = () => {
    logout();
    navigate("/login");
  };

  const roleLabel = roles.map((r: Role) => getRoleDisplayName(r)).join(", ");

  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="Đại học Y Dược Thành phố Hồ Chí Minh"
            className="h-9 w-9 object-contain flex-shrink-0"
          />
          {!isCollapsed && (
            <div className="leading-tight">
              <div className="font-serif text-sm font-semibold text-sidebar-foreground">
                Đại học Y Dược
              </div>
              <div className="text-[11px] text-muted-foreground">Thành phố Hồ Chí Minh</div>
            </div>
          )}
        </Link>
      </SidebarHeader>

      <SidebarContent>
        {!isCollapsed && (user?.name || roleLabel) && (
          <div className="px-4 pt-3">
            <p className="truncate text-sm font-medium text-sidebar-foreground">{user?.name}</p>
            {roleLabel && (
              <p className="truncate text-xs text-sidebar-foreground/70">{roleLabel}</p>
            )}
          </div>
        )}

        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              {mainMenuItems.map((item) => (
                <ApplicantSidebarMenuItem key={item.url} item={item} pathname={location.pathname} />
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <SidebarSeparator />

        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              {systemItems.map((item) => (
                <ApplicantSidebarMenuItem key={item.url} item={item} pathname={location.pathname} />
              ))}
            </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>
  );
}
