{% extends "base.html" %}

{% block title %}Video QC Results{% endblock %}

{% block extra_head %}
<style>
    .score-display { font-size: 2.5rem; font-weight: bold; }
    .report-iframe { width: 100%; min-height: 700px; border: 1px solid #dee2e6; border-radius: 4px; }
    .batch-summary-card { border-radius: 8px; }
    .batch-stat { font-size: 1.5rem; font-weight: bold; }
    .file-result-card { margin-bottom: 0.75rem; border-left: 4px solid #dee2e6; }
    .file-result-card.status-passed { border-left-color: #198754; }
    .file-result-card.status-warning { border-left-color: #ffc107; }
    .file-result-card.status-failed, .file-result-card.status-error { border-left-color: #dc3545; }
</style>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="mb-0"><i class="bi bi-camera-video me-2"></i>Video QC Results</h2>
        <a href="{{ url_for('video_qc.upload') }}" class="btn btn-outline-primary">
            <i class="bi bi-arrow-left me-1"></i>Run Another
        </a>
    </div>

    {% if error %}
    <div class="alert alert-danger">{{ error }}</div>

    {% elif is_batch is defined and is_batch %}
    {# === BATCH RESULTS === #}
    {% if reports %}
    {% set total = reports|length %}
    {% set ns = namespace(passed=0, failed=0, warnings=0, score_sum=0, score_count=0) %}
    {% for r in reports %}
        {% if r.status == 'passed' %}{% set ns.passed = ns.passed + 1 %}{% endif %}
        {% if r.status in ['failed', 'error'] %}{% set ns.failed = ns.failed + 1 %}{% endif %}
        {% if r.status == 'warning' %}{% set ns.warnings = ns.warnings + 1 %}{% endif %}
        {% if r.score is not none %}{% set ns.score_sum = ns.score_sum + r.score %}{% set ns.score_count = ns.score_count + 1 %}{% endif %}
    {% endfor %}
    {% set avg_score = (ns.score_sum / ns.score_count)|round(1) if ns.score_count > 0 else 0 %}

    <div class="row mt-4">
        <div class="col-12">
            <div class="alert alert-{{ 'success' if progress.status == 'completed' else 'info' }}">
                <i class="bi bi-{{ 'check-circle' if progress.status == 'completed' else 'hourglass-split' }} me-2"></i>
                {% if progress.status == 'completed' %}
                    Batch Video QC completed: {{ total }} videos processed
                {% else %}
                    Batch in progress — {{ reports|length }} video(s) completed so far
                {% endif %}
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-12">
            <div class="card batch-summary-card shadow-sm">
                <div class="card-body">
                    <h4 class="card-title mb-3">
                        <i class="bi bi-bar-chart me-2"></i>Batch Summary
                    </h4>
                    <div class="row text-center">
                        <div class="col-md-2">
                            <div class="mb-1"><span class="batch-stat text-primary">{{ total }}</span></div>
                            <div class="text-muted small">Total Videos</div>
                        </div>
                        <div class="col-md-2">
                            <div class="mb-1"><span class="batch-stat text-success">{{ ns.passed }}</span></div>
                            <div class="text-muted small">Passed</div>
                        </div>
                        <div class="col-md-2">
                            <div class="mb-1"><span class="batch-stat text-danger">{{ ns.failed }}</span></div>
                            <div class="text-muted small">Failed</div>
                        </div>
                        <div class="col-md-2">
                            <div class="mb-1"><span class="batch-stat text-warning">{{ ns.warnings }}</span></div>
                            <div class="text-muted small">Warnings</div>
                        </div>
                        <div class="col-md-2">
                            <div class="mb-1">
                                <span class="batch-stat {% if avg_score >= 90 %}text-success{% elif avg_score >= 70 %}text-warning{% else %}text-danger{% endif %}">
                                    {{ avg_score }}
                                </span>
                            </div>
                            <div class="text-muted small">Avg Score</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% if batch_id %}
    <div class="d-flex gap-2 mb-4">
        <a href="{{ url_for('video_qc.download_batch', batch_id=batch_id) }}"
           class="btn btn-outline-secondary">
            <i class="bi bi-file-zip me-1"></i>Download All (ZIP)
        </a>
    </div>
    {% endif %}

    <h4 class="mb-3"><i class="bi bi-files me-2"></i>Per-Video Results</h4>

    {% for report in reports %}
    <div class="card file-result-card status-{{ report.status }}">
        <div class="card-body py-2 d-flex justify-content-between align-items-center">
            <div>
                <i class="bi bi-file-earmark-play me-2"></i>
                <strong>{{ report.filename }}</strong>
            </div>
            <div class="d-flex align-items-center gap-2">
                {% if report.score is not none %}
                <span class="fw-bold {% if report.status == 'passed' %}text-success{% elif report.status == 'warning' %}text-warning{% else %}text-danger{% endif %}">
                    {{ report.score|round(1) }}
                </span>
                {% endif %}
                <span class="badge
                    {% if report.status == 'passed' %}bg-success
                    {% elif report.status == 'warning' %}bg-warning text-dark
                    {% else %}bg-danger{% endif %}">
                    {{ report.status|upper }}
                </span>
                <a href="{{ url_for('video_qc.view_report', report_id=report.id) }}"
                   class="btn btn-sm btn-outline-primary" title="View">
                    <i class="bi bi-eye"></i>
                </a>
                <a href="{{ url_for('video_qc.download_report', report_id=report.id) }}"
                   class="btn btn-sm btn-outline-secondary" title="Download">
                    <i class="bi bi-download"></i>
                </a>
            </div>
        </div>
    </div>
    {% endfor %}
    {% endif %}

    {# Batch progress (still running OR no reports yet) #}
    {% if progress.status != 'completed' or not reports %}
    <div class="card mt-4">
        <div class="card-body">
            <div class="d-flex justify-content-between mb-2">
                <span id="progressMessage" class="text-muted">{{ progress.message or 'Starting...' }}</span>
                <span id="progressPercent">{{ progress.percent|round|int if progress.percent else 0 }}%</span>
            </div>
            <div class="progress" style="height: 24px;">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning"
                     id="progressBar" style="width: {{ progress.percent|round|int if progress.percent else 0 }}%"></div>
            </div>
        </div>
    </div>
    {% endif %}

    {% elif report and report.score is not none %}
    {# === SINGLE FILE COMPLETED === #}
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <div class="score-display text-{{ 'success' if report.status == 'passed' else 'warning' if report.status == 'warning' else 'danger' }}">
                        {{ '%.0f' % report.score }}
                    </div>
                    <span class="badge bg-{{ 'success' if report.status == 'passed' else 'warning' if report.status == 'warning' else 'danger' }} fs-6">
                        {{ report.status | upper }}
                    </span>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="card">
                <div class="card-body">
                    <table class="table table-borderless mb-0">
                        <tr><th style="width:120px">Filename</th><td>{{ report.filename }}</td></tr>
                        <tr><th>Job Number</th><td>{{ report.job_number or '-' }}</td></tr>
                        <tr><th>Date</th><td>{{ report.created_at.strftime('%Y-%m-%d %H:%M:%S') if report.created_at }}</td></tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {% if html_content %}
    <div class="card">
        <div class="card-header"><i class="bi bi-file-earmark-code me-2"></i>Detailed Report</div>
        <div class="card-body p-0">
            <iframe srcdoc="{{ html_content | e }}" class="report-iframe"></iframe>
        </div>
    </div>
    {% endif %}

    {% else %}
    {# === SINGLE FILE IN PROGRESS === #}
    <div class="card">
        <div class="card-body">
            <div class="d-flex justify-content-between mb-2">
                <span id="progressMessage" class="text-muted">Starting...</span>
                <span id="progressPercent">0%</span>
            </div>
            <div class="progress" style="height: 24px;">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning"
                     id="progressBar" style="width: 0%"></div>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_scripts %}
{% if not error and (not report or report.score is none) and (progress is not defined or progress.status != 'completed') %}
<script>
    const sessionId = '{{ session_id }}';
    const isBatch = {{ 'true' if is_batch is defined and is_batch else 'false' }};

    function startPolling() {
        const interval = setInterval(async () => {
            try {
                const resp = await fetch(`${BASE_URL}/video-qc/api/progress/${sessionId}`);
                const data = await resp.json();

                const pct = Math.round(data.percent || 0);
                const bar = document.getElementById('progressBar');
                const pctEl = document.getElementById('progressPercent');
                const msgEl = document.getElementById('progressMessage');
                if (bar) bar.style.width = pct + '%';
                if (pctEl) pctEl.textContent = pct + '%';
                if (msgEl) msgEl.textContent = data.message || 'Processing...';

                if (data.status === 'completed') {
                    clearInterval(interval);
                    if (bar) {
                        bar.classList.remove('progress-bar-animated');
                        bar.classList.replace('bg-warning', 'bg-success');
                    }
                    if (msgEl) msgEl.textContent = 'Complete! Loading results...';
                    // Margin lets any tail commits settle before the reload
                    // queries the report table on a (possibly different) worker.
                    setTimeout(() => location.reload(), 2000);
                }

                if (data.status === 'failed') {
                    clearInterval(interval);
                    if (bar) bar.classList.replace('bg-warning', 'bg-danger');
                    if (msgEl) msgEl.textContent = data.message || 'Failed';
                }
            } catch (e) {
                console.error('Poll error:', e);
            }
        }, 1500);
    }

    startPolling();
</script>
{% endif %}
{% endblock %}