import { Link, NavLink } from 'react-router-dom';
import { useAuth } from '@/auth/AuthProvider';

/**
 * Navigation d'un projet.
 *
 * Les entrées réservées aux administrateurs ne sont pas grisées : elles sont
 * ABSENTES. Un menu plein d'options inaccessibles apprend à l'utilisateur que
 * l'interface ne le concerne pas — c'est exactement l'inverse du but recherché.
 *
 * Le rôle n'est pas encore exposé par l'API de projet ; en attendant, on affiche
 * l'administration aux comptes qui ont un rôle global élevé, et le serveur reste
 * l'autorité — chaque endpoint refuse ce qu'il doit refuser.
 */
export function ProjectNav({ projectUuid, canAdminister }: { projectUuid: string; canAdminister: boolean }) {
    const { user, logout } = useAuth();

    const item = (to: string, label: string) => (
        <NavLink
            key={to}
            to={to}
            className={({ isActive }) =>
                `rounded px-2.5 py-1 text-sm transition-colors ${
                    isActive ? 'bg-accent-soft font-medium text-accent' : 'text-ink-600 hover:bg-ink-100'
                }`
            }
        >
            {label}
        </NavLink>
    );

    return (
        <div className="flex items-center gap-1">
            <Link to="/projects" className="mr-2 text-sm font-semibold text-ink-900 hover:text-accent">
                TQ-Slator
            </Link>

            <div className="h-5 w-px bg-ink-200" />

            {item(`/p/${projectUuid}/editor`, 'Éditeur')}
            {canAdminister && item(`/p/${projectUuid}/members`, 'Membres')}
            {canAdminister && item(`/p/${projectUuid}/platforms`, 'Plateformes')}
            {canAdminister && item(`/p/${projectUuid}/integration`, 'Intégration')}

            <span className="ml-auto flex items-center gap-3 text-xs text-ink-400">
                <span>{user?.name}</span>
                <button onClick={() => void logout()} className="hover:text-ink-700">
                    Déconnexion
                </button>
            </span>
        </div>
    );
}