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

{% block title %}{{ 'admin.search.title'|trans }} - Antiquités en France{% endblock %}

{% block body %}
<div class="container-fluid mt-4">
    <!-- En-tête -->
    <div class="card mb-4">
        <div class="card-header bg-success text-white">
            <div class="d-flex justify-content-between align-items-center">
                <h3 class="mb-0">
                    <i class="fas fa-search me-2"></i>
                    {{ 'admin.search.title'|trans }}
                </h3>
                <div>
                    <a href="{{ path('admin_dashboard') }}" class="btn btn-outline-light btn-sm me-2">
                        <i class="fas fa-arrow-left me-1"></i>{{ 'admin.search.back_dashboard'|trans }}
                    </a>
                    <button type="button" class="btn btn-outline-light btn-sm" onclick="reindexAll()">
                        <i class="fas fa-sync me-1"></i>{{ 'admin.search.reindex_all'|trans }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistiques Elasticsearch -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ elasticsearch_stats.total_documents|number_format(0, ',', ' ') }}</h4>
                            <p class="card-text">{{ 'admin.search.stats.documents_indexed'|trans }}</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-file-alt fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ elasticsearch_stats.index_size }}</h4>
                            <p class="card-text">{{ 'admin.search.stats.index_size'|trans }}</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-database fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ elasticsearch_stats.avg_search_time }}ms</h4>
                            <p class="card-text">{{ 'admin.search.stats.avg_search_time'|trans }}</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-clock fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ elasticsearch_stats.searches_today|number_format(0, ',', ' ') }}</h4>
                            <p class="card-text">{{ 'admin.search.stats.searches_today'|trans }}</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-search fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Interface de recherche avancée -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-search me-2"></i>
                        {{ 'admin.search.form.title'|trans }}
                    </h5>
                </div>
                <div class="card-body">
                    <form id="advancedSearchForm">
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label class="form-label">{{ 'admin.search.form.text_search'|trans }}</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="query" placeholder="{{ 'admin.search.form.text_placeholder'|trans }}">
                                    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                                        {{ 'admin.search.form.options'|trans }}
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <div class="form-check px-3">
                                                <input class="form-check-input" type="checkbox" name="fuzzy" id="fuzzy">
                                                <label class="form-check-label" for="fuzzy">{{ 'admin.search.form.fuzzy_search'|trans }}</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3">
                                                <input class="form-check-input" type="checkbox" name="wildcard" id="wildcard">
                                                <label class="form-check-label" for="wildcard">{{ 'admin.search.form.wildcard'|trans }}</label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="form-check px-3">
                                                <input class="form-check-input" type="checkbox" name="phrase" id="phrase">
                                                <label class="form-check-label" for="phrase">{{ 'admin.search.form.exact_phrase'|trans }}</label>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <label class="form-label">{{ 'admin.search.form.content_type'|trans }}</label>
                                <select class="form-select" name="content_type">
                                    <option value="">{{ 'admin.search.form.all_types'|trans }}</option>
                                    <option value="items">{{ 'admin.search.form.items'|trans }}</option>
                                    <option value="members">{{ 'admin.search.form.members'|trans }}</option>
                                    <option value="fairs">{{ 'admin.search.form.fairs'|trans }}</option>
                                    <option value="annonces">{{ 'admin.search.form.annonces'|trans }}</option>
                                    <option value="articles">{{ 'admin.search.form.articles'|trans }}</option>
                                </select>
                            </div>
                            
                            <div class="col-md-4">
                                <label class="form-label">{{ 'admin.search.form.category'|trans }}</label>
                                <select class="form-select" name="category">
                                    <option value="">{{ 'admin.search.form.all_categories'|trans }}</option>
                                    {% for category in categories %}
                                        <option value="{{ category.id }}">{{ category.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            
                            <div class="col-md-4">
                                <label class="form-label">{{ 'admin.search.form.location'|trans }}</label>
                                <input type="text" class="form-control" name="location" placeholder="{{ 'admin.search.form.location_placeholder'|trans }}">
                            </div>
                            
                            <div class="col-md-3">
                                <label class="form-label">{{ 'admin.search.form.price_min'|trans }}</label>
                                <input type="number" class="form-control" name="price_min" placeholder="0">
                            </div>
                            
                            <div class="col-md-3">
                                <label class="form-label">{{ 'admin.search.form.price_max'|trans }}</label>
                                <input type="number" class="form-control" name="price_max" placeholder="10000">
                            </div>
                            
                            <div class="col-md-3">
                                <label class="form-label">{{ 'admin.search.form.date_from'|trans }}</label>
                                <input type="date" class="form-control" name="date_from">
                            </div>
                            
                            <div class="col-md-3">
                                <label class="form-label">{{ 'admin.search.form.date_to'|trans }}</label>
                                <input type="date" class="form-control" name="date_to">
                            </div>
                            
                            <div class="col-md-12">
                                <div class="d-flex gap-2">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-search me-1"></i>{{ 'admin.search.form.search_button'|trans }}
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" onclick="clearForm()">
                                        <i class="fas fa-times me-1"></i>{{ 'admin.search.form.clear_button'|trans }}
                                    </button>
                                    <button type="button" class="btn btn-outline-info" onclick="saveSearch()">
                                        <i class="fas fa-save me-1"></i>{{ 'admin.search.form.save_button'|trans }}
                                    </button>
                                    <button type="button" class="btn btn-outline-success" onclick="exportResults()">
                                        <i class="fas fa-download me-1"></i>{{ 'admin.search.form.export_button'|trans }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <!-- Recherches sauvegardées -->
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-bookmark me-2"></i>
                        {{ 'admin.search.saved_searches.title'|trans }}
                    </h6>
                </div>
                <div class="card-body">
                    {% if saved_searches|length > 0 %}
                        {% for search in saved_searches %}
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <div>
                                    <div class="fw-bold">{{ search.name }}</div>
                                    <small class="text-muted">{{ search.description }}</small>
                                </div>
                                <div class="btn-group btn-group-sm">
                                    <button type="button" class="btn btn-outline-primary" onclick="loadSearch({{ search.id }})">
                                        <i class="fas fa-play"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-danger" onclick="deleteSearch({{ search.id }})">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="text-center text-muted">
                            <i class="fas fa-bookmark fa-2x mb-2"></i>
                            <p class="mb-0">{{ 'admin.search.saved_searches.no_saved_searches'|trans }}</p>
                        </div>
                    {% endif %}
                </div>
            </div>
            
            <!-- Statistiques de recherche -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-chart-bar me-2"></i>
                        {{ 'admin.search.popular_terms.title'|trans }}
                    </h6>
                </div>
                <div class="card-body">
                    {% if popular_terms|length > 0 %}
                        {% for term in popular_terms %}
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="badge bg-light text-dark">{{ term.term }}</span>
                                <span class="fw-bold">{{ term.count }}</span>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="text-center text-muted">
                            <i class="fas fa-chart-bar fa-2x mb-2"></i>
                            <p class="mb-0">{{ 'admin.search.popular_terms.no_data'|trans }}</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Résultats de recherche -->
    <div class="card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-list me-2"></i>
                    {{ 'admin.search.results.title'|trans }}
                    <span id="resultsCount" class="badge bg-secondary ms-2">0</span>
                </h5>
                <div>
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-primary" onclick="changeView('grid')">
                            <i class="fas fa-th"></i>
                        </button>
                        <button type="button" class="btn btn-outline-primary active" onclick="changeView('list')">
                            <i class="fas fa-list"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div id="searchResults">
                <div class="text-center text-muted py-5">
                    <i class="fas fa-search fa-4x mb-3"></i>
                    <h5>{{ 'admin.search.results.perform_search'|trans }}</h5>
                    <p>{{ 'admin.search.results.instructions'|trans }}</p>
                </div>
            </div>
            
            <!-- Pagination -->
            <nav id="searchPagination" class="mt-3" style="display: none;">
                <!-- Pagination générée dynamiquement -->
            </nav>
        </div>
    </div>
</div>

<!-- Modal sauvegarde de recherche -->
<div class="modal fade" id="saveSearchModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ 'admin.search.save_modal.title'|trans }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="saveSearchForm">
                    <div class="mb-3">
                        <label class="form-label">{{ 'admin.search.save_modal.name_label'|trans }}</label>
                        <input type="text" class="form-control" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ 'admin.search.save_modal.description_label'|trans }}</label>
                        <textarea class="form-control" name="description" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'admin.search.save_modal.cancel'|trans }}</button>
                <button type="button" class="btn btn-primary" onclick="confirmSaveSearch()">{{ 'admin.search.save_modal.save'|trans }}</button>
            </div>
        </div>
    </div>
