"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard, Users, Key,
  Shield, ArrowLeft,
} from "lucide-react";
import { cn } from "@/lib/utils";

const adminNav = [
  { href: "/admin/dashboard", label: "Live Dashboard",    icon: LayoutDashboard },
  { href: "/admin/users",     label: "Manajemen User",    icon: Users },
  { href: "/admin/settings",  label: "API Keys Global",   icon: Key },
];

export default function AdminSidebar() {
  const pathname = usePathname();

  return (
    <aside className="w-60 gold-border-r flex flex-col bg-card/60 hidden md:flex" style={{ backdropFilter: "blur(12px)" }}>

      {/* Logo */}
      <div className="h-16 gold-border-b flex items-center gap-3 px-4">
        <div className="w-8 h-8 rounded-xl bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center shadow-lg shadow-amber-500/30">
          <Shield className="w-4 h-4 text-white" />
        </div>
        <div>
          <p className="font-bold text-sm leading-tight gold-shimmer-text">PromptMotion</p>
          <p className="text-[10px] font-semibold uppercase tracking-widest" style={{
            background: "linear-gradient(90deg, #a07820, #d4af37)",
            WebkitBackgroundClip: "text",
            WebkitTextFillColor: "transparent",
          }}>
            Admin Panel
          </p>
        </div>
      </div>

      {/* Nav */}
      <nav className="flex-1 px-3 py-4 space-y-0.5">
        {/* Section label */}
        <div className="flex items-center gap-2 px-2 mb-3">
          <div className="h-px flex-1 gold-hr-soft" />
          <p className="text-[10px] gold-label uppercase tracking-widest">Menu</p>
          <div className="h-px flex-1 gold-hr-soft" />
        </div>

        {adminNav.map((item) => {
          const isActive = pathname === item.href;
          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                "nav-active-indicator flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-all duration-200",
                isActive
                  ? "bg-gradient-to-r from-amber-500/15 to-transparent text-amber-200 font-medium"
                  : "text-muted-foreground hover:text-foreground hover:bg-white/5"
              )}
            >
              <item.icon className={cn("w-4 h-4 flex-shrink-0", isActive && "text-amber-400")} />
              {item.label}
            </Link>
          );
        })}
      </nav>

      {/* Back to app */}
      <div className="px-3 py-3 gold-border-t">
        <div className="gold-hr-soft mb-2" />
        <Link
          href="/dashboard"
          className="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-muted-foreground hover:text-foreground hover:bg-white/5 transition-all"
        >
          <ArrowLeft className="w-4 h-4" />
          Kembali ke App
        </Link>
      </div>
    </aside>
  );
}
