import React from 'react';
import { Loader, Lock, KeyRound } from "lucide-react";
import { useNavigate } from "react-router-dom"; // Assurez-vous d'utiliser react-router
import { Card } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import StatusBadge from '../ui/StatusBadge';
import type { User } from '@/types/User';

interface AccessWidgetProps {
    user: User | null;
    isLoading: boolean;
    error: string | null;
}

export const AccessWidget: React.FC<AccessWidgetProps> = ({
    user,
    isLoading,
    error,
}) => {
    // Hook de navigation
    const navigate = useNavigate();

    return (
        <Card className="flex flex-col h-full">
            <div className="p-6 border-b border-slate-300/30 dark:border-slate-700/30">
                <h2 className="text-lg font-black text-slate-900 dark:text-slate-100 flex items-center gap-3">
                    <div className="p-2 rounded-xl bg-[#e8e8e8] dark:bg-[#1e293b] shadow-[3px_3px_6px_#c5c5c5,-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#121926,-3px_-3px_6px_#2a3850]">
                        <Lock className="w-5 h-5 text-blue-600 dark:text-blue-500" />
                    </div>
                    Sécurité de l'accès
                </h2>
            </div>

            {isLoading && !error && (
                <div className="p-8 flex justify-center items-center flex-1">
                    <Loader className="w-6 h-6 animate-spin text-blue-600" />
                </div>
            )}

            {!isLoading && !error && (
                <div className="p-6 space-y-8 flex-1">
                    
                    {/* MFA */}
                    <div className="flex items-center justify-between">
                        <div>
                            <p className="text-sm font-bold text-slate-900 dark:text-slate-200">Authentification (MFA)</p>
                            <p className="text-xs font-medium text-slate-500 dark:text-slate-400 mt-1">Exigée par GISE</p>
                        </div>
                        <StatusBadge status={user?.mfa_enabled ? "Actif" : "Hors Ligne"} />
                    </div>

                    {/* MOT DE PASSE (Lien vers la sous-page) */}
                    <div className="pt-8 border-t border-slate-300/30 dark:border-slate-700/30">
                        <p className="text-sm font-bold text-slate-900 dark:text-slate-200 mb-1">Mot de passe institutionnel</p>
                        <p className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-5">Dernière modification : Il y a 43 jours</p>
                        
                        <Button 
                            variant="primary" 
                            size="sm"
                            // Navigation vers votre route dédiée
                            onClick={() => navigate('/settings/security/password')} 
                            leftIcon={<KeyRound className="w-4 h-4" />}
                            className="w-full sm:w-auto"
                        >
                            Modifier le mot de passe
                        </Button>
                    </div>
                </div>
            )}
        </Card>
    );
}

export default AccessWidget;