"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";

import {
  ActivitySquare,
  ChevronDown,
  ChevronRight,
  FileClock,
  FolderOpen,
  Home,
  Menu,
  Settings,
  User,
  Users,
  X,
} from "lucide-react";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";

import { useUserRole } from "@/hooks/useUserRole";

interface NavigationItem {
  name: string;
  href?: string;
  icon: React.ComponentType<{ className?: string }>;
  adminOnly?: boolean;
  children?: NavigationItem[];
}

const navigation: NavigationItem[] = [
  {
    name: "Dashboard",
    href: "/dashboard",
    icon: Home,
  },
  {
    name: "Reportes",
    icon: FolderOpen,
    adminOnly: true,
    children: [
      {
        name: "CDR",
        href: "/reportes/cdr",
        icon: FileClock,
        adminOnly: true,
      },
      {
        name: "CEL",
        href: "/reportes/cel",
        icon: ActivitySquare,
        adminOnly: true,
      },
    ],
  },
  {
    name: "Sistema",
    icon: Settings,
    adminOnly: true,
    children: [
      {
        name: "Mi Perfil",
        href: "/sistema/perfil",
        icon: User,
      },
      {
        name: "Usuarios",
        href: "/sistema/usuarios",
        icon: Users,
        adminOnly: true,
      },
      {
        name: "Configuración",
        href: "/sistema",
        icon: Settings,
        adminOnly: true,
      },
    ],
  },
];

export default function Sidebar() {
  const pathname = usePathname();
  const { isAdmin } = useUserRole();
  const [isCollapsed, setIsCollapsed] = useState(false);
  const [openSections, setOpenSections] = useState<string[]>(["Reportes", "Sistema"]);

  const toggleSection = (sectionName: string) => {
    setOpenSections(prev =>
      prev.includes(sectionName)
        ? prev.filter(name => name !== sectionName)
        : [...prev, sectionName]
    );
  };

  const renderNavigationItem = (item: NavigationItem, level = 0) => {
    // Ocultar items de admin si el usuario no es admin
    if (item.adminOnly && !isAdmin) {
      return null;
    }

    const isActive = item.href ? pathname === item.href : false;
    const hasChildren = item.children && item.children.length > 0;
    const isOpen = openSections.includes(item.name);

    if (hasChildren) {
      return (
        <Collapsible
          key={item.name}
          open={isOpen && !isCollapsed}
          onOpenChange={() => !isCollapsed && toggleSection(item.name)}
        >
          <CollapsibleTrigger asChild>
            <Button
              variant="ghost"
              className={cn(
                "w-full justify-start gap-3 px-3 py-2 text-sm font-medium transition-all duration-200",
                level > 0 && "ml-4",
                isCollapsed ? "px-2" : "px-3",
                "text-slate-700 hover:bg-slate-100 hover:text-slate-900"
              )}
            >
              {isCollapsed ? (
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <div className="flex items-center justify-center">
                        <item.icon className="h-5 w-5" />
                      </div>
                    </TooltipTrigger>
                    <TooltipContent side="right" className="ml-2">
                      {item.name}
                    </TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              ) : (
                <>
                  <item.icon className="h-5 w-5 flex-shrink-0" />
                  <span className="flex-1 text-left">{item.name}</span>
                  {isOpen ? (
                    <ChevronDown className="h-4 w-4 flex-shrink-0" />
                  ) : (
                    <ChevronRight className="h-4 w-4 flex-shrink-0" />
                  )}
                </>
              )}
            </Button>
          </CollapsibleTrigger>
          <CollapsibleContent className="space-y-1">
            {item.children?.map(child => renderNavigationItem(child, level + 1))}
          </CollapsibleContent>
        </Collapsible>
      );
    }

    const NavigationLink = (
      <Link
        key={item.name}
        href={item.href!}
        className={cn(
          "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200",
          level > 0 && !isCollapsed && "ml-4",
          isCollapsed ? "justify-center px-2" : "justify-start px-3",
          isActive
            ? "bg-blue-50 text-blue-600 shadow-sm border-l-4 border-blue-600"
            : "text-slate-700 hover:bg-slate-100 hover:text-slate-900"
        )}
      >
        <item.icon className="h-5 w-5 flex-shrink-0" />
        {!isCollapsed && <span>{item.name}</span>}
      </Link>
    );

    if (isCollapsed) {
      return (
        <TooltipProvider key={item.name}>
          <Tooltip>
            <TooltipTrigger asChild>
              {NavigationLink}
            </TooltipTrigger>
            <TooltipContent side="right" className="ml-2">
              {item.name}
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      );
    }

    return NavigationLink;
  };

  return (
    <aside
      className={cn(
        "fixed inset-y-0 left-0 z-40 border-r border-slate-200 bg-white shadow-lg transition-all duration-300 ease-in-out",
        isCollapsed ? "w-16" : "w-64"
      )}
    >
      <div className="flex h-full flex-col">
        {/* Header con Logo y Botón Hamburguesa */}
        <div className="flex h-16 items-center justify-between border-b border-slate-200 px-4">
          {!isCollapsed && (
            <div className="flex items-center gap-2">
              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 shadow-sm">
                <span className="text-sm font-bold text-white">AT</span>
              </div>
              <div className="flex flex-col">
                <span className="text-sm font-bold text-slate-900">
                  AdminTemplate
                </span>
                <span className="text-xs text-slate-500">Panel Admin</span>
              </div>
            </div>
          )}
          
          <Button
            variant="ghost"
            size="sm"
            onClick={() => setIsCollapsed(!isCollapsed)}
            className={cn(
              "h-8 w-8 p-0 hover:bg-slate-100",
              isCollapsed && "mx-auto"
            )}
          >
            {isCollapsed ? (
              <Menu className="h-4 w-4" />
            ) : (
              <X className="h-4 w-4" />
            )}
          </Button>
        </div>

        {/* Navigation */}
        <nav className="flex-1 space-y-1 overflow-y-auto px-2 py-4">
          {navigation.map(item => renderNavigationItem(item))}
        </nav>

        {/* Footer */}
        <div className="border-t border-slate-200 p-4">
          {!isCollapsed ? (
            <div className="text-xs text-slate-500">
              <p className="font-medium">AdminTemplate v2.0</p>
              <p>Panel de Administración</p>
            </div>
          ) : (
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <div className="flex justify-center">
                    <div className="h-2 w-2 rounded-full bg-green-500"></div>
                  </div>
                </TooltipTrigger>
                <TooltipContent side="right" className="ml-2">
                  Sistema Activo
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          )}
        </div>
      </div>
    </aside>
  );
}