"use client";

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { 
  LayoutDashboard, 
  Users, 
  MessageSquare, 
  BookOpen, 
  LogOut,
  ShieldCheck,
  BarChart3,
  Flag,
  CreditCard,
  Settings,
  Globe,
  FileText,
  Briefcase,
  Tags,
  Image as ImageIcon
} from 'lucide-react';

const menuItems = [
  { name: 'Dashboard', icon: LayoutDashboard, href: '/dashboard' },
  { name: 'Utilisateurs', icon: Users, href: '/users' },
  { name: 'Metrics & Analytics', icon: BarChart3, href: '/metrics' },
  { name: 'Commentaires', icon: MessageSquare, href: '/comments' },
  { name: 'Modération', icon: Flag, href: '/moderation' },
  { name: 'Actualités & Interviews', icon: BookOpen, href: '/actualites' },
  { name: 'Forfaits & Services', icon: CreditCard, href: '/plans' },
  { name: 'Taxonomies', icon: Tags, href: '/taxonomies' },
  { name: 'Pays', icon: Globe, href: '/countries' },
  { name: 'Bannière', icon: ImageIcon, href: '/slides' },
  { name: 'Documents Légaux', icon: FileText, href: '/legal' },
  { name: 'Configuration', icon: Settings, href: '/settings' },
];

import { useState, useEffect } from 'react';
import { getPendingVerificationCount } from '@/app/actions/business';

export default function Sidebar() {
  const pathname = usePathname();
  const [pendingCount, setPendingCount] = useState(0);

  useEffect(() => {
    getPendingVerificationCount().then(setPendingCount);
  }, [pathname]); // Refresh on navigation

  return (
    <div className="admin-sidebar p-6 flex flex-col">
      <div className="flex items-center gap-3 mb-10 px-2">
        <div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center">
          <ShieldCheck className="text-white" />
        </div>
        <h1 className="text-xl font-bold tracking-tight text-white">AfroAdmin</h1>
      </div>

      <nav className="flex-1 space-y-1">
        {menuItems.map((item) => {
          const isActive = pathname === item.href;
          return (
            <Link 
              key={item.name} 
              href={item.href}
              className={`nav-link ${isActive ? 'active' : ''} flex items-center justify-between group`}
            >
              <div className="flex items-center">
                <item.icon className="w-5 h-5 mr-3" />
                <span>{item.name}</span>
              </div>
              
              {item.name === 'Utilisateurs' && pendingCount > 0 && (
                <span className="bg-red-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full min-w-[18px] text-center shadow-lg group-hover:scale-110 transition-transform">
                  {pendingCount}
                </span>
              )}
            </Link>
          );
        })}
      </nav>

      <div className="mt-auto pt-6 border-t border-slate-700">
        <button className="nav-link w-full text-left text-red-400 hover:bg-red-950/30">
          <LogOut className="w-5 h-5 mr-3" />
          <span>Déconnexion</span>
        </button>
      </div>
    </div>
  );
}