{% extends "v3/base.html" %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Historique</h1>
</div>

<p class="text-muted text-sm" style="margin-bottom: 1rem;" id="history-hint"></p>

<table id="history-table">
    <thead>
        <tr>
            <th style="width:50px">#</th>
            <th style="width:130px">Date</th>
            <th style="width:110px">Mode</th>
            <th>Entree</th>
            <th>Sortie</th>
            <th style="width:70px">Duree</th>
            <th style="width:100px">Actions</th>
        </tr>
    </thead>
    <tbody id="history-body">
    </tbody>
</table>
{% endblock %}

{% block scripts %}
<script>
let historyEntries = [];
let agentMap = {};  // {id: name} pour résoudre mode → nom affiché

async function loadHistory() {
    // Afficher le raccourci historique
    try {
        const sysRes = await fetch('/api/hotkeys/system');
        const sysData = await sysRes.json();
        const histHk = (sysData.hotkeys || []).find(h => h.id === 'history');
        if (histHk && histHk.key) {
            document.getElementById('history-hint').innerHTML =
                'Raccourci <span class="hotkey-badge">' + histHk.label + '</span> pour coller le dernier resultat.';
        }
    } catch (e) {}

    try {
        // Charger historique + agents en parallele
        const [histRes, agentsRes] = await Promise.all([
            fetch('/api/history'),
            fetch('/api/agents')
        ]);
        historyEntries = await histRes.json();

        // Construire le map id → name
        agentMap = {};
        try {
            const agents = await agentsRes.json();
            (Array.isArray(agents) ? agents : []).forEach(a => { agentMap[a.id] = a.name; });
        } catch (e) {}

        renderHistory();
    } catch (e) {
        console.error('Erreur chargement historique:', e);
        document.getElementById('history-body').innerHTML =
            `<tr><td colspan="7" class="text-center text-muted">Erreur de chargement</td></tr>`;
    }
}

function renderHistory() {
    const tbody = document.getElementById('history-body');

    if (historyEntries.length === 0) {
        tbody.innerHTML = `<tr><td colspan="7" class="text-center text-muted">Aucun historique</td></tr>`;
        return;
    }

    tbody.innerHTML = historyEntries.map((h, idx) => {
        const date = new Date(h.timestamp);
        const dateStr = date.toLocaleDateString('fr-FR', {
            day: '2-digit',
            month: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
        });
        const durationSec = (h.duration_ms / 1000).toFixed(1);
        const isRecent = idx < 3;

        return `
        <tr class="${isRecent ? 'row-highlight' : ''}">
            <td>${isRecent ? `<span class="hotkey-badge hotkey-small">${idx + 1}</span>` : idx + 1}</td>
            <td class="text-muted text-sm">${dateStr}</td>
            <td><span class="badge ${getBadgeClass(h.mode)}">${agentMap[h.mode] || h.mode}</span></td>
            <td class="truncate" title="${escapeHtml(h.input_text)}">${escapeHtml(h.input_text)}</td>
            <td class="truncate" title="${escapeHtml(h.output_text)}">${escapeHtml(h.output_text)}</td>
            <td class="text-muted text-sm">${durationSec}s</td>
            <td class="actions">
                <button class="btn btn-ghost btn-sm" onclick="copyEntry('${h.id}')" title="Copier la sortie">Copier</button>
                <button class="btn btn-ghost btn-sm text-danger" onclick="deleteEntry('${h.id}')" title="Supprimer">Suppr.</button>
            </td>
        </tr>`;
    }).join('');
}

function getBadgeClass(mode) {
    const classes = {
        'transcription': 'badge-success',
        'traduction': 'badge-accent',
        'ghostwriter': 'badge-primary',
        'agent': 'badge-warning',
        'correction': 'badge-muted',
        'email': 'badge-accent'
    };
    return classes[mode] || 'badge-muted';
}

function escapeHtml(text) {
    if (!text) return '';
    return text
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/\n/g, ' ');
}

async function copyEntry(id) {
    const entry = historyEntries.find(h => h.id === id);
    if (entry && entry.output_text) {
        try {
            await navigator.clipboard.writeText(entry.output_text);
            // Feedback visuel optionnel
            const btn = event.target;
            const original = btn.textContent;
            btn.textContent = 'OK!';
            setTimeout(() => btn.textContent = original, 1000);
        } catch (e) {
            console.error('Erreur copie:', e);
        }
    }
}

async function deleteEntry(id) {
    if (!confirm('Supprimer cette entree de l\'historique ?')) return;
    try {
        const res = await apiFetch(`/api/history/${id}`, {method: 'DELETE'});
        const data = await res.json();
        if (data.ok) {
            loadHistory();
        } else {
            alert(data.error || 'Erreur lors de la suppression');
        }
    } catch (e) {
        console.error('Erreur suppression:', e);
    }
}

loadHistory();
</script>
{% endblock %}