"use client";

import { signOut } from "next-auth/react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  PackageSearch, Users, ShoppingCart, LayoutDashboard,
  ImageIcon, Shield, LogOut, Mail, Globe, LayoutGrid, ShieldAlert, Trophy, QrCode, ShoppingBag, Activity, Printer, Video
} from "lucide-react";

const NAV = [
  { href: "/admin", label: "Dashboard", icon: LayoutDashboard, color: "text-neon-blue" },
  { href: "/admin/promos", label: "Promociones", icon: ImageIcon, color: "text-neon-blue" },
  { href: "/admin/products", label: "Láminas / Tickets", icon: PackageSearch, color: "text-neon-purple" },
  { href: "/admin/merch", label: "Tienda / Merch", icon: ShoppingBag, color: "text-[#0ea5c6]" },
  { href: "/admin/site-images", label: "Contenido del sitio", icon: Globe, color: "text-green-400" },
  { href: "/admin/sensibilizacion", label: "Sensibilización", icon: Video, color: "text-pink-400" },
  { href: "/admin/carousel", label: "Carrusel portada", icon: LayoutGrid, color: "text-neon-blue" },
  { href: "/admin/watermarks", label: "Marcas de Agua", icon: ImageIcon, color: "text-[#39ff14]" },
  { href: "/admin/orders", label: "Pedidos & Tickets", icon: ShoppingCart, color: "text-neon-blue" },
  { href: "/admin/print-tickets", label: "Imprimir tickets", icon: Printer, color: "text-neon-blue" },
  { href: "/admin/email-preview", label: "Vista previa correo", icon: Mail, color: "text-green-400" },
  { href: "/admin/reenvio-transparente", label: "Reenvío Manual", icon: Mail, color: "text-orange-400" },
  { href: "/admin/stand", label: "📲 Stand / QR", icon: QrCode, color: "text-[#0ea5c6]" },
  { href: "/admin/estado", label: "Estado del sistema", icon: Activity, color: "text-green-400" },
  { href: "/admin/tombola", label: "🎰 Tómbola", icon: Trophy, color: "text-yellow-400" },
  { href: "/admin/users", label: "Usuarios", icon: Users, color: "text-neon-purple" },
  { href: "/admin/security", label: "Seguridad", icon: Shield, color: "text-gray-400" },
  { href: "/admin/logs", label: "Registro Auditoría", icon: ShieldAlert, color: "text-red-500" },
];

export default function AdminSidebarClient({
  name,
  email,
}: {
  name: string | null | undefined;
  email: string | null | undefined;
}) {
  const pathname = usePathname();

  return (
    <aside className="w-64 shrink-0 glass-panel flex flex-col p-5 sticky top-4 h-[calc(100vh-2rem)]">
      <h2 className="text-2xl font-black text-transparent bg-clip-text bg-gradient-to-r from-neon-blue to-neon-purple mb-4 shrink-0 text-center border-b border-white/10 pb-4">
        ADMIN
      </h2>

      <nav className="admin-nav -mx-2 min-h-0 flex-1 space-y-0.5 overflow-y-auto px-2">
        {NAV.map(({ href, label, icon: Icon, color }) => {
          const active = pathname === href;
          return (
            <Link
              key={href}
              href={href}
              className={`flex items-center gap-3 px-4 py-2 rounded-lg transition-colors font-medium text-sm ${
                active ? "bg-white/10 text-white" : "hover:bg-white/5 text-gray-300"
              }`}
            >
              <Icon className={`w-5 h-5 ${color}`} />
              <span>{label}</span>
            </Link>
          );
        })}
      </nav>

      <div className="mt-auto shrink-0 border-t border-white/10 pt-4 space-y-3">
        <div className="text-center text-sm text-gray-500">
          <p className="font-medium text-gray-300">{name}</p>
          <p className="font-mono text-xs truncate">{email}</p>
        </div>
        <button
          onClick={() => signOut({ callbackUrl: "/web/marce" })}
          className="w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-red-500/10 hover:bg-red-500/20 text-red-400 hover:text-red-300 transition-colors text-sm font-semibold border border-red-500/20"
        >
          <LogOut className="w-4 h-4" />
          Cerrar sesión
        </button>
      </div>
    </aside>
  );
}