import { Link } from 'react-router-dom';
import { ProjectNav } from '@/components/ProjectNav';

/**
 * Refus explicite plutôt que formulaire cassé.
 *
 * Le serveur refuse déjà chaque endpoint d'administration, mais un utilisateur
 * qui arrive par URL directe voit alors un écran à moitié vide, un menu déroulant
 * sans options et un « Access Denied » brut au moment de valider. Il croit à une
 * panne, alors que le système fonctionne exactement comme prévu.
 *
 * La barre de navigation reste en place : un refus ne doit pas être un cul-de-sac.
 * Sans elle, l'utilisateur perd le retour aux projets ET la déconnexion, et la
 * seule sortie serait le bouton « Précédent » du navigateur.
 */
export function RequiresAdmin({ projectUuid }: { projectUuid: string }) {
    return (
        <div className="flex h-full flex-col bg-ink-100">
            <header className="shrink-0 border-b border-ink-200 bg-white px-4 py-2.5">
                <ProjectNav projectUuid={projectUuid} canAdminister={false} />
            </header>

            <div className="flex min-h-0 flex-1 items-center justify-center px-6">
                <div className="max-w-md text-center">
                    <p className="text-lg font-medium text-ink-800">Cette page est réservée aux administrateurs</p>
                    <p className="mt-2 text-sm text-ink-500">
                        La gestion des membres et des clés d'accès demande un rôle « admin » ou
                        « owner » sur ce projet. Demandez-le à un administrateur si vous en avez besoin.
                    </p>
                    <Link
                        to={`/p/${projectUuid}/editor`}
                        className="mt-6 inline-block rounded-md bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700"
                    >
                        Revenir à l'éditeur
                    </Link>
                </div>
            </div>
        </div>
    );
}