'use client';

import React from 'react';
import { Card } from 'primereact/card';
import { Button } from 'primereact/button';
import { useRouter } from 'next/navigation';
import { useUserRoles, PAGE_ROLES, PageRole } from '@/hooks/useUserRoles';

interface RoleProtectedPageProps {
    children: React.ReactNode;
    requiredPage: PageRole;
    fallbackMessage?: string;
}

const RoleProtectedPage: React.FC<RoleProtectedPageProps> = ({
    children,
    requiredPage,
    fallbackMessage
}) => {
    const { canAccess, isLoading, roles } = useUserRoles();
    const router = useRouter();
    
    const requiredRoles = PAGE_ROLES[requiredPage];

    if (isLoading) {
        return (
            <div className="flex justify-content-center align-items-center" style={{ minHeight: '400px' }}>
                <div className="text-center">
                    <i className="pi pi-spin pi-spinner text-4xl text-primary mb-3"></i>
                    <p className="text-lg text-600">Vérification des autorisations...</p>
                </div>
            </div>
        );
    }

    if (!canAccess(requiredRoles)) {
        return (
            <div className="flex justify-content-center align-items-center" style={{ minHeight: '400px' }}>
                <Card className="w-full max-w-md">
                    <div className="text-center">
                        <i className="pi pi-lock text-6xl text-orange-500 mb-4"></i>
                        <h2 className="text-2xl font-bold text-900 mb-3">Accès restreint</h2>
                        <p className="text-600 mb-4 line-height-3">
                            {fallbackMessage || 
                            `Vous n'avez pas les autorisations nécessaires pour accéder à cette page. 
                            Les rôles requis sont : ${requiredRoles.join(', ')}.`}
                        </p>
                        <div className="mb-4">
                            <p className="text-sm text-500">
                                <strong>Vos rôles actuels :</strong> {roles.length > 0 ? roles.join(', ') : 'Aucun rôle assigné'}
                            </p>
                        </div>
                        <div className="flex gap-2 justify-content-center">
                            <Button 
                                label="Retour au dashboard" 
                                icon="pi pi-home"
                                onClick={() => router.push('/dashboard')}
                                className="p-button-outlined"
                            />
                            <Button 
                                label="Contacter l'admin" 
                                icon="pi pi-envelope"
                                onClick={() => router.push('/contact')}
                                severity="secondary"
                            />
                        </div>
                    </div>
                </Card>
            </div>
        );
    }

    return <>{children}</>;
};

export default RoleProtectedPage;