"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useSession, signOut } from "next-auth/react";
import {
  LuLayoutDashboard,
  LuScanLine,
  LuFolderOpen,
  LuUsers,
  LuLogOut,
  LuFileText,
  LuSettings,
  LuUser,
  LuChevronRight,
} from "react-icons/lu";

interface NavItem {
  name: string;
  href: string;
  icon: React.ElementType;
  adminOnly?: boolean;
}

const navigation: NavItem[] = [
  { name: "Documentos", href: "/dashboard", icon: LuLayoutDashboard },
  { name: "Escanear Documento", href: "/upload", icon: LuScanLine },
  { name: "Usuarios", href: "/employees", icon: LuUsers, adminOnly: true },
  { name: "Categorías", href: "/categories", icon: LuFolderOpen, adminOnly: true },
];

export function Sidebar({ collapsed = false }: { collapsed?: boolean }) {
  const pathname = usePathname();
  const { data: session } = useSession();

  const isAdmin = session?.user?.role === "ADMIN";

  const filteredNavigation = navigation.filter(
    (item) => !item.adminOnly || isAdmin
  );

  return (
    <aside className="h-full w-full bg-background border-r border-border-subtle flex flex-col transition-all duration-300">
      {/* Logo */}
      <div className="px-5 py-5 border-b border-border-subtle bg-gradient-to-br from-background to-primary-faint/30">
        <Link 
          href="/dashboard" 
          className="flex items-center gap-3 group focus-ring rounded-xl p-2 -ml-2"
          aria-label="Ir al dashboard"
        >
          <div className="p-2.5 bg-primary rounded-xl shadow-sm group-hover:shadow-md group-hover:scale-105 transition-all duration-200">
            <LuFileText className="h-5 w-5 text-primary-foreground" />
          </div>
          <div className={collapsed ? "hidden" : ""}>
            <span className="text-lg font-bold text-text block">OCR Pro</span>
            <span className="text-xs text-text-muted">Document AI</span>
          </div>
        </Link>
      </div>

      {/* Navigation */}
      <nav className="flex-1 px-3 py-5 space-y-1 overflow-y-auto" aria-label="Navegación principal">
        {filteredNavigation.map((item) => {
          const isActive = pathname === item.href || pathname.startsWith(item.href + "/");
          return (
            <Link
              key={item.href}
              href={item.href}
              className={`group flex items-center justify-between gap-3 px-3.5 py-3 rounded-xl text-sm font-medium transition-all duration-200 focus-ring ${
                isActive
                  ? "bg-primary text-primary-foreground shadow-sm"
                  : "text-text-muted hover:bg-primary-faint hover:text-primary"
              }`}
              aria-current={isActive ? "page" : undefined}
              title={collapsed ? item.name : undefined}
            >
              <div className="flex items-center gap-3">
                <item.icon 
                  className={`h-5 w-5 transition-transform duration-200 ${
                    isActive ? "text-primary-foreground" : "group-hover:scale-110"
                  } ${isActive ? "" : "text-text-subtle group-hover:text-primary"}`} 
                />
                <span className={collapsed ? "hidden" : ""}>{item.name}</span>
              </div>
              {isActive && !collapsed && (
                <LuChevronRight className="h-4 w-4 opacity-70" aria-hidden="true" />
              )}
            </Link>
          );
        })}
      </nav>

      {/* User Section */}
      {session?.user && (
        <div className="border-t border-border-subtle p-4 bg-gradient-to-t from-background-alt/50 to-transparent">
          <div className="flex items-center gap-3">
            <div className="h-10 w-10 rounded-full bg-gradient-to-br from-primary to-primary-hover flex items-center justify-center flex-shrink-0 shadow-sm">
              <LuUser className="h-5 w-5 text-primary-foreground" />
            </div>
            <div className={`flex-1 min-w-0 ${collapsed ? "hidden" : ""}`}>
              <p className="text-sm font-semibold text-text truncate">
                {session.user.name || session.user.username}
              </p>
              <p className="text-xs text-text-muted truncate">
                {session.user.role === "ADMIN" ? (
                  <span className="inline-flex items-center gap-1">
                    <LuSettings className="h-3 w-3" />
                    Administrador
                  </span>
                ) : (
                  "Usuario"
                )}
              </p>
            </div>
            <button
              onClick={() => signOut({ callbackUrl: "/" })}
              className="p-2 text-text-subtle hover:text-destructive hover:bg-destructive-background rounded-lg transition-all duration-200 focus-ring"
              title="Cerrar sesión"
              aria-label="Cerrar sesión"
            >
              <LuLogOut className="h-4 w-4" />
            </button>
          </div>
        </div>
      )}
    </aside>
  );
}