"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"

import {
  LayoutDashboard,
  ShoppingBag,
  Package,
  Users,
  BarChart3,
  Boxes,
  FolderTree,
  Tag,
  Palette,
  Ruler,
  Maximize,
  MessageSquare,
  Gift,
  Ticket,
  Truck,
  ChevronDown,
  ChevronRight,
  ShoppingCart,
  Settings,
  Image as ImageIcon,
  RotateCcw,
  FileText,
  Mail,
  HelpCircle
} from "lucide-react"

import { useState } from "react"

const navGroups = [
  {
    title: "Main",
    links: [
      {
        label: "Dashboard",
        href: "/admin",
        icon: LayoutDashboard,
        color: "text-violet-400",
        bg: "group-hover:bg-violet-950/40 group-hover:border-violet-500/20",
        activeClass: "bg-gradient-to-r from-violet-600 via-indigo-600 to-indigo-700 text-white shadow-xl shadow-violet-600/20 border-violet-400/20 scale-[1.01]",
      },
      {
        label: "Analytics",
        href: "/admin/analytics",
        icon: BarChart3,
        color: "text-teal-400",
        bg: "group-hover:bg-teal-950/40 group-hover:border-teal-500/20",
        activeClass: "bg-gradient-to-r from-teal-500 via-emerald-500 to-emerald-600 text-white shadow-xl shadow-teal-500/20 border-teal-400/20 scale-[1.01]",
      },
    ]
  },
  {
    title: "E-Commerce",
    links: [
      {
        label: "POS Checkout",
        href: "/admin/pos",
        icon: ShoppingCart,
        color: "text-emerald-400",
        bg: "group-hover:bg-emerald-950/40 group-hover:border-emerald-500/20",
        activeClass: "bg-gradient-to-r from-emerald-500 via-teal-500 to-teal-600 text-white shadow-xl shadow-emerald-500/20 border-emerald-400/20 scale-[1.01]",
      },
      {
        label: "Orders",
        href: "/admin/orders",
        icon: Package,
        color: "text-sky-400",
        bg: "group-hover:bg-sky-950/40 group-hover:border-sky-500/20",
        activeClass: "bg-gradient-to-r from-sky-500 via-blue-500 to-blue-600 text-white shadow-xl shadow-sky-500/20 border-sky-400/20 scale-[1.01]",
      },
      {
        label: "Products",
        href: "/admin/products",
        icon: ShoppingBag,
        color: "text-rose-400",
        bg: "group-hover:bg-rose-950/40 group-hover:border-rose-500/20",
        activeClass: "bg-gradient-to-r from-rose-600 via-pink-600 to-pink-700 text-white shadow-xl shadow-rose-600/20 border-rose-400/20 scale-[1.01]",
      },
      {
        label: "Categories",
        href: "/admin/categories",
        icon: FolderTree,
        color: "text-emerald-400",
        bg: "group-hover:bg-emerald-950/40 group-hover:border-emerald-500/20",
        activeClass: "bg-gradient-to-r from-emerald-600 via-teal-600 to-teal-700 text-white shadow-xl shadow-emerald-600/20 border-emerald-400/20 scale-[1.01]",
      },
    ]
  },
  {
    title: "Attributes",
    links: [
      {
        label: "Brands",
        href: "/admin/brands",
        icon: Tag,
        color: "text-amber-400",
        bg: "group-hover:bg-amber-950/40 group-hover:border-amber-500/20",
        activeClass: "bg-gradient-to-r from-amber-500 via-orange-500 to-orange-600 text-white shadow-xl shadow-amber-500/20 border-amber-400/20 scale-[1.01]",
      },
      {
        label: "Colors",
        href: "/admin/colors",
        icon: Palette,
        color: "text-cyan-400",
        bg: "group-hover:bg-cyan-950/40 group-hover:border-cyan-500/20",
        activeClass: "bg-gradient-to-r from-cyan-500 via-sky-500 to-sky-600 text-white shadow-xl shadow-cyan-500/20 border-cyan-400/20 scale-[1.01]",
      },
      {
        label: "Sizes",
        href: "/admin/sizes",
        icon: Ruler,
        color: "text-indigo-400",
        bg: "group-hover:bg-indigo-950/40 group-hover:border-indigo-500/20",
        activeClass: "bg-gradient-to-r from-indigo-600 via-violet-600 to-violet-700 text-white shadow-xl shadow-indigo-600/20 border-indigo-400/20 scale-[1.01]",
      },
      {
        label: "Lengths",
        href: "/admin/lengths",
        icon: Maximize,
        color: "text-fuchsia-400",
        bg: "group-hover:bg-fuchsia-950/40 group-hover:border-fuchsia-500/20",
        activeClass: "bg-gradient-to-r from-fuchsia-600 via-pink-600 to-pink-700 text-white shadow-xl shadow-fuchsia-600/20 border-fuchsia-400/20 scale-[1.01]",
      },
      {
        label: "Media Library",
        href: "/admin/media",
        icon: ImageIcon,
        color: "text-pink-400",
        bg: "group-hover:bg-pink-950/40 group-hover:border-pink-500/20",
        activeClass: "bg-gradient-to-r from-pink-500 via-rose-500 to-rose-600 text-white shadow-xl shadow-pink-500/20 border-pink-400/20 scale-[1.01]",
      },
    ]
  },
  {
    title: "Operations",
    links: [
      {
        label: "Inventory",
        href: "/admin/inventory",
        icon: Boxes,
        color: "text-purple-400",
        bg: "group-hover:bg-purple-950/40 group-hover:border-purple-500/20",
        activeClass: "bg-gradient-to-r from-purple-600 via-violet-600 to-violet-700 text-white shadow-xl shadow-purple-600/20 border-purple-400/20 scale-[1.01]",
      },
      {
        label: "Purchases",
        href: "/admin/purchases",
        icon: Package,
        color: "text-blue-400",
        bg: "group-hover:bg-blue-950/40 group-hover:border-blue-500/20",
        activeClass: "bg-gradient-to-r from-blue-500 via-indigo-500 to-indigo-600 text-white shadow-xl shadow-blue-500/20 border-blue-400/20 scale-[1.01]",
      },
      {
        label: "Suppliers",
        href: "/admin/suppliers",
        icon: Truck,
        color: "text-slate-400",
        bg: "group-hover:bg-slate-950/40 group-hover:border-slate-500/20",
        activeClass: "bg-gradient-to-r from-slate-600 via-slate-700 to-slate-800 text-white shadow-xl shadow-slate-600/20 border-slate-400/20 scale-[1.01]",
      },
      {
        label: "Returns",
        href: "/admin/returns",
        icon: RotateCcw,
        color: "text-orange-400",
        bg: "group-hover:bg-orange-950/40 group-hover:border-orange-500/20",
        activeClass: "bg-gradient-to-r from-orange-500 via-amber-500 to-amber-600 text-white shadow-xl shadow-orange-500/20 border-orange-400/20 scale-[1.01]",
      },
    ]
  },
  {
    title: "Marketing & Users",
    links: [
      {
        label: "Users",
        href: "/admin/users",
        icon: Users,
        color: "text-orange-400",
        bg: "group-hover:bg-orange-950/40 group-hover:border-orange-500/20",
        activeClass: "bg-gradient-to-r from-orange-500 via-red-500 to-red-600 text-white shadow-xl shadow-orange-500/20 border-orange-400/20 scale-[1.01]",
      },
      {
        label: "Promo Codes",
        href: "/admin/coupons",
        icon: Ticket,
        color: "text-green-400",
        bg: "group-hover:bg-green-950/40 group-hover:border-green-500/20",
        activeClass: "bg-gradient-to-r from-green-500 via-emerald-500 to-emerald-600 text-white shadow-xl shadow-green-500/20 border-green-400/20 scale-[1.01]",
      },
      {
        label: "Gift Cards",
        href: "/admin/gift-cards",
        icon: Gift,
        color: "text-yellow-400",
        bg: "group-hover:bg-yellow-950/40 group-hover:border-yellow-500/20",
        activeClass: "bg-gradient-to-r from-yellow-500 via-amber-500 to-orange-500 text-white shadow-xl shadow-yellow-500/20 border-yellow-400/20 scale-[1.01]",
      },
      {
        label: "Reviews",
        href: "/admin/reviews",
        icon: MessageSquare,
        color: "text-pink-400",
        bg: "group-hover:bg-pink-950/40 group-hover:border-pink-500/20",
        activeClass: "bg-gradient-to-r from-pink-500 via-rose-500 to-rose-600 text-white shadow-xl shadow-pink-500/20 border-pink-400/20 scale-[1.01]",
      },
      {
        label: "Product Q&A",
        href: "/admin/questions",
        icon: HelpCircle,
        color: "text-blue-400",
        bg: "group-hover:bg-blue-950/40 group-hover:border-blue-500/20",
        activeClass: "bg-gradient-to-r from-blue-500 via-indigo-500 to-indigo-600 text-white shadow-xl shadow-blue-500/20 border-blue-400/20 scale-[1.01]",
      },
      {
        label: "Newsletter",
        href: "/admin/newsletter",
        icon: Mail,
        color: "text-indigo-400",
        bg: "group-hover:bg-indigo-950/40 group-hover:border-indigo-500/20",
        activeClass: "bg-gradient-to-r from-indigo-500 via-blue-500 to-blue-600 text-white shadow-xl shadow-indigo-500/20 border-indigo-400/20 scale-[1.01]",
      },
    ]
  },
  {
    title: "System",
    links: [
      {
        label: "Settings",
        href: "/admin/settings",
        icon: Settings,
        color: "text-zinc-400",
        bg: "group-hover:bg-zinc-950/40 group-hover:border-zinc-500/20",
        activeClass: "bg-gradient-to-r from-zinc-500 via-zinc-600 to-zinc-700 text-white shadow-xl shadow-zinc-500/20 border-zinc-400/20 scale-[1.01]",
      },
      {
        label: "Pages",
        href: "/admin/pages",
        icon: FileText,
        color: "text-amber-400",
        bg: "group-hover:bg-amber-950/40 group-hover:border-amber-500/20",
        activeClass: "bg-gradient-to-r from-amber-500 via-orange-500 to-orange-600 text-white shadow-xl shadow-amber-500/20 border-amber-400/20 scale-[1.01]",
      },
      {
        label: "About Page",
        href: "/admin/settings/about",
        icon: Settings,
        color: "text-blue-400",
        bg: "group-hover:bg-blue-950/40 group-hover:border-blue-500/20",
        activeClass: "bg-gradient-to-r from-blue-500 via-indigo-500 to-indigo-600 text-white shadow-xl shadow-blue-500/20 border-blue-400/20 scale-[1.01]",
      },
      {
        label: "Shipping",
        href: "/admin/settings/shipping",
        icon: Truck,
        color: "text-sky-400",
        bg: "group-hover:bg-sky-950/40 group-hover:border-sky-500/20",
        activeClass: "bg-gradient-to-r from-sky-500 via-blue-500 to-blue-600 text-white shadow-xl shadow-sky-500/20 border-sky-400/20 scale-[1.01]",
      },
    ]
  }
]

