"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname, useSearchParams } from "next/navigation";
import { useState } from "react";
import { cn } from "@/lib/utils";
import { useLanguage } from "@/lib/i18n";
import { Button } from "@/components/ui/button";
import {
  Award,
  BookOpen,
  CheckCircle2,
  ChevronDown,
  ClipboardList,
  CreditCard,
  FileText,
  FolderTree,
  GraduationCap,
  Languages,
  LayoutDashboard,
  MapPin,
  Menu,
  SearchCheck,
  ShieldCheck,
  Settings,
  Tags,
  UserCog,
  Users,
  X,
} from "lucide-react";

const sidebarLinks = [
  { name: "admin.dashboard", href: "/admin", icon: LayoutDashboard },
  {
    name: "admin.masterDirectories",
    href: "/admin/master-directories",
    icon: FolderTree,
    GraduationCap,
    children: [
      {
        name: "admin.documentTypes",
        href: "/admin/master-directories/document-types",
        icon: FileText,
      },
      {
        name: "admin.languages",
        href: "/admin/master-directories/languages",
        icon: Languages,
      },
      {
        name: "admin.serviceLocations",
        href: "/admin/master-directories/locations",
        icon: MapPin,
      },
      {
        name: "admin.courses",
        href: "/admin/master-directories/courses",
        icon: GraduationCap,
      },
      {
        name: "admin.expertises",
        href: "/admin/master-directories/expertises",
        icon: Tags,
      },
    ],
  },
  {
    name: "admin.accountManagement",
    href: "/admin/account-management",
    icon: UserCog,
    children: [
      {
        name: "admin.admins",
        href: "/admin/coming-soon?module=administrators",
        icon: ShieldCheck,
      },
      {
        name: "admin.tourGuides",
        href: "/admin/guides",
        icon: Users,
      },
    ],
  },
  {
    name: "admin.guideRequests",
    href: "/admin/guide-requests",
    icon: Users,
    children: [
      {
        name: "admin.newApplications",
        href: "/admin/guide-requests/new-applications",
        icon: ClipboardList,
      },
      {
        name: "admin.renewalApplications",
        href: "/admin/guide-requests/renewal-applications",
        icon: ShieldCheck,
      },
      {
        name: "admin.underReviewApplications",
        href: "/admin/guide-requests/under-review",
        icon: SearchCheck,
      },
      {
        name: "Rejected Applications",
        href: "/admin/guide-requests/completed-applications?status=rejected",
        icon: X,
      },
      {
        name: "Approved Applications",
        href: "/admin/guide-requests/completed-applications?status=approved",
        icon: CheckCircle2,
      },
    ],
  },
  { name: "admin.blogApprovals", href: "/admin/blogs", icon: BookOpen },
  { name: "admin.monthlyReports", href: "/admin/reports", icon: FileText },
  {
    name: "admin.idCardManagement",
    href: "/admin/id-cards/issued",
    icon: CreditCard,
    children: [
      {
        name: "admin.issuedIdCards",
        href: "/admin/id-cards/issued",
        icon: CreditCard,
      },
      {
        name: "admin.expiredIdCards",
        href: "/admin/id-cards/expired",
        icon: FileText,
      },
    ],
  },
  { name: "admin.certifications", href: "/admin/certifications", icon: Award },
] as const;

