{% extends 'layout.html' %}

{% block title %}Suivi des Activités{% endblock %}
{% block page_title %}Suivi des Activités{% endblock %}

{% block styles %}
<style>
    :root {
        --color-create: #1cc88a;
        --color-update: #4e73df;
        --color-delete: #e74a3b;
        --color-view:   #36b9cc;
        --color-login:  #f6c23e;
        --color-other:  #858796;
    }

    /* ── Stats cards ── */
    .stat-card {
        border: none;
        border-radius: 12px;
        transition: transform .2s, box-shadow .2s;
    }
    .stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
    .stat-icon {
        width: 52px; height: 52px;
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.4rem;
    }

    /* ── Filter card ── */
    .filter-card { border: none; border-radius: 12px; }
    .filter-card .card-header { border-radius: 12px 12px 0 0; background: #f8f9fc; border-bottom: 1px solid #e3e6f0; }

    /* ── Timeline ── */
    .timeline { position: relative; padding-left: 0; }
    .timeline::before {
        content: '';
        position: absolute; left: 28px; top: 0; bottom: 0;
        width: 2px; background: #e3e6f0;
    }

    .tl-item {
        display: flex; gap: 16px;
        margin-bottom: 12px;
        animation: fadeInUp .3s ease both;
    }
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .tl-dot {
        flex-shrink: 0;
        width: 36px; height: 36px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: .85rem; color: #fff;
        position: relative; z-index: 1;
        margin-top: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,.15);
    }
    .tl-dot.create { background: var(--color-create); }
    .tl-dot.update { background: var(--color-update); }
    .tl-dot.delete { background: var(--color-delete); }
    .tl-dot.view   { background: var(--color-view); }
    .tl-dot.login  { background: var(--color-login); }
    .tl-dot.other  { background: var(--color-other); }

    .tl-card {
        flex: 1;
        background: #fff;
        border: 1px solid #e3e6f0;
        border-radius: 10px;
        padding: 12px 16px;
        transition: box-shadow .2s;
    }
    .tl-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }

    .tl-card-header {
        display: flex; justify-content: space-between; align-items: flex-start;
        flex-wrap: wrap; gap: 6px;
        margin-bottom: 6px;
    }
    .tl-badge {
        font-size: .7rem; font-weight: 600;
        padding: 3px 8px; border-radius: 20px;
        text-transform: uppercase; letter-spacing: .5px;
    }
    .tl-badge.create { background: #d1f5e8; color: #0d6e4a; }
    .tl-badge.update { background: #dce8ff; color: #2a4db5; }
    .tl-badge.delete { background: #fde8e6; color: #b91c1c; }
    .tl-badge.view   { background: #d6f4f8; color: #0e7490; }
    .tl-badge.login  { background: #fef3cd; color: #92600a; }
    .tl-badge.other  { background: #f0f0f0; color: #555; }

    .tl-module {
        font-weight: 600; font-size: .9rem; color: #2d3748;
    }
    .tl-time { font-size: .78rem; color: #a0aec0; white-space: nowrap; }
    .tl-desc { font-size: .85rem; color: #4a5568; margin-bottom: 4px; }
    .tl-user { font-size: .78rem; color: #718096; }
    .tl-user i { margin-right: 4px; }

    /* ── Date separator ── */
    .date-separator {
        display: flex; align-items: center; gap: 10px;
        margin: 20px 0 12px 0;
        padding-left: 0;
    }
    .date-separator span {
        font-size: .75rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 1px;
        color: #a0aec0; white-space: nowrap;
    }
    .date-separator::after {
        content: ''; flex: 1; height: 1px; background: #e3e6f0;
    }

    /* ── Empty state ── */
    .empty-state { text-align: center; padding: 60px 20px; color: #a0aec0; }
    .empty-state i { font-size: 3rem; margin-bottom: 16px; display: block; }

    /* ── Pagination ── */
    .page-link { border-radius: 8px !important; margin: 0 2px; }

    /* ── Search highlight ── */
    mark { background: #fff3cd; padding: 0 2px; border-radius: 2px; }

    /* ── Responsive ── */
    @media (max-width: 576px) {
        .timeline::before { left: 18px; }
        .tl-dot { width: 28px; height: 28px; font-size: .7rem; }
        .stat-cards-row .col { min-width: 140px; }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">

    <!-- ══ STATS ══ -->
    <div class="row g-3 mb-4 stat-cards-row flex-nowrap overflow-auto pb-1">
        {% set total = activites|length %}
        {% set nb_create = activites|selectattr('action','equalto','create')|list|length %}
        {% set nb_update = activites|selectattr('action','equalto','update')|list|length %}
        {% set nb_delete = activites|selectattr('action','equalto','delete')|list|length %}
        {% set nb_view   = activites|selectattr('action','equalto','view')|list|length %}

        <div class="col">
            <div class="card stat-card shadow-sm h-100">
                <div class="card-body d-flex align-items-center gap-3 p-3">
                    <div class="stat-icon" style="background:#eef2ff">
                        <i class="fas fa-history text-primary"></i>
                    </div>
                    <div>
                        <div class="fw-bold fs-4 lh-1">{{ total }}</div>
                        <div class="text-muted small">Total</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card stat-card shadow-sm h-100">
                <div class="card-body d-flex align-items-center gap-3 p-3">
                    <div class="stat-icon" style="background:#d1f5e8">
                        <i class="fas fa-plus-circle" style="color:var(--color-create)"></i>
                    </div>
                    <div>
                        <div class="fw-bold fs-4 lh-1" style="color:var(--color-create)">{{ nb_create }}</div>
                        <div class="text-muted small">Créations</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card stat-card shadow-sm h-100">
                <div class="card-body d-flex align-items-center gap-3 p-3">
                    <div class="stat-icon" style="background:#dce8ff">
                        <i class="fas fa-edit" style="color:var(--color-update)"></i>
                    </div>
                    <div>
                        <div class="fw-bold fs-4 lh-1" style="color:var(--color-update)">{{ nb_update }}</div>
                        <div class="text-muted small">Modifications</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card stat-card shadow-sm h-100">
                <div class="card-body d-flex align-items-center gap-3 p-3">
                    <div class="stat-icon" style="background:#fde8e6">
                        <i class="fas fa-trash-alt" style="color:var(--color-delete)"></i>
                    </div>
                    <div>
                        <div class="fw-bold fs-4 lh-1" style="color:var(--color-delete)">{{ nb_delete }}</div>
                        <div class="text-muted small">Suppressions</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card stat-card shadow-sm h-100">
                <div class="card-body d-flex align-items-center gap-3 p-3">
                    <div class="stat-icon" style="background:#d6f4f8">
                        <i class="fas fa-eye" style="color:var(--color-view)"></i>
                    </div>
                    <div>
                        <div class="fw-bold fs-4 lh-1" style="color:var(--color-view)">{{ nb_view }}</div>
                        <div class="text-muted small">Consultations</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ══ FILTRES ══ -->
    <div class="card filter-card shadow-sm mb-4">
        <div class="card-header d-flex justify-content-between align-items-center py-2 px-3">
            <span class="fw-semibold text-primary"><i class="fas fa-filter me-2"></i>Filtres</span>
            <a href="{{ url_for('liste_activites') }}" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-undo me-1"></i>Réinitialiser
            </a>
        </div>
        <div class="card-body py-3">
            <form method="get" action="{{ url_for('liste_activites') }}" class="row g-2 align-items-end">
                <div class="col-md-3 col-sm-6">
                    <label class="form-label small fw-semibold mb-1">Utilisateur</label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                        <input type="text" class="form-control" name="username"
                               value="{{ request.args.get('username','') }}" placeholder="Nom d'utilisateur">
                    </div>
                </div>
                <div class="col-md-2 col-sm-6">
                    <label class="form-label small fw-semibold mb-1">Module</label>
                    <select class="form-select form-select-sm" name="module">
                        <option value="">Tous les modules</option>
                        {% for m in modules %}
                            <option value="{{ m.module }}"
                                {% if request.args.get('module') == m.module %}selected{% endif %}>
                                {{ m.module|title }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2 col-sm-6">
                    <label class="form-label small fw-semibold mb-1">Action</label>
                    <select class="form-select form-select-sm" name="action">
                        <option value="">Toutes les actions</option>
                        {% for a in actions %}
                            <option value="{{ a.action }}"
                                {% if request.args.get('action') == a.action %}selected{% endif %}>
                                {{ a.action|title }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2 col-sm-6">
                    <label class="form-label small fw-semibold mb-1">Date début</label>
                    <input type="date" class="form-control form-control-sm" name="date_debut"
                           value="{{ request.args.get('date_debut','') }}">
                </div>
                <div class="col-md-2 col-sm-6">
                    <label class="form-label small fw-semibold mb-1">Date fin</label>
                    <input type="date" class="form-control form-control-sm" name="date_fin"
                           value="{{ request.args.get('date_fin','') }}">
                </div>
                <div class="col-md-1 col-sm-6">
                    <button type="submit" class="btn btn-primary btn-sm w-100">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- ══ TIMELINE ══ -->
    <div class="card shadow-sm border-0" style="border-radius:12px">
        <div class="card-header bg-white d-flex justify-content-between align-items-center py-2 px-3"
             style="border-radius:12px 12px 0 0; border-bottom:1px solid #e3e6f0">
            <span class="fw-semibold text-primary">
                <i class="fas fa-stream me-2"></i>
                Historique
                <span class="badge bg-primary ms-1" style="font-size:.75rem">{{ activites|length }}</span>
            </span>
            <div class="d-flex gap-2 align-items-center">
                <!-- Recherche rapide côté client -->
                <div class="input-group input-group-sm" style="width:200px">
                    <span class="input-group-text bg-white"><i class="fas fa-search text-muted"></i></span>
                    <input type="text" id="quickSearch" class="form-control border-start-0"
                           placeholder="Recherche rapide…">
                </div>
                <!-- Export CSV -->
                <button class="btn btn-sm btn-outline-success" onclick="exportCSV()">
                    <i class="fas fa-file-csv me-1"></i>CSV
                </button>
            </div>
        </div>

        <div class="card-body p-3">
            {% if activites %}
                <div class="timeline" id="timelineContainer">
                    {% set ns = namespace(current_date='') %}
                    {% for activite in activites %}
                        {% set act_date = activite.timestamp.strftime('%Y-%m-%d') %}
                        {% set act_label = activite.timestamp.strftime('%d %B %Y') %}

                        {% if act_date != ns.current_date %}
                            {% set ns.current_date = act_date %}
                            <div class="date-separator tl-separator">
                                <span>{{ act_label }}</span>
                            </div>
                        {% endif %}

                        {% set action = activite.action|lower %}
                        {% if action == 'create' %}
                            {% set icon = 'fa-plus' %}
                        {% elif action == 'update' %}
                            {% set icon = 'fa-pen' %}
                        {% elif action == 'delete' %}
                            {% set icon = 'fa-trash' %}
                        {% elif action == 'view' %}
                            {% set icon = 'fa-eye' %}
                        {% elif action == 'login' %}
                            {% set icon = 'fa-sign-in-alt' %}
                        {% else %}
                            {% set icon = 'fa-circle' %}
                            {% set action = 'other' %}
                        {% endif %}

                        <div class="tl-item" data-search="{{ activite.username|lower }} {{ activite.module|lower }} {{ activite.description|lower }} {{ activite.action|lower }}">
                            <div class="tl-dot {{ action }}">
                                <i class="fas {{ icon }}"></i>
                            </div>
                            <div class="tl-card">
                                <div class="tl-card-header">
                                    <div class="d-flex align-items-center gap-2 flex-wrap">
                                        <span class="tl-badge {{ action }}">{{ activite.action|upper }}</span>
                                        <span class="tl-module">{{ activite.module|title }}</span>
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <span class="tl-time">
                                            <i class="fas fa-clock me-1"></i>{{ activite.timestamp.strftime('%H:%M:%S') }}
                                        </span>
                                        <a href="{{ url_for('voir_activite', id=activite.id) }}"
                                           class="btn btn-xs btn-outline-primary py-0 px-2"
                                           style="font-size:.75rem; border-radius:6px">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="tl-desc">{{ activite.description }}</div>
                                <div class="tl-user">
                                    <i class="fas fa-user-circle"></i>{{ activite.username }}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>

                <!-- Message aucun résultat recherche -->
                <div id="noResults" class="empty-state d-none">
                    <i class="fas fa-search-minus"></i>
                    <p class="fw-semibold">Aucun résultat pour votre recherche</p>
                </div>

            {% else %}
                <div class="empty-state">
                    <i class="fas fa-history"></i>
                    <p class="fw-semibold mb-1">Aucune activité enregistrée</p>
                    <p class="small">Les actions des utilisateurs apparaîtront ici.</p>
                </div>
            {% endif %}
        </div>
    </div>

</div>
{% endblock %}

{% block scripts %}
<script>
/* ── Recherche rapide côté client ── */
const quickSearch = document.getElementById('quickSearch');
const items       = document.querySelectorAll('.tl-item');
const separators  = document.querySelectorAll('.tl-separator');
const noResults   = document.getElementById('noResults');

if (quickSearch) {
    quickSearch.addEventListener('input', function () {
        const q = this.value.trim().toLowerCase();
        let visible = 0;

        items.forEach(item => {
            const match = !q || item.dataset.search.includes(q);
            item.style.display = match ? '' : 'none';
            if (match) visible++;
        });

        // Masquer les séparateurs de date si aucun item visible sous eux
        separators.forEach(sep => {
            let next = sep.nextElementSibling;
            let hasVisible = false;
            while (next && !next.classList.contains('tl-separator')) {
                if (next.classList.contains('tl-item') && next.style.display !== 'none') {
                    hasVisible = true; break;
                }
                next = next.nextElementSibling;
            }
            sep.style.display = hasVisible ? '' : 'none';
        });

        if (noResults) noResults.classList.toggle('d-none', visible > 0 || !q);
    });
}

/* ── Export CSV ── */
function exportCSV() {
    const rows = [['ID','Timestamp','Utilisateur','Action','Module','Description']];
    document.querySelectorAll('.tl-item').forEach(item => {
        const parts = item.dataset.search.split(' ');
        // On récupère les textes visibles dans la carte
        const badge  = item.querySelector('.tl-badge')?.textContent.trim() || '';
        const module = item.querySelector('.tl-module')?.textContent.trim() || '';
        const desc   = item.querySelector('.tl-desc')?.textContent.trim() || '';
        const user   = item.querySelector('.tl-user')?.textContent.trim() || '';
        const time   = item.querySelector('.tl-time')?.textContent.trim() || '';
        rows.push([item.querySelector('a')?.href.split('/').pop() || '', time, user, badge, module, desc]);
    });

    const csv = rows.map(r => r.map(c => `"${String(c).replace(/"/g,'""')}"`).join(',')).join('\n');
    const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });
    const url  = URL.createObjectURL(blob);
    const a    = document.createElement('a');
    a.href = url; a.download = 'activites_' + new Date().toISOString().slice(0,10) + '.csv';
    a.click(); URL.revokeObjectURL(url);
}
</script>
{% endblock %}