"use client";

import * as React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  Users,
  History,
  UserCheck,
  FileText,
  FolderTree,
  Image as ImageIcon,
  ArrowRightLeft,
  Shield,
  PanelLeftClose,
  PanelLeftOpen,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

export interface NavItem {
  label: string;
  href: string;
  icon: React.ComponentType<{ className?: string }>;
  show: boolean;
  mainOnly?: boolean;
  badge?: number | null;
}

export function getAdminNavItems(
  user: { level: "MAIN_ADMIN" | "SUB_ADMIN"; role: string },
  pendingResetRequestsCount = 0
): NavItem[] {
  const isMainAdmin = user.level === "MAIN_ADMIN";

  return [
    {
      label: "Overview",
      href: "/admin",
      icon: LayoutDashboard,
      show: true,
    },
    // CMS Publishing Suite
    {
      label: "Articles",
      href: "/admin/posts",
      icon: FileText,
      show: true,
    },
    {
      label: "Categories",
      href: "/admin/categories",
      icon: FolderTree,
      show: true,
    },
    {
      label: "Media Library",
      href: "/admin/media",
      icon: ImageIcon,
      show: true,
    },
    {
      label: "URL Redirects",
      href: "/admin/redirects",
      icon: ArrowRightLeft,
      show: isMainAdmin || user.role === "SEO_MANAGER",
    },
    {
      label: "Content Activity",
      href: "/admin/activity",
      icon: History,
      show: true,
    },
    // Main Admin Only Section
    {
      label: "Administrators",
      href: "/admin/admins",
      icon: Users,
      show: isMainAdmin,
      mainOnly: true,
    },
    // Account, security, roles, reset requests & audit now live under My Profile
    // (the account/security control center) — no longer standalone sidebar items.
    {
      label: "My Profile",
      href: "/admin/profile",
      icon: UserCheck,
      show: true,
      badge: isMainAdmin && pendingResetRequestsCount > 0 ? pendingResetRequestsCount : null,
    },
  ];
}

interface AdminSidebarProps {
  user: {
    level: "MAIN_ADMIN" | "SUB_ADMIN";
    role: string;
  };
  pendingResetRequestsCount?: number;
  onNavigate?: () => void;
  isCollapsed?: boolean;
  onToggleCollapse?: () => void;
  className?: string;
}

