"use client";

import { cn } from "@/lib/utils";
import {
  Activity,
  AppWindow,
  Globe,
  LayoutDashboard,
  Shield,
  ShieldAlert,
  Server,
  Zap,
  Radio,
  Lock,
  Search
} from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";

const navigation = [
  { name: "Summary", href: "/", icon: LayoutDashboard },
  { name: "Agents", href: "/agents", icon: Server },
  { name: "Devices", href: "/devices", icon: Server },
  { name: "Flows", href: "/flows", icon: Activity },
  { name: "Apps", href: "/apps", icon: AppWindow },
  { name: "App Database", href: "/lookup", icon: Search },
  { name: "Threats", href: "/threats", icon: ShieldAlert },
  { name: "Geography", href: "/geography", icon: Globe },
  { name: "DNS", href: "/dns", icon: Radio },
  { name: "Events", href: "/events", icon: Zap },
  { name: "Network Intelligence", href: "/network-intelligence", icon: Activity },
  { name: "Security Audit", href: "/security-audit", icon: Lock },
  { name: "Intelligence", href: "/intelligence", icon: Shield },
  { name: "Network Infra", href: "/network-infrastructure", icon: Server },
  { name: "DPI Analytics", href: "/dpi-analytics", icon: Activity },
];

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

  return (
    <div className="flex h-full w-64 flex-col border-r border-border/50 bg-sidebar/80 backdrop-blur-2xl relative">
      {/* Subtle glow effect behind sidebar */}
      <div className="absolute inset-0 bg-gradient-to-b from-primary/5 via-transparent to-transparent pointer-events-none" />
      
      <div className="flex h-[72px] shrink-0 items-center px-6 border-b border-border/50 relative z-10">
        <div className="relative flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 border border-primary/20 mr-3 shadow-[0_0_15px_rgba(59,130,246,0.2)]">
          <Shield className="h-5 w-5 text-primary" />
        </div>
        <span className="text-lg font-bold text-white tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white to-white/70">
          Netify
        </span>
      </div>
      <div className="flex flex-1 flex-col overflow-y-auto relative z-10">
        <nav className="flex-1 space-y-1.5 px-3 py-6">
          {navigation.map((item) => {
            const isActive = pathname === item.href;
            return (
              <Link
                key={item.name}
                href={item.href}
                className={cn(
                  "group relative flex items-center rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200 overflow-hidden",
                  isActive
                    ? "bg-primary/10 text-white shadow-[0_0_10px_rgba(59,130,246,0.1)]"
                    : "text-muted-foreground hover:bg-secondary/50 hover:text-white"
                )}
              >
                {/* Active indicator bar */}
                {isActive && (
                  <div className="absolute left-0 top-0 bottom-0 w-1 bg-primary rounded-r-full shadow-[0_0_10px_rgba(59,130,246,0.8)]" />
                )}
                
                <item.icon
                  className={cn(
                    "mr-3 h-5 w-5 shrink-0 transition-all duration-300",
                    isActive 
                      ? "text-primary drop-shadow-[0_0_8px_rgba(59,130,246,0.5)] scale-110" 
                      : "text-muted-foreground group-hover:text-white group-hover:scale-110"
                  )}
                  aria-hidden="true"
                />
                <span className="relative z-10">{item.name}</span>
                
                {/* Hover background effect */}
                {!isActive && (
                  <div className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/5 to-white/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none translate-x-[-100%] group-hover:translate-x-[100%] transition-transform" />
                )}
              </Link>
            );
          })}
        </nav>
      </div>
    </div>
  );
}