@extends('layouts.base')

@section('title', 'Dashboard - Animation Vendeurs')

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

@section('content')
    <div class="max-w-md mx-auto p-4 pb-32 space-y-4">
        {{-- * Carte profil avec informations complètes --}}
        <section class="bg-white p-4 rounded-2xl shadow-sm border border-gray-100">
            <div class="flex items-center gap-3 mb-4">
                {{-- * Affichage des initiales --}}
                <div class="w-14 h-14 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-xl 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">
                    <p class="text-sm text-gray-500">Bienvenue 👋</p>
                    <h2 class="text-lg font-bold text-gray-900 leading-tight">
                        {{ auth()->user()->first_name }} {{ auth()->user()->last_name }}
                    </h2>
                    <p class="text-xs text-gray-500 flex items-center gap-1.5 mt-0.5">
                        <i data-lucide="building-2" class="w-3 h-3"></i>
                        {{ auth()->user()->store->name ?? 'Siège' }}
                    </p>
                </div>
            </div>

            {{-- * Infos importantes manquantes : Rôle + Matricule --}}
            <div class="grid grid-cols-2 gap-2">
                <div class="bg-gray-50 rounded-lg p-2.5">
                    <p class="text-xs text-gray-500 mb-0.5">Fonction(s)</p>
                    <p class="text-sm font-semibold text-gray-900">
                        @if(auth()->user()->isAdmin())
                            <span class="text-red-600">🔑 Admin</span>
                        @endif
                        @if(auth()->user()->isAnimateur())
                            <span class="text-purple-600">🎯 Animateur</span>
                        @endif
                        @if(auth()->user()->isManager())
                            <span class="text-blue-600">👔 Manager</span>
                        @endif
                        @if(auth()->user()->isVendeur())
                            <span class="text-green-600">🛒 Vendeur</span>
                        @endif
                    </p>
                </div>
                <div class="bg-gray-50 rounded-lg p-2.5">
                    <p class="text-xs text-gray-500 mb-0.5">Matricule</p>
                    <p class="text-sm font-semibold text-gray-900 font-mono">{{ auth()->user()->matricule }}</p>
                </div>
            </div>
        </section>

        {{-- * Statistiques personnelles (infos manquantes) --}}
        <section class="bg-gradient-to-br from-boulanger-orange to-orange-600 p-4 rounded-2xl shadow-md text-white">
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-base font-semibold">Mes contributions</h3>
                <i data-lucide="trophy" class="w-5 h-5 opacity-80"></i>
            </div>
            <div class="grid grid-cols-3 gap-3">
                <div class="bg-white/10 backdrop-blur-sm rounded-lg p-3 text-center">
                    <p class="text-2xl font-bold" x-text="stats.posts_count">-</p>
                    <p class="text-xs opacity-80">Posts</p>
                </div>
                <div class="bg-white/10 backdrop-blur-sm rounded-lg p-3 text-center">
                    <p class="text-2xl font-bold" x-text="stats.comments_count">-</p>
                    <p class="text-xs opacity-80">Commentaires</p>
                </div>
                <div class="bg-white/10 backdrop-blur-sm rounded-lg p-3 text-center">
                    <p class="text-2xl font-bold" x-text="stats.likes_count">-</p>
                    <p class="text-xs opacity-80">Likes reçus</p>
                </div>
            </div>
        </section>

        {{-- * Mes notes personnelles (NOUVELLE FONCTIONNALITÉ) --}}
        <section class="bg-white p-4 rounded-2xl shadow-sm border border-gray-100 space-y-3">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-lg bg-yellow-100 flex items-center justify-center">
                        <i data-lucide="sticky-note" class="w-4 h-4 text-yellow-600"></i>
                    </div>
                    <div>
                        <h3 class="text-base font-semibold text-gray-900">Mes notes</h3>
                        <p class="text-xs text-gray-500">Mémos rapides personnels</p>
                    </div>
                </div>
                <button @click="showNoteModal = true"
                        class="w-8 h-8 rounded-lg bg-boulanger-orange/10 hover:bg-boulanger-orange/20 transition flex items-center justify-center">
                    <i data-lucide="plus" class="w-5 h-5 text-boulanger-orange"></i>
                </button>
            </div>

            {{-- Liste des notes --}}
            <div class="space-y-2">
                <template x-if="notes.length === 0">
                    <div class="text-center py-6 text-gray-400">
                        <i data-lucide="sticky-note" class="w-12 h-12 mx-auto mb-2 opacity-50"></i>
                        <p class="text-sm">Aucune note pour le moment</p>
                        <p class="text-xs">Clique sur + pour en ajouter une</p>
                    </div>
                </template>

                <template x-for="note in notes" :key="note.id">
                    <div class="bg-gradient-to-br from-yellow-50 to-amber-50 border border-yellow-200 rounded-lg p-3 relative group">
                        <div class="flex items-start justify-between gap-2 mb-2">
                            <p class="text-xs text-gray-500 flex items-center gap-1">
                                <i data-lucide="calendar" class="w-3 h-3"></i>
                                <span x-text="new Date(note.created_at).toLocaleDateString('fr-FR')"></span>
                            </p>
                            <button @click="deleteNote(note.id)"
                                    class="opacity-0 group-hover:opacity-100 transition w-6 h-6 rounded bg-red-100 hover:bg-red-200 flex items-center justify-center">
                                <i data-lucide="trash-2" class="w-3 h-3 text-red-600"></i>
                            </button>
                        </div>
                        <p class="text-sm text-gray-800 whitespace-pre-wrap break-words" x-text="note.content"></p>
                    </div>
                </template>
            </div>
        </section>

        {{-- Carte actions rapides --}}
        <section class="bg-white p-4 rounded-2xl shadow-sm border border-gray-100 space-y-3">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-base font-semibold text-gray-900">Accès rapide</h3>
                    <p class="text-xs text-gray-500">Navigation principale</p>
                </div>
                <i data-lucide="sparkles" class="w-5 h-5 text-boulanger-orange"></i>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <a href="{{ route('home') }}" class="rounded-xl border border-gray-100 p-3 bg-gray-50 hover:border-boulanger-orange hover:shadow-md transition flex flex-col gap-1">
                    <div class="flex items-center gap-2">
                        <i data-lucide="home" class="w-5 h-5 text-boulanger-orange"></i>
                        <span class="text-sm font-semibold text-gray-900">Fil</span>
                    </div>
                    <p class="text-xs text-gray-500">Actualités</p>
                </a>
                <a href="{{ route('tools.index') }}" class="rounded-xl border border-gray-100 p-3 bg-gray-50 hover:border-boulanger-orange hover:shadow-md transition flex flex-col gap-1">
                    <div class="flex items-center gap-2">
                        <i data-lucide="wrench" class="w-5 h-5 text-boulanger-orange"></i>
                        <span class="text-sm font-semibold text-gray-900">Outils</span>
                    </div>
                    <p class="text-xs text-gray-500">Boîte à outils</p>
                </a>
                <a href="{{ route('profile.edit') }}" class="rounded-xl border border-gray-100 p-3 bg-gray-50 hover:border-boulanger-orange hover:shadow-md transition flex flex-col gap-1">
                    <div class="flex items-center gap-2">
                        <i data-lucide="user" class="w-5 h-5 text-boulanger-orange"></i>
                        <span class="text-sm font-semibold text-gray-900">Profil</span>
                    </div>
                    <p class="text-xs text-gray-500">Paramètres</p>
                </a>
                <a href="{{ route('store.show') }}" class="rounded-xl border border-gray-100 p-3 bg-gray-50 hover:border-boulanger-orange hover:shadow-md transition flex flex-col gap-1">
                    <div class="flex items-center gap-2">
                        <i data-lucide="users" class="w-5 h-5 text-boulanger-orange"></i>
                        <span class="text-sm font-semibold text-gray-900">Équipe</span>
                    </div>
                    <p class="text-xs text-gray-500">Annuaire</p>
                </a>
            </div>
        </section>

        {{-- * Dernière activité (info manquante) --}}
        <section class="bg-white p-4 rounded-2xl shadow-sm border border-gray-100">
            <div class="flex items-center gap-3 mb-3">
                <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">
                    <i data-lucide="clock" class="w-5 h-5 text-blue-600"></i>
                </div>
                <div>
                    <h3 class="text-base font-semibold text-gray-900">Dernière activité</h3>
                    <p class="text-xs text-gray-500">
                        @if(auth()->user()->last_seen)
                            {{ auth()->user()->last_seen->diffForHumans() }}
                        @else
                            Première connexion
                        @endif
                    </p>
                </div>
            </div>
        </section>

        {{-- Carte statut --}}
        <section class="bg-white p-4 rounded-2xl shadow-sm border border-gray-100">
            <div class="flex items-center gap-3 mb-3">
                <div class="w-10 h-10 rounded-lg bg-green-50 flex items-center justify-center">
                    <i data-lucide="shield-check" class="w-5 h-5 text-green-600"></i>
                </div>
                <div>
                    <h3 class="text-base font-semibold text-gray-900">État du compte</h3>
                    <p class="text-xs text-gray-500">Sécurité et accès</p>
                </div>
            </div>
            <ul class="space-y-2 text-sm text-gray-700">
                <li class="flex items-center gap-2">
                    <i data-lucide="check-circle" class="w-4 h-4 text-green-500"></i>
                    Authentifié et vérifié
                </li>
                <li class="flex items-center gap-2">
                    <i data-lucide="check-circle" class="w-4 h-4 text-green-500"></i>
                    Synchronisation magasin active
                </li>
                <li class="flex items-center gap-2">
                    <i data-lucide="mail" class="w-4 h-4 text-gray-400"></i>
                    {{ auth()->user()->email }}
                </li>
            </ul>
        </section>
    </div>

    {{-- * Modal ajout/édition note --}}
    <div x-show="showNoteModal"
         x-transition.opacity
         @click.self="showNoteModal = false"
         class="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/50 px-4"
         x-cloak>
        <div class="bg-white rounded-t-2xl sm:rounded-2xl shadow-xl max-w-md w-full p-5 space-y-4">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-900">📝 Nouvelle note</h3>
                <button @click="showNoteModal = false" class="text-gray-400 hover:text-gray-600">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            <div class="space-y-3">
                <textarea x-model="newNoteContent"
                          rows="5"
                          class="w-full border border-gray-200 rounded-xl p-3 text-sm focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange resize-none"
                          placeholder="Écris ta note ici...&#10;&#10;Exemple: Ne pas oublier de relancer le client X pour la livraison demain"></textarea>

                <div class="flex items-center gap-3">
                    <button @click="saveNote()"
                            :disabled="!newNoteContent.trim() || isSaving"
                            class="flex-1 px-4 py-2.5 rounded-xl bg-boulanger-orange text-white text-sm font-semibold hover:bg-orange-600 disabled:opacity-60 disabled:cursor-not-allowed transition">
                        <span x-text="isSaving ? 'Enregistrement...' : 'Enregistrer'"></span>
                    </button>
                    <button @click="showNoteModal = false"
                            class="px-4 py-2.5 rounded-xl bg-gray-100 text-gray-700 text-sm font-semibold hover:bg-gray-200 transition">
                        Annuler
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
function dashboardComponent() {
    return {
        stats: {
            posts_count: 0,
            comments_count: 0,
            likes_count: 0,
        },
        notes: [],
        newNoteContent: '',
        showNoteModal: false,
        isSaving: false,

        async init() {
            await this.fetchStats();
            await this.fetchNotes();
        },

        async fetchStats() {
            try {
                const response = await fetch('/api/user/stats');
                if (response.ok) {
                    const data = await response.json();
                    this.stats = data.data ?? data;
                }
            } catch (error) {
                console.error('Erreur chargement stats:', error);
            }
        },

        async fetchNotes() {
            try {
                const response = await fetch('/api/user/notes');
                if (response.ok) {
                    const data = await response.json();
                    this.notes = data.data ?? [];
                }
            } catch (error) {
                console.error('Erreur chargement notes:', error);
            }
        },

        async saveNote() {
            if (!this.newNoteContent.trim()) return;

            try {
                this.isSaving = true;
                const response = await fetch('/api/user/notes', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                    body: JSON.stringify({ content: this.newNoteContent }),
                });

                if (!response.ok) throw new Error('Erreur sauvegarde');

                const data = await response.json();
                this.notes.unshift(data.data ?? data);
                this.newNoteContent = '';
                this.showNoteModal = false;
            } catch (error) {
                console.error('Erreur sauvegarde note:', error);
                // Erreur silencieuse : console désactivé globalement
            } finally {
                this.isSaving = false;
            }
        },

        async deleteNote(noteId) {
            if (!confirm('Supprimer cette note ?')) return;

            try {
                const response = await fetch(`/api/user/notes/${noteId}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                });

                if (!response.ok) throw new Error('Erreur suppression');

                this.notes = this.notes.filter(n => n.id !== noteId);
            } catch (error) {
                console.error('Erreur suppression note:', error);
                // Erreur silencieuse : console désactivé globalement
            }
        },
    };
}
</script>
@endpush