'use client';

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  LayoutDashboard,
  Package,
  FolderTree,
  ShoppingCart,
  Key,
  Tag,
  Sliders,
  Settings,
  ArrowLeft,
  ShieldCheck,
} from 'lucide-react';

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

  const links = [
    { name: 'Analytics & Overview', href: '/admin/dashboard', icon: LayoutDashboard },
    { name: 'Products & Scripts', href: '/admin/products', icon: Package },
    { name: 'Categories', href: '/admin/categories', icon: FolderTree },
    { name: 'Orders & TRX Verification', href: '/admin/orders', icon: ShoppingCart },
    { name: 'License Keys & Whitelists', href: '/admin/licenses', icon: Key },
    { name: 'Coupons & Discounts', href: '/admin/coupons', icon: Tag },
    { name: 'Hero Banner Sliders', href: '/admin/sliders', icon: Sliders },
    { name: 'Gateway & Site Settings', href: '/admin/settings', icon: Settings },
  ];

  return (
    <aside className="w-full lg:w-72 bg-white rounded-3xl p-6 shadow-sm border border-gray-100 space-y-6 shrink-0 h-fit">
      {/* Header */}
      <div className="flex items-center gap-3 pb-6 border-b border-gray-100">
        <div className="w-12 h-12 rounded-2xl bg-indigo-600 text-white flex items-center justify-center font-bold text-lg shadow-md shadow-indigo-600/20">
          <ShieldCheck className="w-6 h-6" />
        </div>
        <div>
          <h4 className="font-extrabold text-sm text-gray-900 leading-tight">Admin Console</h4>
          <span className="text-[10px] font-bold uppercase tracking-wider text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-md">
            Super Administrator
          </span>
        </div>
      </div>

      {/* Nav */}
      <nav className="space-y-1.5">
        {links.map((link) => {
          const Icon = link.icon;
          const isActive = pathname === link.href;
          return (
            <Link
              key={link.name}
              href={link.href}
              className={`flex items-center gap-3 px-4 py-3 rounded-2xl text-xs font-bold transition ${
                isActive
                  ? 'bg-indigo-600 text-white shadow-md shadow-indigo-600/20'
                  : 'text-gray-600 hover:bg-indigo-50 hover:text-indigo-600'
              }`}
            >
              <Icon className="w-4 h-4 shrink-0" />
              <span>{link.name}</span>
            </Link>
          );
        })}
      </nav>

      {/* Back to Client Store */}
      <div className="pt-4 border-t border-gray-100">
        <Link
          href="/"
          className="flex items-center gap-2.5 px-4 py-2.5 rounded-2xl text-xs font-bold text-gray-600 hover:bg-gray-100 transition"
        >
          <ArrowLeft className="w-4 h-4" />
          <span>Return to Storefront</span>
        </Link>
      </div>
    </aside>
  );
}