export function AdminSidebar() {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const [mobileOpen, setMobileOpen] = useState(false);
  const [openGroups, setOpenGroups] = useState<Record<string, boolean>>({});
  const { t } = useLanguage();
  const comingSoonModule =
    pathname === "/admin/coming-soon" ? searchParams.get("module") : null;

  const activeHref =
    comingSoonModule === "id-cards"
      ? "/admin/id-cards/issued"
      : comingSoonModule === "certifications"
        ? "/admin/certifications"
        : pathname;
  const activeHrefWithQuery = pathname.match(
    /^\/admin\/id-cards\/[^/]+\/generate$/,
  )
    ? "/admin/id-cards/issued"
    : searchParams.size
      ? `${activeHref}?${searchParams.toString()}`
      : activeHref;

  const sidebarContent = (
    <div className="flex h-full flex-col">
      <div className="flex h-[65px] items-center border-b border-[var(--theme-border)] bg-white/95 px-4">
        <Link href="/" className="inline-flex">
          <Image
            src="/uttarakhand-logo.png"
            alt="Uttarakhand Tourism"
            width={190}
            height={54}
            className="h-11 w-auto object-contain"
            priority
          />
        </Link>
      </div>

      <nav className="flex-1 space-y-1.5 overflow-y-auto px-3 py-4">
        {sidebarLinks.map((link) => {
          const hasChildren = "children" in link && !!link.children?.length;
          const childIsActive =
            hasChildren &&
            link.children.some((child) => {
              if (child.href.includes("?")) {
                return activeHrefWithQuery === child.href;
              }

              return (
                activeHref === child.href ||
                activeHref.startsWith(`${child.href}/`)
              );
            });
          const isActive =
            activeHref === link.href ||
            (link.href !== "/admin" &&
              activeHref.startsWith(`${link.href}/`)) ||
            childIsActive;
          const isOpen = hasChildren && (openGroups[link.name] ?? isActive);

          if (hasChildren) {
            return (
              <div key={link.name} className="space-y-1">
                <button
                  type="button"
                  onClick={() =>
                    setOpenGroups((groups) => ({
                      ...groups,
                      [link.name]: !(groups[link.name] ?? isActive),
                    }))
                  }
                  className={cn(
                    "group flex w-full items-center gap-3 rounded-2xl px-4 py-3 text-left text-sm font-semibold transition-all",
                    isActive
                      ? "bg-gradient-to-r from-[var(--theme-secondary)] to-[var(--theme-accent)] text-white shadow-lg shadow-[var(--theme-secondary)]/20"
                      : "text-white/68 hover:bg-white/10 hover:text-white",
                  )}
                >
                  <link.icon
                    className={cn(
                      "h-5 w-5 shrink-0 transition-transform group-hover:scale-110",
                      isActive ? "text-white" : "text-[var(--theme-secondary)]",
                    )}
                  />
                  <span className="flex-1">{t(link.name)}</span>
                  <ChevronDown
                    className={cn(
                      "h-4 w-4 shrink-0 transition-transform",
                      isOpen && "rotate-180",
                    )}
                  />
                </button>

                {isOpen && (
                  <div className="ml-4 space-y-1 border-l border-white/10 pl-3">
                    {link.children.map((child) => {
                      const isChildActive = child.href.includes("?")
                        ? activeHrefWithQuery === child.href
                        : activeHref === child.href ||
                          activeHref.startsWith(`${child.href}/`);

                      return (
                        <Link
                          key={child.name}
                          href={child.href}
                          onClick={() => setMobileOpen(false)}
                          className={cn(
                            "group flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold transition-all",
                            isChildActive
                              ? "bg-white/12 text-white"
                              : "text-white/58 hover:bg-white/10 hover:text-white",
                          )}
                        >
                          <child.icon
                            className={cn(
                              "h-4 w-4 shrink-0 transition-transform group-hover:scale-110",
                              isChildActive
                                ? "text-[var(--theme-secondary)]"
                                : "text-white/42",
                            )}
                          />
                          {t(child.name)}
                        </Link>
                      );
                    })}
                  </div>
                )}
              </div>
            );
          }

          return (
            <Link
              key={link.name}
              href={link.href}
              onClick={() => setMobileOpen(false)}
              className={cn(
                "group flex items-center gap-3 rounded-2xl px-4 py-3 text-sm font-semibold transition-all",
                isActive
                  ? "bg-gradient-to-r from-[var(--theme-secondary)] to-[var(--theme-accent)] text-white shadow-lg shadow-[var(--theme-secondary)]/20"
                  : "text-white/68 hover:bg-white/10 hover:text-white",
              )}
            >
              <link.icon
                className={cn(
                  "h-5 w-5 shrink-0 transition-transform group-hover:scale-110",
                  isActive ? "text-white" : "text-[var(--theme-secondary)]",
                )}
              />
              {t(link.name)}
            </Link>
          );
        })}
      </nav>

      <div className="border-t border-white/10 px-3 py-4">
        <Link
          href="/admin/settings"
          onClick={() => setMobileOpen(false)}
          className={cn(
            "group flex items-center gap-3 rounded-2xl px-4 py-3 text-sm font-semibold transition-all",
            pathname === "/admin/settings" ||
              comingSoonModule === "notifications"
              ? "bg-gradient-to-r from-[var(--theme-secondary)] to-[var(--theme-accent)] text-white shadow-lg shadow-[var(--theme-secondary)]/20"
              : "text-white/68 hover:bg-white/10 hover:text-white",
          )}
        >
          <Settings
            className={cn(
              "h-5 w-5 shrink-0 transition-transform group-hover:scale-110",
              pathname === "/admin/settings" ||
                comingSoonModule === "notifications"
                ? "text-white"
                : "text-[var(--theme-secondary)]",
            )}
          />
          {t("admin.settings")}
        </Link>
      </div>
    </div>
  );

  return (
    <>
      <div className="fixed inset-x-0 top-0 z-50 flex h-16 items-center justify-between border-b border-[var(--theme-border)] bg-white/90 px-4 shadow-sm backdrop-blur-xl lg:hidden">
        <Image
          src="/uttarakhand-logo.png"
          alt="Uttarakhand Tourism"
          width={165}
          height={48}
          className="h-10 w-auto object-contain"
          priority
        />
        <Button
          variant="outline"
          size="icon"
          className="rounded-full bg-white"
          onClick={() => setMobileOpen((open) => !open)}
        >
          {mobileOpen ? (
            <X className="h-5 w-5" />
          ) : (
            <Menu className="h-5 w-5" />
          )}
          <span className="sr-only">Toggle admin navigation</span>
        </Button>
      </div>

      <aside className="fixed inset-y-0 left-0 z-40 hidden w-64 bg-[var(--sidebar)] shadow-[18px_0_60px_rgba(15,23,42,0.18)] lg:block">
        {sidebarContent}
      </aside>

      {mobileOpen && (
        <button
          type="button"
          aria-label="Close admin navigation"
          className="fixed inset-0 z-40 bg-black/45 backdrop-blur-sm lg:hidden"
          onClick={() => setMobileOpen(false)}
        />
      )}

      <aside
        className={cn(
          "fixed bottom-0 left-0 top-16 z-50 w-80 max-w-[86vw] border-r border-white/10 bg-[var(--sidebar)] shadow-2xl transition-transform duration-300 lg:hidden",
          mobileOpen ? "translate-x-0" : "-translate-x-full",
        )}
      >
        {sidebarContent}
      </aside>
    </>
  );
}