{% extends 'layout.html' %}

{% block title %}Détail Activité #{{ activite.id }}{% endblock %}
{% block page_title %}Détail de l'Activité{% endblock %}

{% block styles %}
<style>
    .detail-card { border: none; border-radius: 14px; }
    .action-pill {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 14px; border-radius: 20px;
        font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .6px;
    }
    .action-pill.create { background:#d1f5e8; color:#0d6e4a; }
    .action-pill.update { background:#dce8ff; color:#2a4db5; }
    .action-pill.delete { background:#fde8e6; color:#b91c1c; }
    .action-pill.view   { background:#d6f4f8; color:#0e7490; }
    .action-pill.login  { background:#fef3cd; color:#92600a; }
    .action-pill.other  { background:#f0f0f0; color:#555; }

    .meta-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 12px;
        margin-bottom: 20px;
    }
    .meta-item {
        background: #f8f9fc;
        border-radius: 10px;
        padding: 12px 14px;
    }
    .meta-item .label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: #a0aec0; margin-bottom: 4px; }
    .meta-item .value { font-size: .92rem; font-weight: 600; color: #2d3748; }

    .desc-box {
        background: #f8f9fc;
        border-left: 4px solid #4e73df;
        border-radius: 0 10px 10px 0;
        padding: 14px 16px;
        font-size: .92rem; color: #4a5568;
        margin-bottom: 20px;
    }

    .json-box {
        background: #1e1e2e;
        color: #cdd6f4;
        border-radius: 10px;
        padding: 16px;
        font-family: 'Courier New', monospace;
        font-size: .82rem;
        max-height: 360px;
        overflow-y: auto;
        white-space: pre-wrap;
        word-break: break-all;
    }
    .json-key   { color: #89b4fa; }
    .json-str   { color: #a6e3a1; }
    .json-num   { color: #fab387; }
    .json-bool  { color: #f38ba8; }
    .json-null  { color: #9399b2; }

    .details-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; color: #718096; font-weight: 600; }
    .details-table td { font-size: .88rem; }

    .nav-pills .nav-link { border-radius: 8px; font-size: .85rem; }
    .nav-pills .nav-link.active { background: #4e73df; }
</style>
{% endblock %}

{% block content %}
{% set action = activite.action|lower %}
{% if action not in ['create','update','delete','view','login'] %}{% set action = 'other' %}{% endif %}

{% if action == 'create' %}{% set icon = 'fa-plus-circle' %}
{% elif action == 'update' %}{% set icon = 'fa-edit' %}
{% elif action == 'delete' %}{% set icon = 'fa-trash-alt' %}
{% elif action == 'view' %}{% set icon = 'fa-eye' %}
{% elif action == 'login' %}{% set icon = 'fa-sign-in-alt' %}
{% else %}{% set icon = 'fa-circle' %}{% endif %}

<div class="container-fluid">

    <!-- Breadcrumb / retour -->
    <div class="d-flex align-items-center gap-2 mb-3">
        <a href="{{ url_for('liste_activites') }}" class="btn btn-sm btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i>Retour
        </a>
        <span class="text-muted small">/ Activité #{{ activite.id }}</span>
    </div>

    <div class="card detail-card shadow-sm">
        <!-- Header coloré selon l'action -->
        <div class="card-header py-3 px-4 d-flex justify-content-between align-items-center"
             style="border-radius:14px 14px 0 0; background:#fff; border-bottom:1px solid #e3e6f0">
            <div class="d-flex align-items-center gap-3">
                <div class="rounded-circle d-flex align-items-center justify-content-center"
                     style="width:44px;height:44px;
                     background:{%if action=='create'%}#d1f5e8{%elif action=='update'%}#dce8ff{%elif action=='delete'%}#fde8e6{%elif action=='view'%}#d6f4f8{%elif action=='login'%}#fef3cd{%else%}#f0f0f0{%endif%}">
                    <i class="fas {{ icon }}"
                       style="color:{%if action=='create'%}#1cc88a{%elif action=='update'%}#4e73df{%elif action=='delete'%}#e74a3b{%elif action=='view'%}#36b9cc{%elif action=='login'%}#f6c23e{%else%}#858796{%endif%}"></i>
                </div>
                <div>
                    <div class="fw-bold text-dark" style="font-size:1rem">{{ activite.module|title }}</div>
                    <div class="text-muted small">Activité #{{ activite.id }}</div>
                </div>
            </div>
            <span class="action-pill {{ action }}">
                <i class="fas {{ icon }}"></i>{{ activite.action|upper }}
            </span>
        </div>

        <div class="card-body p-4">

            <!-- Méta-données -->
            <div class="meta-grid">
                <div class="meta-item">
                    <div class="label"><i class="fas fa-user me-1"></i>Utilisateur</div>
                    <div class="value">{{ activite.username }}</div>
                </div>
                <div class="meta-item">
                    <div class="label"><i class="fas fa-calendar me-1"></i>Date</div>
                    <div class="value">{{ activite.timestamp.strftime('%d/%m/%Y') }}</div>
                </div>
                <div class="meta-item">
                    <div class="label"><i class="fas fa-clock me-1"></i>Heure</div>
                    <div class="value">{{ activite.timestamp.strftime('%H:%M:%S') }}</div>
                </div>
                <div class="meta-item">
                    <div class="label"><i class="fas fa-layer-group me-1"></i>Module</div>
                    <div class="value">{{ activite.module|title }}</div>
                </div>
                <div class="meta-item">
                    <div class="label"><i class="fas fa-bolt me-1"></i>Action</div>
                    <div class="value">{{ activite.action|title }}</div>
                </div>
            </div>

            <!-- Description -->
            <div class="mb-3">
                <div class="small fw-semibold text-muted mb-1 text-uppercase" style="letter-spacing:.5px">Description</div>
                <div class="desc-box">{{ activite.description }}</div>
            </div>

            <!-- Détails JSON -->
            {% if activite.details %}
            <div class="mb-2">
                <div class="small fw-semibold text-muted mb-2 text-uppercase" style="letter-spacing:.5px">Détails</div>

                <!-- Onglets -->
                <ul class="nav nav-pills mb-3" id="detailTabs">
                    <li class="nav-item">
                        <button class="nav-link active" data-tab="table">
                            <i class="fas fa-table me-1"></i>Tableau
                        </button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" data-tab="raw">
                            <i class="fas fa-code me-1"></i>JSON brut
                        </button>
                    </li>
                </ul>

                <!-- Vue tableau -->
                <div id="tab-table">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover details-table" id="detailsTable">
                            <thead class="table-light">
                                <tr><th>Champ</th><th>Valeur</th></tr>
                            </thead>
                            <tbody id="detailsTableBody">
                                <tr><td colspan="2" class="text-center text-muted py-3">
                                    <div class="spinner-border spinner-border-sm me-2"></div>Chargement…
                                </td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Vue JSON -->
                <div id="tab-raw" class="d-none">
                    <div class="json-box" id="jsonRaw"></div>
                </div>
            </div>
            {% endif %}

        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
/* ── Onglets ── */
document.querySelectorAll('[data-tab]').forEach(btn => {
    btn.addEventListener('click', function () {
        document.querySelectorAll('[data-tab]').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        const tab = this.dataset.tab;
        document.getElementById('tab-table').classList.toggle('d-none', tab !== 'table');
        document.getElementById('tab-raw').classList.toggle('d-none', tab !== 'raw');
    });
});

/* ── Rendu des détails JSON ── */
{% if activite.details %}
document.addEventListener('DOMContentLoaded', function () {
    let raw = {{ activite.details|tojson }};
    let obj = {};

    try {
        obj = typeof raw === 'string' ? JSON.parse(raw) : raw;
    } catch(e) {
        obj = { raw_data: String(raw) };
    }

    /* Tableau */
    const tbody = document.getElementById('detailsTableBody');
    const rows  = flattenObject(obj);
    if (rows.length === 0) {
        tbody.innerHTML = '<tr><td colspan="2" class="text-muted text-center">Aucun détail disponible</td></tr>';
    } else {
        tbody.innerHTML = rows.map(([k, v]) =>
            `<tr><td class="text-muted fw-semibold" style="width:40%">${escHtml(k)}</td>
                 <td>${escHtml(String(v))}</td></tr>`
        ).join('');
    }

    /* JSON coloré */
    document.getElementById('jsonRaw').innerHTML = syntaxHighlight(JSON.stringify(obj, null, 2));
});

function flattenObject(obj, prefix) {
    prefix = prefix || '';
    const result = [];
    for (const [k, v] of Object.entries(obj)) {
        const key = prefix ? prefix + '.' + k : k;
        if (v !== null && typeof v === 'object' && !Array.isArray(v)) {
            result.push(...flattenObject(v, key));
        } else {
            result.push([key, Array.isArray(v) ? v.join(', ') : v]);
        }
    }
    return result;
}

function escHtml(s) {
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

function syntaxHighlight(json) {
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (m) {
        let cls = 'json-num';
        if (/^"/.test(m)) cls = /:$/.test(m) ? 'json-key' : 'json-str';
        else if (/true|false/.test(m)) cls = 'json-bool';
        else if (/null/.test(m)) cls = 'json-null';
        return `<span class="${cls}">${escHtml(m)}</span>`;
    });
}
{% endif %}
</script>
{% endblock %}