@extends('app')

@section('title', 'Paramètres du Profil - (RE)Sources Relationnelles')

@section('content')
    <section class="container mx-auto px-4 py-12">
        <div class="max-w-2xl mx-auto">
            <!-- En-tête -->
            <div class="mb-8">
                <h1 class="text-4xl font-bold text-gray-900 mb-2">Paramètres du profil</h1>
                <p class="text-gray-600">Gérez vos informations personnelles et vos préférences</p>
            </div>

            <!-- Messages de succès -->
            @if (session('success'))
                <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg">
                    <p class="text-green-700 font-semibold">✅ {{ session('success') }}</p>
                </div>
            @endif

            <!-- Erreurs -->
            @if ($errors->any())
                <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
                    @foreach ($errors->all() as $error)
                        <p class="text-red-700 text-sm">{{ $error }}</p>
                    @endforeach
                </div>
            @endif

            <!-- Photo de profil -->
            <div class="bg-white rounded-xl border border-gray-200 p-8 mb-6">
                <h2 class="text-2xl font-bold text-gray-900 mb-6">Photo de profil</h2>
                
                <div class="flex items-center gap-6">
                    <div class="flex-shrink-0">
                        <img 
                            src="https://ui-avatars.com/api/?name={{ urlencode(Auth::user()->Pseudo) }}&background=06989e&color=fff&size=120"
                            alt="Photo de profil"
                            class="w-32 h-32 rounded-full border-4 border-niagara"
                        >
                    </div>
                    <div>
                        <p class="text-gray-600 mb-4">Votre photo de profil est générée automatiquement à partir de votre pseudo.</p>
                        <p class="text-sm text-gray-500">Les avatars sont fournis par ui-avatars.com</p>
                    </div>
                </div>
            </div>

            <!-- Formulaire de modification -->
            <div class="bg-white rounded-xl border border-gray-200 p-8">
                <h2 class="text-2xl font-bold text-gray-900 mb-6">Informations personnelles</h2>
                
                <form action="{{ route('profile.update') }}" method="POST" class="space-y-6">
                    @csrf
                    @method('PUT')

                    <!-- Pseudo -->
                    <div>
                        <label for="Pseudo" class="block text-sm font-bold mb-2 text-gray-700">Pseudo</label>
                        <input 
                            type="text" 
                            id="Pseudo" 
                            name="Pseudo" 
                            required 
                            maxlength="100"
                            value="{{ old('Pseudo', Auth::user()->Pseudo) }}"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @error('Pseudo') border-red-500 @enderror">
                        @error('Pseudo')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Email -->
                    <div>
                        <label for="Email" class="block text-sm font-bold mb-2 text-gray-700">Email</label>
                        <input 
                            type="email" 
                            id="Email" 
                            name="Email" 
                            required 
                            value="{{ old('Email', Auth::user()->Email) }}"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @error('Email') border-red-500 @enderror">
                        @error('Email')
                            <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <hr class="my-8">

                    <!-- Modification du mot de passe -->
                    <div>
                        <h3 class="text-lg font-bold text-gray-900 mb-4">Modifier votre mot de passe</h3>
                        <p class="text-gray-600 text-sm mb-4">Laissez vide si vous ne voulez pas le modifier.</p>

                        <!-- Mot de passe actuel -->
                        <div class="mb-4">
                            <label for="MotDePasse_Actuel" class="block text-sm font-bold mb-2 text-gray-700">Mot de passe actuel</label>
                            <input 
                                type="password" 
                                id="MotDePasse_Actuel" 
                                name="MotDePasse_Actuel" 
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @error('MotDePasse_Actuel') border-red-500 @enderror">
                            @error('MotDePasse_Actuel')
                                <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Nouveau mot de passe -->
                        <div class="mb-4">
                            <label for="MotDePasse_Nouveau" class="block text-sm font-bold mb-2 text-gray-700">Nouveau mot de passe</label>
                            <input 
                                type="password" 
                                id="MotDePasse_Nouveau" 
                                name="MotDePasse_Nouveau" 
                                minlength="8"
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none @error('MotDePasse_Nouveau') border-red-500 @enderror">
                            @error('MotDePasse_Nouveau')
                                <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Confirmation mot de passe -->
                        <div>
                            <label for="MotDePasse_Nouveau_confirmation" class="block text-sm font-bold mb-2 text-gray-700">Confirmer le nouveau mot de passe</label>
                            <input 
                                type="password" 
                                id="MotDePasse_Nouveau_confirmation" 
                                name="MotDePasse_Nouveau_confirmation" 
                                minlength="8"
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-niagara outline-none">
                        </div>
                    </div>

                    <!-- Boutons -->
                    <div class="flex gap-4 pt-6">
                        <button type="submit" class="px-8 py-3 gradient-niagara text-white font-bold rounded-lg hover:shadow-lg transition-smooth duration-200">
                            💾 Enregistrer les modifications
                        </button>
                        <a href="{{ route('home') }}" class="px-8 py-3 bg-gray-200 text-gray-900 font-bold rounded-lg hover:bg-gray-300 transition-smooth duration-200">
                            Annuler
                        </a>
                    </div>
                </form>
            </div>

            <!-- Section Danger -->
            <div class="bg-white rounded-xl border-2 border-red-200 p-8 mt-6">
                <h2 class="text-2xl font-bold text-red-700 mb-4">⚠️ Zone de danger</h2>
                <p class="text-gray-600 mb-6">Les actions ci-dessous ne peuvent pas être annulées.</p>
                
                <form action="{{ route('logout') }}" method="POST" class="mb-8">
                    @csrf
                    <button type="submit" class="px-8 py-3 bg-red-600 text-white font-bold rounded-lg hover:bg-red-700 transition-smooth duration-200">
                        🚪 Se déconnecter
                    </button>
                </form>

                <hr class="my-6">

                <!-- Suppression du compte (droit à l'effacement RGPD) -->
                <h3 class="text-lg font-bold text-red-700 mb-2">Supprimer mon compte</h3>
                <p class="text-gray-600 text-sm mb-4">
                    Conformément au RGPD, vous pouvez demander la suppression de votre compte.
                    Vos données personnelles (e-mail, pseudo) seront définitivement anonymisées.
                    Cette action est <strong>irréversible</strong>.
                </p>
                <form action="{{ route('profile.destroy') }}" method="POST"
                    onsubmit="return confirm('Confirmer la suppression définitive de votre compte ?');">
                    @csrf
                    @method('DELETE')
                    <div class="mb-4 max-w-sm">
                        <label for="MotDePasse_Confirmation" class="block text-sm font-bold mb-2 text-gray-700">Confirmez avec votre mot de passe</label>
                        <input
                            type="password"
                            id="MotDePasse_Confirmation"
                            name="MotDePasse_Confirmation"
                            required
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 outline-none">
                    </div>
                    <button type="submit" class="px-8 py-3 bg-red-800 text-white font-bold rounded-lg hover:bg-red-900 transition-smooth duration-200">
                        🗑️ Supprimer définitivement mon compte
                    </button>
                </form>
            </div>
        </div>
    </section>
@endsection