{% extends "base.html" %}

{% block title %}Outlook - GMAO Collège{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col">
            <h1>📧 Module Outlook</h1>
            <p class="text-muted">Gestion des comptes Outlook et lecture des emails</p>
        </div>
    </div>
    
    <!-- Statistiques rapides -->
    <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>
                            <h6 class="card-title">Comptes configurés</h6>
                            <h3 class="mb-0">{{ accounts|length }}</h3>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-envelope 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>
                            <h6 class="card-title">Comptes actifs</h6>
                            <h3 class="mb-0">{{ accounts|selectattr('is_active')|list|length }}</h3>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-check-circle 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>
                            <h6 class="card-title">Derniers mails</h6>
                            <h3 class="mb-0">{{ recent_mails|length }}</h3>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-inbox 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>
                            <h6 class="card-title">Actions rapides</h6>
                        </div>
                        <div class="align-self-center">
                            <a href="{{ url_for('outlook_pages.index') }}" class="btn btn-light btn-sm">
                                <i class="fas fa-plus"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Liste des comptes -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Mes comptes Outlook</h5>
                    <a href="{{ url_for('outlook_pages.index') }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Configurer un nouveau compte
                    </a>
                </div>
                <div class="card-body">
                    {% if accounts %}
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Email</th>
                                        <th>Statut</th>
                                        <th>Dernière connexion</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for account in accounts %}
                                    <tr>
                                        <td>
                                            <i class="fas fa-envelope text-primary"></i>
                                            {{ account.email }}
                                        </td>
                                        <td>
                                            {% if account.is_active and account.connection_status == 'active' %}
                                                <span class="badge bg-success">Actif</span>
                                            {% elif account.connection_status == 'pending' %}
                                                <span class="badge bg-warning">En attente</span>
                                            {% else %}
                                                <span class="badge bg-danger">Inactif</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if account.last_connected_at %}
                                                {{ account.last_connected_at.strftime('%d/%m/%Y %H:%M') }}
                                            {% else %}
                                                Jamais
                                            {% endif %}
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                {% if account.is_active and account.connection_status == 'active' %}
                                                    <a href="{{ url_for('outlook_pages.index', account_id=account.id) }}" 
                                                       class="btn btn-outline-primary" title="Voir les mails">
                                                        <i class="fas fa-envelope-open"></i>
                                                    </a>
                                                    <button onclick="syncMails({{ account.id }})" 
                                                            class="btn btn-outline-success" title="Synchroniser">
                                                        <i class="fas fa-sync"></i>
                                                    </button>
                                                    <button onclick="testConnection({{ account.id }})" 
                                                            class="btn btn-outline-info" title="Tester la connexion">
                                                        <i class="fas fa-plug"></i>
                                                    </button>
                                                {% endif %}
                                                <button onclick="deleteAccount({{ account.id }})" 
                                                        class="btn btn-outline-danger" title="Supprimer">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fas fa-envelope fa-3x text-muted mb-3"></i>
                            <h5>Aucun compte Outlook configuré</h5>
                            <p class="text-muted">Configurez votre premier compte Outlook pour commencer à synchroniser vos emails.</p>
                            <a href="{{ url_for('outlook_pages.index') }}" class="btn btn-primary">
                                <i class="fas fa-plus"></i> Configurer un compte
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    
    <!-- Derniers mails résumés -->
    {% if recent_mails %}
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Derniers mails ({{ account.email }})</h5>
                </div>
                <div class="card-body">
                    <div class="list-group">
                        {% for mail in recent_mails %}
                        <a href="{{ url_for('outlook_pages.mail_view', mail_id=mail.id) }}" 
                           class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1">{{ mail.subject|truncate(60, true) }}</h6>
                                <small class="text-muted">{{ mail.received_at.strftime('%d/%m') }}</small>
                            </div>
                            <p class="mb-1 text-muted">
                                {{ mail.sender|truncate(40, true) }}
                            </p>
                            <small class="text-muted">
                                {{ mail.body_preview|truncate(80, true) }}
                            </small>
                        </a>
                        {% endfor %}
                    </div>
                    <div class="mt-3 text-center">
                        <a href="{{ url_for('outlook_pages.index') }}" class="btn btn-outline-primary">
                            Voir tous les mails <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- Modal d'authentification -->
<div class="modal fade" id="authModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Authentification Outlook</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="authContent">
                    <p>Connectez-vous à votre compte Outlook en utilisant le code suivant :</p>
                    <div class="text-center my-4">
                        <h2 class="display-4 text-primary" id="userCode"></h2>
                    </div>
                    <p class="text-center">
                        Allez sur <a href="#" id="authLink" target="_blank" class="btn btn-primary">Microsoft</a>
                    </p>
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        Entrez ce code dans la page de connexion et attendez la confirmation.
                    </div>
                </div>
                <div id="authStatus" class="text-center" style="display: none;">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Chargement...</span>
                    </div>
                    <p class="mt-2">En attente de la connexion...</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function syncMails(accountId) {
    if (confirm('Synchroniser les derniers mails ?')) {
        fetch(`/outlook/api/sync-mails/${accountId}`, {method: 'POST'})
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    location.reload();
                } else {
                    alert('Erreur: ' + data.error);
                }
            })
            .catch(error => {
                alert('Erreur réseau: ' + error);
            });
    }
}

function testConnection(accountId) {
    fetch(`/outlook/api/test-connection/${accountId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Connexion OK');
                location.reload();
            } else {
                alert('Connexion échouée: ' + data.error);
            }
        })
        .catch(error => {
            alert('Erreur réseau: ' + error);
        });
}

function deleteAccount(accountId) {
    if (confirm('Supprimer ce compte Outlook ?')) {
        fetch(`/outlook/api/delete-account/${accountId}`, {
            method: 'DELETE'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Compte supprimé');
                location.reload();
            } else {
                alert('Erreur: ' + data.error);
            }
        })
        .catch(error => {
            alert('Erreur réseau: ' + error);
        });
    }
}
</script>
{% endblock %}