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

{% block title %}
    {% if query %}
        {{ 'search.items_results_for'|trans({'%query%': query}) }} - Antiquités en France
    {% else %}
        {{ 'search.items_search'|trans }} - Antiquités en France
    {% endif %}
{% endblock %}

{% block body %}
<div class="container-fluid">
    <div class="row">
        <!-- Sidebar Filtres -->
        <div class="col-lg-3 col-md-4" id="filters">
            <div class="search-filters">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5><i class="fas fa-filter me-2"></i>{{ 'search.filters'|trans }}</h5>
                    {% if filters|length > 0 %}
                        <a href="{{ path('search_items', {'_locale': app.request.locale}) }}#filters" 
                           class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-times me-1"></i>{{ 'search.clear_filters'|trans }}
                        </a>
                    {% endif %}
                </div>
                
                <form method="GET" id="itemFilters">
                    {% if query %}
                        <input type="hidden" name="q" value="{{ query }}">
                    {% endif %}

                    <!-- Catégories -->
                    {% if aggregations.categories is defined and aggregations.categories.category_terms.buckets|length > 0 %}
                        <div class="filter-section">
                            <label class="form-label">{{ 'search.categories'|trans }}</label>
                            {% for bucket in aggregations.categories.category_terms.buckets %}
                                {% set category = filterData.categories|filter(c => c.id == bucket.key)|first %}
                                {% if category %}
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                               name="category_id[]" value="{{ bucket.key }}" 
                                               id="cat_{{ bucket.key }}"
                                               {% if bucket.key in filters.category_id %}checked{% endif %}>
                                        <label class="form-check-label" for="cat_{{ bucket.key }}">
                                            {{ category.name }} 
                                            <span class="badge bg-secondary">{{ bucket.doc_count }}</span>
                                        </label>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="filter-section">
                            <label class="form-label">{{ 'search.categories'|trans }}</label>
                            {% for category in filterData.categories %}
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" 
                                           name="category_id[]" value="{{ category.id }}" 
                                           id="cat_{{ category.id }}"
                                           {% if category.id in filters.category_id %}checked{% endif %}>
                                    <label class="form-check-label" for="cat_{{ category.id }}">
                                        {{ category.name }}
                                    </label>
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}

                    <!-- Prix -->
                    <div class="filter-section">
                        <label class="form-label">{{ 'search.price_range'|trans }}</label>
                        <div class="row g-2">
                            <div class="col">
                                <input type="number" name="price_min" class="form-control form-control-sm" 
                                       value="{{ filters.price_min }}" placeholder="{{ 'search.min_price'|trans }}">
                            </div>
                            <div class="col-auto d-flex align-items-center">-</div>
                            <div class="col">
                                <input type="number" name="price_max" class="form-control form-control-sm" 
                                       value="{{ filters.price_max }}" placeholder="{{ 'search.max_price'|trans }}">
                            </div>
                        </div>
                    </div>

                    <!-- Styles -->
                    {% if aggregations.styles is defined and aggregations.styles.style_terms.buckets|length > 0 %}
                        <div class="filter-section">
                            <label class="form-label">{{ 'search.styles'|trans }}</label>
                            {% for bucket in aggregations.styles.style_terms.buckets %}
                                {% set style = filterData.styles|filter(s => s.id == bucket.key)|first %}
                                {% if style %}
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                               name="style_ids[]" value="{{ bucket.key }}" 
                                               id="style_{{ bucket.key }}"
                                               {% if bucket.key in filters.style_ids %}checked{% endif %}>
                                        <label class="form-check-label" for="style_{{ bucket.key }}">
                                            {{ style.name }} 
                                            <span class="badge bg-secondary">{{ bucket.doc_count }}</span>
                                        </label>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    {% endif %}

                    <!-- Périodes -->
                    {% if aggregations.periods is defined and aggregations.periods.period_terms.buckets|length > 0 %}
                        <div class="filter-section">
                            <label class="form-label">{{ 'search.periods'|trans }}</label>
                            {% for bucket in aggregations.periods.period_terms.buckets %}
                                {% set period = filterData.periods|filter(p => p.id == bucket.key)|first %}
                                {% if period %}
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                               name="period_ids[]" value="{{ bucket.key }}" 
                                               id="period_{{ bucket.key }}"
                                               {% if bucket.key in filters.period_ids %}checked{% endif %}>
                                        <label class="form-check-label" for="period_{{ bucket.key }}">
                                            {{ period.name }} 
                                            <span class="badge bg-secondary">{{ bucket.doc_count }}</span>
                                        </label>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    {% endif %}

                    <!-- Localisation -->
                    <div class="filter-section">
                        <label class="form-label">{{ 'search.location'|trans }}</label>
                        <select name="country[]" class="form-select form-select-sm mb-2" multiple>
                            {% for country in filterData.countries %}
                                <option value="{{ country.name }}" 
                                        {% if country.name in filters.country %}selected{% endif %}>
                                    {{ country.name }}
                                </option>
                            {% endfor %}
                        </select>
                        
                        <select name="region[]" class="form-select form-select-sm" multiple>
                            {% for region in filterData.regions %}
                                <option value="{{ region.name }}" 
                                        {% if region.name in filters.region %}selected{% endif %}>
                                    {{ region.name }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search me-2"></i>{{ 'search.apply_filters'|trans }}
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Contenu principal -->
        <div class="col-lg-9 col-md-8">
            <!-- Barre de recherche -->
            <div class="search-header mb-4">
                <form action="{{ path('search_items', {'_locale': app.request.locale}) }}" 
                      method="GET" class="search-form">
                    <div class="input-group input-group-lg">
                        <input type="text" name="q" class="form-control" 
                               value="{{ query }}" 
                               placeholder="{{ 'search.items_placeholder'|trans }}"
                               id="searchInput">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search me-2"></i>{{ 'search.search'|trans }}
                        </button>
                    </div>
                    <div id="searchSuggestions" class="search-suggestions"></div>
                </form>
            </div>

            <!-- En-tête résultats -->
            {% if query %}
                <div class="search-results-header mb-4">
                    <h2>{{ 'search.items_results_for'|trans({'%query%': query}) }}</h2>
                    <p class="text-muted">{{ total }} {{ 'search.items_found'|trans }}</p>
                </div>
            {% endif %}

            <!-- Contrôles de tri -->
            {% if items|length > 0 %}
                <div class="search-controls d-flex justify-content-between align-items-center mb-4">
                    <div class="results-info">
                        <span class="text-muted">
                            {{ (currentPage - 1) * limit + 1 }} - {{ min(currentPage * limit, total) }} 
                            {{ 'search.of'|trans }} {{ total }} {{ 'search.results'|trans }}
                        </span>
                    </div>
                    
                    <div class="sort-controls d-flex align-items-center gap-3">
                        <!-- Vue grille/liste -->
                        <div class="btn-group" role="group">
                            <input type="radio" class="btn-check" name="view" value="grid" id="viewGrid" checked>
                            <label class="btn btn-outline-secondary btn-sm" for="viewGrid">
                                <i class="fas fa-th"></i>
                            </label>
                            
                            <input type="radio" class="btn-check" name="view" value="list" id="viewList">
                            <label class="btn btn-outline-secondary btn-sm" for="viewList">
                                <i class="fas fa-list"></i>
                            </label>
                        </div>

                        <!-- Tri -->
                        <form method="GET" class="d-inline">
                            {% for key, value in app.request.query.all %}
                                {% if key != 'sort' %}
                                    {% if value is iterable %}
                                        {% for v in value %}
                                            <input type="hidden" name="{{ key }}[]" value="{{ v }}">
                                        {% endfor %}
                                    {% else %}
                                        <input type="hidden" name="{{ key }}" value="{{ value }}">
                                    {% endif %}
                                {% endif %}
                            {% endfor %}
                            <select name="sort" class="form-select form-select-sm" onchange="this.form.submit()">
                                <option value="relevance" {% if sort == 'relevance' %}selected{% endif %}>
                                    {{ 'search.sort.relevance'|trans }}
                                </option>
                                <option value="price_asc" {% if sort == 'price_asc' %}selected{% endif %}>
                                    {{ 'search.sort.price_asc'|trans }}
                                </option>
                                <option value="price_desc" {% if sort == 'price_desc' %}selected{% endif %}>
                                    {{ 'search.sort.price_desc'|trans }}
                                </option>
                                <option value="date_desc" {% if sort == 'date_desc' %}selected{% endif %}>
                                    {{ 'search.sort.newest'|trans }}
                                </option>
                            </select>
                        </form>
                    </div>
                </div>
            {% endif %}

            <!-- Résultats des objets -->
            {% if items|length > 0 %}
                <div id="itemsContainer" class="items-grid">
                    <div class="row g-4">
                        {% for item in items %}
                            <div class="col-lg-4 col-md-6 item-col">
                                <div class="card item-card h-100">
                                    <!-- Image -->
                                    <div class="position-relative">
                                        {% if item.images|length > 0 %}
                                            <img src="{{ item.images[0].getThumbWebPath() }}" 
                                                 class="card-img-top" alt="{{ item.title }}"
                                                 style="height: 250px; object-fit: cover;">
                                        {% else %}
                                            <div class="card-img-top bg-light d-flex align-items-center justify-content-center" 
                                                 style="height: 250px;">
                                                <i class="fas fa-image fa-3x text-muted"></i>
                                            </div>
                                        {% endif %}
                                        
                                                                <!-- Badge statut -->
                        {% if item.status.value == 'sold' %}
                            <div class="position-absolute top-0 end-0 m-2">
                                <span class="badge bg-danger">{{ 'item.status.sold'|trans }}</span>
                            </div>
                        {% elseif item.status.value == 'reserved' %}
                            <div class="position-absolute top-0 end-0 m-2">
                                <span class="badge bg-warning">{{ 'item.status.reserved'|trans }}</span>
                            </div>
                        {% endif %}
                                    </div>

                                    <div class="card-body">
                                        <h6 class="card-title">
                                                                        <a href="{{ path('catalog_item_show', {'id': item.id}) }}" 
                               class="text-decoration-none text-dark">
                                                {{ item.title|highlight_search(query) }}
                                            </a>
                                        </h6>
                                        
                                        {% if item.description %}
                                            <p class="card-text text-muted small">
                                                {{ item.description|slice(0, 100)|highlight_search(query) }}
                                                {% if item.description|length > 100 %}...{% endif %}
                                            </p>
                                        {% endif %}

                                        <!-- Métadonnées -->
                                        <div class="item-metadata small text-muted mb-2">
                                            {% if item.category %}
                                                <span class="me-2">
                                                    <i class="fas fa-tag me-1"></i>{{ item.category.name }}
                                                </span>
                                            {% endif %}
                                            {% if item.styles|length > 0 %}
                                                <span class="me-2">
                                                    <i class="fas fa-palette me-1"></i>{{ item.styles[0].name }}
                                                </span>
                                            {% endif %}
                                        </div>
                                    </div>

                                    <div class="card-footer bg-transparent">
                                        <!-- Prix et vendeur -->
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            {% if item.price %}
                                                <strong class="text-primary fs-5">
                                                    {{ item.price|number_format(0, ',', ' ') }} €
                                                </strong>
                                            {% else %}
                                                <span class="text-muted fs-6">
                                                    <i class="fas fa-calculator me-1"></i>Prix sur devis
                                                </span>
                                            {% endif %}
                                            {% if item.member %}
                                                <small class="text-muted">
                                                    {% if item.member.slug %}
                                                        <a href="{{ path('app_store_show', {'slug': item.member.slug, 'locale': 'fr'}) }}" 
                                                       class="text-decoration-none">
                                                        <i class="fas fa-store me-1"></i>{{ item.member.businessName }}
                                                    </a>
                                                    {% else %}
                                                        <span>
                                                            <i class="fas fa-store me-1"></i>{{ item.member.businessName }}
                                                        </span>
                                                    {% endif %}
                                                </small>
                                            {% endif %}
                                        </div>
                                        
                                        <!-- Boutons d'action -->
                                        <div class="d-grid gap-2">
                                            {% if item.status.value == 'available' %}
                                                {% if item.price %}
                                                    <!-- Bouton Ajouter au panier -->
                                                    <button type="button" class="btn btn-success btn-sm add-to-cart" 
                                                            data-item-id="{{ item.id }}">
                                                        <i class="fas fa-shopping-cart me-1"></i>Ajouter au panier
                                                    </button>
                                                {% else %}
                                                    <!-- Bouton Demander un devis -->
                                                    <a href="{{ path('catalog_item_show', {'id': item.id}) }}#quote" 
                                                       class="btn btn-warning btn-sm">
                                                        <i class="fas fa-calculator me-1"></i>Demander un devis
                                                    </a>
                                                {% endif %}
                                                <!-- Bouton Voir détails -->
                                                <a href="{{ path('catalog_item_show', {'id': item.id}) }}" 
                                                   class="btn btn-outline-primary btn-sm">
                                                    <i class="fas fa-eye me-1"></i>Voir détails
                                                </a>
                                            {% elseif item.status.value == 'sold' %}
                                                <button type="button" class="btn btn-outline-secondary btn-sm" disabled>
                                                    <i class="fas fa-check me-1"></i>Vendu
                                                </button>
                                            {% elseif item.status.value == 'reserved' %}
                                                <button type="button" class="btn btn-outline-warning btn-sm" disabled>
                                                    <i class="fas fa-clock me-1"></i>Réservé
                                                </button>
                                            {% else %}
                                                <a href="{{ path('catalog_item_show', {'id': item.id}) }}" 
                                                   class="btn btn-outline-primary btn-sm">
                                                    <i class="fas fa-eye me-1"></i>Voir détails
                                                </a>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% else %}
                <!-- Aucun résultat -->
                <div class="no-results text-center py-5">
                    <i class="fas fa-search fa-3x mb-3 text-muted"></i>
                    <h4>{{ 'search.no_items_found'|trans }}</h4>
                    {% if query %}
                        <p class="text-muted">
                            {{ 'search.no_items_for'|trans({'%query%': query}) }}
                        </p>
                    {% endif %}
                    <div class="mt-4">
                        <h6>{{ 'search.suggestions_title'|trans }}</h6>
                        <ul class="list-unstyled">
                            <li>{{ 'search.suggestion_1'|trans }}</li>
                            <li>{{ 'search.suggestion_2'|trans }}</li>
                            <li>{{ 'search.suggestion_3'|trans }}</li>
                        </ul>
                        <a href="{{ path('catalog_index') }}" class="btn btn-primary mt-3">
                            {{ 'search.browse_catalog'|trans }}
                        </a>
                    </div>
                </div>
            {% endif %}

            <!-- Pagination -->
            {% if totalPages > 1 %}
                <nav aria-label="Pagination des résultats" class="mt-5">
                    <ul class="pagination justify-content-center">
                        {% if currentPage > 1 %}
                            <li class="page-item">
                                <a class="page-link" href="{{ path('search_items', app.request.query.all|merge({'page': currentPage - 1})) }}#filters">
                                    <i class="fas fa-chevron-left"></i>
                                </a>
                            </li>
                        {% endif %}
                        
                        {% for page in range(max(1, currentPage - 2), min(totalPages, currentPage + 2)) %}
                            <li class="page-item {% if page == currentPage %}active{% endif %}">
                                <a class="page-link" href="{{ path('search_items', app.request.query.all|merge({'page': page})) }}#filters">
                                    {{ page }}
                                </a>
                            </li>
                        {% endfor %}
                        
                        {% if currentPage < totalPages %}
                            <li class="page-item">
                                <a class="page-link" href="{{ path('search_items', app.request.query.all|merge({'page': currentPage + 1})) }}#filters">
                                    <i class="fas fa-chevron-right"></i>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        </div>
    </div>
