{% extends "base.html" %}
{% block title %}{{ folder.display_name or folder.name }} - {{ account.email }}{% endblock %}
{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <a href="{{ url_for('outlook_pages.account_detail', account_id=account.id) }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-arrow-left"></i> Retour aux dossiers
            </a>
            <h4 class="d-inline ms-3">
                {% if folder.folder_type == 'inbox' %}
                    <i class="bi bi-inbox"></i>
                {% elif folder.folder_type == 'sentitems' %}
                    <i class="bi bi-send"></i>
                {% elif folder.folder_type == 'drafts' %}
                    <i class="bi bi-file-earmark"></i>
                {% elif folder.folder_type == 'deleteditems' %}
                    <i class="bi bi-trash"></i>
                {% elif folder.folder_type == 'junkemail' %}
                    <i class="bi bi-exclamation-triangle"></i>
                {% else %}
                    <i class="bi bi-folder"></i>
                {% endif %}
                {{ folder.display_name or folder.name }}
            </h4>
            {% if unread_count > 0 %}
                <span class="badge bg-primary ms-2">{{ unread_count }} non lus</span>
            {% endif %}
            <small class="text-muted ms-2">({{ folder.total_items }} messages dans le dossier)</small>
        </div>
        <div class="btn-group">
            <button id="sync-btn" class="btn btn-primary btn-sm" onclick="syncMails()">
                <i class="bi bi-arrow-clockwise"></i> Synchroniser
            </button>
            <button class="btn btn-outline-primary btn-sm" onclick="syncMails(500)">
                <i class="bi bi-arrow-down"></i> + de messages
            </button>
        </div>
    </div>
    
    <div id="sync-status" class="mb-3" style="display:none;"></div>
    
    {% if mails %}
    <div class="list-group">
        {% for mail in mails %}
        <a href="{{ url_for('outlook_pages.mail_view', account_id=account.id, mail_id=mail.id) }}" 
           class="list-group-item list-group-item-action {% if not mail.is_read %}list-group-item-info{% endif %}">
            <div class="d-flex justify-content-between">
                <div class="flex-grow-1">
                    <div class="d-flex align-items-center mb-1">
                        {% if not mail.is_read %}
                            <span class="badge bg-primary me-2">Nouveau</span>
                        {% endif %}
                        {% if mail.importance == 'high' %}
                            <i class="bi bi-exclamation-circle text-danger me-2" title="Priorité haute"></i>
                        {% endif %}
                        <strong>{{ mail.from_name or mail.from_email or 'Inconnu' }}</strong>
                        {% if mail.has_attachments %}
                            <i class="bi bi-paperclip ms-2 text-muted" title="Pièce(s) jointe(s)"></i>
                        {% endif %}
                    </div>
                    <h6 class="mb-1 {% if not mail.is_read %}fw-bold{% endif %}">
                        {{ mail.subject or '(sans sujet)' }}
                    </h6>
                    <p class="mb-1 text-muted small">
                        {{ mail.body_preview[:150] }}{% if mail.body_preview|length > 150 %}...{% endif %}
                    </p>
                </div>
                <small class="text-muted text-end" style="min-width: 100px;">
                    {{ mail.received_at.strftime('%d/%m/%Y') if mail.received_at else '-' }}<br>
                    {{ mail.received_at.strftime('%H:%M') if mail.received_at else '' }}
                </small>
            </div>
        </a>
        {% endfor %}
    </div>
    {% else %}
    <div class="card">
        <div class="card-body text-center text-muted py-5">
            <i class="bi bi-inbox display-4"></i>
            <p class="mt-3">Ce dossier est vide</p>
            <button class="btn btn-primary" onclick="syncMails()">
                <i class="bi bi-arrow-clockwise"></i> Synchroniser les emails
            </button>
        </div>
    </div>
    {% endif %}
</div>

<script>
function syncMails(maxMessages) {
    maxMessages = maxMessages || 200;
    const btn = document.getElementById('sync-btn');
    const status = document.getElementById('sync-status');
    
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Synchronisation...';
    
    status.className = 'alert alert-info mb-3';
    status.style.display = 'block';
    status.innerHTML = '<i class="bi bi-hourglass-split"></i> Récupération des emails...';
    
    fetch('/outlook/api/sync-mails/{{ account.id }}/{{ folder.folder_id }}?max=' + maxMessages, {method: 'POST'})
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                status.className = data.skipped ? 'alert alert-warning mb-3' : 'alert alert-success mb-3';
                let msg = data.message || 'Emails synchronisés';
                if (data.total) {
                    msg += ' <strong>(' + data.total + ' messages)</strong>';
                }
                if (data.warning) msg += '<br>' + data.warning;
                status.innerHTML = '<i class="bi bi-check-circle"></i> ' + msg;
                setTimeout(() => window.location.reload(), 1500);
            } else {
                status.className = 'alert alert-danger mb-3';
                status.innerHTML = '<i class="bi bi-exclamation-triangle"></i> ' + (data.error || 'Erreur de synchronisation');
            }
        })
        .catch(error => {
            status.className = 'alert alert-danger mb-3';
            status.innerHTML = '<i class="bi bi-exclamation-triangle"></i> Erreur: ' + error.message;
        })
        .finally(() => {
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-arrow-clockwise"></i> Synchroniser';
        });
}
</script>
{% endblock %}