"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  Users,
  FileText,
  CreditCard,
  Settings,
} from "lucide-react";
import { cn } from "@/lib/utils/cn";
import { Logo } from "@/components/shared/Logo";
import { LogoutButton } from "@/components/shared/LogoutButton";

interface AdminSidebarProps {
  userName: string;
  onNavigate?: () => void;
}

const navItems = [
  { href: "/admin/overview", label: "Overview", icon: LayoutDashboard },
  { href: "/admin/clients", label: "Clients", icon: Users },
  { href: "/admin/surveys", label: "Global Surveys", icon: FileText },
  { href: "/admin/revenue", label: "Revenue", icon: CreditCard },
  { href: "/admin/settings", label: "System Settings", icon: Settings },
];

export function AdminSidebar({ userName, onNavigate }: AdminSidebarProps) {
  const pathname = usePathname();
  const initials = userName
    .split(" ")
    .map((n) => n[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();

  return (
    <aside className="flex h-full w-[236px] shrink-0 flex-col bg-navy px-3.5 py-5 text-white/75">
      <div className="px-2 pb-[22px] pt-1.5">
        <Logo textClassName="text-white text-base" />
        <p className="mt-1 pl-[30px] text-[10px] font-bold uppercase tracking-wider text-white/40">
          Admin Control
        </p>
      </div>

      <nav className="flex-1">
        {navItems.map(({ href, label, icon: Icon }) => {
          const active =
            pathname === href ||
            (href !== "/admin/overview" && pathname.startsWith(href));
          return (
            <Link
              key={href}
              href={href}
              onClick={onNavigate}
              className={cn(
                "mb-0.5 flex items-center gap-[11px] rounded-sm px-3 py-2.5 text-[13.5px] font-medium transition-colors",
                active
                  ? "bg-primary font-semibold text-white"
                  : "hover:bg-white/6 hover:text-white"
              )}
            >
              <Icon className="h-4 w-4 shrink-0" strokeWidth={2} />
              {label}
            </Link>
          );
        })}
      </nav>

      <div className="mt-auto border-t border-white/10 pt-3.5">
        <div className="flex items-center gap-2.5 px-2 py-2">
          <div className="flex h-[30px] w-[30px] items-center justify-center rounded-full bg-accent text-xs font-extrabold text-navy">
            {initials}
          </div>
          <div>
            <div className="text-[12.5px] font-semibold text-white">
              {userName}
            </div>
            <div className="text-[11px] opacity-60">Super Admin</div>
          </div>
        </div>
        <LogoutButton onNavigate={onNavigate} />
      </div>
    </aside>
  );
}