"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { signOut } from "next-auth/react";
import {
  LayoutDashboard, Bot, BarChart2, CreditCard,
  Settings, LogOut, Zap, ChevronRight,
} from "lucide-react";

const navItems = [
  { href: "/dashboard", icon: LayoutDashboard, label: "Dashboard" },
  { href: "/bots", icon: Bot, label: "Chatbotii mei" },
  { href: "/analytics", icon: BarChart2, label: "Statistici" },
  { href: "/billing", icon: CreditCard, label: "Abonament" },
  { href: "/settings", icon: Settings, label: "Setari" },
];

interface SidebarProps {
  user?: { name?: string | null; email?: string | null; image?: string | null };
}

export function Sidebar({ user }: SidebarProps) {
  const pathname = usePathname();

  return (
    <aside className="w-60 bg-[#080c14] border-r border-white/[0.06] flex flex-col h-full shrink-0 relative overflow-hidden">
      {/* Ambient glow top */}
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-40 h-40 bg-indigo-600/8 rounded-full blur-3xl pointer-events-none" />

      {/* Logo */}
      <div className="px-5 py-5 border-b border-white/[0.06] relative">
        <Link href="/dashboard" className="flex items-center gap-3 group">
          <div className="relative w-8 h-8 shrink-0">
            {/* Outer rotating ring */}
            <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 animate-spin-slow opacity-40 blur-[2px]" />
            <div className="relative w-8 h-8 rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center shadow-lg shadow-indigo-500/40 group-hover:shadow-indigo-500/60 transition-shadow">
              <Zap className="w-4 h-4 text-white" />
            </div>
          </div>
          <div>
            <span className="text-base font-black text-white tracking-tight">Dialpilot</span>
            <div className="flex items-center gap-1 mt-0.5">
              <span className="w-1.5 h-1.5 bg-emerald-400 rounded-full animate-pulse" />
              <span className="text-[9px] text-emerald-400 font-semibold uppercase tracking-wider">AI Powered</span>
            </div>
          </div>
        </Link>
      </div>

      {/* Nav */}
      <nav className="flex-1 p-3 space-y-0.5 overflow-y-auto">
        {navItems.map(({ href, icon: Icon, label }, idx) => {
          const active = pathname === href || (href !== "/dashboard" && pathname.startsWith(href));
          return (
            <Link
              key={href}
              href={href}
              style={{ animationDelay: `${idx * 60}ms` }}
              className={`animate-slide-left group relative flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-200 ${
                active
                  ? "bg-gradient-to-r from-indigo-500/15 to-violet-500/8 text-white border border-indigo-500/25 shadow-lg shadow-indigo-500/5"
                  : "text-slate-500 hover:text-slate-200 hover:bg-white/[0.04] border border-transparent"
              }`}
            >
              {/* Active left glow bar */}
              {active && (
                <span className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 rounded-r bg-gradient-to-b from-indigo-400 to-violet-400 shadow-[0_0_8px_rgba(99,102,241,0.8)]" />
              )}

              <div className={`relative w-7 h-7 rounded-lg flex items-center justify-center transition-all ${
                active
                  ? "bg-indigo-500/20 shadow-inner"
                  : "group-hover:bg-white/[0.06]"
              }`}>
                <Icon className={`w-3.5 h-3.5 transition-colors ${active ? "text-indigo-300" : "text-slate-600 group-hover:text-slate-300"}`} />
              </div>

              <span className="flex-1 tracking-wide">{label}</span>

              {active && (
                <ChevronRight className="w-3 h-3 text-indigo-400/60 animate-fade-in" />
              )}
            </Link>
          );
        })}
      </nav>

      {/* Divider with gradient */}
      <div className="mx-4 h-px bg-gradient-to-r from-transparent via-white/[0.07] to-transparent" />

      {/* User */}
      <div className="p-3 space-y-1">
        <div className="flex items-center gap-2.5 px-3 py-2.5 rounded-xl bg-white/[0.02] border border-white/[0.05] hover:border-white/[0.1] transition-all group">
          <div className="relative shrink-0">
            <div className="w-7 h-7 rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center text-white font-bold text-xs shadow-lg shadow-indigo-500/20">
              {user?.name?.[0]?.toUpperCase() ?? user?.email?.[0]?.toUpperCase() ?? "U"}
            </div>
            <span className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-emerald-400 rounded-full border-2 border-[#080c14]" />
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-xs font-semibold text-white truncate">{user?.name ?? "Utilizator"}</p>
            <p className="text-[10px] text-slate-500 truncate">{user?.email}</p>
          </div>
        </div>
        <button
          onClick={() => signOut({ callbackUrl: "/login" })}
          className="flex items-center gap-2.5 w-full px-3 py-2 text-xs text-slate-600 hover:text-red-400 hover:bg-red-500/8 rounded-xl transition-all group"
        >
          <LogOut className="w-3.5 h-3.5 group-hover:rotate-12 transition-transform" />
          Deconectare
        </button>
      </div>
    </aside>
  );
}