{% extends "base.html" %}

{% block content %}
<div class="table-container">
    <h2>Ihre Aufträge</h2>
    <table id="jobs-table">
        <thead>
            <tr>
                <th>Dateiname</th>
                <th>Status</th>
                <th>Erstellt am</th>
                <th>Ergebnis</th>
                <th>Aktionen</th>
            </tr>
        </thead>
        <tbody>
            {% for job in jobs %}
            <tr id="job-row-{{ job.id }}">
                <td>{{ job.filename }}</td>
                <td id="status-{{ job.id }}" class="job-status">{{ job.status }}</td>
                <td>{{ job.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                <td id="result-{{ job.id }}">
                    {% if job.result_filename and 'Failed' not in job.status %}
                        <a href="{{ url_for('auth.download_result', job_id=job.id) }}" class="dl-btn">
                            🎯 Gefiltert
                        </a>
                        {% if job.result_filename_raw %}
                        &nbsp;
                        <a href="{{ url_for('auth.download_result_raw', job_id=job.id) }}" class="dl-btn dl-btn-raw">
                            📋 Alle
                        </a>
                        {% endif %}
                    {% elif 'Failed' in job.status %}
                        <span class="status-failed">❌ {{ job.result_filename or 'Fehler' }}</span>
                    {% else %}
                        <span class="status-pending">⏳ Noch nicht verfügbar</span>
                    {% endif %}
                </td>
                <td>
                    <form action="{{ url_for('auth.delete_job', job_id=job.id) }}" method="POST" style="display:inline;">
                        <button type="submit" class="delete-btn">🗑️ Löschen</button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<style>
.job-status    { font-weight: bold; }
.status-failed  { color: #e74c3c; font-weight: bold; }
.status-pending { color: #888; }
.status-completed { color: #27ae60; }

.dl-btn {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: bold;
    background: #27ae60;
    color: #fff;
    margin: 2px 1px;
    transition: background 0.2s;
}
.dl-btn:hover       { background: #1e8449; }
.dl-btn-raw         { background: #2980b9; }
.dl-btn-raw:hover   { background: #1a5e8a; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.job-status').forEach(function (cell) {
        const jobId  = cell.id.split('-')[1];
        const status = cell.textContent.trim();
        if (!status.includes('✅') && !status.includes('Failed')) {
            pollJob(jobId);
        }
    });
});

function renderResult(resultCell, data) {
    const hasFailed   = data.status.includes('Failed');
    const hasFiltered = data.result_filename && !hasFailed;
    const hasRaw      = data.result_filename_raw && !hasFailed;

    if (hasFiltered) {
        let html = `<a href="/download/${data.id}" class="dl-btn">🎯 Gefiltert</a>`;
        if (hasRaw) {
            html += ` <a href="/download_raw/${data.id}" class="dl-btn dl-btn-raw">📋 Alle</a>`;
        }
        resultCell.innerHTML = html;
    } else if (hasFailed) {
        resultCell.innerHTML = `<span class="status-failed">❌ ${data.result_filename || 'Fehler'}</span>`;
    } else {
        resultCell.innerHTML = `<span class="status-pending">⏳ Noch nicht verfügbar</span>`;
    }
}

function pollJob(jobId) {
    fetch(`/job_status/${jobId}`)
        .then(r => r.json())
        .then(data => {
            const statusCell = document.getElementById(`status-${jobId}`);
            const resultCell = document.getElementById(`result-${jobId}`);

            statusCell.textContent = data.status;
            renderResult(resultCell, data);

            // Weiter pollen wenn noch nicht fertig
            const done = data.status.includes('✅') || data.status.includes('Failed');
            if (!done) {
                setTimeout(() => pollJob(jobId), 5000);
            }
        })
        .catch(() => setTimeout(() => pollJob(jobId), 10000));
}
</script>
{% endblock %}