export function AdminSidebarNav({
  user,
  pendingResetRequestsCount = 0,
  onNavigate,
  isCollapsed = false,
}: AdminSidebarProps) {
  const pathname = usePathname();
  const navItems = getAdminNavItems(user, pendingResetRequestsCount);
  const isMainAdmin = user.level === "MAIN_ADMIN";

  return (
    <TooltipProvider delayDuration={150}>
      <div className={`flex h-full flex-col justify-between ${isCollapsed ? "p-2" : "p-4"}`}>
        <div className="flex-1 space-y-1">
          {!isCollapsed && (
            <div className="px-3 py-2 text-[10px] font-bold tracking-wider text-neutral-400 uppercase dark:text-neutral-500">
              Navigation
            </div>
          )}

          {navItems
            .filter((item) => item.show)
            .map((item) => {
              const Icon = item.icon;
              const isActive =
                item.href === "/admin"
                  ? pathname === "/admin"
                  : pathname.startsWith(item.href);

              const linkContent = (
                <Link
                  key={item.href}
                  href={item.href}
                  onClick={onNavigate}
                  aria-label={item.label}
                  className={`flex items-center rounded-xl py-2.5 text-xs font-medium transition ${
                    isCollapsed
                      ? "justify-center px-2"
                      : "justify-between px-3"
                  } ${
                    isActive
                      ? "bg-neutral-900 text-white dark:bg-white dark:text-neutral-900 shadow-xs font-semibold"
                      : "text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white"
                  }`}
                >
                  <div className="flex items-center gap-2.5">
                    <Icon className="h-4 w-4 shrink-0" />
                    {!isCollapsed && <span>{item.label}</span>}
                  </div>

                  {!isCollapsed && item.badge !== undefined && item.badge !== null && (
                    <span
                      className={`flex h-5 min-w-[20px] items-center justify-center rounded-full px-1.5 text-[10px] font-bold ${
                        isActive
                          ? "bg-amber-400 text-neutral-900"
                          : "bg-amber-500 text-white"
                      }`}
                    >
                      {item.badge}
                    </span>
                  )}
                </Link>
              );

              if (isCollapsed) {
                return (
                  <Tooltip key={item.href}>
                    <TooltipTrigger asChild>{linkContent}</TooltipTrigger>
                    <TooltipContent side="right" className="flex items-center gap-2">
                      <span>{item.label}</span>
                      {item.badge ? (
                        <span className="rounded-full bg-amber-500 px-1.5 py-0.5 text-[9px] text-white">
                          {item.badge}
                        </span>
                      ) : null}
                    </TooltipContent>
                  </Tooltip>
                );
              }

              return linkContent;
            })}
        </div>

        {/* Access Tier Footer Card */}
        {!isCollapsed ? (
          <div className="rounded-xl border border-neutral-200 bg-white p-3 dark:border-neutral-800 dark:bg-neutral-900 mt-4">
            <div className="flex items-center justify-between">
              <span className="text-[10px] font-semibold tracking-wider text-neutral-400 uppercase">
                Access Tier
              </span>
              <span
                className={`rounded px-1.5 py-0.5 text-[9px] font-bold uppercase ${
                  isMainAdmin
                    ? "bg-neutral-900 text-white dark:bg-white dark:text-neutral-900"
                    : "bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300"
                }`}
              >
                {isMainAdmin ? "Full Authority" : "Role Restricted"}
              </span>
            </div>
            <p className="mt-1.5 text-[11px] text-neutral-500">
              {isMainAdmin
                ? "Complete administrative and security control."
                : `Authorized for ${(user.role || "sub_admin").replace(/_/g, " ").toLowerCase()} actions.`}
            </p>
          </div>
        ) : (
          <div className="flex justify-center p-1 mt-4">
            <Tooltip>
              <TooltipTrigger asChild>
                <div className="h-8 w-8 rounded-xl bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center text-neutral-600 dark:text-neutral-300">
                  <Shield className="h-4 w-4" />
                </div>
              </TooltipTrigger>
              <TooltipContent side="right">
                <span className="font-semibold">
                  {isMainAdmin ? "Main Admin (Full Authority)" : `${user.role || "Sub Admin"} (Restricted)`}
                </span>
              </TooltipContent>
            </Tooltip>
          </div>
        )}
      </div>
    </TooltipProvider>
  );
}

export function AdminSidebar({
  user,
  pendingResetRequestsCount = 0,
}: AdminSidebarProps) {
  const [collapsed, setCollapsed] = React.useState(false);

  return (
    <aside
      className={`sticky top-16 hidden md:flex h-[calc(100vh-4rem)] flex-col border-r border-neutral-200 bg-neutral-50/50 dark:border-neutral-800 dark:bg-neutral-950/50 transition-[width] duration-200 ${
        collapsed ? "w-20" : "w-64"
      }`}
    >
      {/* Collapse/Expand Toggle Header */}
      <div className={`flex items-center border-b border-neutral-200/60 dark:border-neutral-800/60 p-2.5 ${
        collapsed ? "justify-center" : "justify-between px-4"
      }`}>
        {!collapsed && (
          <span className="text-xs font-bold text-neutral-700 dark:text-neutral-300">
            Navigation
          </span>
        )}
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={() => setCollapsed(!collapsed)}
          className="h-8 w-8 p-0 text-neutral-500 hover:text-neutral-900 dark:hover:text-white"
          title={collapsed ? "Expand sidebar (Desktop)" : "Collapse sidebar (Desktop)"}
          aria-label={collapsed ? "Expand navigation sidebar" : "Collapse navigation sidebar"}
          aria-expanded={!collapsed}
        >
          {collapsed ? (
            <PanelLeftOpen className="h-4 w-4" />
          ) : (
            <PanelLeftClose className="h-4 w-4" />
          )}
        </Button>
      </div>

      <div className="flex-1 overflow-y-auto">
        <AdminSidebarNav
          user={user}
          pendingResetRequestsCount={pendingResetRequestsCount}
          isCollapsed={collapsed}
        />
      </div>
    </aside>
  );
}