afrov2/admin/src/components/Sidebar.tsx

"use client";

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

import { useState, useEffect } from 'react';
import { getPendingVerificationCount } from '@/app/actions/business';
import { getCurrentAdminAction, logoutAdminAction } from '@/app/actions/auth';
import type { AdminSessionPayload } from '@/lib/session';
import { hasTabPermission, ADMIN_ROLES, type AdminRoleType } from '@/lib/permissions';

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

export default function Sidebar() {
  const pathname = usePathname();
  const [pendingCount, setPendingCount] = useState(0);
  const [adminUser, setAdminUser] = useState<AdminSessionPayload | null>(null);
  const [isLoggingOut, setIsLoggingOut] = useState(false);

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

  useEffect(() => {
    getCurrentAdminAction().then(setAdminUser);
  }, []);

  const handleLogout = async () => {
    try {
      setIsLoggingOut(true);
      await logoutAdminAction();
      window.location.href = '/login';
    } catch (err) {
      console.error('Logout error:', err);
      setIsLoggingOut(false);
    }
  };

  const visibleMenuItems = ALL_MENU_ITEMS.filter((item) => {
    if (!adminUser) return true;
    return hasTabPermission(adminUser.adminRole, adminUser.permissions, item.id);
  });

  const roleMeta = adminUser ? ADMIN_ROLES[adminUser.adminRole as AdminRoleType] : null;

  return (
    <div className="admin-sidebar z-50 p-6 flex flex-col">
      <div className="flex items-center gap-3 mb-8 px-2">
        <div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center shadow-md shadow-indigo-600/30">
          <ShieldCheck className="text-white w-6 h-6" />
        </div>
        <div>
          <h1 className="text-xl font-bold tracking-tight text-white leading-none">AfroAdmin</h1>
          <span className="text-[10px] uppercase font-semibold tracking-wider text-indigo-400">Backoffice</span>
        </div>
      </div>

      <nav className="flex-1 space-y-1 overflow-y-auto pr-1">
        {visibleMenuItems.map((item) => {
          const isActive = pathname === item.href || (item.href !== '/dashboard' && pathname.startsWith(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 shrink-0" />
                <span className="truncate">{item.name}</span>
              </div>
              
              {item.id === 'users' && 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>
              )}

              {item.id === 'team' && (
                <span className="text-[10px] font-semibold px-1.5 py-0.5 rounded bg-purple-500/20 text-purple-300 border border-purple-500/30">
                  Super
                </span>
              )}
            </Link>
          );
        })}
      </nav>

      <div className="mt-auto pt-4 border-t border-slate-700/80 space-y-3">
        {adminUser && (
          <div className="px-3 py-2.5 rounded-xl bg-slate-800/60 border border-slate-700/50 flex items-center gap-3">
            <div className={`w-9 h-9 rounded-lg bg-gradient-to-tr ${roleMeta?.iconBgClass || 'from-indigo-500 to-violet-500'} flex items-center justify-center text-white font-bold text-sm shadow shrink-0`}>
              {adminUser.name ? adminUser.name.charAt(0).toUpperCase() : 'A'}
            </div>
            <div className="flex-1 min-w-0">
              <div className="flex items-center justify-between gap-1">
                <p className="text-sm font-semibold text-white truncate leading-tight">
                  {adminUser.name || 'Admin'}
                </p>
              </div>
              <p className="text-[11px] text-slate-400 truncate mb-1">
                {adminUser.email}
              </p>
              <span className={`inline-block text-[10px] font-semibold px-2 py-0.5 rounded-full border ${roleMeta?.badgeClass || 'bg-slate-700 text-slate-300 border-slate-600'}`}>
                {roleMeta?.badgeLabel || adminUser.adminRole}
              </span>
            </div>
          </div>
        )}

        <button 
          onClick={handleLogout}
          disabled={isLoggingOut}
          className="nav-link w-full text-left text-red-400 hover:bg-red-950/30 hover:text-red-300 transition-colors cursor-pointer disabled:opacity-50"
        >
          <LogOut className="w-5 h-5 mr-3 shrink-0" />
          <span>{isLoggingOut ? 'Déconnexion...' : 'Déconnexion'}</span>
        </button>
      </div>
    </div>
  );
}