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

{% block title %}Gestion des Traductions - Admin AEF{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-header pb-0">
                    <h6>Système de Traduction Automatique</h6>
                    <p class="text-sm mb-0">Gérez les traductions automatiques des objets avec OpenAI</p>
                </div>
                <div class="card-body px-0 pt-0 pb-2">
                    <!-- Statistics Overview -->
                    <div class="row px-3 mb-4">
                        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                            <div class="card">
                                <div class="card-body p-3">
                                    <div class="row">
                                        <div class="col-8">
                                            <div class="numbers">
                                                <p class="text-sm mb-0 text-capitalize font-weight-bold">Objets Total</p>
                                                <h5 class="font-weight-bolder mb-0">{{ total_items }}</h5>
                                            </div>
                                        </div>
                                        <div class="col-4 text-end">
                                            <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                                                <i class="ni ni-archive-2 text-lg opacity-10" aria-hidden="true"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                            <div class="card">
                                <div class="card-body p-3">
                                    <div class="row">
                                        <div class="col-8">
                                            <div class="numbers">
                                                <p class="text-sm mb-0 text-capitalize font-weight-bold">Avec Traductions</p>
                                                <h5 class="font-weight-bolder mb-0">{{ items_with_translations }}</h5>
                                            </div>
                                        </div>
                                        <div class="col-4 text-end">
                                            <div class="icon icon-shape bg-gradient-success shadow text-center border-radius-md">
                                                <i class="ni ni-world-2 text-lg opacity-10" aria-hidden="true"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                            <div class="card">
                                <div class="card-body p-3">
                                    <div class="row">
                                        <div class="col-8">
                                            <div class="numbers">
                                                <p class="text-sm mb-0 text-capitalize font-weight-bold">Sans Traductions</p>
                                                <h5 class="font-weight-bolder mb-0 text-danger">{{ items_without_translations }}</h5>
                                            </div>
                                        </div>
                                        <div class="col-4 text-end">
                                            <div class="icon icon-shape bg-gradient-warning shadow text-center border-radius-md">
                                                <i class="ni ni-notification-70 text-lg opacity-10" aria-hidden="true"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-sm-6">
                            <div class="card">
                                <div class="card-body p-3">
                                    <div class="row">
                                        <div class="col-8">
                                            <div class="numbers">
                                                <p class="text-sm mb-0 text-capitalize font-weight-bold">Langues Supportées</p>
                                                <h5 class="font-weight-bolder mb-0">{{ supported_locales|length }}</h5>
                                            </div>
                                        </div>
                                        <div class="col-4 text-end">
                                            <div class="icon icon-shape bg-gradient-info shadow text-center border-radius-md">
                                                <i class="ni ni-planet text-lg opacity-10" aria-hidden="true"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Translation Actions -->
                    <div class="row px-3 mb-4">
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-header pb-0">
                                    <h6>Actions de Traduction</h6>
                                </div>
                                <div class="card-body">
                                    <button class="btn btn-primary btn-sm mb-2" onclick="batchTranslateRecent()">
                                        <i class="fas fa-language me-1"></i>
                                        Traduire 10 Objets Récents
                                    </button>
                                    <button class="btn btn-warning btn-sm mb-2" onclick="updateOutdatedTranslations()">
                                        <i class="fas fa-sync me-1"></i>
                                        Mettre à Jour Traductions Obsolètes
                                    </button>
                                    <div class="form-group mt-3">
                                        <label class="form-control-label">Langue Source</label>
                                        <select class="form-control form-control-sm" id="sourceLocale">
                                            {% for locale in supported_locales %}
                                                <option value="{{ locale }}" {% if locale == 'fr' %}selected{% endif %}>
                                                    {{ locale|upper }}
                                                </option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card h-100">
                                <div class="card-header pb-0">
                                    <h6>Statistiques par Langue</h6>
                                </div>
                                <div class="card-body">
                                    {% if stats is not empty %}
                                        {% for locale, count in stats %}
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <span class="text-sm font-weight-bold">{{ locale|upper }}</span>
                                                <span class="badge badge-info">{{ count }} traductions</span>
                                            </div>
                                        {% endfor %}
                                    {% else %}
                                        <p class="text-muted text-sm">Aucune traduction disponible</p>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Recent Translations -->
                    <div class="row px-3">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header pb-0">
                                    <h6>Traductions Récentes</h6>
                                </div>
                                <div class="card-body px-0 pt-0 pb-2">
                                    <div class="table-responsive p-0">
                                        <table class="table align-items-center mb-0">
                                            <thead>
                                                <tr>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Objet</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Langue</th>
                                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Titre Traduit</th>
                                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Date</th>
                                                    <th class="text-secondary opacity-7">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for translation in recent_translations %}
                                                    <tr>
                                                        <td>
                                                            <div class="d-flex px-2 py-1">
                                                                <div class="d-flex flex-column justify-content-center">
                                                                    <h6 class="mb-0 text-sm">{{ translation.item.title|slice(0, 40) }}...</h6>
                                                                    <p class="text-xs text-secondary mb-0">ID: {{ translation.item.id }}</p>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <span class="badge badge-sm bg-gradient-info">{{ translation.locale|upper }}</span>
                                                        </td>
                                                        <td class="align-middle text-center text-sm">
                                                            <span class="text-secondary text-xs font-weight-bold">
                                                                {{ translation.title|slice(0, 30) }}...
                                                            </span>
                                                        </td>
                                                        <td class="align-middle text-center">
                                                            <span class="text-secondary text-xs font-weight-bold">
                                                                {{ translation.createdAt|date('d/m/Y H:i') }}
                                                            </span>
                                                        </td>
                                                        <td class="align-middle">
                                                            <a href="{{ path('admin_translations_item_detail', {id: translation.item.id}) }}" 
                                                               class="text-secondary font-weight-bold text-xs" data-toggle="tooltip" data-original-title="Voir détails">
                                                                <i class="fas fa-eye"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                {% else %}
                                                    <tr>
                                                        <td colspan="5" class="text-center text-muted">
                                                            Aucune traduction disponible
                                                        </td>
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading Modal -->
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">Chargement...</span>
                </div>
                <p class="mt-3">Traduction en cours...</p>
            </div>
        </div>
    </div>
</div>

<script>
function batchTranslateRecent() {
    const sourceLocale = document.getElementById('sourceLocale').value;
    
    // Show loading modal
    $('#loadingModal').modal('show');
    
    fetch('{{ path('admin_translations_batch_recent') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `source_locale=${sourceLocale}&limit=10`
    })
    .then(response => response.json())
    .then(data => {
        $('#loadingModal').modal('hide');
        if (data.success) {
            alert('Traduction réussie: ' + data.message);
            location.reload();
        } else {
            alert('Erreur: ' + data.message);
        }
    })
    .catch(error => {
        $('#loadingModal').modal('hide');
        alert('Erreur réseau: ' + error.message);
    });
}

function updateOutdatedTranslations() {
    $('#loadingModal').modal('show');
    
    fetch('{{ path('admin_translations_update_outdated') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'limit=50'
    })
    .then(response => response.json())
    .then(data => {
        $('#loadingModal').modal('hide');
        if (data.success) {
            alert('Mise à jour réussie: ' + data.message);
            location.reload();
        } else {
            alert('Erreur: ' + data.message);
        }
    })
    .catch(error => {
        $('#loadingModal').modal('hide');
        alert('Erreur réseau: ' + error.message);
    });
}
</script>
{% endblock %}