{% extends "base.html" %}

{% block title %}Interprétation automatique{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12">
            <h2><i class="fas fa-robot"></i> Interprétation automatique des emails</h2>
            <p class="text-muted">Configurez l'analyse automatique des nouveaux emails par Hermes</p>
        </div>
    </div>

    <form id="autoInterpretForm">
        <!-- Activation -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-power-off"></i> Activation</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="auto_interpret_enabled" style="width: 3em; height: 1.5em;">
                            <label class="form-check-label ms-2" for="auto_interpret_enabled" style="font-size: 1.1em;">
                                Activer l'interprétation automatique
                            </label>
                        </div>
                        <div class="form-text mt-2">
                            Lorsqu'activé, Hermes analysera automatiquement les nouveaux emails reçus et créera des interprétations en attente.
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Configuration -->
        <div class="row mb-4">
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-clock"></i> Fréquence</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Intervalle de vérification (minutes)</label>
                            <select class="form-select" id="auto_interpret_interval">
                                <option value="1">Toutes les 1 minute</option>
                                <option value="5">Toutes les 5 minutes</option>
                                <option value="10" selected>Toutes les 10 minutes</option>
                                <option value="15">Toutes les 15 minutes</option>
                                <option value="30">Toutes les 30 minutes</option>
                                <option value="60">Toutes les heures</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Nombre maximum d'emails par exécution</label>
                            <input type="number" class="form-control" id="auto_interpret_max_emails" min="1" max="50" value="10">
                            <div class="form-text">Limite le nombre d'emails analysés à chaque exécution pour éviter la surcharge</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Fenêtre de temps (heures)</label>
                            <input type="number" class="form-control" id="auto_interpret_lookback_hours" min="1"  value="24">
                            <div class="form-text">Analyse les emails reçus dans les dernières X heures (ex: 24 = 1 jour, 168 = 1 semaine)</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-folder"></i> Dossier surveillé</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Dossier à surveiller</label>
                            <select class="form-select" id="auto_interpret_folder">
                                <option value="inbox" selected>Boîte de réception</option>
                                <option value="inbox,custom">Boîte de réception + dossiers personnalisés</option>
                            </select>
                            <div class="form-text">Seuls les emails du dossier sélectionné seront analysés</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Statut -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-info-circle"></i> Statut du service</h5>
                    </div>
                    <div class="card-body">
                        <div id="statusInfo">
                            <p><strong>Dernière exécution:</strong> <span id="lastRun">-</span></p>
                            <p><strong>Prochaine exécution:</strong> <span id="nextRun">-</span></p>
                            <p><strong>Emails analysés:</strong> <span id="emailsProcessed">0</span></p>
                        </div>
                        <button type="button" class="btn btn-outline-primary" onclick="runNow()">
                            <i class="fas fa-play"></i> Exécuter maintenant
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Boutons -->
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-between">
                    <a href="{{ url_for('outlook_dashboard.context_config') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-cog"></i> Configuration Hermes
                    </a>
                    <button type="submit" class="btn btn-success btn-lg">
                        <i class="fas fa-save"></i> Sauvegarder
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Toast -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="saveToast" class="toast" role="alert">
        <div class="toast-header">
            <strong class="me-auto">Configuration</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body" id="toastMessage">
            Sauvegardé avec succès
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    loadConfig();
    loadStatus();
});

function loadConfig() {
    fetch('/outlook/api/auto-interpret')
        .then(response => response.json())
        .then(data => {
            document.getElementById('auto_interpret_enabled').checked = data.auto_interpret_enabled || false;
            document.getElementById('auto_interpret_interval').value = data.auto_interpret_interval || 10;
            document.getElementById('auto_interpret_folder').value = data.auto_interpret_folder || 'inbox';
            document.getElementById('auto_interpret_max_emails').value = data.auto_interpret_max_emails || 10;
            document.getElementById('auto_interpret_lookback_hours').value = data.auto_interpret_lookback_hours || 24;
        })
        .catch(error => {
            console.error('Erreur chargement config:', error);
        });
}

function loadStatus() {
    // TODO: Charger le statut depuis une API
    document.getElementById('lastRun').textContent = 'Non disponible';
    document.getElementById('nextRun').textContent = 'Non disponible';
    document.getElementById('emailsProcessed').textContent = '0';
}

function runNow() {
    if (!confirm('Lancer l\'interprétation automatique maintenant ?')) return;
    
    fetch('/outlook/api/auto-interpret/run', { method: 'POST' })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast('Analyse lancée: ' + data.processed + ' emails traités', 'success');
            } else {
                showToast(data.error || 'Erreur lors de l\'exécution', 'danger');
            }
        })
        .catch(error => {
            showToast('Erreur de connexion', 'danger');
        });
}

document.getElementById('autoInterpretForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = {
        auto_interpret_enabled: document.getElementById('auto_interpret_enabled').checked,
        auto_interpret_interval: parseInt(document.getElementById('auto_interpret_interval').value),
        auto_interpret_folder: document.getElementById('auto_interpret_folder').value,
        auto_interpret_max_emails: parseInt(document.getElementById('auto_interpret_max_emails').value),
        auto_interpret_lookback_hours: parseInt(document.getElementById('auto_interpret_lookback_hours').value)
    };
    
    fetch('/outlook/api/auto-interpret', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast(data.message, 'success');
        } else {
            showToast(data.error || 'Erreur lors de la sauvegarde', 'danger');
        }
    })
    .catch(error => {
        showToast('Erreur de connexion', 'danger');
    });
});

function showToast(message, type) {
    const toast = document.getElementById('saveToast');
    const toastBody = document.getElementById('toastMessage');
    toastBody.textContent = message;
    toast.classList.remove('bg-success', 'bg-danger');
    toast.classList.add(type === 'success' ? 'bg-success' : 'bg-danger', 'text-white');
    const bsToast = new bootstrap.Toast(toast);
    bsToast.show();
}
</script>
{% endblock %}