@extends('layouts.admin')

@section('content')
<div class="max-w-7xl mx-auto p-6" x-data="adminPosts()">
    {{-- Header --}}
    <div class="mb-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-display font-bold text-gray-900">Gestion des Posts</h1>
                <p class="text-sm text-gray-500 mt-1">Gérer tous les posts du réseau avec filtres avancés</p>
                
                <div class="mt-4">
                    <button @click="$dispatch('open-create-post')" 
                            class="inline-flex items-center gap-2 px-4 py-2 bg-boulanger-orange hover:bg-orange-600 text-white rounded-lg text-sm font-medium transition shadow-sm">
                        <i data-lucide="plus" class="w-4 h-4"></i>
                        <span>Nouveau Post</span>
                    </button>
                </div>
                
                {{-- Bouton suppression multiple --}}
                <div x-show="selectedPosts.length > 0" x-transition class="mt-3">
                    <button @click="confirmBulkDelete()"
                            class="inline-flex items-center gap-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition">
                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                        <span x-text="`Supprimer (${selectedPosts.length})`"></span>
                    </button>
                    <button @click="selectedPosts = []"
                            class="ml-2 text-sm text-gray-600 hover:text-gray-900">
                        Annuler
                    </button>
                </div>
            </div>

            {{-- Stats globales --}}
            <div class="flex gap-4">
                <div class="bg-white rounded-lg shadow px-4 py-2 border-l-4 border-purple-500">
                    <div class="text-2xl font-bold text-gray-900" x-text="stats.total"></div>
                    <div class="text-xs text-gray-500">Total posts</div>
                </div>
                <div class="bg-white rounded-lg shadow px-4 py-2 border-l-4 border-orange-500">
                    <div class="text-2xl font-bold text-gray-900" x-text="stats.urgent"></div>
                    <div class="text-xs text-gray-500">Urgents</div>
                </div>
                <div class="bg-white rounded-lg shadow px-4 py-2 border-l-4 border-blue-500">
                    <div class="text-2xl font-bold text-gray-900" x-text="stats.pinned"></div>
                    <div class="text-xs text-gray-500">Épinglés</div>
                </div>
            </div>
        </div>
    </div>

    {{-- Filtres --}}
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-6">
        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
            {{-- Recherche texte --}}
            <div>
                <label class="block text-xs font-medium text-gray-700 mb-1">Recherche</label>
                <input type="text"
                       x-model="filters.search"
                       @input.debounce.500ms="fetchPosts()"
                       placeholder="Titre ou contenu..."
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent">
            </div>

            {{-- Magasin --}}
            <div>
                <label class="block text-xs font-medium text-gray-700 mb-1">Magasin</label>
                <select x-model="filters.store_id"
                        @change="fetchPosts()"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500">
                    <option value="">Tous</option>
                    <option value="national">🌍 National</option>
                    <template x-for="store in filterOptions.stores" :key="store.value">
                        <option :value="store.value" x-text="store.label"></option>
                    </template>
                </select>
            </div>

            {{-- Utilisateur --}}
            <div>
                <label class="block text-xs font-medium text-gray-700 mb-1">Auteur</label>
                <select x-model="filters.user_id"
                        @change="fetchPosts()"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500">
                    <option value="">Tous</option>
                    <template x-for="user in filterOptions.users" :key="user.value">
                        <option :value="user.value" x-text="user.label"></option>
                    </template>
                </select>
            </div>

            {{-- Expiré --}}
            <div>
                <label class="block text-xs font-medium text-gray-700 mb-1">État</label>
                <select x-model="filters.expired"
                        @change="fetchPosts()"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500">
                    <option value="">Tous</option>
                    <option value="no">✅ Actif</option>
                    <option value="yes">❌ Expiré</option>
                </select>
            </div>

            {{-- Urgent/Épinglé --}}
            <div>
                <label class="block text-xs font-medium text-gray-700 mb-1">Filtres rapides</label>
                <div class="flex gap-2">
                    <button @click="filters.is_urgent = filters.is_urgent === 'true' ? '' : 'true'; fetchPosts()"
                            :class="filters.is_urgent === 'true' ? 'bg-orange-500 text-white' : 'bg-gray-100 text-gray-700'"
                            class="flex-1 px-3 py-2 rounded-lg text-xs font-medium transition">
                        🔥 Urgent
                    </button>
                    <button @click="filters.pinned = filters.pinned === 'yes' ? '' : 'yes'; fetchPosts()"
                            :class="filters.pinned === 'yes' ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-700'"
                            class="flex-1 px-3 py-2 rounded-lg text-xs font-medium transition">
                        📌 Épinglé
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Table --}}
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase w-12">
                            <input type="checkbox"
                                   :checked="allSelected"
                                   @change="toggleSelectAll()"
                                   class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
                        </th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Post</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Auteur</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Magasin</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Stats</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">État</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    <template x-if="loading">
                        <tr>
                            <td colspan="8" class="px-4 py-8 text-center text-gray-500">
                                <i data-lucide="loader" class="w-8 h-8 mx-auto mb-2 animate-spin"></i>
                                <p>Chargement...</p>
                            </td>
                        </tr>
                    </template>

                    <template x-if="!loading && posts.length === 0">
                        <tr>
                            <td colspan="8" class="px-4 py-8 text-center text-gray-500">
                                <i data-lucide="inbox" class="w-12 h-12 mx-auto mb-2 text-gray-300"></i>
                                <p>Aucun post trouvé</p>
                            </td>
                        </tr>
                    </template>

                    <template x-for="post in posts" :key="post.id">
                        <tr class="hover:bg-gray-50 transition" :class="{ 'bg-purple-50': selectedPosts.includes(post.id) }">
                            <td class="px-4 py-3 text-center">
                                <input type="checkbox"
                                       :checked="selectedPosts.includes(post.id)"
                                       @change="toggleSelection(post.id)"
                                       class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex items-start gap-3">
                                    <template x-if="post.images && post.images.length > 0">
                                        <img :src="`/storage/${post.images[0].path}`"
                                             :alt="post.title"
                                             class="w-16 h-16 object-cover rounded-lg flex-shrink-0">
                                    </template>
                                    <div class="min-w-0 flex-1">
                                        <p class="font-medium text-gray-900 text-sm truncate" x-text="post.title"></p>
                                        <p class="text-xs text-gray-500 line-clamp-2" x-text="post.content"></p>
                                        <div class="flex gap-2 mt-1">
                                            <span x-show="post.is_urgent" class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-orange-100 text-orange-800">
                                                🔥 Urgent
                                            </span>
                                            <span x-show="post.pinned_at" class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
                                                📌 Épinglé
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <div class="text-sm">
                                    <p class="font-medium text-gray-900" x-text="`${post.user.first_name} ${post.user.last_name}`"></p>
                                    <p class="text-xs text-gray-500" x-text="post.user.email"></p>
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <span class="text-sm" x-text="post.store ? post.store.name : '🌍 National'"></span>
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex gap-3 text-xs text-gray-600">
                                    <span>❤️ <span x-text="post.likes_count"></span></span>
                                    <span>💬 <span x-text="post.comments_count"></span></span>
                                    <span>⚠️ <span x-text="post.expired_votes_count"></span></span>
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <span x-show="post.expired_votes_count >= 3" class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                    Expiré
                                </span>
                                <span x-show="post.expired_votes_count < 3" class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                    Actif
                                </span>
                            </td>
                            <td class="px-4 py-3 text-sm text-gray-500">
                                <span x-text="new Date(post.created_at).toLocaleDateString('fr-FR')"></span>
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex justify-end gap-2">
                                    <button @click="togglePin(post)"
                                            :title="post.pinned_at ? 'Désépingler' : 'Épingler'"
                                            class="p-2 hover:bg-blue-50 rounded-lg transition">
                                        <i :data-lucide="post.pinned_at ? 'pin-off' : 'pin'" class="w-4 h-4 text-blue-600"></i>
                                    </button>
                                    <a :href="`/posts/${post.id}`"
                                       target="_blank"
                                       title="Voir le post"
                                       class="p-2 hover:bg-gray-100 rounded-lg transition">
                                        <i data-lucide="external-link" class="w-4 h-4 text-gray-600"></i>
                                    </a>
                                    <button @click="confirmDelete(post)"
                                            title="Supprimer"
                                            class="p-2 hover:bg-red-50 rounded-lg transition">
                                        <i data-lucide="trash-2" class="w-4 h-4 text-red-600"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        <div class="px-4 py-3 bg-gray-50 border-t border-gray-200 flex items-center justify-between">
            <div class="text-sm text-gray-700">
                Page <span x-text="pagination.current_page"></span> sur <span x-text="pagination.last_page"></span>
                (<span x-text="pagination.total"></span> posts)
            </div>
            <div class="flex gap-2">
                <button @click="changePage(pagination.current_page - 1)"
                        :disabled="!pagination.prev_page_url"
                        :class="pagination.prev_page_url ? 'hover:bg-gray-200' : 'opacity-50 cursor-not-allowed'"
                        class="px-3 py-1 bg-white border border-gray-300 rounded-lg text-sm">
                    Précédent
                </button>
                <button @click="changePage(pagination.current_page + 1)"
                        :disabled="!pagination.next_page_url"
                        :class="pagination.next_page_url ? 'hover:bg-gray-200' : 'opacity-50 cursor-not-allowed'"
                        class="px-3 py-1 bg-white border border-gray-300 rounded-lg text-sm">
                    Suivant
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

<x-post-create-modal />

@push('scripts')
<script>
    lucide.createIcons();
</script>
@endpush