{{-- * VUE : Gestion produits Admin --}}
{{-- ? Pattern Alpine.js API-First : adminProducts() gère 100% de la dynamique --}}
@extends('layouts.admin')

@section('title', 'Gestion Produits - Admin')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8" x-data="adminProducts()">
    {{-- * En-tête --}}
    <div class="mb-8 flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-display font-bold text-boulanger-dark flex items-center gap-3">
                <i data-lucide="package" class="w-8 h-8 text-boulanger-orange"></i>
                Gestion des Produits
            </h1>
            <p class="mt-2 text-gray-600">Catalogue complet et statistiques détaillées</p>
        </div>
        <button @click="openCreateModal()"
                class="px-4 py-2 bg-boulanger-orange text-white rounded-lg hover:bg-orange-600 transition flex items-center gap-2">
            <i data-lucide="plus" class="w-4 h-4"></i>
            Ajouter un produit
        </button>
    </div>

    {{-- * Système d'onglets --}}
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
        <div class="border-b border-gray-200">
            <nav class="flex -mb-px">
                <button @click="setTab('list')"
                        :class="currentTab === 'list' ? 'border-boulanger-orange text-boulanger-orange' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="px-6 py-3 border-b-2 font-medium text-sm transition">
                    <div class="flex items-center gap-2">
                        <i data-lucide="list" class="w-4 h-4"></i>
                        Liste des produits
                    </div>
                </button>
                <button @click="setTab('statistics')"
                        :class="currentTab === 'statistics' ? 'border-boulanger-orange text-boulanger-orange' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                        class="px-6 py-3 border-b-2 font-medium text-sm transition">
                    <div class="flex items-center gap-2">
                        <i data-lucide="bar-chart-3" class="w-4 h-4"></i>
                        Statistiques
                    </div>
                </button>
            </nav>
        </div>

        {{-- * Onglet Liste --}}
        <div x-show="currentTab === 'list'" class="p-6">
            {{-- Filtres et recherche --}}
            <div class="mb-6 grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="md:col-span-2">
                    <input type="text"
                           x-model="filters.search"
                           @input.debounce.500ms="fetchProducts()"
                           placeholder="Rechercher (code, label, marque, EAN)..."
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange">
                </div>
                <select x-model="filters.life_cycle"
                        @change="fetchProducts()"
                        class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange">
                    <option value="">Tous les cycles de vie</option>
                    <option value="AC">AC - Actif</option>
                    <option value="FR">FR - Fin de réappro</option>
                    <option value="FI">FI - Fin de gamme interne</option>
                    <option value="FF">FF - Fin de gamme fournisseur</option>
                    <option value="NN">NN - Nanard</option>
                </select>
                <label class="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
                    <input type="checkbox"
                           x-model="filters.on_sale"
                           @change="fetchProducts()"
                           class="rounded border-gray-300 text-boulanger-orange focus:ring-boulanger-orange">
                    <span class="text-sm text-gray-700">En promo</span>
                </label>
            </div>

            {{-- Loader --}}
            <div x-show="isLoading" class="flex justify-center items-center py-12">
                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-boulanger-orange"></div>
            </div>

            {{-- Table produits --}}
            <div x-show="!isLoading" class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th @click="sortBy('code_boul')"
                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
                                Code
                                <span x-show="sortField === 'code_boul'" x-text="sortOrder === 'asc' ? '↑' : '↓'"></span>
                            </th>
                            <th @click="sortBy('label')"
                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100">
                                Label
                                <span x-show="sortField === 'label'" x-text="sortOrder === 'asc' ? '↑' : '↓'"></span>
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Marque</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Prix</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cycle</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <template x-for="product in products" :key="product.code_boul">
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900" x-text="product.code_boul"></td>
                                <td class="px-6 py-4 text-sm text-gray-900">
                                    <div class="max-w-xs truncate" :title="product.label" x-text="product.label"></div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" x-text="product.brand || 'N/A'"></td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    <div>
                                        <span x-show="product.discounted_price" class="line-through text-gray-400" x-text="product.price + ' €'"></span>
                                        <span x-show="!product.discounted_price" x-text="product.price + ' €'"></span>
                                        <span x-show="product.discounted_price" class="text-green-600 font-bold ml-2" x-text="product.discounted_price + ' €'"></span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm">
                                    <span :class="{
                                        'bg-green-100 text-green-800': product.life_cycle === 'AC',
                                        'bg-orange-100 text-orange-800': product.life_cycle === 'FR',
                                        'bg-amber-100 text-amber-800': product.life_cycle === 'FI',
                                        'bg-red-100 text-red-800': product.life_cycle === 'FF',
                                        'bg-gray-100 text-gray-800': product.life_cycle === 'NN'
                                    }" class="px-2 py-1 rounded-full text-xs font-medium" x-text="product.life_cycle || 'N/A'"></span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <div class="flex items-center gap-2">
                                        <button @click="openEditModal(product)"
                                                class="text-blue-600 hover:text-blue-800 font-medium">
                                            Modifier
                                        </button>
                                        <button @click="confirmDelete(product)"
                                                class="text-red-600 hover:text-red-800 font-medium">
                                            Supprimer
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>

                {{-- Pagination --}}
                <div x-show="pagination.total > 0" class="mt-6 flex items-center justify-between border-t border-gray-200 pt-4">
                    <div class="text-sm text-gray-700">
                        Affichage <span class="font-medium" x-text="pagination.from"></span>
                        à <span class="font-medium" x-text="pagination.to"></span>
                        sur <span class="font-medium" x-text="pagination.total"></span> produits
                    </div>
                    <div class="flex gap-2">
                        <button @click="goToPage(pagination.current_page - 1)"
                                :disabled="!pagination.prev_page_url"
                                :class="pagination.prev_page_url ? 'hover:bg-gray-100' : 'opacity-50 cursor-not-allowed'"
                                class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium">
                            Précédent
                        </button>
                        <button @click="goToPage(pagination.current_page + 1)"
                                :disabled="!pagination.next_page_url"
                                :class="pagination.next_page_url ? 'hover:bg-gray-100' : 'opacity-50 cursor-not-allowed'"
                                class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium">
                            Suivant
                        </button>
                    </div>
                </div>

                {{-- Vide --}}
                <div x-show="products.length === 0 && !isLoading" class="text-center py-12 text-gray-500">
                    <i data-lucide="package-x" class="w-16 h-16 mx-auto mb-4 text-gray-400"></i>
                    <p class="text-lg font-medium">Aucun produit trouvé</p>
                </div>
            </div>
        </div>

        {{-- * Onglet Statistiques --}}
        <div x-show="currentTab === 'statistics'" class="p-6">
            {{-- Loader stats --}}
            <div x-show="isLoadingStats" class="flex justify-center items-center py-12">
                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-boulanger-orange"></div>
            </div>

            <div x-show="!isLoadingStats" class="space-y-6">
                {{-- Stats globales --}}
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                    <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-blue-500">
                        <p class="text-sm font-medium text-gray-600">Total produits</p>
                        <p class="text-3xl font-bold text-gray-900" x-text="stats.total_products"></p>
                    </div>
                    <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-green-500">
                        <p class="text-sm font-medium text-gray-600">En promo</p>
                        <p class="text-3xl font-bold text-gray-900" x-text="stats.on_sale_products"></p>
                    </div>
                    <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-amber-500">
                        <p class="text-sm font-medium text-gray-600">Incomplets</p>
                        <p class="text-3xl font-bold text-gray-900" x-text="stats.incomplete_products"></p>
                    </div>
                    <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-purple-500">
                        <p class="text-sm font-medium text-gray-600">Prix moyen</p>
                        <p class="text-3xl font-bold text-gray-900" x-text="stats.avg_price + ' €'"></p>
                    </div>
                </div>

                {{-- Ajouts récents --}}
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <h3 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                        <i data-lucide="calendar-plus" class="w-5 h-5 text-boulanger-orange"></i>
                        Ajouts récents
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="bg-blue-50 rounded-lg p-4">
                            <p class="text-sm text-gray-600">Aujourd'hui</p>
                            <p class="text-2xl font-bold text-blue-600" x-text="stats.recent_additions?.today || 0"></p>
                        </div>
                        <div class="bg-green-50 rounded-lg p-4">
                            <p class="text-sm text-gray-600">Cette semaine</p>
                            <p class="text-2xl font-bold text-green-600" x-text="stats.recent_additions?.this_week || 0"></p>
                        </div>
                        <div class="bg-purple-50 rounded-lg p-4">
                            <p class="text-sm text-gray-600">Ce mois</p>
                            <p class="text-2xl font-bold text-purple-600" x-text="stats.recent_additions?.this_month || 0"></p>
                        </div>
                    </div>
                </div>

                {{-- Cycle de vie --}}
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <h3 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                        <i data-lucide="refresh-cw" class="w-5 h-5 text-boulanger-orange"></i>
                        Répartition par cycle de vie
                    </h3>
                    <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
                        <div class="bg-green-50 rounded-lg p-4">
                            <p class="text-xs text-gray-600">AC - Actif</p>
                            <p class="text-2xl font-bold text-green-600" x-text="stats.life_cycle?.ac || 0"></p>
                        </div>
                        <div class="bg-orange-50 rounded-lg p-4">
                            <p class="text-xs text-gray-600">FR - Fin de réappro</p>
                            <p class="text-2xl font-bold text-orange-600" x-text="stats.life_cycle?.fr || 0"></p>
                        </div>
                        <div class="bg-amber-50 rounded-lg p-4">
                            <p class="text-xs text-gray-600">FI - Fin gamme interne</p>
                            <p class="text-2xl font-bold text-amber-600" x-text="stats.life_cycle?.fi || 0"></p>
                        </div>
                        <div class="bg-red-50 rounded-lg p-4">
                            <p class="text-xs text-gray-600">FF - Fin gamme fournisseur</p>
                            <p class="text-2xl font-bold text-red-600" x-text="stats.life_cycle?.ff || 0"></p>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <p class="text-xs text-gray-600">NN - Nanard</p>
                            <p class="text-2xl font-bold text-gray-600" x-text="stats.life_cycle?.nn || 0"></p>
                        </div>
                    </div>
                </div>

                {{-- Top produits retournés --}}
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <h3 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                        <i data-lucide="trending-down" class="w-5 h-5 text-red-600"></i>
                        Top 10 - Produits avec le plus de retours
                    </h3>
                    <div x-show="stats.top_returned_products?.length > 0">
                        <div class="space-y-3">
                            <template x-for="(product, index) in stats.top_returned_products" :key="product.code_boul">
                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                    <div class="flex items-center gap-3">
                                        <span class="flex items-center justify-center w-8 h-8 rounded-full bg-red-100 text-red-600 font-bold text-sm"
                                              x-text="index + 1"></span>
                                        <div>
                                            <p class="font-medium text-gray-900" x-text="product.label"></p>
                                            <p class="text-xs text-gray-500" x-text="product.brand + ' · ' + product.code_boul"></p>
                                        </div>
                                    </div>
                                    <span class="px-3 py-1 bg-red-100 text-red-600 rounded-full text-sm font-bold"
                                          x-text="product.return_count + ' retour(s)'"></span>
                                </div>
                            </template>
                        </div>
                    </div>
                    <div x-show="!stats.top_returned_products || stats.top_returned_products.length === 0"
                         class="text-center py-8 text-gray-500">
                        <p>Aucun retour enregistré</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- * Modales CRUD --}}
    @include('admin.products.partials.create-modal')
    @include('admin.products.partials.edit-modal')
