'use client';

import React from 'react';
import { Card } from 'primereact/card';
import { Button } from 'primereact/button';
import { useRouter } from 'next/navigation';
import RoleProtectedPage from '@/components/RoleProtectedPage';

const AdminDashboardContent = () => {
    const router = useRouter();

    const adminModules = [
        {
            title: 'Gestion des utilisateurs',
            description: 'Créer, modifier et gérer les comptes utilisateurs',
            icon: 'pi pi-users',
            path: '/admin/utilisateurs',
            color: 'bg-blue-500'
        },
        {
            title: 'Gestion des rôles',
            description: 'Configurer les rôles et permissions',
            icon: 'pi pi-shield',
            path: '/admin/roles',
            color: 'bg-green-500'
        },
        {
            title: 'Demandes d\'accès',
            description: 'Traiter les demandes d\'accès en attente',
            icon: 'pi pi-key',
            path: '/admin/demandes-acces',
            color: 'bg-orange-500'
        },
        {
            title: 'Attributions',
            description: 'Gérer les attributions de projets et équipes',
            icon: 'pi pi-sitemap',
            path: '/admin/attributions',
            color: 'bg-purple-500'
        },
        {
            title: 'Paramètres système',
            description: 'Configuration générale de l\'application',
            icon: 'pi pi-cog',
            path: '/admin/parametres',
            color: 'bg-gray-500'
        },
        {
            title: 'Sauvegarde',
            description: 'Gestion des sauvegardes et restaurations',
            icon: 'pi pi-database',
            path: '/admin/sauvegarde',
            color: 'bg-red-500'
        }
    ];

    return (
        <div className="grid">
            <div className="col-12">
                <div className="card">
                    <h1 className="text-3xl font-bold text-900 mb-3">
                        <i className="pi pi-shield mr-3 text-primary"></i>
                        Administration
                    </h1>
                    <p className="text-600 text-lg mb-5">
                        Panneau d'administration pour la gestion complète de l'application BTPXpress
                    </p>
                </div>
            </div>

            {adminModules.map((module, index) => (
                <div key={index} className="col-12 md:col-6 lg:col-4">
                    <Card className="h-full">
                        <div className="text-center">
                            <div 
                                className={`${module.color} text-white border-round inline-flex align-items-center justify-content-center mb-3`}
                                style={{ width: '60px', height: '60px' }}
                            >
                                <i className={`${module.icon} text-2xl`}></i>
                            </div>
                            <h3 className="text-xl font-semibold text-900 mb-2">
                                {module.title}
                            </h3>
                            <p className="text-600 mb-4 line-height-3">
                                {module.description}
                            </p>
                            <Button
                                label="Accéder"
                                icon="pi pi-arrow-right"
                                onClick={() => router.push(module.path)}
                                className="w-full"
                            />
                        </div>
                    </Card>
                </div>
            ))}
        </div>
    );
};

const AdminDashboard = () => {
    return (
        <RoleProtectedPage 
            requiredPage="ADMIN"
            fallbackMessage="Seuls les administrateurs peuvent accéder à cette section."
        >
            <AdminDashboardContent />
        </RoleProtectedPage>
    );
};

export default AdminDashboard;