{% extends 'base.html.twig' %}

{% block title %}Catalogue d'Antiquités - Antiquités en France{% endblock %}

{% block head %}
<!-- AOS Animation Library -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
{% endblock %}

{% set body_class = 'page-with-hero' %}

{% block hero %}
    <!-- Hero Header -->
<section class="hero-section catalog-hero">
        <div class="container">
            <div class="hero-content" data-aos="fade-up" data-aos-duration="1000">
            <h1 class="hero-title">Catalogue d'Antiquités</h1>
            <p class="hero-subtitle">Découvrez notre sélection exceptionnelle d'antiquités françaises</p>
                
            <div class="hero-stats">
                    <div class="stat-item">
                        <span class="stat-number">{{ pagination.totalItems|default(0) }}</span>
                        <span class="stat-label">Objets</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">{{ categories|length|default(0) }}</span>
                        <span class="stat-label">Catégories</span>
                    </div>
                </div>
                
                <!-- Filtres modernes -->
                <div class="filters-section hero-filters" data-aos="fade-up" data-aos-delay="400" id="filters">
                    <form method="GET" id="catalogFilters">
                        <div class="filters-grid">
                            <div class="filter-group">
                                <label class="filter-label">Catégorie</label>
                                <select name="category" class="filter-input">
                                    <option value="">Toutes les catégories</option>
                                    {% for category in categories|default([]) %}
                                        <option value="{{ category.id }}" 
                                                {% if filters.category|default(0) == category.id %}selected{% endif %}>
                                            {{ category.name }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="filter-group">
                                <label class="filter-label">Style</label>
                                <select name="style" class="filter-input">
                                    <option value="">Tous les styles</option>
                                    {% for style in styles|default([]) %}
                                        <option value="{{ style.id }}" 
                                                {% if filters.style|default(0) == style.id %}selected{% endif %}>
                                            {{ style.name }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="filter-group">
                                <label class="filter-label">Époque</label>
                                <select name="period" class="filter-input">
                                    <option value="">Toutes les époques</option>
                                    {% for period in periods|default([]) %}
                                        <option value="{{ period.id }}" 
                                                {% if filters.period|default(0) == period.id %}selected{% endif %}>
                                            {{ period.name }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                            
                            <div class="filter-group">
                                <label class="filter-label">Tri</label>
                                <select name="sort" class="filter-input">
                                    <option value="created_desc" {% if filters.sort|default('created_desc') == 'created_desc' %}selected{% endif %}>Plus récents</option>
                                    <option value="price_asc" {% if filters.sort == 'price_asc' %}selected{% endif %}>Prix croissant</option>
                                    <option value="price_desc" {% if filters.sort == 'price_desc' %}selected{% endif %}>Prix décroissant</option>
                                    <option value="title_asc" {% if filters.sort == 'title_asc' %}selected{% endif %}>Nom A-Z</option>
                                </select>
                            </div>
                        </div>

                        <div class="filter-buttons">
                            <button type="button" class="btn-filter">
                                <i class="fas fa-search"></i>
                                Appliquer les filtres
                            </button>
                            <button type="button" class="btn-reset">
                                <i class="fas fa-times"></i>
                                Réinitialiser
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block body %}

    <!-- Breadcrumb des filtres actifs -->
    {% if filters is defined and ((filters.category is defined and filters.category) or (filters.style is defined and filters.style) or (filters.period is defined and filters.period) or filters.sort != 'created_desc' or (pagination is defined and pagination.page > 1)) %}
        <section class="filters-breadcrumb" data-aos="fade-up">
            <div class="container">
                <div class="breadcrumb-content">
                    <div class="breadcrumb-filters">
                        <span class="breadcrumb-label">
                            <i class="fas fa-filter me-2"></i>Filtres actifs :
                        </span>
                        
                        <div class="active-filters">
                            {% if filters.category is defined and filters.category and categories is defined %}
                                {% for category in categories %}
                                    {% if category.id == filters.category %}
                                        <span class="filter-badge">
                                            <i class="fas fa-tag me-1"></i>{{ category.name }}
                                            <a href="{{ path('catalog_index', filters|filter((value, key) => key != 'category')) }}#filters" class="remove-filter">
                                                <i class="fas fa-times"></i>
                                            </a>
                                        </span>
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                            
                            {% if filters.style is defined and filters.style and styles is defined %}
                                {% for style in styles %}
                                    {% if style.id == filters.style %}
                                        <span class="filter-badge">
                                            <i class="fas fa-palette me-1"></i>{{ style.name }}
                                            <a href="{{ path('catalog_index', filters|filter((value, key) => key != 'style')) }}#filters" class="remove-filter">
                                                <i class="fas fa-times"></i>
                                            </a>
                                        </span>
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                            
                            {% if filters.period is defined and filters.period and periods is defined %}
                                {% for period in periods %}
                                    {% if period.id == filters.period %}
                                        <span class="filter-badge">
                                            <i class="fas fa-clock me-1"></i>{{ period.name }}
                                            <a href="{{ path('catalog_index', filters|filter((value, key) => key != 'period')) }}#filters" class="remove-filter">
                                                <i class="fas fa-times"></i>
                                            </a>
                                        </span>
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                            
                            {% if filters.sort and filters.sort != 'created_desc' %}
                                <span class="filter-badge">
                                    <i class="fas fa-sort me-1"></i>
                                    {% if filters.sort == 'price_asc' %}Prix croissant
                                    {% elseif filters.sort == 'price_desc' %}Prix décroissant
                                    {% elseif filters.sort == 'title_asc' %}Nom A-Z
                                    {% else %}{{ filters.sort }}{% endif %}
                                    <a href="{{ path('catalog_index', filters|merge({sort: 'created_desc'})) }}#filters" class="remove-filter">
                                        <i class="fas fa-times"></i>
                                    </a>
                                </span>
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="breadcrumb-info">
                        {% if pagination is defined %}
                            <div class="results-summary">
                                <span class="results-count">
                                    <strong>{{ pagination.totalItems|number_format(0, ',', ' ') }}</strong> objets
                                </span>
                                {% if pagination.page > 1 %}
                                    <span class="page-indicator">
                                        - Page <strong>{{ pagination.page }}</strong> sur {{ pagination.totalPages }}
                                    </span>
                                {% endif %}
                            </div>
                        {% endif %}
                        
                        {% if (filters.category is defined and filters.category) or (filters.style is defined and filters.style) or (filters.period is defined and filters.period) or filters.sort != 'created_desc' %}
                            <a href="{{ path('catalog_index') }}#filters" class="clear-all-filters">
                                <i class="fas fa-times-circle me-1"></i>Effacer tous les filtres
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </section>
    {% endif %}

            <!-- Grille d'objets -->
    <section class="items-section">
        <div class="container">
            <div id="catalogContainer">
                {% if items is defined and items|length > 0 %}
                    {{ include('catalog/_items.html.twig', {items: items}) }}
            {% else %}
                <!-- AUCUN ITEM TROUVÉ -->
                <div class="no-results text-center py-5">
                    <i class="fas fa-search fa-3x text-muted mb-3"></i>
                    <h3>Aucun objet trouvé</h3>
                    <p class="text-muted">Essayez de modifier vos critères de recherche</p>
                </div>
            {% endif %}
            
            <!-- ANCIENS PLACEHOLDERS SUPPRIMÉS -->
            {% if false %}
                <div class="items-grid">
                    {% for i in 1..12 %}
                        <article class="item-card" data-aos="fade-up" data-aos-delay="{{ i * 100 }}">
                            <div class="item-image">
                                <div class="placeholder-image">
                                    <i class="fas fa-image"></i>
                                    </div>
                                <div class="item-overlay">
                                    <a href="#" class="view-btn">
                                        <i class="fas fa-eye me-2"></i>Voir l'objet
                                </a>
                            </div>
                        </div>
                            
                            <div class="item-info">
                                {% set titles = [
                                    'Commode Louis XV en marqueterie',
                                    'Vase en porcelaine de Sèvres',
                                    'Pendule Empire en bronze doré',
                                    'Secrétaire Napoléon III',
                                    'Service à thé en argent massif',
                                    'Bergère Louis XVI tapissée',
                                    'Miroir vénitien XVIIIe siècle',
                                    'Lustre en cristal de Baccarat',
                                    'Table de salon Art Déco',
                                    'Sculpture en bronze de Barye',
                                    'Paravent japonisant laqué',
                                    'Vitrine Napoléon III marquetée'
                                ] %}
                                
                                {% set descriptions = [
                                    'Magnifique commode d\'époque avec marqueterie de bois précieux et bronzes dorés.',
                                    'Vase en porcelaine tendre de Sèvres à décor polychrome et dorures.',
                                    'Pendule d\'époque Empire en bronze ciselé et doré au mercure.',
                                    'Secrétaire à abattant en acajou avec incrustations de nacre.',
                                    'Service complet en argent massif poinçonné, style rocaille.',
                                    'Bergère d\'époque Louis XVI en hêtre mouluré et sculpté.',
                                    'Miroir vénitien à parecloses gravées et dorées à la feuille.',
                                    'Lustre à pampilles en cristal taillé, manufacture de Baccarat.',
                                    'Table basse Art Déco en palissandre et marqueterie géométrique.',
                                    'Sculpture animalière en bronze patiné, signée Antoine-Louis Barye.',
                                    'Paravent à quatre feuilles laqué noir à décor japonisant.',
                                    'Vitrine d\'époque en marqueterie de bois de rose et palissandre.'
                                ] %}
                                
                                {% set prices = [15500, 3200, 4800, 8900, 2100, 6500, 1800, 12000, 3500, 7800, 2900, 11200] %}
                                
                                {% set dealers = [
                                    'Antiquités Dubois',
                                    'Galerie Saint-Honoré',
                                    'Maison Verneuil',
                                    'Antiquités du Faubourg',
                                    'Galerie des Arts',
                                    'Brocante Élégance',
                                    'Antiquités Royales',
                                    'Collection Prestige',
                                    'Galerie Napoléon',
                                    'Antiquités de France',
                                    'Maison d\'Art Ancien',
                                    'Galerie du Patrimoine'
                                ] %}
                                
                                <h3 class="item-title">{{ titles[i-1] }}</h3>
                                <p class="item-description">{{ descriptions[i-1] }}</p>
                                <div class="item-price">{{ prices[i-1]|number_format(0, ',', ' ') }}</div>
                                <div class="item-member">
                                    <i class="fas fa-store"></i>
                                    <a href="#">{{ dealers[i-1] }}</a>
                                </div>
                            </div>
                        </article>
                    {% endfor %}
                </div>
            {% endif %}

            </div>
            
            <!-- Pagination AJAX -->
            {{ include('catalog/_pagination.html.twig', {pagination: pagination, filters: filters}) }}
        </div>
    </section>
</div>



<!-- AOS Animation Script -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init({
        duration: 800,
        easing: 'ease-out-cubic',
        once: true,
        offset: 100
    });
</script>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    
    <!-- Script de gestion AJAX des filtres du catalogue -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('📄 DOM Content Loaded');
            
            // Éléments DOM principaux
            const form = document.getElementById('catalogFilters');
            const container = document.getElementById('catalogContainer');
            const pagination = document.getElementById('catalogPagination');
            const loading = document.getElementById('catalogLoading');
            
            console.log('🔍 Elements check:', {
                form: !!form,
                container: !!container,
                pagination: !!pagination,
                loading: !!loading
            });

            class CatalogManager {
                constructor() {
                    // CORRECTION CRITIQUE : Assigner les éléments aux propriétés de classe
                    this.form = form;
                    this.container = container;
                    this.pagination = pagination;
                    this.loading = loading;
                    
                    this.isLoading = false;
                    this.currentPage = 1;
                    this.filters = {};
                    
                    // Vérification critique
                    if (!this.form || !this.container) {
                        console.error('❌ Critical elements missing:', {
                            form: !!this.form,
                            container: !!this.container
                        });
                        return;
                    }
                    
                    this.init();
                    console.log('✅ CatalogManager initialized with elements:', {
                        form: !!this.form,
                        container: !!this.container,
                        pagination: !!this.pagination,
                        loading: !!this.loading
                    });
                }
                
                init() {
                    // Auto-submit sur changement des select
                    const selects = this.form.querySelectorAll('select');
                    selects.forEach(select => {
                        select.addEventListener('change', (e) => {
                            console.log(`🔄 Select changed: ${e.target.name} = ${e.target.value}`);
                            this.applyFilters();
                        });
                    });
                    
                    // Bouton appliquer les filtres
                    const applyBtn = this.form.querySelector('.btn-filter');
                    if (applyBtn) {
                        applyBtn.addEventListener('click', (e) => {
                            e.preventDefault();
                            console.log('🔘 Apply filters button clicked');
                            this.applyFilters();
                        });
                    }
                    
                    // Bouton reset
                    const resetBtn = this.form.querySelector('.btn-reset');
                    if (resetBtn) {
                        resetBtn.addEventListener('click', (e) => {
                            e.preventDefault();
                            console.log('🔄 Reset button clicked');
                            this.resetFilters();
                        });
                    }
                    
                    // Gestion de la pagination (utiliser la délégation d'événements)
                    document.addEventListener('click', (e) => {
                        const pageLink = e.target.closest('[data-page]');
                        if (pageLink) {
                            e.preventDefault();
                            const page = parseInt(pageLink.dataset.page);
                            console.log(`📄 Pagination clicked: page ${page}`);
                            this.loadPage(page);
                        }
                    });
                    
                    console.log('🎯 Event listeners initialized');
                }
                
                getFiltersFromForm() {
                    // CORRECTION : Utiliser this.form au lieu de form
                    if (!this.form) {
                        console.error('❌ Form not available for getFiltersFromForm');
                        return {};
                    }
                    
                    const formData = new FormData(this.form);
                    const filters = {};
                    
                    for (let [key, value] of formData.entries()) {
                        if (value && value.toString().trim() !== '') {
                            filters[key] = value.toString().trim();
                        }
                    }
                    
                    console.log('📝 Filters extracted from form:', filters);
                    return filters;
                }
                
                applyFilters() {
                    if (this.isLoading) {
                        console.log('⏳ Already loading, skipping applyFilters');
                        return;
                    }
                    
                    try {
                        this.filters = this.getFiltersFromForm();
                        console.log('🔍 Applying filters:', this.filters);
                        this.loadPage(1, true, true); // Forcer le rechargement avec le 3ème paramètre
                    } catch (error) {
                        console.error('❌ Error in applyFilters:', error);
                    }
                }
                
                async loadPage(page, updateUrl = true, forceReload = false) {
                    // Si les filtres ont changé, on force le rechargement même sur la même page
                    if (page === this.currentPage && updateUrl && !forceReload) {
                        console.log('ℹ️ Same page, skipping load');
                        return;
                    }
                    if (this.isLoading) {
                        console.log('⏳ Already loading, skipping loadPage');
                        return;
                    }
                    
                    try {
                        this.isLoading = true;
                        this.showLoading();
                        
                        const params = new URLSearchParams();
                        if (page > 1) params.set('page', page);
                        
                        Object.keys(this.filters).forEach(key => {
                            if (this.filters[key] && this.filters[key].toString().trim() !== '') {
                                params.set(key, this.filters[key]);
                            }
                        });
                        
                        const apiUrl = `/api/catalog/items?${params.toString()}`;
                        console.log('🌐 API request to:', apiUrl);
                        
                        const response = await fetch(apiUrl, {
                            method: 'GET',
                            headers: {
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        });
                        
                        console.log('📡 Response status:', response.status, response.statusText);
                        
                        if (!response.ok) {
                            throw new Error(`HTTP error! status: ${response.status} - ${response.statusText}`);
                        }
                        
                        const data = await response.json();
                        console.log('📊 Response data:', data);
                        
                        if (data.success) {
                            // Mettre à jour le contenu des objets
                            if (this.container) {
                                this.container.innerHTML = data.itemsHtml;
                                console.log('✅ Container updated with new items');
                            }
                            
                            // Mettre à jour la pagination - CORRECTION CRITIQUE
                            const paginationWrapper = document.querySelector('.pagination-wrapper');
                            if (paginationWrapper) {
                                // Sauvegarder l'élément loading avant destruction
                                const loadingElement = document.getElementById('catalogLoading');
                                
                                if (data.paginationHtml && data.paginationHtml.trim() !== '') {
                                    // Remplacer seulement si on a du contenu valide
                                    paginationWrapper.outerHTML = data.paginationHtml;
                                    
                                    // Re-obtenir les références après mise à jour du DOM
                                    this.pagination = document.getElementById('catalogPagination');
                                    this.loading = document.getElementById('catalogLoading');
                                    
                                    // Si l'élément loading a été perdu, le recréer
                                    if (!this.loading && loadingElement) {
                                        const newPaginationWrapper = document.querySelector('.pagination-wrapper');
                                        if (newPaginationWrapper) {
                                            newPaginationWrapper.appendChild(loadingElement);
                                            this.loading = loadingElement;
                                        }
                                    }
                                    
                                    console.log('✅ Pagination updated');
                                } else {
                                    // Pas de pagination - garder juste l'élément loading
                                    const paginationModern = paginationWrapper.querySelector('.pagination-modern');
                                    if (paginationModern) {
                                        paginationModern.innerHTML = '';
                                        this.pagination = paginationModern;
                                    }
                                    console.log('✅ Pagination cleared (no results)');
                                }
                            }
                            
                            // Mettre à jour le breadcrumb
                            if (data.breadcrumbHtml) {
                                let breadcrumbSection = document.querySelector('.breadcrumb-section');
                                if (breadcrumbSection) {
                                    breadcrumbSection.outerHTML = data.breadcrumbHtml;
                                } else {
                                    const itemsSection = document.querySelector('.items-section');
                                    if (itemsSection) {
                                        itemsSection.insertAdjacentHTML('beforebegin', data.breadcrumbHtml);
                                    }
                                }
                                console.log('✅ Breadcrumb updated');
                            }
                            
                            this.currentPage = page;
                            
                            // Mettre à jour l'URL sans recharger la page
                            if (updateUrl) {
                                this.updateUrl(page);
                            }
                            
                            // Auto-scroll vers les filtres
                            this.scrollToFilters();
                            
                            // Réinitialiser les animations AOS
                            if (typeof AOS !== 'undefined') {
                                AOS.refresh();
                            }
                            
                            console.log(`✅ Catalog updated: Page ${page}, ${data.totalItems} items found`);
                            
                        } else {
                            throw new Error(data.message || 'Erreur lors du chargement des données');
                        }
                        
                    } catch (error) {
                        console.error('❌ Loading error:', error);
                        if (this.container) {
                            this.container.innerHTML = `
                                <div class="alert alert-danger" role="alert">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    Erreur lors du chargement: ${error.message}
                                    <br><small>Veuillez réessayer ou recharger la page.</small>
                                </div>
                            `;
                        }
                    } finally {
                        this.isLoading = false;
                        this.hideLoading();
                    }
                }
                
                showLoading() {
                    console.log('⏳ Showing loading...');
                    if (this.loading) {
                        this.loading.classList.add('active');
                        console.log('✅ Loading element activated');
                    } else {
                        console.log('⚠️ Loading element not found');
                    }
                    
                    if (this.container) {
                        this.container.style.opacity = '0.5';
                        this.container.style.pointerEvents = 'none';
                        console.log('✅ Container opacity set to 0.5');
                    } else {
                        console.log('⚠️ Container not found for opacity change');
                    }
                }
                
                hideLoading() {
                    console.log('✅ Hiding loading...');
                    if (this.loading) {
                        this.loading.classList.remove('active');
                        console.log('✅ Loading element deactivated');
                    }
                    
                    if (this.container) {
                        this.container.style.opacity = '1';
                        this.container.style.pointerEvents = 'auto';
                        console.log('✅ Container opacity restored to 1');
                    }
                }
                
                updateUrl(page) {
                    const url = new URL(window.location);
                    const keysToDelete = ['page', 'category', 'style', 'period', 'sort', 'search'];
                    keysToDelete.forEach(key => url.searchParams.delete(key));
                    
                    if (page > 1) url.searchParams.set('page', page);
                    
                    Object.keys(this.filters).forEach(key => {
                        if (this.filters[key] && this.filters[key].toString().trim() !== '') {
                            url.searchParams.set(key, this.filters[key]);
                        }
                    });
                    
                    window.history.pushState({ page: page, filters: this.filters }, '', url);
                    console.log('🔗 URL updated:', url.toString());
                }
                
                scrollToFilters() {
                    setTimeout(() => {
                        console.log('🔄 Auto-scroll to filters...');
                        
                        // CORRECTION : Utiliser this.form au lieu de form
                        const filtersSection = document.getElementById('filters') || 
                                             document.querySelector('.filters-section') ||
                                             document.querySelector('#catalogFilters') ||
                                             this.form;
                        
                        if (filtersSection) {
                            console.log('✅ Filters section found, scrolling...');
                            const rect = filtersSection.getBoundingClientRect();
                            
                            // Calcul dynamique de l'offset basé sur la navbar
                            let offset = 20; // Offset minimal de base
                            const navbar = document.querySelector('.navbar');
                            if (navbar) {
                                // Ajouter la hauteur de la navbar + une petite marge
                                offset = navbar.offsetHeight + 20;
                                console.log(`📏 Hauteur navbar détectée: ${navbar.offsetHeight}px, offset utilisé: ${offset}px`);
                            } else {
                                // Fallback si la navbar n'est pas trouvée
                                offset = 80;
                                console.log(`⚠️ Navbar non trouvée, utilisation offset par défaut: ${offset}px`);
                            }
                            
                            const scrollTop = window.pageYOffset + rect.top - offset;
                            
                            window.scrollTo({
                                top: Math.max(0, scrollTop),
                                behavior: 'smooth'
                            });
                            
                            console.log('✅ Auto-scroll completed to position:', Math.max(0, scrollTop));
                        } else {
                            console.log('❌ Filters section not found, scrolling to top');
                            window.scrollTo({ top: 0, behavior: 'smooth' });
                        }
                    }, 200); // Délai pour laisser le DOM se mettre à jour
                }
                
                resetFilters() {
                    if (this.isLoading) {
                        console.log('⏳ Already loading, skipping reset');
                        return;
                    }
                    
                    try {
                        if (this.form) {
                            this.form.reset();
                            console.log('🔄 Form reset');
                        }
                        
                        this.filters = {};
                        this.loadPage(1);
                    } catch (error) {
                        console.error('❌ Error in resetFilters:', error);
                    }
                }
            }
            
            // Initialiser le gestionnaire si les éléments requis sont présents
            if (form && container) {
                window.catalogManager = new CatalogManager();
                console.log('✅ CatalogManager initialized and exposed on window');
            } else {
                console.error('❌ Required elements missing:', {
                    form: !!form,
                    container: !!container
                });
                console.log('ℹ️ Catalog page initialization failed - missing required elements');
            }
            
            console.log('🚀 App initialization completed');
        });
    </script>
{% endblock %}