{% extends "base.html" %}

{% block content %}
<div class="dashboard">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
        <h2 style="margin: 0;">Evaluation History</h2>
        {% if runs and session.get('authenticated') %}
        <button onclick="clearAllHistory()" class="btn" style="background: #dc2626; color: white; font-size: 0.85rem; padding: 0.5rem 1rem;">Clear All</button>
        {% endif %}
    </div>

    {% if runs %}
    <table class="history-table">
        <thead>
            <tr>
                <th>Run ID</th>
                <th style="max-width: 200px;">Model</th>
                <th>Time</th>
                <th>Score</th>
                <th>Tests</th>
                <th>Summary</th>
                {% if session.get('authenticated') %}
                <th style="width: 50px;"></th>
                {% endif %}
            </tr>
        </thead>
        <tbody>
            {% for run in runs %}
            <tr class="history-row" onclick="window.location.href='/history/{{ run.run_id }}'" style="cursor: pointer;">
                <td class="col-id">
                    <span class="run-id">#{{ run.run_id }}</span>
                </td>
                <td class="col-model" style="max-width: 200px; word-break: break-all;">{{ run.model_name or 'default' }}</td>
                <td class="col-time" style="font-size: 0.85rem;">
                    {% if run.started_at %}
                        {{ run.started_at[:19] }}
                        {% if run.completed_at %}
                            <br><span class="time-arrow time-completed">→ {{ run.completed_at[:19] }}</span>
                        {% else %}
                            <br><span class="time-arrow time-incomplete">→ Incomplete</span>
                        {% endif %}
                    {% else %}
                        -
                    {% endif %}
                </td>
                <td class="col-score">
                    {% if run.overall_score is not none %}
                    <span class="score-badge
                        {% if run.overall_score >= 0.8 %}score-high
                        {% elif run.overall_score >= 0.6 %}score-medium
                        {% else %}score-low
                        {% endif %}">
                        {{ "%.1f"|format(run.overall_score * 100) }}%
                    </span>
                    {% else %}
                    -
                    {% endif %}
                </td>
                <td class="col-tests" style="text-align: center;">
                    {% if run.test_count %}
                    <span class="test-count">
                        <span class="test-passed">{{ run.passed_count or 0 }}</span>/<span class="test-total">{{ run.test_count }}</span>
                    </span>
                    {% else %}
                    -
                    {% endif %}
                </td>
                <td class="col-summary" style="max-width: 300px;">
                    {% if run.notes %}
                    <span title="{{ run.notes[:200] }}" style="cursor: help; margin-right: 0.3rem; font-size: 0.85rem;">&#128221;</span>
                    {% endif %}
                    {% if run.summary %}
                    <span title="{{ run.summary }}" style="cursor: help;">
                        {{ run.summary[:50] }}{% if run.summary|length > 50 %}...{% endif %}
                    </span>
                    {% else %}
                    -
                    {% endif %}
                </td>
                {% if session.get('authenticated') %}
                <td class="col-delete" style="text-align: center;">
                    <button class="delete-btn" onclick="event.stopPropagation(); deleteRun('{{ run.run_id }}')" title="Delete run">
                        &times;
                    </button>
                </td>
                {% endif %}
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- Pagination -->
    {% if total_pages > 1 %}
    <div class="pagination">
        {% if page > 1 %}
        <a href="?page={{ page - 1 }}" class="page-btn">&lt; Prev</a>
        {% else %}
        <span class="page-btn disabled">&lt; Prev</span>
        {% endif %}
        
        <span class="page-info">Page {{ page }} of {{ total_pages }}</span>
        
        {% if page < total_pages %}
        <a href="?page={{ page + 1 }}" class="page-btn">Next &gt;</a>
        {% else %}
        <span class="page-btn disabled">Next &gt;</span>
        {% endif %}
    </div>
    {% endif %}
    
    <div class="total-info">Total: {{ total_count }} runs</div>
    
    {% else %}
    <div style="text-align: center; padding: 3rem; color: #666;">
        <h3>No evaluation runs yet</h3>
        <p>Start your first evaluation to see results here.</p>
        <a href="/evaluate" class="btn btn-primary" style="margin-top: 1rem; display: inline-block;">Run Evaluation</a>
    </div>
    {% endif %}
</div>

<style>
.history-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.history-table th {
    background: #f8f9fa;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 2px solid #e5e7eb;
}

.history-table td {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    color: #4b5563;
}

.history-row:hover {
    background: #f3f4f6;
}

.score-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.score-high {
    background: #d1fae5;
    color: #059669;
}

.score-medium {
    background: #fef3c7;
    color: #d97706;
}

