{% extends "schools/base.html" %}
{% load i18n %}
{% load static %}
{% load short_name %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="row">
        <div class="col-12">
            <h1>
                <i class="bi bi-geo-alt me-2"></i>{% translate "Géolocalisation d'adresses" %}
            </h1>
            <p class="lead">
                {% translate "Uploadez un fichier Excel contenant des adresses dans la première colonne pour les géolocaliser automatiquement." %}
            </p>
        </div>
    </div>
    
    {% if messages %}
    <div class="row mt-3">
        <div class="col-12">
            {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
    
    <div class="row mt-4">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">{% translate "Uploader un fichier" %}</h5>
                </div>
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        
                        <div class="mb-3">
                            <label for="{{ form.uploaded_file.id_for_label }}" class="form-label">
                                {{ form.uploaded_file.label }}
                            </label>
                            {{ form.uploaded_file }}
                            {% if form.uploaded_file.help_text %}
                            <div class="form-text">{{ form.uploaded_file.help_text }}</div>
                            {% endif %}
                            {% if form.uploaded_file.errors %}
                            <div class="text-danger">
                                {% for error in form.uploaded_file.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                        
                        <div class="alert alert-info" role="alert">
                            <strong>{% translate "Format du fichier :" %}</strong>
                            <ul class="mb-0 mt-2">
                                <li>{% translate "Le fichier doit être au format Excel (.xls ou .xlsx)" %}</li>
                                <li>{% translate "Les adresses doivent être dans la première colonne" %}</li>
                                <li>{% translate "Taille maximale : 10 Mo" %}</li>
                            </ul>
                        </div>
                        
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-upload me-2"></i>{% translate "Lancer la géolocalisation" %}
                        </button>
                    </form>
                </div>
            </div>
            
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="mb-0">{% translate "Comment ça fonctionne ?" %}</h5>
                </div>
                <div class="card-body">
                    <ol>
                        <li>{% translate "Préparez un fichier Excel avec les adresses dans la première colonne" %}</li>
                        <li>{% translate "Uploadez le fichier en utilisant le formulaire ci-dessus" %}</li>
                        <li>{% translate "Le système géolocalise automatiquement chaque adresse" %}</li>
                        <li>{% translate "Vous recevrez un email avec le fichier résultat contenant les coordonnées (longitude et latitude)" %}</li>
                    </ol>
                    <div class="alert alert-warning mt-3" role="alert">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        {% translate "Le traitement peut prendre plusieurs minutes selon le nombre d'adresses." %}
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">{% translate "Mes tâches de géolocalisation" %}</h5>
                </div>
                <div class="card-body">
                    {% if user_tasks %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>{% translate "Fichier" %}</th>
                                    <th>{% translate "Date" %}</th>
                                    <th>{% translate "Statut" %}</th>
                                    <th>{% translate "Adresses" %}</th>
                                    <th>{% translate "Réussies" %}</th>
                                    <th>{% translate "Action" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for task in user_tasks %}
                                <tr>
                                    <td class="text-truncate" style="max-width: 200px;" title="{{ task.uploaded_file|filename }}">
                                        {{ task.uploaded_file|filename|default:"-" }}
                                    </td>
                                    <td>{{ task.created_at|date:"d/m/Y H:i" }}</td>
                                    <td>
                                        {% if task.status == 'pending' %}
                                            <span class="badge bg-secondary">{% translate "En attente" %}</span>
                                        {% elif task.status == 'processing' %}
                                            <span class="badge bg-info">{% translate "En cours" %}</span>
                                        {% elif task.status == 'completed' %}
                                            <span class="badge bg-success">{% translate "Terminé" %}</span>
                                        {% elif task.status == 'failed' %}
                                            <span class="badge bg-danger">{% translate "Échoué" %}</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ task.total_rows|default:"-" }}</td>
                                    <td>{{ task.successful_geocodes|default:"-" }}</td>
                                    <td>
                                        {% if task.status == 'completed' and task.output_file %}
                                            <a href="{% url 'schools:download_result' task.id %}" class="btn btn-sm btn-primary" download>
                                                <i class="bi bi-download"></i> {% translate "Télécharger" %}
                                            </a>
                                        {% elif task.status == 'processing' %}
                                            <span class="spinner-border spinner-border-sm" role="status">
                                                <span class="visually-hidden">{% translate "Chargement..." %}</span>
                                            </span>
                                        {% elif task.status == 'failed' %}
                                            <button type="button" class="btn btn-sm btn-outline-danger" 
                                                    data-bs-toggle="tooltip" 
                                                    title="{{ task.error_message|default:'Erreur inconnue' }}">
                                                <i class="bi bi-exclamation-circle"></i>
                                            </button>
                                        {% else %}
                                            -
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <p class="text-muted">{% translate "Aucune tâche de géolocalisation pour le moment." %}</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block script %}
<script>
    // Enable tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    });

    // Auto-refresh task statuses every 15 seconds
    const REFRESH_INTERVAL = 15000; // 15 seconds
    let refreshTimer = null;

    function getStatusBadge(status) {
        const statusMap = {
            'pending': { class: 'bg-secondary', text: '{% translate "En attente" %}' },
            'processing': { class: 'bg-info', text: '{% translate "En cours" %}' },
            'completed': { class: 'bg-success', text: '{% translate "Terminé" %}' },
            'failed': { class: 'bg-danger', text: '{% translate "Échoué" %}' }
        };
        const info = statusMap[status] || { class: 'bg-secondary', text: status };
        return `<span class="badge ${info.class}">${info.text}</span>`;
    }

    function getActionButton(task) {
        if (task.status === 'completed' && task.download_url) {
            return `<a href="${task.download_url}" class="btn btn-sm btn-primary" download>
                        <i class="bi bi-download"></i> {% translate "Télécharger" %}
                    </a>`;
        } else if (task.status === 'processing') {
            return `<span class="spinner-border spinner-border-sm" role="status">
                        <span class="visually-hidden">{% translate "Chargement..." %}</span>
                    </span>`;
        } else if (task.status === 'failed') {
            return `<button type="button" class="btn btn-sm btn-outline-danger" 
                            data-bs-toggle="tooltip" 
                            title="${task.error_message}">
                        <i class="bi bi-exclamation-circle"></i>
                    </button>`;
        }
        return '-';
    }

    function updateTasksTable(tasks) {
        const tbody = document.querySelector('.table tbody');
        if (!tbody) return;

        // Clear existing rows
        tbody.innerHTML = '';

        tasks.forEach(task => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td class="text-truncate" style="max-width: 200px;" title="${task.filename}">
                    ${task.filename}
                </td>
                <td>${task.created_at}</td>
                <td>${getStatusBadge(task.status)}</td>
                <td>${task.total_rows}</td>
                <td>${task.successful_geocodes}</td>
                <td>${getActionButton(task)}</td>
            `;
            tbody.appendChild(row);
        });

        // Re-initialize tooltips for new elements
        var newTooltipTriggerList = [].slice.call(tbody.querySelectorAll('[data-bs-toggle="tooltip"]'));
        newTooltipTriggerList.forEach(function (tooltipTriggerEl) {
            new bootstrap.Tooltip(tooltipTriggerEl);
        });
    }

    function refreshTasksStatus() {
        fetch('{% url "schools:geolocation_tasks_status" %}')
            .then(response => response.json())
            .then(data => {
                if (data.tasks && data.tasks.length > 0) {
                    updateTasksTable(data.tasks);
                }
                
                // Continue refreshing only if there are active tasks
                if (data.has_active_tasks) {
                    scheduleRefresh();
                } else {
                    stopRefresh();
                }
            })
            .catch(error => {
                console.error('Error fetching task status:', error);
                // Continue trying even on error
                scheduleRefresh();
            });
    }

    function scheduleRefresh() {
        if (!refreshTimer) {
            refreshTimer = setTimeout(() => {
                refreshTimer = null;
                refreshTasksStatus();
            }, REFRESH_INTERVAL);
        }
    }

    function stopRefresh() {
        if (refreshTimer) {
            clearTimeout(refreshTimer);
            refreshTimer = null;
        }
    }

    // Start auto-refresh if there are pending or processing tasks
    document.addEventListener('DOMContentLoaded', function() {
        {% if user_tasks %}
            const hasActiveTasks = {% if user_tasks.0.status == 'pending' or user_tasks.0.status == 'processing' %}true{% else %}false{% endif %};
            // Check all tasks for active status
            const activeStatuses = ['pending', 'processing'];
            {% for task in user_tasks %}
                {% if task.status == 'pending' or task.status == 'processing' %}
                    scheduleRefresh();
                {% endif %}
            {% endfor %}
        {% endif %}
    });

    // Stop refresh when leaving the page
    window.addEventListener('beforeunload', stopRefresh);
</script>
{% endblock script %}