</div>

<style>
.search-filters {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    height: fit-content;
    position: sticky;
    top: 20px;
}

.filter-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
}

.filter-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.item-card {
    transition: all 0.3s ease;
    border: 1px solid #dee2e6;
}

.item-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

.search-suggestion-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f8f9fa;
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-suggestion-item:hover {
    background-color: #f8f9fa;
}

.search-form {
    position: relative;
}

.highlight {
    background-color: #fff3cd;
    padding: 1px 3px;
    border-radius: 3px;
}

/* Vue liste */
.items-list .item-col {
    flex: 0 0 100%;
    max-width: 100%;
}

.items-list .item-card {
    flex-direction: row;
}

.items-list .card-img-top {
    width: 200px;
    height: 150px;
    object-fit: cover;
    border-radius: 6px 0 0 6px;
}

@media (max-width: 768px) {
    .search-filters {
        position: static;
        margin-bottom: 2rem;
    }
    
    .search-controls {
        flex-direction: column;
        align-items: stretch !important;
        gap: 1rem;
    }

    .items-list .item-card {
        flex-direction: column;
    }

    .items-list .card-img-top {
        width: 100%;
        height: 200px;
        border-radius: 6px 6px 0 0;
    }
}
</style>

{{ importmap('js/cart-manager') }}

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Cart Manager
    const cartManager = new CartManager();
    
    // Gestion vue grille/liste
    const viewGrid = document.getElementById('viewGrid');
    const viewList = document.getElementById('viewList');
    const itemsContainer = document.getElementById('itemsContainer');

    if (viewGrid && viewList && itemsContainer) {
        viewGrid.addEventListener('change', function() {
            if (this.checked) {
                itemsContainer.className = 'items-grid';
            }
        });

        viewList.addEventListener('change', function() {
            if (this.checked) {
                itemsContainer.className = 'items-list';
            }
        });
    }

    // Autocomplétion
    const searchInput = document.getElementById('searchInput');
    const suggestionsContainer = document.getElementById('searchSuggestions');
    let searchTimeout;

    if (searchInput && suggestionsContainer) {
        searchInput.addEventListener('input', function() {
            const query = this.value.trim();
            
            clearTimeout(searchTimeout);
            
            if (query.length < 2) {
                suggestionsContainer.style.display = 'none';
                return;
            }

            searchTimeout = setTimeout(async () => {
                try {
                    const response = await fetch(`{{ path('search_autocomplete', {'_locale': app.request.locale}) }}?q=${encodeURIComponent(query)}`);
                    const suggestions = await response.json();
                    
                    displaySuggestions(suggestions.filter(s => s.type === 'item'));
                } catch (error) {
                    console.error('Erreur autocomplétion:', error);
                }
            }, 300);
        });

        document.addEventListener('click', function(e) {
            if (!searchInput.contains(e.target) && !suggestionsContainer.contains(e.target)) {
                suggestionsContainer.style.display = 'none';
            }
        });
    }

    function displaySuggestions(suggestions) {
        if (!suggestions || suggestions.length === 0) {
            suggestionsContainer.style.display = 'none';
            return;
        }

        let html = '';
        suggestions.forEach(suggestion => {
            html += `
                <div class="search-suggestion-item" onclick="window.location.href='${suggestion.url}'">
                    <div class="d-flex justify-content-between">
                        <div>
                            <strong>${suggestion.title}</strong>
                            <br><small class="text-muted"><i class="fas fa-tag me-1"></i>{{ 'search.item_label'|trans }}</small>
                        </div>
                        <div class="text-primary">${suggestion.price}€</div>
                    </div>
                </div>
            `;
        });

        suggestionsContainer.innerHTML = html;
        suggestionsContainer.style.display = 'block';
    }

    // Auto-submit des filtres
    const filterForm = document.getElementById('itemFilters');
    if (filterForm) {
        // Fonction pour soumettre le formulaire avec ancre
        function submitFormWithAnchor() {
            // Ajouter l'ancre à l'action du formulaire
            const currentAction = filterForm.action || window.location.pathname;
            filterForm.action = currentAction + '#filters';
            filterForm.submit();
        }
        
        const filterInputs = filterForm.querySelectorAll('input[type="checkbox"], select');
        
        filterInputs.forEach(input => {
            input.addEventListener('change', function() {
                setTimeout(() => {
                    submitFormWithAnchor();
                }, 100);
            });
        });

        const numberInputs = filterForm.querySelectorAll('input[type="number"]');
        numberInputs.forEach(input => {
            let timeout;
            input.addEventListener('input', function() {
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    submitFormWithAnchor();
                }, 1000);
            });
        });
        
        // Gérer la soumission manuelle du formulaire (bouton "Appliquer les filtres")
        filterForm.addEventListener('submit', function(e) {
            e.preventDefault();
            submitFormWithAnchor();
        });
    }
    
    // Smooth scroll vers les filtres si l'ancre est présente dans l'URL
    if (window.location.hash === '#filters') {
        setTimeout(() => {
            const filtersSection = document.getElementById('filters');
            if (filtersSection) {
                filtersSection.scrollIntoView({ 
                    behavior: 'smooth', 
                    block: 'start',
                    inline: 'nearest'
                });
            }
        }, 100); // Petit délai pour laisser la page se charger
    }
});
</script>
{% endblock %}