"use client";

import React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { 
  LayoutDashboard, 
  Package, 
  Users, 
  UserSquare2, 
  ShoppingCart, 
  CheckSquare, 
  Network, 
  MessageSquare, 
  Map as MapIcon,
  FileText,
  LogOut 
} from "lucide-react";
import { motion } from "framer-motion";
import { auth } from "@/lib/firebase";

const menuItems = [
  { icon: LayoutDashboard, label: "Dashboard", href: "/" },
  { icon: Package, label: "Inventario", href: "/inventory" },
  { icon: ShoppingCart, label: "Ventas", href: "/sales" },
  { icon: Users, label: "Clientes", href: "/clients" },
  { icon: UserSquare2, label: "Personal / RRHH", href: "/hr" },
  { icon: CheckSquare, label: "Tareas", href: "/tasks" },
  { icon: FileText, label: "Facturación", href: "/billing" },
  { icon: Network, label: "Organigrama", href: "/org-chart" },
  { icon: MessageSquare, label: "Intranet", href: "/intranet" },
  { icon: MapIcon, label: "Mapa Mental", href: "/mind-map" },
];

export default function Sidebar() {
  const pathname = usePathname();

  if (pathname === "/login") return null;

  return (
    <motion.aside 
      initial={{ x: -100, opacity: 0 }}
      animate={{ x: 0, opacity: 1 }}
      className="fixed left-6 top-6 bottom-6 w-64 bg-white/5 border border-white/10 rounded-[40px] backdrop-blur-3xl z-40 p-8 flex flex-col shadow-2xl overflow-hidden"
    >
      <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-indigo-500"></div>
      
      <div className="mb-10 flex items-center gap-3">
        <div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg shadow-blue-900/40 font-black text-xl">E</div>
        <span className="font-black text-xl tracking-tighter uppercase italic">Premium ERP</span>
      </div>

      <nav className="flex-1 space-y-2 overflow-y-auto no-scrollbar">
        {menuItems.map((item) => {
          const isActive = pathname === item.href;
          return (
            <Link key={item.href} href={item.href}>
              <div className={`
                flex items-center gap-4 px-4 py-3 rounded-2xl transition-all group relative overflow-hidden
                ${isActive ? 'bg-white/10 text-blue-400' : 'text-gray-400 hover:bg-white/5 hover:text-white'}
              `}>
                {isActive && (
                  <motion.div 
                    layoutId="active-pill"
                    className="absolute inset-0 bg-blue-500/10 border border-blue-500/20 rounded-2xl"
                  />
                )}
                <item.icon size={20} className={`relative z-10 ${isActive ? 'text-blue-400' : 'group-hover:scale-110 transition-transform'}`} />
                <span className="font-semibold text-sm relative z-10">{item.label}</span>
              </div>
            </Link>
          );
        })}
      </nav>

      <div className="mt-8 pt-6 border-t border-white/5">
        <button 
          onClick={() => auth.signOut()}
          className="flex items-center gap-4 px-4 py-3 w-full text-red-400 hover:bg-red-500/10 rounded-2xl transition-all group"
        >
          <LogOut size={20} className="group-hover:-translate-x-1 transition-transform" />
          <span className="font-bold text-sm">Cerrar Sesión</span>
        </button>
      </div>
    </motion.aside>
  );
}