import { Link, useLocation } from 'react-router-dom';
import { useUIStore } from '@/stores/ui';
import { useAuthStore } from '@/features/auth/store/authStore';
import { useTranslation } from '@/hooks/useTranslation';
import { cn } from '@/lib/utils';
import {
  Home,
  MessageSquare,
  Library,
  Users,
  Settings,
  Shield,
} from 'lucide-react';

export function Sidebar() {
  const { sidebarOpen } = useUIStore();
  const { user } = useAuthStore();
  const { t } = useTranslation();
  const location = useLocation();

  // Vérifier si l'utilisateur est admin
  const isAdmin = user?.role === 'admin' || user?.role === 'super_admin';

  const navigation = [
    { name: t('navigation.dashboard'), href: '/dashboard', icon: Home },
    { name: t('navigation.chat'), href: '/chat', icon: MessageSquare },
    { name: t('navigation.library'), href: '/library', icon: Library },
    { name: t('navigation.profile'), href: '/profile', icon: Users },
    { name: t('navigation.settings'), href: '/settings', icon: Settings },
  ];

  // Ajouter les liens admin si l'utilisateur est admin
  if (isAdmin) {
    navigation.push({
      name: 'Roles',
      href: '/admin/roles',
      icon: Shield,
    });
  }

  return (
    <aside
      className={cn(
        'fixed inset-y-0 left-0 z-40 w-64 bg-background border-r transform transition-transform duration-200 ease-in-out',
        sidebarOpen ? 'translate-x-0' : '-translate-x-full',
        'md:translate-x-0',
      )}
      role="navigation"
      aria-label={t('navigation.menu')}
    >
      <div className="flex flex-col h-full">
        {/* Logo */}
        <div className="flex items-center h-16 px-6 border-b">
          <div
            className="h-8 w-8 rounded-lg bg-primary flex items-center justify-center"
            aria-hidden="true"
          >
            <span className="text-primary-foreground font-bold text-lg">V</span>
          </div>
          <span className="ml-2 font-bold text-xl">Veza</span>
        </div>

        {/* Navigation */}
        <nav className="flex-1 px-4 py-6 space-y-2" role="menubar">
          {navigation.map((item) => {
            const isActive = location.pathname === item.href;
            return (
              <Link
                key={item.name}
                to={item.href}
                role="menuitem"
                tabIndex={0}
                aria-current={isActive ? 'page' : undefined}
                className={cn(
                  'flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
                  isActive
                    ? 'bg-primary text-primary-foreground'
                    : 'text-muted-foreground hover:text-foreground hover:bg-accent',
                )}
              >
                <item.icon className="mr-3 h-5 w-5" aria-hidden="true" />
                {item.name}
              </Link>
            );
          })}
        </nav>

        {/* Footer */}
        <footer className="p-4 border-t">
          <div className="text-xs text-muted-foreground">
            <p>Veza v1.0.0</p>
            <p>© 2024 Veza Team</p>
          </div>
        </footer>
      </div>
    </aside>
  );
}