.score-low {
    background: #fee2e2;
    color: #dc2626;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem;
}

.page-btn {
    padding: 0.5rem 1rem;
    background: #667eea;
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s;
}

.page-btn:hover {
    background: #5a67d8;
}

.page-btn.disabled {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
}

.page-info {
    color: #666;
    font-size: 0.9rem;
}

.total-info {
    text-align: center;
    color: #9ca3af;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

/* Delete button */
.delete-btn {
    background: none;
    border: 1px solid transparent;
    color: #9ca3af;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    line-height: 1;
    transition: all 0.2s;
}

.delete-btn:hover {
    color: #dc2626;
    background: #fee2e2;
    border-color: #fecaca;
}

/* Dark mode overrides for history table */
html.dark .history-table {
    background: #1e293b;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

html.dark .history-table th {
    background: #1e293b;
    color: #e2e8f0;
    border-bottom-color: #334155;
}

html.dark .history-table td {
    color: #cbd5e1;
    border-bottom-color: #334155;
}

html.dark .history-row:hover {
    background: #334155;
}

html.dark .score-high {
    background: #065f46;
    color: #6ee7b7;
}

html.dark .score-medium {
    background: #92400e;
    color: #fcd34d;
}

html.dark .score-low {
    background: #991b1b;
    color: #fca5a5;
}

html.dark .page-btn.disabled {
    background: #334155;
    color: #64748b;
}

html.dark .delete-btn:hover {
    background: #991b1b;
    border-color: #7f1d1d;
}

html.dark .pagination {
    background: transparent;
}

html.dark .page-info {
    color: #94a3b8;
}

html.dark .total-info {
    color: #64748b;
}

html.dark .time-arrow {
    color: #64748b !important;
}

html.dark .time-incomplete {
    color: #fbbf24 !important;
}

html.dark .test-passed {
    color: #6ee7b7;
}

html.dark .test-total {
    color: #94a3b8;
}

html.dark .delete-btn {
    color: #64748b;
}

html.dark .col-score span {
    color: inherit;
}

html.dark .run-id {
    color: #818cf8;
}

html.dark .col-summary span {
    color: #94a3b8;
}

/* Mobile card layout dark mode */
html.dark .history-table tr {
    border-bottom-color: #334155;
}

html.dark .history-table .col-time {
    color: #64748b !important;
}

html.dark .history-table .col-tests {
    color: #94a3b8;
}

html.dark .col-summary {
    color: #94a3b8;
}

/* Mobile: card layout */
@media (max-width: 768px) {
    .history-table thead {
        display: none;
    }

    .history-table, .history-table tbody {
        display: block;
    }

    .history-table tr {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        grid-template-rows: auto auto;
        gap: 0.15rem 0.75rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #e5e7eb;
        align-items: center;
    }

    .history-table td {
        padding: 0;
        border: none;
    }

    /* Row 1: RunID | Model | Score | (delete) */
    .col-id    { grid-row: 1; grid-column: 1; }
    .col-model {
        grid-row: 1; grid-column: 2;
        font-size: 0.85rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: none !important;
    }
    .col-score { grid-row: 1; grid-column: 3; text-align: right; }

    /* Row 2: Time | Tests */
    .col-time {
        grid-row: 2; grid-column: 1 / 3;
        font-size: 0.75rem !important; color: #9ca3af;
    }
    .col-time br, .col-time span { display: none; }
    .col-tests {
        grid-row: 2; grid-column: 3;
        font-size: 0.8rem; text-align: right !important;
    }

    /* Hide summary on mobile */
    .col-summary { display: none; }

    /* Delete button spans both rows */
    .col-delete {
        grid-row: 1 / 3; grid-column: 4;
        display: flex; align-items: center;
    }
}
</style>

<script>
async function clearAllHistory() {
    if (!await showConfirm({title: 'Clear All History', message: 'Delete all {{ total_count }} evaluation runs? This cannot be undone.', confirmText: 'Clear All'})) return;
    fetch('/api/history/clear', { method: 'POST' })
        .then(r => r.json())
        .then(data => {
            if (data.success) location.reload();
            else alert('Failed: ' + (data.error || 'Unknown error'));
        })
        .catch(err => alert('Error: ' + err));
}

async function deleteRun(runId) {
    if (!await showConfirm({title: 'Delete Run', message: 'Delete this evaluation run? This cannot be undone.', confirmText: 'Delete'})) return;
    fetch('/api/history/' + runId, { method: 'DELETE' })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Failed to delete: ' + (data.error || 'Unknown error'));
            }
        })
        .catch(err => alert('Error: ' + err));
}
</script>
{% endblock %}