export default function AdminSidebar() {
  const pathname = usePathname()
  
  // By default, all groups are open
  const [openGroups, setOpenGroups] = useState<Record<string, boolean>>(() => {
    const initialState: Record<string, boolean> = {}
    navGroups.forEach(group => {
      initialState[group.title] = true
    })
    return initialState
  })

  const toggleGroup = (title: string) => {
    setOpenGroups(prev => ({
      ...prev,
      [title]: !prev[title]
    }))
  }

  return (
    <aside className="w-56 bg-[#09090b] text-white flex flex-col border-r border-zinc-800/40 relative shadow-2xl shrink-0 no-print">
      {/* GLOWING NEON ORBS */}
      <div className="absolute top-0 left-0 w-24 h-24 bg-gradient-to-br from-violet-600/10 to-fuchsia-600/10 rounded-full blur-2xl -ml-12 -mt-12 pointer-events-none" />
      <div className="absolute bottom-0 right-0 w-24 h-24 bg-gradient-to-tr from-cyan-600/5 to-indigo-600/5 rounded-full blur-2xl -mr-12 -mb-12 pointer-events-none" />

      {/* BRAND SECTION */}
      <div className="p-4 border-b border-zinc-800/60 relative z-10 flex flex-col gap-1">
        <div className="flex items-center gap-2">
          <h1 className="text-lg font-black tracking-tighter bg-gradient-to-r from-violet-400 via-indigo-300 to-cyan-300 bg-clip-text text-transparent hover:scale-105 transition duration-300 select-none">
            FASHION.
          </h1>
          <span className="w-1 h-1 rounded-full bg-emerald-500 animate-ping absolute top-5.5 right-4" />
          <span className="w-1 h-1 rounded-full bg-emerald-500 absolute top-5.5 right-4" />
        </div>

        <p className="text-[7px] font-extrabold text-zinc-500 uppercase tracking-widest">
          Luxe Retail Suite
        </p>
      </div>

      {/* NAVIGATION LINKS */}
      <nav className="flex-1 p-3 space-y-4 overflow-y-auto relative z-10 scrollbar-thin scrollbar-thumb-zinc-800 scrollbar-track-transparent">
        {navGroups.map((group) => (
          <div key={group.title} className="space-y-1">
            <button 
              onClick={() => toggleGroup(group.title)}
              className="w-full flex items-center justify-between px-2.5 mb-1.5 group cursor-pointer"
            >
              <h3 className="text-[9px] font-black uppercase tracking-widest text-zinc-500 group-hover:text-zinc-300 transition">
                {group.title}
              </h3>
              {openGroups[group.title] ? (
                <ChevronDown className="w-3 h-3 text-zinc-600 group-hover:text-zinc-400 transition" />
              ) : (
                <ChevronRight className="w-3 h-3 text-zinc-600 group-hover:text-zinc-400 transition" />
              )}
            </button>
            
            {openGroups[group.title] && (
              <div className="space-y-1 animate-in slide-in-from-top-1 fade-in duration-200">
                {group.links.map((link) => {
                  const Icon = link.icon
                  const active = pathname === link.href

                  return (
                    <Link
                      key={link.href}
                      href={link.href}
                      className={`group flex items-center gap-2.5 px-2.5 py-1.5 rounded-lg transition-all duration-300 border ${
                        active
                          ? link.activeClass
                          : "hover:bg-zinc-800/30 hover:translate-x-1 border-transparent text-zinc-400"
                      }`}
                    >
                      <div className={`p-1 rounded-md transition-all duration-300 border ${
                        active 
                          ? "bg-white/10 text-white border-transparent" 
                          : `bg-zinc-900/80 ${link.color} ${link.bg} border-zinc-800/60`
                      }`}>
                        <Icon size={13} className={active ? "" : "group-hover:scale-105 transition"} />
                      </div>

                      <span className={`font-semibold text-[10px] tracking-wide transition duration-200 ${
                        active ? "text-white" : "text-zinc-350 group-hover:text-white"
                      }`}>
                        {link.label}
                      </span>
                    </Link>
                  )
                })}
              </div>
            )}
          </div>
        ))}
      </nav>

      {/* FOOTER COOLDOWN */}
      <div className="p-3 border-t border-zinc-800/60 text-center relative z-10">
        <p className="text-[7px] font-extrabold text-zinc-650 uppercase tracking-widest">
          Version 1.0.4 • Stable
        </p>
      </div>
    </aside>
  )
}