import { useState } from "react";
import {
  AudioLines,
  Bell,
  ChevronRight,
  Database,
  FileText,
  FlaskConical,
  HelpCircle,
  Image as ImageIcon,
  Images,
  LogOut,
  Plus,
  Video,
} from "lucide-react";
import { Link, useLocation, useNavigate } from "react-router-dom";

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

const LOGO_SRC = "/logo.png";

// The journey entry — research projects.
const projectItem: MenuItemDescriptor = {
  title: "Đề tài của tôi",
  icon: FlaskConical,
  url: "/dashboard/projects",
};

// "Dữ liệu" group — one entry per data modality + the create action.
// Văn bản / Âm thanh are placeholders (ComingSoon) until those modalities land.
const dataItems: MenuItemDescriptor[] = [
  { title: "Dữ liệu hình ảnh", icon: ImageIcon, url: "/dashboard" },
  { title: "Dữ liệu văn bản", icon: FileText, url: "/dashboard/data/text" },
  { title: "Dữ liệu âm thanh", icon: AudioLines, url: "/dashboard/data/audio" },
  { title: "Dữ liệu video", icon: Video, url: "/dashboard/video-viewer" },
  { title: "Chuỗi ảnh 2D", icon: Images, url: "/dashboard/image-viewer" },
  { title: "Tạo dữ liệu mới", icon: Plus, url: "/dashboard/datasets/new" },
];

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

export function ApplicantDashboardSidebar() {
  const location = useLocation();
  const navigate = useNavigate();
  const { state } = useSidebar();
  const { logout } = useAuth();
  const isCollapsed = state === "collapsed";
  const [dataOpen, setDataOpen] = useState(true);

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

  return (
    <Sidebar collapsible="icon">
      <SidebarHeader className="h-16 justify-center border-b border-sidebar-border px-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>
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              <ApplicantSidebarMenuItem item={projectItem} pathname={location.pathname} />

              {/* "Dữ liệu" — collapsible group of data modalities. */}
              <SidebarMenuItem>
                <SidebarMenuButton
                  onClick={() => setDataOpen((o) => !o)}
                  isActive={dataItems.some((d) => d.url === location.pathname)}
                  tooltip="Dữ liệu"
                  className="mt-4"
                >
                  <Database className="h-4 w-4 shrink-0" />
                  <span className="truncate">Dữ liệu</span>
                  {!isCollapsed && (
                    <ChevronRight
                      className={cn(
                        "ml-auto h-4 w-4 transition-transform",
                        dataOpen && "rotate-90",
                      )}
                    />
                  )}
                </SidebarMenuButton>
                {dataOpen && !isCollapsed && (
                  <SidebarMenuSub>
                    {dataItems.map((d) => {
                      const Icon = d.icon;
                      return (
                        <SidebarMenuSubItem key={d.url}>
                          <SidebarMenuSubButton asChild isActive={location.pathname === d.url}>
                            <Link to={d.url}>
                              <Icon className="h-4 w-4 shrink-0" />
                              <span className="truncate">{d.title}</span>
                            </Link>
                          </SidebarMenuSubButton>
                        </SidebarMenuSubItem>
                      );
                    })}
                  </SidebarMenuSub>
                )}
              </SidebarMenuItem>
            </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>
  );
}