</div>

<script>
let currentView = 'list';
let currentResults = [];
let currentPage = 1;

// Soumission du formulaire de recherche
document.getElementById('advancedSearchForm').addEventListener('submit', function(e) {
    e.preventDefault();
    performSearch();
});

function performSearch(page = 1) {
    const formData = new FormData(document.getElementById('advancedSearchForm'));
    const params = new URLSearchParams();
    
    // Convertir FormData en URLSearchParams
    for (let [key, value] of formData.entries()) {
        if (value) params.append(key, value);
    }
    
    params.append('page', page);
    
    // Afficher un loader
    document.getElementById('searchResults').innerHTML = `
        <div class="text-center py-5">
            <div class="spinner-border text-primary" role="status"></div>
            <p class="mt-2">{{ 'admin.search.js.search_in_progress'|trans }}</p>
        </div>
    `;
    
    fetch('{{ path('search_admin_api') }}?' + params.toString())
        .then(response => response.json())
        .then(data => {
            currentResults = data.results;
            currentPage = page;
            displayResults(data);
        })
        .catch(error => {
            document.getElementById('searchResults').innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    {{ 'admin.search.js.search_error'|trans({'%message%': '${error.message}'}) }}
                </div>
            `;
        });
}

function displayResults(data) {
    const resultsContainer = document.getElementById('searchResults');
    const countBadge = document.getElementById('resultsCount');
    
    countBadge.textContent = data.total;
    
    if (data.results.length === 0) {
        resultsContainer.innerHTML = `
            <div class="text-center text-muted py-5">
                <i class="fas fa-search fa-4x mb-3"></i>
                <h5>{{ 'admin.search.results.no_results'|trans }}</h5>
                <p>{{ 'admin.search.results.try_different'|trans }}</p>
            </div>
        `;
        return;
    }
    
    let html = '';
    
    if (currentView === 'list') {
        html = '<div class="table-responsive"><table class="table table-hover"><thead><tr>';
        html += '<th>{{ 'admin.search.results.type'|trans }}</th><th>{{ 'admin.search.results.title_col'|trans }}</th><th>{{ 'admin.search.results.description'|trans }}</th><th>{{ 'admin.search.results.score'|trans }}</th><th>{{ 'admin.search.results.actions'|trans }}</th>';
        html += '</tr></thead><tbody>';
        
        data.results.forEach(result => {
            html += `<tr>
                <td><span class="badge bg-primary">${result.type}</span></td>
                <td>
                    <div class="fw-bold">${result.title}</div>
                    ${result.category ? `<small class="text-muted">${result.category}</small>` : ''}
                </td>
                <td>${result.description ? result.description.substring(0, 100) + '...' : ''}</td>
                <td><span class="badge bg-success">${result.score.toFixed(2)}</span></td>
                <td>
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-outline-info" onclick="viewDetails('${result.type}', ${result.id})">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button type="button" class="btn btn-outline-primary" onclick="editItem('${result.type}', ${result.id})">
                            <i class="fas fa-edit"></i>
                        </button>
                    </div>
                </td>
            </tr>`;
        });
        
        html += '</tbody></table></div>';
    } else {
        html = '<div class="row">';
        
        data.results.forEach(result => {
            html += `<div class="col-md-4 mb-3">
                <div class="card">
                    ${result.image ? `<img src="${result.image}" class="card-img-top" style="height: 200px; object-fit: cover;">` : ''}
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <span class="badge bg-primary">${result.type}</span>
                            <span class="badge bg-success">${result.score.toFixed(2)}</span>
                        </div>
                        <h6 class="card-title">${result.title}</h6>
                        <p class="card-text small">${result.description ? result.description.substring(0, 80) + '...' : ''}</p>
                        <div class="btn-group btn-group-sm w-100">
                            <button type="button" class="btn btn-outline-info" onclick="viewDetails('${result.type}', ${result.id})">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button type="button" class="btn btn-outline-primary" onclick="editItem('${result.type}', ${result.id})">
                                <i class="fas fa-edit"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>`;
        });
        
        html += '</div>';
    }
    
    resultsContainer.innerHTML = html;
    
    // Afficher la pagination
    displayPagination(data);
}

function displayPagination(data) {
    const paginationContainer = document.getElementById('searchPagination');
    
    if (data.totalPages <= 1) {
        paginationContainer.style.display = 'none';
        return;
    }
    
    paginationContainer.style.display = 'block';
    
    let html = '<ul class="pagination justify-content-center">';
    
    // Page précédente
    if (currentPage > 1) {
        html += `<li class="page-item"><a class="page-link" href="#" onclick="performSearch(${currentPage - 1})">{{ 'admin.search.results.previous'|trans }}</a></li>`;
    }
    
    // Pages
    for (let i = Math.max(1, currentPage - 2); i <= Math.min(data.totalPages, currentPage + 2); i++) {
        html += `<li class="page-item ${i === currentPage ? 'active' : ''}">
            <a class="page-link" href="#" onclick="performSearch(${i})">${i}</a>
        </li>`;
    }
    
    // Page suivante
    if (currentPage < data.totalPages) {
        html += `<li class="page-item"><a class="page-link" href="#" onclick="performSearch(${currentPage + 1})">{{ 'admin.search.results.next'|trans }}</a></li>`;
    }
    
    html += '</ul>';
    paginationContainer.innerHTML = html;
}

function changeView(view) {
    currentView = view;
    document.querySelectorAll('.btn-group button').forEach(btn => btn.classList.remove('active'));
    event.target.classList.add('active');
    
    if (currentResults.length > 0) {
        displayResults({ results: currentResults, total: currentResults.length });
    }
}

function clearForm() {
    document.getElementById('advancedSearchForm').reset();
    document.getElementById('searchResults').innerHTML = `
        <div class="text-center text-muted py-5">
            <i class="fas fa-search fa-4x mb-3"></i>
            <h5>{{ 'admin.search.results.perform_search'|trans }}</h5>
            <p>{{ 'admin.search.results.instructions'|trans }}</p>
        </div>
    `;
    document.getElementById('resultsCount').textContent = '0';
    document.getElementById('searchPagination').style.display = 'none';
}

function saveSearch() {
    new bootstrap.Modal(document.getElementById('saveSearchModal')).show();
}

function confirmSaveSearch() {
    const formData = new FormData(document.getElementById('advancedSearchForm'));
    const saveData = new FormData(document.getElementById('saveSearchForm'));
    
    const searchParams = {};
    for (let [key, value] of formData.entries()) {
        if (value) searchParams[key] = value;
    }
    
    fetch('{{ path('search_admin_save') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: JSON.stringify({
            name: saveData.get('name'),
            description: saveData.get('description'),
            parameters: searchParams
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            bootstrap.Modal.getInstance(document.getElementById('saveSearchModal')).hide();
            location.reload();
        } else {
            alert('{{ 'admin.search.js.save_error'|trans({'%message%': ''}) }}' + data.message);
        }
    });
}

function loadSearch(searchId) {
    fetch(`{{ path('search_admin_load', {id: '__ID__'}) }}`.replace('__ID__', searchId))
        .then(response => response.json())
        .then(data => {
            // Remplir le formulaire avec les paramètres sauvegardés
            const form = document.getElementById('advancedSearchForm');
            Object.keys(data.parameters).forEach(key => {
                const input = form.querySelector(`[name="${key}"]`);
                if (input) {
                    if (input.type === 'checkbox') {
                        input.checked = data.parameters[key];
                    } else {
                        input.value = data.parameters[key];
                    }
                }
            });
            
            // Lancer la recherche
            performSearch();
        });
}

function deleteSearch(searchId) {
    if (confirm('{{ 'admin.search.js.confirm_delete'|trans }}')) {
        fetch(`{{ path('search_admin_delete', {id: '__ID__'}) }}`.replace('__ID__', searchId), {
            method: 'DELETE',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('{{ 'admin.search.js.delete_error'|trans({'%message%': ''}) }}' + data.message);
            }
        });
    }
}

function exportResults() {
    if (currentResults.length === 0) {
        alert('{{ 'admin.search.js.no_results_export'|trans }}');
        return;
    }
    
    const formData = new FormData(document.getElementById('advancedSearchForm'));
    const params = new URLSearchParams();
    
    for (let [key, value] of formData.entries()) {
        if (value) params.append(key, value);
    }
    
    params.append('export', 'csv');
    
    window.location.href = '{{ path('search_admin_export') }}?' + params.toString();
}

function viewDetails(type, id) {
    // Rediriger vers la page de détail selon le type
    const routes = {
        'items': '{{ path('admin_item_show', {id: '__ID__'}) }}',
        'members': '{{ path('admin_member_show', {id: '__ID__'}) }}',
        'fairs': '{{ path('admin_fair_show', {id: '__ID__'}) }}',
        'annonces': '{{ path('admin_annonce_show', {id: '__ID__'}) }}',
        'articles': '{{ path('admin_mag_show', {id: '__ID__'}) }}'
    };
    
    if (routes[type]) {
        window.open(routes[type].replace('__ID__', id), '_blank');
    }
}

function editItem(type, id) {
    // Rediriger vers la page d'édition selon le type
    const routes = {
        'items': '{{ path('admin_item_edit', {id: '__ID__'}) }}',
        'members': '{{ path('admin_member_edit', {id: '__ID__'}) }}',
        'fairs': '{{ path('admin_fair_edit', {id: '__ID__'}) }}',
        'annonces': '{{ path('admin_annonce_edit', {id: '__ID__'}) }}',
        'articles': '{{ path('admin_mag_edit', {id: '__ID__'}) }}'
    };
    
    if (routes[type]) {
        window.location.href = routes[type].replace('__ID__', id);
    }
}

function reindexAll() {
    if (confirm('{{ 'admin.search.js.confirm_reindex'|trans }}')) {
        fetch('{{ path('search_reindex_all') }}', {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('{{ 'admin.search.js.reindex_success'|trans }}');
            } else {
                alert('{{ 'admin.search.js.reindex_error'|trans({'%message%': ''}) }}' + data.message);
            }
        });
    }
}
</script>
{% endblock %}