</div>

<script>
function adminProducts() {
    return {
        currentTab: 'list',
        products: [],
        stats: {},
        isLoading: false,
        isLoadingStats: false,
        filters: {
            search: '',
            life_cycle: '',
            on_sale: false,
        },
        sortField: 'code_boul',
        sortOrder: 'asc',
        pagination: {
            current_page: 1,
            total: 0,
            from: 0,
            to: 0,
            prev_page_url: null,
            next_page_url: null,
        },
        editingProduct: null,
        showCreateModal: false,
        showEditModal: false,
        newProduct: {
            code_boul: '',
            label: '',
            brand: '',
            price: '',
            discounted_price: '',
            ean: '',
            life_cycle: 'AC',
            source_url: '',
            image_url: '',
        },
        isSubmitting: false,

        init() {
            // * Restaurer l'onglet depuis localStorage
            const savedTab = localStorage.getItem('adminProductsTab');
            if (savedTab && ['list', 'statistics'].includes(savedTab)) {
                this.currentTab = savedTab;
            }

            if (this.currentTab === 'list') {
                this.fetchProducts();
            } else {
                this.fetchStatistics();
            }

            // * Initialiser Lucide icons
            lucide.createIcons();
        },

        setTab(tab) {
            this.currentTab = tab;
            // * Sauvegarder l'onglet dans localStorage
            localStorage.setItem('adminProductsTab', tab);

            if (tab === 'list' && this.products.length === 0) {
                this.fetchProducts();
            } else if (tab === 'statistics' && Object.keys(this.stats).length === 0) {
                this.fetchStatistics();
            }
        },

        async fetchProducts(page = 1) {
            this.isLoading = true;
            try {
                const params = new URLSearchParams({
                    page,
                    sort_by: this.sortField,
                    sort_order: this.sortOrder,
                    ...this.filters
                });

                const response = await fetch(`/admin/api/products?${params}`);
                if (!response.ok) throw new Error('Erreur chargement produits');

                const data = await response.json();
                this.products = data.data;
                this.pagination = {
                    current_page: data.current_page,
                    total: data.total,
                    from: data.from,
                    to: data.to,
                    prev_page_url: data.prev_page_url,
                    next_page_url: data.next_page_url,
                };
            } catch (error) {
                console.error(error);
                alert('Erreur lors du chargement des produits');
            } finally {
                this.isLoading = false;
            }
        },

        async fetchStatistics() {
            this.isLoadingStats = true;
            try {
                const response = await fetch('/admin/api/products/statistics');
                if (!response.ok) throw new Error('Erreur chargement stats');

                this.stats = await response.json();
            } catch (error) {
                console.error(error);
                alert('Erreur lors du chargement des statistiques');
            } finally {
                this.isLoadingStats = false;
            }
        },

        sortBy(field) {
            if (this.sortField === field) {
                this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
            } else {
                this.sortField = field;
                this.sortOrder = 'asc';
            }
            this.fetchProducts();
        },

        goToPage(page) {
            if (page >= 1 && page <= this.pagination.last_page) {
                this.fetchProducts(page);
            }
        },

        openCreateModal() {
            this.showCreateModal = true;
        },

        openEditModal(product) {
            this.editingProduct = { ...product };
            this.showEditModal = true;
        },

        async confirmDelete(product) {
            if (!confirm(`⚠️ Supprimer le produit "${product.label}" ?\n\nCette action est irréversible.`)) {
                return;
            }

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

                if (!response.ok) {
                    const error = await response.json();
                    throw new Error(error.message || 'Erreur suppression');
                }

                this.fetchProducts(this.pagination.current_page);
                alert('✅ Produit supprimé avec succès');
            } catch (error) {
                alert('❌ ' + error.message);
            }
        },

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

                if (!response.ok) {
                    const error = await response.json();
                    throw new Error(error.message || 'Erreur création');
                }

                this.showCreateModal = false;
                this.resetNewProduct();
                this.fetchProducts(1);
                alert('✅ Produit créé avec succès');
            } catch (error) {
                alert('❌ ' + error.message);
            } finally {
                this.isSubmitting = false;
            }
        },

        resetNewProduct() {
            this.newProduct = {
                code_boul: '',
                label: '',
                brand: '',
                price: '',
                discounted_price: '',
                ean: '',
                life_cycle: 'AC',
                source_url: '',
                image_url: '',
            };
        },

        async updateProduct() {
            if (!this.editingProduct) return;

            this.isSubmitting = true;
            try {
                const response = await fetch(`/admin/api/products/${this.editingProduct.code_boul}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                    body: JSON.stringify(this.editingProduct),
                });

                if (!response.ok) {
                    const error = await response.json();
                    throw new Error(error.message || 'Erreur mise à jour');
                }

                this.showEditModal = false;
                this.editingProduct = null;
                this.fetchProducts(this.pagination.current_page);
                alert('✅ Produit mis à jour avec succès');
            } catch (error) {
                alert('❌ ' + error.message);
            } finally {
                this.isSubmitting = false;
            }
        },
    };
}
</script>
@endsection