{% extends "base.html" %}

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

{% block extra_head %}
<style>
    .file-list {
        max-height: 240px;
        overflow-y: auto;
    }
    .file-list-item {
        padding: 0.4rem 0.75rem;
        border-bottom: 1px solid #eee;
        font-size: 0.9rem;
    }
    .file-list-item:last-child { border-bottom: none; }
</style>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h2 class="mb-0"><i class="bi bi-gear me-2"></i>Configure Video QC</h2>
            <p class="text-muted mb-0">Review settings and start execution</p>
        </div>
        <a href="{{ url_for('video_qc.upload') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>Back
        </a>
    </div>

    {# SRT pairing pre-flight summary — hidden until JS confirms at least one SRT was uploaded #}
    <div id="srtPairingSummary" class="card mt-3" style="display: none;">
        <div class="card-header"><i class="bi bi-file-earmark-text me-2"></i>SRT pairing summary</div>
        <div class="card-body">
            <ul id="srtPairingList" class="mb-2"></ul>
            <details id="srtUnpairedWrap" style="display: none;">
                <summary class="text-muted">Unpaired SRT files (will be ignored)</summary>
                <ul id="srtUnpairedList" class="mt-2 mb-0"></ul>
            </details>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header"><i class="bi bi-sliders me-2"></i>QC Settings</div>
                <div class="card-body">
                    <form id="configForm">
                        <div class="mb-3">
                            <label class="form-label">Checks</label>
                            <ul class="list-unstyled ms-2">
                                <li><i class="bi bi-check-circle text-success me-2"></i>Visual Quality (language consistency + text legibility)</li>
                                <li><i class="bi bi-check-circle text-success me-2"></i>Censorship (body coverage compliance)</li>
                            </ul>
                        </div>

                        <div class="mb-3">
                            <label for="llmProvider" class="form-label">AI Provider</label>
                            <select class="form-select" id="llmProvider">
                                <option value="google" selected>Google Gemini (Direct Video)</option>
                                <option value="openai">OpenAI GPT-4o (Frame Grid)</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="jobNumber" class="form-label">Job Number (Optional)</label>
                            <input type="text" class="form-control" id="jobNumber"
                                   placeholder="Enter job/campaign number">
                        </div>

                        <div class="mb-3">
                            <label for="campaignId" class="form-label">Campaign Presentation (Optional)</label>
                            <select class="form-select" id="campaignId">
                                <option value="">-- No campaign presentation --</option>
                            </select>
                            <div class="form-text">
                                Select a campaign to validate video against campaign guidelines.
                                <a href="{{ url_for('campaigns.index') }}" target="_blank">Manage campaigns</a>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="pricingReferenceId" class="form-label">Pricing Reference (Optional)</label>
                            <select class="form-select" id="pricingReferenceId">
                                <option value="">-- No pricing reference --</option>
                            </select>
                            <div class="form-text">
                                Select a pricing reference for currency/format validation.
                                <a href="{{ url_for('campaigns.index') }}" target="_blank">Manage pricing references</a>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-hm-primary btn-lg w-100" id="startBtn">
                            <i class="bi bi-play-circle me-2"></i>
                            {% if file_count and file_count > 1 %}
                                Start Batch Video QC ({{ file_count }} files)
                            {% else %}
                                Start Video QC
                            {% endif %}
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-camera-video me-2"></i>
                        {% if file_count and file_count > 1 %}Videos{% else %}Video File{% endif %}
                    </span>
                    {% if file_count %}
                    <span class="badge bg-primary">{{ file_count }}</span>
                    {% endif %}
                </div>
                <div class="card-body">
                    {% if filenames and file_count > 1 %}
                    <div class="file-list">
                        {% for f in filenames %}
                        <div class="file-list-item">
                            <i class="bi bi-file-earmark-play me-2"></i>{{ f }}
                        </div>
                        {% endfor %}
                    </div>
                    <small class="text-muted mt-2 d-block">Videos will process sequentially.</small>
                    {% else %}
                    <p><i class="bi bi-file-earmark-play me-2"></i><strong>{{ filename }}</strong></p>
                    <small class="text-muted">Gemini analyzes the video directly. OpenAI extracts frames at 1 per second.</small>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    const sessionId = '{{ session_id }}';
    const isBatch = {{ 'true' if file_count and file_count > 1 else 'false' }};
    const fileCount = {{ file_count or 1 }};

    // SRT pairing pre-flight: hidden unless ≥1 SRT was uploaded for this session.
    // Renders filenames via textContent (NOT innerHTML) — names come from user
    // uploads and could contain HTML; building DOM nodes prevents XSS.
    (async function loadSrtPairing() {
        try {
            const url = window.BASE_URL + '/video-qc/pairing-preview/' + encodeURIComponent(sessionId);
            const resp = await fetch(url);
            if (!resp.ok) return;
            const data = await resp.json();
            if (!data || !data.srt_count || data.srt_count === 0) return;

            const box = document.getElementById('srtPairingSummary');
            const list = document.getElementById('srtPairingList');
            box.style.display = '';

            const paired = data.pairs.filter(p => p.srt).length;
            const unpairedVideos = data.unpaired_videos.length;
            const lines = [
                '✓ ' + paired + ' video(s) paired with SRTs',
                '⚠ ' + unpairedVideos + ' video(s) without an SRT — SRT checks will skip',
                '⚠ ' + data.unpaired_srts.length + ' SRT file(s) unpaired — will be ignored',
            ];
            list.replaceChildren(...lines.map(text => {
                const li = document.createElement('li');
                li.textContent = text;
                return li;
            }));

            if (data.unpaired_srts.length > 0) {
                const wrap = document.getElementById('srtUnpairedWrap');
                const ul = document.getElementById('srtUnpairedList');
                wrap.style.display = '';
                ul.replaceChildren(...data.unpaired_srts.map(name => {
                    const li = document.createElement('li');
                    li.textContent = name;  // safe — filenames not interpreted as HTML
                    return li;
                }));
            }
        } catch (err) {
            console.warn('Could not load SRT pairing preview:', err);
        }
    })();

    (async function loadCampaigns() {
        try {
            const resp = await fetch(window.BASE_URL + '/campaigns/api/list');
            const campaigns = await resp.json();
            const select = document.getElementById('campaignId');
            campaigns.forEach(c => {
                const opt = document.createElement('option');
                opt.value = c.campaign_id;
                opt.textContent = c.campaign_id + (c.campaign_name ? ' - ' + c.campaign_name : '') +
                    (c.has_pricing ? ' (has pricing)' : '');
                select.appendChild(opt);
            });
        } catch (err) {
            console.warn('Could not load campaigns:', err);
        }
    })();

    (async function loadPricingRefs() {
        try {
            const resp = await fetch(window.BASE_URL + '/campaigns/api/pricing/list');
            const refs = await resp.json();
            const select = document.getElementById('pricingReferenceId');
            refs.forEach(r => {
                const opt = document.createElement('option');
                opt.value = r.id;
                opt.textContent = r.name + ' (' + r.entry_count + ' entries)';
                select.appendChild(opt);
            });
        } catch (err) {
            console.warn('Could not load pricing references:', err);
        }
    })();

    document.getElementById('configForm').addEventListener('submit', async (e) => {
        e.preventDefault();

        const startBtn = document.getElementById('startBtn');
        startBtn.disabled = true;
        startBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Starting...';

        const endpoint = isBatch ? '/video-qc/execute/batch' : '/video-qc/execute';
        const resultsPath = isBatch ? `/video-qc/results/batch/${sessionId}` : `/video-qc/results/${sessionId}`;

        try {
            const response = await fetch(`${BASE_URL}${endpoint}`, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    session_id: sessionId,
                    job_number: document.getElementById('jobNumber').value || null,
                    llm_provider: document.getElementById('llmProvider').value,
                    campaign_id: document.getElementById('campaignId').value || null,
                    pricing_reference_id: document.getElementById('pricingReferenceId').value
                        ? parseInt(document.getElementById('pricingReferenceId').value)
                        : null
                })
            });

            const data = await response.json();

            if (data.success) {
                window.location.href = `${BASE_URL}${resultsPath}`;
            } else {
                throw new Error(data.error || 'Failed to start');
            }
        } catch (error) {
            showNotification(`Error: ${error.message}`, 'error');
            startBtn.disabled = false;
            startBtn.innerHTML = isBatch
                ? `<i class="bi bi-play-circle me-2"></i>Start Batch Video QC (${fileCount} files)`
                : '<i class="bi bi-play-circle me-2"></i>Start Video QC';
        }
    });
</script>
{% endblock %}