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

{% block title %}Tableau de bord{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href='{{ asset('js/maplibre/maplibre-gl.css') }}' rel='stylesheet' />
    <style>
        .hidden {
            display: none;
        }
        #mapDashboard {
            height: 400px;
            width: 100%;
            margin-bottom: 1rem;
        }
        .suggestion-list {
            position: absolute;
            background: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            max-height: 200px;
            overflow-y: auto;
            width: 100%;
            z-index: 1000;
            display: none;
        }
        .suggestion-item {
            padding: 8px 12px;
            cursor: pointer;
            border-bottom: 1px solid #eee;
        }
        .suggestion-item:hover {
            background-color: #f5f5f5;
        }
        .suggestion-name {
            font-weight: bold;
        }
        .suggestion-details {
            font-size: 0.9em;
            color: #666;
        }
        .suggestion-type {
            margin-right: 8px;
        }
        .search-container {
            position: relative;
            margin-bottom: 1rem;
        }
    </style>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
    <script type="module">
        import { colorizePercentageCells, setupCitySearch, getLabourerUrl, handleAddCityFormSubmit, colorizePercentageCellsRelative } from '{{ asset('js/utils.js') }}';
        
        document.addEventListener('DOMContentLoaded', function() {
            // Initialiser les tooltips Bootstrap
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            });

            // Colorer les cellules de pourcentage
            colorizePercentageCells('td:nth-child(3)');
            // colorier selon le nombre de lieux 
            colorizePercentageCellsRelative('td:nth-child(4)', '154, 205, 50');

            const searchInput = document.getElementById('citySearch');
            const suggestionList = document.getElementById('citySuggestions');
            
            if (searchInput && suggestionList) {
                setupCitySearch('citySearch', 'citySuggestions', function(suggestion) {
                    document.getElementById('selectedZipCode').value = suggestion.postcode;
                });
            }

            // Attacher le submit du formulaire en JS
            const labourerForm = document.getElementById('labourerForm');
            if (labourerForm) {
                labourerForm.addEventListener('submit', handleAddCityFormSubmit);
            }

            // Gestionnaire pour les boutons de labourage
            document.querySelectorAll('.btn-labourer').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    console.log('submit', this.dataset);
                    const zipCode = this.dataset.zipCode;
                    if (!zipCode) return;

                    // Désactiver le bouton et ajouter le spinner
                    this.disabled = true;
                    const originalContent = this.innerHTML;
                    this.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Labourer...';

                    // Rediriger vers l'URL de labourage
                    window.location.href = getLabourerUrl(zipCode);
                });
            });
        });
    </script>
{% endblock %}

{% block body %}
<div class="container">
    <div class="row">
        <div class="col-12">
            <h1 class="mb-4">Tableau de bord</h1>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <h2>Statistiques par ville</h2>
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Ville</th>
                            <th>Code postal</th>
                            <th>Complétion</th>
                            <th>Nombre de commerces</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for stat in stats %}
                            <tr>
                                <td><a href="{{ path('app_admin_stats', {'zip_code': stat.zone}) }}" title="Voir les statistiques de cette ville">
                                            {{ stat.name }}
                                        </a></td>
                                <td>{{ stat.zone }}</td>
                                <td>{{ stat.completionPercent }}%</td>
                                <td>{{ stat.places|length }}</td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{{ path('app_admin_stats', {'zip_code': stat.zone}) }}" class="btn btn-sm btn-primary" title="Voir les statistiques de cette ville">
                                            <i class="bi bi-eye"></i>   
                                        </a>
                                        <a href="{{ path('app_admin_labourer', {'zip_code': stat.zone}) }}" 
                                           class="btn btn-sm btn-success btn-labourer"
                                           data-zip-code="{{ stat.zone }}"
                                           title="Labourer cette ville"
                                           >
                                            <i class="bi bi-recycle"></i>
                                        </a>
                                        <a href="{{ path('app_admin_delete_by_zone', {'zip_code': stat.zone}) }}" 
                                           class="btn btn-sm btn-danger"
                                           onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette zone ?')"
                                           title="Supprimer cette ville"
                                           >
                                            <i class="bi bi-trash"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title">Labourer une ville</h3>
                    <p class="card-text">
                        <i class="bi bi-info-circle" 
                           data-bs-toggle="tooltip" 
                           data-bs-placement="right"
                           data-bs-html="true"
                           title="<strong>Qu'est-ce que le labourage ?</strong><br><br>Le labourage consiste à rechercher automatiquement tous les commerces et lieux d'intérêt dans une ville sur OpenStreetMap. Cette action permet de :<br><br>- Découvrir les commerces existants<br>- Mesurer leur taux de complétion<br>- Identifier les informations manquantes<br>- Faciliter la mise à jour des données"></i>
                        Rechercher une ville pour labourer ses commerces
                    </p>
                    <form id="labourerForm">
                        <div class="search-container">
                            <input type="text" 
                                   id="citySearch" 
                                   class="form-control" 
                                   placeholder="Rechercher une ville..."
                                   autocomplete="off">
                            <div id="citySuggestions" class="suggestion-list"></div>
                        </div>
                        <input type="hidden" name="zip_code" id="selectedZipCode">
                        <button type="submit" class="btn btn-primary mt-3 btn-labourer">Labourer cette ville</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}