"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import {
  LayoutDashboard, Users, CreditCard, Activity, Brain, Server,
  ArrowLeft, LogOut, ShieldCheck,
} from "lucide-react"
import { cn, initials } from "@/lib/utils"
import { signOut } from "@/app/actions/auth"

export const ADMIN_NAV = [
  { label: "Overview",         href: "/admin",          icon: LayoutDashboard },
  { label: "Users",            href: "/admin/users",    icon: Users },
  { label: "Billing",          href: "/admin/billing",  icon: CreditCard },
  { label: "Activity & Audit", href: "/admin/activity", icon: Activity },
  { label: "AI Usage",         href: "/admin/ai-usage", icon: Brain },
  { label: "System",           href: "/admin/system",   icon: Server },
]

function isActive(pathname: string, href: string) {
  return href === "/admin" ? pathname === "/admin" : pathname.startsWith(href)
}

export function AdminSidebar({ email, name }: { email: string; name: string }) {
  const pathname = usePathname()

  return (
    <aside className="hidden md:flex h-screen w-60 shrink-0 flex-col border-r border-white/[0.06] bg-[#111118]">
      <div className="flex h-16 items-center gap-2.5 border-b border-white/[0.06] px-5">
        <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-rose-500 to-red-600 shadow-lg shadow-rose-500/20">
          <ShieldCheck className="h-4 w-4 text-white" />
        </div>
        <div>
          <p className="text-sm font-bold leading-none text-white">Admin</p>
          <p className="mt-0.5 text-[10px] text-white/40">Control Panel</p>
        </div>
      </div>

      <nav className="flex flex-1 flex-col gap-0.5 overflow-y-auto p-3">
        <p className="mb-1 px-2 text-[10px] font-semibold uppercase tracking-widest text-white/20">Platform</p>
        {ADMIN_NAV.map(({ label, href, icon: Icon }) => {
          const active = isActive(pathname, href)
          return (
            <Link
              key={href}
              href={href}
              className={cn(
                "group relative flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm transition-all",
                active ? "bg-rose-600/15 text-rose-200" : "text-white/50 hover:bg-white/[0.05] hover:text-white/90"
              )}
            >
              {active && <div className="absolute left-0 top-1/2 h-5 w-[3px] -translate-y-1/2 rounded-r-full bg-rose-500" />}
              <Icon className={cn("h-4 w-4 shrink-0", active ? "text-rose-400" : "text-white/30 group-hover:text-white/60")} />
              <span className="flex-1">{label}</span>
            </Link>
          )
        })}

        <div className="my-3 border-t border-white/[0.06]" />
        <Link
          href="/dashboard"
          className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-white/50 transition hover:bg-white/[0.05] hover:text-white/90"
        >
          <ArrowLeft className="h-4 w-4 shrink-0 text-white/30" />
          Back to App
        </Link>
      </nav>

      <div className="shrink-0 border-t border-white/[0.06] p-3">
        <div className="flex items-center gap-3 rounded-xl px-2 py-2">
          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-rose-500 to-red-600 text-xs font-bold text-white">
            {name ? initials(name) : "A"}
          </div>
          <div className="min-w-0 flex-1">
            <p className="truncate text-xs font-semibold text-white">{name || "Admin"}</p>
            <p className="truncate text-[10px] text-white/40">{email}</p>
          </div>
          <form action={signOut}>
            <button
              type="submit"
              title="Sign out"
              className="rounded-lg p-1.5 text-white/20 transition hover:bg-red-500/10 hover:text-red-400"
            >
              <LogOut className="h-3.5 w-3.5" />
            </button>
          </form>
        </div>
      </div>
    </aside>
  )
}