@extends('layouts.admin')

@section('title', 'Gestion des feedbacks - Administration')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8" x-data="feedbacksAdminComponent()" x-cloak>
    {{-- * En-tête --}}
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-display font-bold text-boulanger-dark flex items-center">
                    <i data-lucide="message-circle-question" class="w-8 h-8 mr-3 text-boulanger-orange"></i>
                    Feedbacks utilisateurs
                </h1>
                <p class="mt-2 text-gray-600">Messages et demandes d'aide des utilisateurs</p>
            </div>
            <a href="{{ route('admin.dashboard') }}" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition flex items-center gap-2">
                <i data-lucide="arrow-left" class="w-4 h-4"></i>
                Retour
            </a>
        </div>
    </div>

    {{-- * Statistiques --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-orange-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">En attente</p>
                    <p class="text-3xl font-bold text-gray-900" x-text="stats.pending">-</p>
                </div>
                <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
                    <i data-lucide="clock" class="w-6 h-6 text-orange-600"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-green-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Résolus</p>
                    <p class="text-3xl font-bold text-gray-900" x-text="stats.resolved">-</p>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                    <i data-lucide="check-circle-2" class="w-6 h-6 text-green-600"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-blue-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Total</p>
                    <p class="text-3xl font-bold text-gray-900" x-text="stats.total">-</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                    <i data-lucide="message-square" class="w-6 h-6 text-blue-600"></i>
                </div>
            </div>
        </div>
    </div>

    {{-- * Filtres --}}
    <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
        <div class="flex flex-wrap items-center gap-4">
            <div class="flex items-center gap-2">
                <label class="text-sm font-medium text-gray-700">Statut :</label>
                <div class="flex gap-2">
                    <button @click="filterStatus = 'all'; fetchFeedbacks()"
                            :class="filterStatus === 'all' ? 'bg-boulanger-orange text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                            class="px-3 py-1.5 rounded-lg text-sm font-medium transition">
                        Tous
                    </button>
                    <button @click="filterStatus = 'pending'; fetchFeedbacks()"
                            :class="filterStatus === 'pending' ? 'bg-orange-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                            class="px-3 py-1.5 rounded-lg text-sm font-medium transition flex items-center gap-1.5">
                        <i data-lucide="clock" class="w-3.5 h-3.5"></i>
                        En attente
                    </button>
                    <button @click="filterStatus = 'resolved'; fetchFeedbacks()"
                            :class="filterStatus === 'resolved' ? 'bg-green-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                            class="px-3 py-1.5 rounded-lg text-sm font-medium transition flex items-center gap-1.5">
                        <i data-lucide="check-circle-2" class="w-3.5 h-3.5"></i>
                        Résolus
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- * Liste des feedbacks --}}
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        {{-- Loading --}}
        <div x-show="isLoading" class="p-8 text-center">
            <div class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-boulanger-orange border-t-transparent"></div>
            <p class="mt-2 text-sm text-gray-600">Chargement...</p>
        </div>

        {{-- Liste --}}
        <div x-show="!isLoading">
            <template x-if="feedbacks.length === 0">
                <div class="p-8 text-center">
                    <i data-lucide="inbox" class="w-16 h-16 text-gray-300 mx-auto mb-3"></i>
                    <p class="text-gray-600">Aucun feedback à afficher</p>
                </div>
            </template>

            <div class="divide-y divide-gray-100">
                <template x-for="feedback in feedbacks" :key="feedback.id">
                    <div class="p-6 hover:bg-gray-50 transition">
                        <div class="flex items-start justify-between gap-4">
                            <div class="flex-1 min-w-0">
                                {{-- En-tête --}}
                                <div class="flex items-start gap-3 mb-3">
                                    <div class="w-10 h-10 bg-gradient-to-br from-boulanger-orange to-orange-600 rounded-full flex items-center justify-center text-white font-bold text-sm flex-shrink-0">
                                        <span x-text="feedback.user?.first_name?.charAt(0) + feedback.user?.last_name?.charAt(0)"></span>
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <div class="flex items-center gap-2 flex-wrap">
                                            <p class="font-semibold text-gray-900" x-text="feedback.user?.first_name + ' ' + feedback.user?.last_name"></p>
                                            <span x-show="feedback.status === 'pending'" class="px-2 py-0.5 bg-orange-100 text-orange-700 text-xs font-medium rounded-full flex items-center gap-1">
                                                <i data-lucide="clock" class="w-3 h-3"></i>
                                                En attente
                                            </span>
                                            <span x-show="feedback.status === 'resolved'" class="px-2 py-0.5 bg-green-100 text-green-700 text-xs font-medium rounded-full flex items-center gap-1">
                                                <i data-lucide="check-circle-2" class="w-3 h-3"></i>
                                                Résolu
                                            </span>
                                        </div>
                                        <div class="flex items-center gap-2 mt-1 text-xs text-gray-500">
                                            <i data-lucide="building-2" class="w-3 h-3"></i>
                                            <span x-text="feedback.user?.store?.name || 'Siège'"></span>
                                            <span>•</span>
                                            <i data-lucide="mail" class="w-3 h-3"></i>
                                            <span x-text="feedback.user?.email"></span>
                                            <span>•</span>
                                            <i data-lucide="calendar" class="w-3 h-3"></i>
                                            <span x-text="new Date(feedback.created_at).toLocaleDateString('fr-FR', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' })"></span>
                                        </div>
                                    </div>
                                </div>

                                {{-- Sujet --}}
                                <div class="mb-2">
                                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-blue-50 text-blue-700 text-sm font-medium rounded-lg">
                                        <span x-text="feedback.subject"></span>
                                    </span>
                                </div>

                                {{-- Message --}}
                                <div class="bg-gray-50 rounded-lg p-4 mt-3">
                                    <p class="text-sm text-gray-700 whitespace-pre-wrap" x-text="feedback.message"></p>
                                </div>
                            </div>

                            {{-- Actions --}}
                            <div class="flex-shrink-0">
                                <button x-show="feedback.status === 'pending'"
                                        @click="markAsResolved(feedback.id)"
                                        class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition flex items-center gap-2 text-sm font-medium">
                                    <i data-lucide="check" class="w-4 h-4"></i>
                                    Marquer résolu
                                </button>
                                <div x-show="feedback.status === 'resolved'" class="text-center">
                                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto">
                                        <i data-lucide="check-circle-2" class="w-6 h-6 text-green-600"></i>
                                    </div>
                                    <p class="text-xs text-gray-500 mt-2">Traité</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        {{-- Pagination --}}
        <div x-show="!isLoading && pagination.last_page > 1" class="p-4 border-t border-gray-100 bg-gray-50">
            <div class="flex items-center justify-between">
                <p class="text-sm text-gray-600">
                    Page <span x-text="pagination.current_page"></span> sur <span x-text="pagination.last_page"></span>
                    (<span x-text="pagination.total"></span> feedbacks au total)
                </p>
                <div class="flex gap-2">
                    <button @click="changePage(pagination.current_page - 1)"
                            :disabled="pagination.current_page === 1"
                            class="px-3 py-1.5 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition">
                        Précédent
                    </button>
                    <button @click="changePage(pagination.current_page + 1)"
                            :disabled="pagination.current_page === pagination.last_page"
                            class="px-3 py-1.5 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition">
                        Suivant
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function feedbacksAdminComponent() {
    return {
        feedbacks: [],
        isLoading: true,
        filterStatus: 'all',
        stats: {
            pending: 0,
            resolved: 0,
            total: 0,
        },
        pagination: {
            current_page: 1,
            last_page: 1,
            total: 0,
        },

        async init() {
            await this.fetchStats();
            await this.fetchFeedbacks();

            // * Réinitialiser les icônes Lucide après chargement
            this.$watch('isLoading', value => {
                if (!value) {
                    this.$nextTick(() => lucide.createIcons());
                }
            });
        },

        async fetchStats() {
            try {
                // * Stats pending
                const pendingRes = await fetch('/api/feedback?status=pending');
                const pendingData = await pendingRes.json();
                this.stats.pending = pendingData.total || 0;

                // * Stats resolved
                const resolvedRes = await fetch('/api/feedback?status=resolved');
                const resolvedData = await resolvedRes.json();
                this.stats.resolved = resolvedData.total || 0;

                // * Total
                const totalRes = await fetch('/api/feedback');
                const totalData = await totalRes.json();
                this.stats.total = totalData.total || 0;
            } catch (error) {
                console.error('Erreur chargement stats:', error);
            }
        },

        async fetchFeedbacks(page = 1) {
            try {
                this.isLoading = true;
                let url = `/api/feedback?page=${page}`;

                if (this.filterStatus !== 'all') {
                    url += `&status=${this.filterStatus}`;
                }

                const response = await fetch(url);
                const data = await response.json();

                if (response.ok) {
                    this.feedbacks = data.data || [];
                    this.pagination = {
                        current_page: data.current_page || 1,
                        last_page: data.last_page || 1,
                        total: data.total || 0,
                    };
                }
            } catch (error) {
                console.error('Erreur chargement feedbacks:', error);
            } finally {
                this.isLoading = false;
            }
        },

        async markAsResolved(feedbackId) {
            if (!confirm('Marquer ce feedback comme résolu ?')) return;

            try {
                const response = await fetch(`/api/feedback/${feedbackId}/resolve`, {
                    method: 'PATCH',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                    },
                });

                if (response.ok) {
                    // * Recharger les données
                    await this.fetchStats();
                    await this.fetchFeedbacks(this.pagination.current_page);
                } else {
                    alert('Erreur lors de la mise à jour');
                }
            } catch (error) {
                console.error('Erreur résolution feedback:', error);
                // Erreur silencieuse
            }
        },

        changePage(page) {
            if (page < 1 || page > this.pagination.last_page) return;
            this.fetchFeedbacks(page);
        },
    };
}
</script>
@endpush