@extends('layouts.base')

@section('title', 'Mon profil - Animation Vendeurs')

@section('x-data', 'profileComponent()')

@section('content')
    <div class="max-w-md mx-auto p-4 pb-32 space-y-4">
        {{-- * Carte profil avec initiales et infos non-modifiables --}}
        <section class="bg-white p-4 rounded-2xl shadow-sm border border-gray-100">
            <div class="flex items-center gap-4 mb-4">
                {{-- * Affichage des initiales au lieu de l'image --}}
                <div class="w-20 h-20 bg-gradient-to-br from-boulanger-orange to-orange-600 rounded-full border-2 border-white shadow-md flex-shrink-0 flex items-center justify-center">
                    <span class="text-white text-2xl font-bold font-display">
                        {{ strtoupper(substr(auth()->user()->first_name, 0, 1)) }}{{ strtoupper(substr(auth()->user()->last_name, 0, 1)) }}
                    </span>
                </div>
                <div class="flex-1">
                    <h2 class="text-xl font-bold text-gray-900">
                        {{ auth()->user()->first_name }} {{ auth()->user()->last_name }}
                    </h2>
                    <p class="text-sm text-gray-500 mt-0.5">
                        @if(auth()->user()->isAdmin())
                            <span class="text-red-600 font-medium">🔑 Administrateur</span>
                        @endif
                        @if(auth()->user()->isAnimateur())
                            <span class="text-purple-600 font-medium">🎯 Animateur</span>
                        @endif
                        @if(auth()->user()->isManager())
                            <span class="text-blue-600 font-medium">👔 Manager</span>
                        @endif
                        @if(auth()->user()->isVendeur())
                            <span class="text-green-600 font-medium">🛒 Vendeur</span>
                        @endif
                    </p>
                </div>
            </div>

            <div class="space-y-3 pt-3 border-t border-gray-100">
                {{-- * Informations non-modifiables --}}
                <div class="bg-gray-50 rounded-lg p-3">
                    <p class="text-xs text-gray-500 mb-1.5 flex items-center gap-1.5">
                        <i data-lucide="building-2" class="w-3.5 h-3.5"></i>
                        Magasin
                    </p>
                    <p class="text-sm font-semibold text-gray-900">{{ auth()->user()->store->name ?? 'Siège' }}</p>
                </div>

                <div class="bg-gray-50 rounded-lg p-3">
                    <p class="text-xs text-gray-500 mb-1.5 flex items-center gap-1.5">
                        <i data-lucide="hash" class="w-3.5 h-3.5"></i>
                        Matricule
                    </p>
                    <p class="text-sm font-semibold text-gray-900 font-mono">{{ auth()->user()->matricule }}</p>
                </div>

                <div class="bg-gray-50 rounded-lg p-3">
                    <p class="text-xs text-gray-500 mb-1.5 flex items-center gap-1.5">
                        <i data-lucide="mail" class="w-3.5 h-3.5"></i>
                        Email
                    </p>
                    <p class="text-sm font-semibold text-gray-900">{{ auth()->user()->email }}</p>
                </div>

                <div class="bg-gray-50 rounded-lg p-3">
                    <p class="text-xs text-gray-500 mb-1.5 flex items-center gap-1.5">
                        <i data-lucide="calendar" class="w-3.5 h-3.5"></i>
                        Membre depuis
                    </p>
                    <p class="text-sm font-semibold text-gray-900">{{ auth()->user()->created_at->format('d/m/Y') }}</p>
                </div>
            </div>

            <div class="mt-4 pt-4 border-t border-gray-100">
                <p class="text-xs text-gray-500 flex items-center gap-1.5">
                    <i data-lucide="info" class="w-3.5 h-3.5"></i>
                    Ces informations ne peuvent pas être modifiées. Contactez votre manager pour toute modification.
                </p>
            </div>
        </section>

        {{-- * Section changement de mot de passe --}}
        <section class="bg-white p-4 rounded-2xl shadow-sm border border-gray-100 space-y-4">
            <header class="flex items-start justify-between gap-3">
                <div>
                    <p class="text-sm text-gray-500">Sécurité</p>
                    <h2 class="text-lg font-semibold text-gray-900">Modifier mon mot de passe</h2>
                    <p class="text-xs text-gray-500 mt-1">Utilisez un mot de passe long et unique pour sécuriser votre compte.</p>
                </div>
                <i data-lucide="lock" class="w-5 h-5 text-boulanger-orange"></i>
            </header>

            {{-- * Message de succès --}}
            <div x-show="passwordUpdated"
                 x-transition
                 class="p-3 bg-green-50 border border-green-200 rounded-lg flex items-center gap-2">
                <i data-lucide="check-circle-2" class="w-4 h-4 text-green-600"></i>
                <p class="text-sm text-green-700 font-medium">✅ Mot de passe modifié !</p>
            </div>

            {{-- * Message d'erreur --}}
            <div x-show="passwordError"
                 x-transition
                 class="p-3 bg-red-50 border border-red-200 rounded-lg flex items-start gap-2">
                <i data-lucide="alert-circle" class="w-4 h-4 text-red-600 flex-shrink-0 mt-0.5"></i>
                <p class="text-sm text-red-700" x-text="passwordError"></p>
            </div>

            <form @submit.prevent="updatePassword()" class="space-y-4">
                <div class="space-y-1">
                    <label for="current_password" class="text-sm font-medium text-gray-800 flex items-center gap-1.5">
                        Mot de passe actuel
                        <span class="text-red-500">*</span>
                    </label>
                    <input
                        id="current_password"
                        x-model="currentPassword"
                        type="password"
                        class="w-full rounded-xl border-gray-200 focus:border-boulanger-orange focus:ring-boulanger-orange/30 text-sm"
                        placeholder="••••••••"
                        required
                        autocomplete="current-password"
                    >
                </div>

                <div class="space-y-1">
                    <label for="new_password" class="text-sm font-medium text-gray-800 flex items-center gap-1.5">
                        Nouveau mot de passe
                        <span class="text-red-500">*</span>
                    </label>
                    <input
                        id="new_password"
                        x-model="newPassword"
                        type="password"
                        class="w-full rounded-xl border-gray-200 focus:border-boulanger-orange focus:ring-boulanger-orange/30 text-sm"
                        placeholder="••••••••"
                        required
                        autocomplete="new-password"
                        minlength="8"
                    >
                    <p class="text-xs text-gray-500">Minimum 8 caractères</p>
                </div>

                <div class="space-y-1">
                    <label for="password_confirmation" class="text-sm font-medium text-gray-800 flex items-center gap-1.5">
                        Confirmer le nouveau mot de passe
                        <span class="text-red-500">*</span>
                    </label>
                    <input
                        id="password_confirmation"
                        x-model="passwordConfirmation"
                        type="password"
                        class="w-full rounded-xl border-gray-200 focus:border-boulanger-orange focus:ring-boulanger-orange/30 text-sm"
                        placeholder="••••••••"
                        required
                        autocomplete="new-password"
                    >
                </div>

                <button
                    type="submit"
                    :disabled="isUpdating"
                    class="w-full px-4 py-2.5 bg-boulanger-orange text-white text-sm font-semibold rounded-xl shadow-sm hover:brightness-95 transition disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                >
                    <i data-lucide="shield-check" class="w-4 h-4"></i>
                    <span x-text="isUpdating ? 'Modification...' : 'Modifier le mot de passe'"></span>
                </button>
            </form>
        </section>

        {{-- * Informations de sécurité supplémentaires --}}
        <section class="bg-gradient-to-br from-blue-50 to-indigo-50 p-4 rounded-2xl border border-blue-100">
            <div class="flex items-start gap-3">
                <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center flex-shrink-0 shadow-sm">
                    <i data-lucide="shield" class="w-5 h-5 text-blue-600"></i>
                </div>
                <div>
                    <h3 class="text-sm font-semibold text-gray-900 mb-1">Conseils de sécurité</h3>
                    <ul class="text-xs text-gray-700 space-y-1.5">
                        <li class="flex items-start gap-1.5">
                            <i data-lucide="check" class="w-3.5 h-3.5 text-blue-600 flex-shrink-0 mt-0.5"></i>
                            Utilisez un mot de passe unique que vous n'utilisez nulle part ailleurs
                        </li>
                        <li class="flex items-start gap-1.5">
                            <i data-lucide="check" class="w-3.5 h-3.5 text-blue-600 flex-shrink-0 mt-0.5"></i>
                            Mélangez lettres majuscules, minuscules, chiffres et symboles
                        </li>
                        <li class="flex items-start gap-1.5">
                            <i data-lucide="check" class="w-3.5 h-3.5 text-blue-600 flex-shrink-0 mt-0.5"></i>
                            Ne partagez jamais votre mot de passe avec personne
                        </li>
                        <li class="flex items-start gap-1.5">
                            <i data-lucide="check" class="w-3.5 h-3.5 text-blue-600 flex-shrink-0 mt-0.5"></i>
                            Changez votre mot de passe régulièrement (tous les 3-6 mois)
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </div>
@endsection

@push('scripts')
<script>
function profileComponent() {
    return {
        currentPassword: '',
        newPassword: '',
        passwordConfirmation: '',
        isUpdating: false,
        passwordUpdated: false,
        passwordError: '',

        async init() {
            // * Masquer les messages après 5 secondes
            this.$watch('passwordUpdated', value => {
                if (value) {
                    setTimeout(() => this.passwordUpdated = false, 5000);
                }
            });
            this.$watch('passwordError', value => {
                if (value) {
                    setTimeout(() => this.passwordError = '', 7000);
                }
            });
        },

        async updatePassword() {
            // * Validation côté client
            if (this.newPassword.length < 8) {
                this.passwordError = 'Le mot de passe doit contenir au moins 8 caractères.';
                return;
            }

            if (this.newPassword !== this.passwordConfirmation) {
                this.passwordError = 'Les mots de passe ne correspondent pas.';
                return;
            }

            try {
                this.isUpdating = true;
                this.passwordError = '';
                this.passwordUpdated = false;

                const response = await fetch('/api/user/password', {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({
                        current_password: this.currentPassword,
                        password: this.newPassword,
                        password_confirmation: this.passwordConfirmation,
                    }),
                });

                const data = await response.json();

                if (!response.ok) {
                    // * Gestion des erreurs de validation
                    if (data.errors) {
                        const firstError = Object.values(data.errors)[0];
                        this.passwordError = Array.isArray(firstError) ? firstError[0] : firstError;
                    } else {
                        this.passwordError = data.message || 'Une erreur est survenue.';
                    }
                    return;
                }

                // * Succès
                this.passwordUpdated = true;
                this.currentPassword = '';
                this.newPassword = '';
                this.passwordConfirmation = '';
            } catch (error) {
                console.error('Erreur mise à jour mot de passe:', error);
                this.passwordError = 'Impossible de communiquer avec le serveur. Vérifiez votre connexion.';
            } finally {
                this.isUpdating = false;
            }
        },
    };
}
</script>
@endpush