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

{% block title %}
    {% if query %}
        {{ 'search.members_results_for'|trans({'%query%': query}) }} - Antiquités en France
    {% else %}
        {{ 'search.members_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">
            <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_members', {'_locale': app.request.locale}) }}" 
                           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="memberFilters">
                    {% if query %}
                        <input type="hidden" name="q" value="{{ query }}">
                    {% endif %}



                    <!-- Spécialités -->
                    {% if filterData.specialties is defined %}
                        <div class="filter-section">
                            <label class="form-label">{{ 'search.specialties'|trans }}</label>
                            {% for specialty in filterData.specialties %}
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" 
                                           name="specialty_ids[]" value="{{ specialty.id }}" 
                                           id="specialty_{{ specialty.id }}"
                                           {% if specialty.id in filters.specialty_ids %}checked{% endif %}>
                                    <label class="form-check-label" for="specialty_{{ specialty.id }}">
                                        {{ specialty.name }}
                                    </label>
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}

                    <!-- Localisation -->
                    <div class="filter-section">
                        <label class="form-label">{{ 'search.location'|trans }}</label>
                        <select name="country_id[]" class="form-select form-select-sm mb-2" multiple>
                            {% for country in filterData.countries %}
                                <option value="{{ country.id }}" 
                                        {% if country.id in filters.country_id %}selected{% endif %}>
                                    {{ country.name }}
                                </option>
                            {% endfor %}
                        </select>
                        
                        <select name="region_id[]" class="form-select form-select-sm" multiple>
                            {% for region in filterData.regions %}
                                <option value="{{ region.id }}" 
                                        {% if region.id in filters.region_id %}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_members', {'_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.members_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.members_results_for'|trans({'%query%': query}) }}</h2>
                    <p class="text-muted">{{ total }} {{ 'search.members_found'|trans }}</p>
                </div>
            {% endif %}

            <!-- Contrôles de vue -->
            {% if members|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="view-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>
                    </div>
                </div>
            {% endif %}

            <!-- Résultats des membres -->
            {% if members|length > 0 %}
                <div id="membersContainer" class="members-grid">
                    <div class="row g-4">
                        {% for member in members %}
                            <div class="col-lg-6 member-col">
                                <div class="card member-card h-100">
                                    <div class="card-body">
                                        <div class="d-flex align-items-start">
                                            <!-- Avatar/Logo -->
                                            <div class="member-avatar me-3">
                                                                                {% if member.logo %}
                                                                                <img src="{{ asset('uploads/members/logos/' ~ member.logo) }}" 
                                         alt="{{ member.businessName }}"
                                         class="rounded-circle" 
                                         style="width: 60px; height: 60px; object-fit: cover;">
                                {% else %}
                                                    <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" 
                                                         style="width: 60px; height: 60px;">
                                                        <i class="fas fa-store fa-lg"></i>
                                                    </div>
                                                {% endif %}
                                            </div>

                                            <!-- Informations principales -->
                                            <div class="flex-grow-1">
                                                <div class="d-flex justify-content-between align-items-start mb-2">
                                                    <h6 class="card-title mb-0">
                                                        {% if member.slug %}
                                                            <a href="{{ path('app_store_show', {'slug': member.slug, 'locale': 'fr'}) }}" 
                                                               class="text-decoration-none text-dark">
                                                                {{ member.businessName|highlight_search(query) }}
                                                            </a>
                                                        {% else %}
                                                            <span class="text-dark">{{ member.businessName|highlight_search(query) }}</span>
                                                        {% endif %}
                                                    </h6>
                                                    <span class="badge bg-{{ member.subscriptionPlan == 'GALLERY' ? 'warning' : (member.subscriptionPlan == 'PREMIUM' ? 'success' : 'primary') }}">
                                                        {{ ('member.plan.' ~ member.subscriptionPlan|lower)|trans }}
                                                    </span>
                                                </div>

                                                <!-- Contact -->
                                                <div class="member-contact mb-2">
                                                    {% if member.firstName and member.lastName %}
                                                        <p class="text-muted small mb-1">
                                                            <i class="fas fa-user me-1"></i>
                                                            {{ member.firstName|highlight_search(query) }} {{ member.lastName|highlight_search(query) }}
                                                        </p>
                                                    {% endif %}
                                                    
                                                    <p class="text-muted small mb-1">
                                                        <i class="fas fa-map-marker-alt me-1"></i>
                                                        {{ member.city }}{% if member.departement %}, {{ member.departement.name }}{% endif %}
                                                        {% if member.country %} - {{ member.country.name }}{% endif %}
                                                    </p>
                                                    
                                                    {% if member.phone %}
                                                        <p class="text-muted small mb-1">
                                                            <i class="fas fa-phone me-1"></i>
                                                            <a href="tel:{{ member.phone }}" class="text-decoration-none">
                                                                {{ member.phone }}
                                                            </a>
                                                        </p>
                                                    {% endif %}
                                                    
                                                    {% if member.email %}
                                                        <p class="text-muted small mb-1">
                                                            <i class="fas fa-envelope me-1"></i>
                                                            <a href="mailto:{{ member.email }}" class="text-decoration-none">
                                                                {{ member.email }}
                                                            </a>
                                                        </p>
                                                    {% endif %}
                                                </div>

                                                <!-- Spécialités -->
                                                {% if member.specialties|length > 0 %}
                                                    <div class="member-specialties mb-2">
                                                        {% for specialty in member.specialties|slice(0, 4) %}
                                                            <span class="badge bg-secondary me-1 mb-1">{{ specialty.name }}</span>
                                                        {% endfor %}
                                                        {% if member.specialties|length > 4 %}
                                                            <span class="text-muted small">+{{ member.specialties|length - 4 }}</span>
                                                        {% endif %}
                                                    </div>
                                                {% endif %}

                                                <!-- Statistiques -->
                                                {% if member.items is defined %}
                                                    <div class="member-stats">
                                                        <small class="text-muted">
                                                            <i class="fas fa-cubes me-1"></i>
                                                            {{ member.items|length }} {{ 'search.items_available'|trans }}
                                                        </small>
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Actions -->
                                    <div class="card-footer bg-transparent">
                                        <div class="d-flex gap-2">
                                            {% if member.slug %}
                                                <a href="{{ path('app_store_show', {'slug': member.slug, 'locale': 'fr'}) }}" 
                                                   class="btn btn-primary btn-sm flex-grow-1">
                                                    <i class="fas fa-eye me-1"></i>{{ 'search.view_profile'|trans }}
                                                </a>
                                            {% else %}
                                                <span class="btn btn-secondary btn-sm flex-grow-1 disabled">
                                                    <i class="fas fa-eye me-1"></i>{{ 'search.view_profile'|trans }}
                                                </span>
                                            {% endif %}
                                            {% if member.items is defined and member.items|length > 0 %}
                                                <a href="{{ path('catalog_index', {'member': member.id}) }}" 
                                                   class="btn btn-outline-secondary btn-sm">
                                                    <i class="fas fa-cubes me-1"></i>{{ 'search.view_items'|trans }}
                                                </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-users fa-3x mb-3 text-muted"></i>
                    <h4>{{ 'search.no_members_found'|trans }}</h4>
                    {% if query %}
                        <p class="text-muted">
                            {{ 'search.no_members_for'|trans({'%query%': query}) }}
                        </p>
                    {% endif %}
                    <div class="mt-4">
                        <h6>{{ 'search.suggestions_title'|trans }}</h6>
                        <ul class="list-unstyled">
                            <li>{{ 'search.suggestion_check_spelling'|trans }}</li>
                            <li>{{ 'search.suggestion_try_different_keywords'|trans }}</li>
                            <li>{{ 'search.suggestion_remove_filters'|trans }}</li>
                        </ul>
                        <a href="{{ path('directory_index') }}" class="btn btn-primary mt-3">
                            {{ 'search.browse_directory'|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_members', app.request.query.all|merge({'page': currentPage - 1})) }}">
                                    <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_members', app.request.query.all|merge({'page': page})) }}">
                                    {{ page }}
                                </a>
                            </li>
                        {% endfor %}
                        
                        {% if currentPage < totalPages %}
                            <li class="page-item">
                                <a class="page-link" href="{{ path('search_members', app.request.query.all|merge({'page': currentPage + 1})) }}">
                                    <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;
}

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

.member-card:hover {
    transform: translateY(-2px);
    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 */
.members-list .member-col {
    flex: 0 0 100%;
    max-width: 100%;
}

.members-list .member-card .card-body {
    padding: 1rem;
}

.members-list .member-avatar {
    width: 50px;
    height: 50px;
}

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

    .member-card .card-body {
        padding: 1rem;
    }

    .member-avatar {
        width: 50px !important;
        height: 50px !important;
    }

    .member-contact p {
        font-size: 0.875rem !important;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Gestion vue grille/liste
    const viewGrid = document.getElementById('viewGrid');
    const viewList = document.getElementById('viewList');
    const membersContainer = document.getElementById('membersContainer');

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

        viewList.addEventListener('change', function() {
            if (this.checked) {
                membersContainer.className = 'members-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 === 'member'));
                } 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>
                        <strong>${suggestion.business_name}</strong>
                        <br><small class="text-muted"><i class="fas fa-user me-1"></i>Antiquaire - ${suggestion.city}</small>
                    </div>
                </div>
            `;
        });

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

    // Auto-submit des filtres
    const filterForm = document.getElementById('memberFilters');
    if (filterForm) {
        const filterInputs = filterForm.querySelectorAll('input[type="checkbox"], select');
        
        filterInputs.forEach(input => {
            input.addEventListener('change', function() {
                setTimeout(() => {
                    filterForm.submit();
                }, 100);
            });
        });
    }
});
</script>
{% endblock %}