'use client';

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  LayoutDashboard,
  Package,
  Key,
  Download,
  User,
  Heart,
  LogOut,
  ShieldCheck,
} from 'lucide-react';
import { useAuth } from '@/context/AuthContext';

export default function UserSidebar() {
  const pathname = usePathname();
  const { user, isAdmin, logout } = useAuth();

  const links = [
    { name: 'Dashboard Overview', href: '/user/dashboard', icon: LayoutDashboard },
    { name: 'My Orders & Invoices', href: '/user/orders', icon: Package },
    { name: 'My Licenses & Domains', href: '/user/licenses', icon: Key },
    { name: 'Downloads Portal', href: '/user/downloads', icon: Download },
    { name: 'Wishlist', href: '/wishlist', icon: Heart },
    { name: 'Profile & Security', href: '/user/profile', icon: User },
  ];

  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">
      {/* User Card */}
      <div className="flex items-center gap-3.5 pb-6 border-b border-gray-100">
        <div className="w-12 h-12 rounded-2xl bg-indigo-100 text-indigo-700 font-black text-lg flex items-center justify-center border border-indigo-200">
          {user?.name?.charAt(0) || 'U'}
        </div>
        <div className="space-y-0.5 overflow-hidden">
          <h4 className="font-extrabold text-sm text-gray-900 truncate">
            {user?.name || 'Customer'}
          </h4>
          <p className="text-xs text-gray-400 truncate">{user?.email || 'user@hostneko.com'}</p>
        </div>
      </div>

      {/* Nav Links */}
      <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>
          );
        })}

        {isAdmin && (
          <div className="pt-2">
            <Link
              href="/admin/dashboard"
              className="flex items-center gap-3 px-4 py-3 rounded-2xl text-xs font-bold bg-indigo-50 text-indigo-700 hover:bg-indigo-100 transition"
            >
              <ShieldCheck className="w-4 h-4 text-indigo-600 shrink-0" />
              <span>Admin Control Panel</span>
            </Link>
          </div>
        )}
      </nav>

      {/* Logout */}
      <div className="pt-4 border-t border-gray-100">
        <button
          onClick={logout}
          className="w-full flex items-center gap-3 px-4 py-2.5 rounded-2xl text-xs font-bold text-red-500 hover:bg-red-50 transition"
        >
          <LogOut className="w-4 h-4" />
          <span>Log Out Account</span>
        </button>
      </div>
    </aside>
  );
}