import { Link, useLocation } from "react-router-dom";
import { 
  LayoutDashboard, 
  Megaphone, 
  Users, 
  Mail, 
  Flame, 
  Inbox, 
  Webhook, 
  BarChart2, 
  Building2, 
  CreditCard,
  Settings 
} from "lucide-react";
import { cn } from "../utils/cn";
import { useTheme } from "../context/ThemeContext";
import AnimatedLogo from "./AnimatedLogo";
import Logo from "./Logo";

const navigation = [
  { name: "Command Center", href: "/", icon: LayoutDashboard },
  { name: "Campaigns", href: "/campaigns", icon: Megaphone },
  { name: "Leads", href: "/leads", icon: Users },
  { name: "Email Accounts", href: "/email-accounts", icon: Mail },
  { name: "Warmup", href: "/warmup", icon: Flame },
  { name: "Unified Inbox", href: "/inbox", icon: Inbox },
  { name: "Webhooks", href: "/webhooks", icon: Webhook },
  { name: "Analytics", href: "/analytics", icon: BarChart2 },
  { name: "Clients", href: "/clients", icon: Building2 },
  { name: "Pricing", href: "/pricing", icon: CreditCard },
  { name: "Settings", href: "/settings", icon: Settings },
];


export default function Sidebar({ onClose }: { onClose?: () => void }) {
  const location = useLocation();
  const { config } = useTheme();

  return (
    <div className="w-64 border-r border-white/5 bg-zinc-950/90 md:bg-zinc-950/60 backdrop-blur-2xl flex flex-col shrink-0 h-full relative z-20 shadow-[4px_0_24px_-4px_rgba(0,0,0,0.8)]">
      <div className="h-16 flex items-center px-6 border-b border-white/5 shrink-0 gap-3">
        <AnimatedLogo className="w-7 h-7" />
        <Logo />
      </div>
      <nav className="flex-1 overflow-y-auto py-4 px-3 space-y-1">
        {navigation.map((item) => {
          const isActive = location.pathname === item.href || (item.href !== "/" && location.pathname.startsWith(item.href));
          return (
            <Link
              key={item.name}
              to={item.href}
              onClick={onClose}
              className={cn(
                "w-full flex items-center gap-3 px-3 py-2.5 text-[13px] font-medium rounded-lg transition-all duration-300 relative group overflow-hidden",
                isActive
                  ? "bg-white/5 border border-white/10 shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)]"
                  : "text-zinc-400 hover:text-zinc-200 hover:bg-white/5 border border-transparent"
              )}
              style={isActive ? { color: config.accentText } : {}}
            >
              {isActive && (
                <div 
                  className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-6 rounded-r-full"
                  style={{ 
                    backgroundColor: config.accent,
                    boxShadow: `0 0 15px ${config.accent}`
                  }} 
                />
              )}
              <item.icon 
                className={cn("w-4 h-4 transition-transform duration-300 group-hover:scale-110", isActive ? "" : "text-zinc-500")}
                style={isActive ? { color: config.accent, filter: `drop-shadow(0 0 8px ${config.accent})` } : {}} 
              />
              {item.name}
            </Link>
          );
        })}
      </nav>
    </div>
  );
}