{% extends "base.html" %}

{% block content %}
<div class="container-fluid studio-page">

    <div class="studio-page-header">
        <h1 class="studio-page-title">Video Studio</h1>
        <p class="studio-page-subtitle">Generate a narrated video from a brief, bullet list, source presentation, or app walkthrough.</p>
    </div>

    <div class="studio-grid">

        <!-- Configuration panel -->
        <section class="studio-panel" aria-labelledby="video-config-title">
            <div class="studio-panel-header">
                <h5 id="video-config-title">Video Configuration</h5>
            </div>
            <div class="studio-panel-body">
                {% set p = prefill or {} %}
                <form id="video-form">

                    <!-- Core -->
                    <div class="form-group">
                        <label for="title" class="font-weight-bold">Title</label>
                        <input type="text" class="form-control" id="title" placeholder="e.g. QuantumDrive Product Overview" required value="{{ p.title or '' }}">
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="video_type" class="font-weight-bold">Video Type</label>
                            <select class="form-control" id="video_type">
                                <option value="marketing" {% if p.video_type == 'marketing' %}selected{% endif %}>Marketing</option>
                                <option value="sales_demo" {% if p.video_type == 'sales_demo' %}selected{% endif %}>Sales Demo</option>
                                <option value="tutorial" {% if p.video_type == 'tutorial' %}selected{% endif %}>Tutorial</option>
                                <option value="architecture_overview" {% if p.video_type == 'architecture_overview' %}selected{% endif %}>Architecture Overview</option>
                                <option value="delivery_status" {% if p.video_type == 'delivery_status' %}selected{% endif %}>Delivery Status</option>
                            </select>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="audience" class="font-weight-bold">Audience</label>
                            <select class="form-control" id="audience">
                                <option value="technical" {% if p.audience == 'technical' %}selected{% endif %}>Technical</option>
                                <option value="executive" {% if p.audience == 'executive' %}selected{% endif %}>Executive</option>
                                <option value="sales" {% if p.audience == 'sales' %}selected{% endif %}>Sales</option>
                                <option value="end_user" {% if p.audience == 'end_user' %}selected{% endif %}>End User</option>
                            </select>
                        </div>
                    </div>

                    <!-- Content -->
                    <hr class="my-3">
                    <h6 class="text-muted mb-3">Content</h6>

                    <div class="form-group">
                        <label for="content_brief" class="font-weight-bold">Content Brief</label>
                        <textarea class="form-control" id="content_brief" rows="5" placeholder="Describe what the video should cover. Use bullet points for key messages. Include '10 slides' or '5 minutes' to set targets.">{{ p.content_brief or '' }}</textarea>
                    </div>

                    <div class="form-group">
                        <label class="font-weight-bold">Key Points <button type="button" class="btn btn-sm btn-outline-primary ml-2" id="add-bullet-btn">+ Add</button></label>
                        <div id="bullets-container"></div>
                    </div>

                    <div class="form-group">
                        <label for="source_presentation_path" class="font-weight-bold">Source Presentation <span class="text-muted font-weight-normal">(optional)</span></label>
                        <input type="text" class="form-control form-control-sm" id="source_presentation_path" placeholder="Path to presentation spec JSON">
                        <small class="form-text text-muted">Generate a presentation first, then convert it to video.</small>
                    </div>

                    <div class="form-group">
                        <label class="font-weight-bold">Source Documentation <span class="text-muted font-weight-normal">(optional)</span> <button type="button" class="btn btn-sm btn-outline-primary ml-2" id="add-doc-btn">+ Add</button></label>
                        <div id="docs-container"></div>
                    </div>

                    <div class="form-group">
                        <label for="base_url" class="font-weight-bold">Base URL <span class="text-muted font-weight-normal">(for app walkthroughs)</span></label>
                        <input type="text" class="form-control form-control-sm" id="base_url" placeholder="e.g. https://staging.app.com">
                    </div>

                    <!-- Voice & Rendering -->
                    <hr class="my-3">
                    <h6 class="text-muted mb-3">Voice &amp; Rendering</h6>

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="tts_engine" class="font-weight-bold">TTS Engine</label>
                            <select class="form-control" id="tts_engine">
                                <option value="openai" {% if p.tts_engine == 'openai' %}selected{% endif %}>OpenAI (cloud)</option>
                                <option value="piper" {% if p.tts_engine == 'piper' %}selected{% endif %}>Piper (local)</option>
                                <option value="bark" {% if p.tts_engine == 'bark' %}selected{% endif %}>Bark (local GPU)</option>
                            </select>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="voice" class="font-weight-bold">Voice</label>
                            <select class="form-control" id="voice" data-prefill="{{ p.voice or '' }}"></select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="tts_speed" class="font-weight-bold">Narration Speed: <span id="speed-value">{{ p.tts_speed or '0.9' }}</span></label>
                        <input type="range" class="custom-range" id="tts_speed" min="0.25" max="2.0" step="0.05" value="{{ p.tts_speed or '0.9' }}">
                        <div class="d-flex justify-content-between">
                            <small class="text-muted">Slow (0.25)</small>
                            <small class="text-muted">Fast (2.0)</small>
                        </div>
                    </div>

                    <div class="form-check mb-3">
                        <input type="checkbox" class="form-check-input" id="visual_only">
                        <label class="form-check-label" for="visual_only">Visual only (skip audio)</label>
                    </div>

                    <!-- Advanced Options (collapsed) -->
                    <a class="btn btn-sm btn-link text-muted p-0 mb-3" data-toggle="collapse" href="#advanced-section" role="button" aria-expanded="false" aria-controls="advanced-section">
                        Advanced Options &#9654;
                    </a>
                    <div class="collapse" id="advanced-section">
                        <div class="border rounded p-3 mb-3 bg-light">
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="theme">Theme</label>
                                    <select class="form-control form-control-sm" id="theme">
                                        <option value="dark" {% if p.theme == 'dark' %}selected{% endif %}>Dark</option>
                                        <option value="light" {% if p.theme == 'light' %}selected{% endif %}>Light</option>
                                        <option value="corporate" {% if p.theme == 'corporate' %}selected{% endif %}>Corporate</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="resolution">Resolution</label>
                                    <select class="form-control form-control-sm" id="resolution">
                                        <option value="1920x1080">1920 x 1080 (Full HD)</option>
                                        <option value="1280x720">1280 x 720 (HD)</option>
                                        <option value="3840x2160">3840 x 2160 (4K)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="company">Company</label>
                                    <input type="text" class="form-control form-control-sm" id="company" value="AlphaSix">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="author">Author</label>
                                    <input type="text" class="form-control form-control-sm" id="author" value="QuantumDrive">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="logo_path">Logo Path</label>
                                <input type="text" class="form-control form-control-sm" id="logo_path" placeholder="Path to logo PNG">
                            </div>
                            <div class="form-group">
                                <label for="legal_text">Legal Text</label>
                                <input type="text" class="form-control form-control-sm" id="legal_text" placeholder="e.g. &copy; 2026 AlphaSix, LLC. All rights reserved.">
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label for="project_id">Project ID</label>
                                    <input type="text" class="form-control form-control-sm" id="project_id" placeholder="KG scope">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="repo_id">Repository</label>
                                    <input type="text" class="form-control form-control-sm" id="repo_id" placeholder="KG scope">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="environment">Environment</label>
                                    <input type="text" class="form-control form-control-sm" id="environment" placeholder="e.g. production">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="duration_target">Duration Target (seconds)</label>
                                    <input type="number" class="form-control form-control-sm" id="duration_target" placeholder="e.g. 120" min="10" value="{{ p.duration_target or '' }}">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="output_basename">Output Filename</label>
                                    <input type="text" class="form-control form-control-sm" id="output_basename" placeholder="Custom basename">
                                </div>
                            </div>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="no_cache">
                                <label class="form-check-label" for="no_cache">Skip cache (regenerate all audio)</label>
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary btn-block" id="generate-btn">
                        Generate Video
                    </button>
                </form>
            </div>
        </section>

        <!-- Output column: main output + job history panels -->
        <div>
            <section class="studio-panel" id="output-panel" aria-labelledby="video-output-title">
                <div class="studio-panel-header">
                    <h5 id="video-output-title">Output</h5>
                </div>
                <div class="studio-panel-body">

                    <div class="studio-state studio-state-empty is-active">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                            <polygon points="23 7 16 12 23 17 23 7"></polygon>
                            <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
                        </svg>
                        <p>Configure a video on the left and click <strong>Generate Video</strong>.</p>
                    </div>

                    <div class="studio-state studio-state-running">
                        <div class="studio-running-title">
                            <span class="spinner-border spinner-border-sm text-primary" role="status"></span>
                            <span id="running-title">Generating…</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" id="progress-bar" style="width: 10%"></div>
                        </div>
                        <div class="studio-running-meta">
                            <span id="running-stage">Stage: Queued</span>
                            <span id="running-elapsed">Elapsed: 0s</span>
                        </div>
                    </div>

                    <div class="studio-state studio-state-success">
                        <div class="alert alert-success" id="success-summary"></div>
                        <div class="mb-2">
                            <small class="text-muted" id="success-meta"></small>
                        </div>
                        <div class="mb-3" id="video-player-container" style="display:none;">
                            <video id="video-player" controls class="w-100 rounded" style="max-height: 400px; background: #000;"></video>
                        </div>
                        <div class="studio-action-row">
                            <a id="download-link" href="#" class="btn btn-success">Download MP4</a>
                            <button type="button" class="btn btn-outline-secondary" id="regenerate-btn">Regenerate</button>
                        </div>
                        <div id="success-artifacts" style="display:none;">
                            <h6 class="text-muted mt-3">Artifacts</h6>
                            <ul class="list-unstyled small" id="artifact-list"></ul>
                        </div>
                        <div id="success-warnings" style="display:none;">
                            <h6 class="text-muted mt-3">Warnings</h6>
                            <ul class="list-unstyled small text-warning" id="warning-list"></ul>
                        </div>
                    </div>

                    <div class="studio-state studio-state-failed">
                        <div class="alert alert-danger" id="error-summary"></div>
                        <div id="error-warnings" style="display:none;">
                            <h6 class="text-muted">Diagnostics</h6>
                            <ul class="list-unstyled small" id="error-warning-list"></ul>
                        </div>
                        <div class="mt-3" id="error-script-info" style="display:none;">
                            <small class="text-muted">Script saved to: <code id="error-script-path"></code></small>
                        </div>
                        <button type="button" class="btn btn-outline-primary mt-2" id="retry-btn">Retry</button>
                    </div>

                </div>
            </section>

            <section class="studio-panel" aria-labelledby="video-jobs-title">
                <div class="studio-panel-header">
                    <h5 id="video-jobs-title">Recent Jobs</h5>
                    <div class="studio-panel-actions">
                        <button type="button" class="btn btn-sm btn-link text-muted p-0" id="refresh-jobs-btn">Refresh</button>
                    </div>
                </div>
                <div class="studio-panel-body p-0">
                    <div class="list-group list-group-flush" id="job-history"></div>
                    <div class="text-center text-muted py-3" id="no-jobs">No jobs yet.</div>
                </div>
            </section>
        </div>

    </div>
</div>

<script>
(function () {
    // ── Element refs ────────────────────────────────────────────────
    var form = document.getElementById('video-form');
    var outputPanel = document.getElementById('output-panel');
    var generateBtn = document.getElementById('generate-btn');
    var ttsEngineSelect = document.getElementById('tts_engine');
    var voiceSelect = document.getElementById('voice');
    var speedSlider = document.getElementById('tts_speed');
    var speedValue = document.getElementById('speed-value');
    var bulletsContainer = document.getElementById('bullets-container');
    var docsContainer = document.getElementById('docs-container');

    var currentJobId = null;
    var pollInterval = null;

    function showState(name) {
        QDStudio.showState(outputPanel, name);
    }

    // ── Voice options per engine ────────────────────────────────────
    var VOICE_OPTIONS = {
        openai: [
            { v: 'sage', l: 'Sage' }, { v: 'nova', l: 'Nova' }, { v: 'alloy', l: 'Alloy' },
            { v: 'echo', l: 'Echo' }, { v: 'fable', l: 'Fable' }, { v: 'onyx', l: 'Onyx' },
            { v: 'shimmer', l: 'Shimmer' }, { v: 'ash', l: 'Ash' }, { v: 'ballad', l: 'Ballad' },
            { v: 'coral', l: 'Coral' }
        ],
        piper: [
            { v: 'en_GB-cori-high', l: 'Cori (British, High Quality)' },
            { v: 'en_US-amy-medium', l: 'Amy (US, Medium)' },
            { v: 'en_US-ryan-medium', l: 'Ryan (US, Medium)' }
        ],
        bark: [
            { v: 'v2/en_speaker_0', l: 'Speaker 0' }, { v: 'v2/en_speaker_1', l: 'Speaker 1' },
            { v: 'v2/en_speaker_2', l: 'Speaker 2' }, { v: 'v2/en_speaker_3', l: 'Speaker 3' },
            { v: 'v2/en_speaker_6', l: 'Speaker 6' }, { v: 'v2/en_speaker_9', l: 'Speaker 9' }
        ]
    };

    function updateVoiceOptions() {
        var engine = ttsEngineSelect.value;
        var voices = VOICE_OPTIONS[engine] || [];
        voiceSelect.innerHTML = voices.map(function (v) {
            return '<option value="' + v.v + '">' + v.l + '</option>';
        }).join('');
        var desired = voiceSelect.getAttribute('data-prefill') || '';
        if (desired && voices.some(function (v) { return v.v === desired; })) {
            voiceSelect.value = desired;
        }
    }
    ttsEngineSelect.addEventListener('change', updateVoiceOptions);
    updateVoiceOptions();

    // ── Speed slider ────────────────────────────────────────────────
    speedSlider.addEventListener('input', function () {
        speedValue.textContent = this.value;
    });

    // ── Dynamic bullet editor ───────────────────────────────────────
    function addBullet(value) {
        var row = document.createElement('div');
        row.className = 'input-group input-group-sm mb-2';
        row.innerHTML =
            '<input type="text" class="form-control bullet-input" value="' + (value || '').replace(/"/g, '&quot;') + '" placeholder="Enter a key point...">' +
            '<div class="input-group-append"><button type="button" class="btn btn-outline-danger remove-row-btn">&times;</button></div>';
        row.querySelector('.remove-row-btn').addEventListener('click', function () { row.remove(); });
        bulletsContainer.appendChild(row);
    }
    document.getElementById('add-bullet-btn').addEventListener('click', function () { addBullet(''); });

    function collectBullets() {
        return Array.from(document.querySelectorAll('.bullet-input'))
            .map(function (el) { return el.value.trim(); })
            .filter(Boolean);
    }

    // ── Dynamic doc paths editor ────────────────────────────────────
    function addDocPath(value) {
        var row = document.createElement('div');
        row.className = 'input-group input-group-sm mb-2';
        row.innerHTML =
            '<input type="text" class="form-control doc-input" value="' + (value || '').replace(/"/g, '&quot;') + '" placeholder="Path to .md or .txt file">' +
            '<div class="input-group-append"><button type="button" class="btn btn-outline-danger remove-row-btn">&times;</button></div>';
        row.querySelector('.remove-row-btn').addEventListener('click', function () { row.remove(); });
        docsContainer.appendChild(row);
    }
    document.getElementById('add-doc-btn').addEventListener('click', function () { addDocPath(''); });

    function collectDocPaths() {
        return Array.from(document.querySelectorAll('.doc-input'))
            .map(function (el) { return el.value.trim(); })
            .filter(Boolean);
    }

    function resetButton() {
        generateBtn.disabled = false;
        generateBtn.textContent = 'Generate Video';
    }

    // ── Collect form data ───────────────────────────────────────────
    function collectFormData() {
        var res = document.getElementById('resolution').value.split('x');
        return {
            title: document.getElementById('title').value,
            video_type: document.getElementById('video_type').value,
            audience: document.getElementById('audience').value,
            tts_engine: ttsEngineSelect.value,
            voice: voiceSelect.value,
            tts_speed: parseFloat(speedSlider.value),
            content_brief: document.getElementById('content_brief').value,
            bullets: collectBullets(),
            base_url: document.getElementById('base_url').value,
            visual_only: document.getElementById('visual_only').checked,
            source_presentation_path: document.getElementById('source_presentation_path').value || null,
            source_doc_paths: collectDocPaths(),
            theme: document.getElementById('theme').value,
            viewport_width: parseInt(res[0]),
            viewport_height: parseInt(res[1]),
            company: document.getElementById('company').value,
            author: document.getElementById('author').value,
            logo_path: document.getElementById('logo_path').value || null,
            legal_text: document.getElementById('legal_text').value,
            project_id: document.getElementById('project_id').value || null,
            repo_id: document.getElementById('repo_id').value || null,
            environment: document.getElementById('environment').value || null,
            duration_target: parseInt(document.getElementById('duration_target').value) || null,
            output_basename: document.getElementById('output_basename').value || null,
            no_cache: document.getElementById('no_cache').checked
        };
    }

    // ── Polling ─────────────────────────────────────────────────────
    function pollJob(jobId) {
        var startTime = Date.now();
        var stages = [
            { t: 0, label: 'Queued', pct: 5 },
            { t: 3000, label: 'Voice Generation', pct: 20 },
            { t: 15000, label: 'Recording Scenes', pct: 50 },
            { t: 45000, label: 'Composing Video', pct: 80 }
        ];

        pollInterval = setInterval(async function () {
            var elapsed = Date.now() - startTime;
            document.getElementById('running-elapsed').textContent = 'Elapsed: ' + QDStudio.formatElapsed(elapsed);

            var stage = stages[0];
            for (var i = stages.length - 1; i >= 0; i--) {
                if (elapsed >= stages[i].t) { stage = stages[i]; break; }
            }
            document.getElementById('running-stage').textContent = 'Stage: ' + stage.label;
            document.getElementById('progress-bar').style.width = stage.pct + '%';

            try {
                var resp = await fetch('/api/video/status/' + jobId);
                var data = await resp.json();

                if (data.status === 'completed') {
                    clearInterval(pollInterval);
                    pollInterval = null;
                    showSuccess(data.result, jobId);
                    resetButton();
                    loadJobHistory();
                    QDStudio.toast({ message: 'Video generated.', level: 'success' });
                } else if (data.status === 'failed') {
                    clearInterval(pollInterval);
                    pollInterval = null;
                    showError(data);
                    resetButton();
                    loadJobHistory();
                    QDStudio.toast({ message: 'Video generation failed.', level: 'danger' });
                }
            } catch (e) {
                // Network hiccup, keep polling.
            }
        }, 3000);
    }

    // ── Show success ────────────────────────────────────────────────
    function showSuccess(result, jobId) {
        showState('success');
        document.getElementById('success-summary').textContent = result.summary || 'Video generated successfully.';

        var meta = [];
        if (result.scene_count) meta.push('Scenes: ' + result.scene_count);
        if (result.duration_ms) meta.push('Duration: ' + QDStudio.formatElapsed(result.duration_ms));
        if (result.video_type) meta.push('Type: ' + result.video_type);
        document.getElementById('success-meta').textContent = meta.join(' | ');

        var playerContainer = document.getElementById('video-player-container');
        var player = document.getElementById('video-player');
        if (result.video_path) {
            var filename = result.video_path.split('/').pop();
            document.getElementById('download-link').href = '/api/video/download/' + filename;
            player.src = '/api/video/preview/' + (jobId || '');
            playerContainer.style.display = 'block';
        } else {
            playerContainer.style.display = 'none';
        }

        var artifactList = document.getElementById('artifact-list');
        var artifactSection = document.getElementById('success-artifacts');
        if (result.artifacts && result.artifacts.length) {
            artifactList.innerHTML = result.artifacts.map(function (a) {
                return '<li><code>' + a.artifact_type + '</code>: ' + a.path + '</li>';
            }).join('');
            artifactSection.style.display = 'block';
        } else {
            artifactSection.style.display = 'none';
        }

        var warningList = document.getElementById('warning-list');
        var warningSection = document.getElementById('success-warnings');
        if (result.warnings && result.warnings.length) {
            warningList.innerHTML = result.warnings.map(function (w) {
                return '<li>' + w + '</li>';
            }).join('');
            warningSection.style.display = 'block';
        } else {
            warningSection.style.display = 'none';
        }

        currentJobId = jobId;
        document.getElementById('regenerate-btn').style.display = jobId ? 'inline-block' : 'none';
    }

    // ── Show error ──────────────────────────────────────────────────
    function showError(data) {
        showState('failed');
        var msg = (data.error) || (data.result && data.result.summary) || 'Video generation failed.';
        document.getElementById('error-summary').textContent = msg;

        var warnings = (data.result && data.result.warnings) || [];
        var warnSection = document.getElementById('error-warnings');
        var warnList = document.getElementById('error-warning-list');
        if (warnings.length) {
            warnList.innerHTML = warnings.map(function (w) { return '<li>' + w + '</li>'; }).join('');
            warnSection.style.display = 'block';
        } else {
            warnSection.style.display = 'none';
        }

        var scriptPath = data.result && data.result.script_path;
        var scriptInfo = document.getElementById('error-script-info');
        if (scriptPath) {
            document.getElementById('error-script-path').textContent = scriptPath;
            scriptInfo.style.display = 'block';
        } else {
            scriptInfo.style.display = 'none';
        }
    }

    // ── Job history ─────────────────────────────────────────────────
    async function loadJobHistory() {
        try {
            var resp = await fetch('/api/video/jobs');
            var data = await resp.json();
            var container = document.getElementById('job-history');
            var noJobs = document.getElementById('no-jobs');
            var jobs = (data.jobs || []).slice(0, 10);

            if (!jobs.length) {
                container.innerHTML = '';
                noJobs.style.display = 'block';
                return;
            }
            noJobs.style.display = 'none';
            container.innerHTML = jobs.map(function (job) {
                var badge = 'secondary';
                var icon = '';
                if (job.status === 'completed') { badge = 'success'; icon = '&#10003; '; }
                else if (job.status === 'failed') { badge = 'danger'; icon = '&#10007; '; }
                else if (job.status === 'running') { badge = 'primary'; icon = '&#9684; '; }
                else { badge = 'secondary'; icon = '&#9723; '; }

                var ago = job.created_at ? timeAgo(job.created_at) : '';
                return '<a href="#" class="list-group-item list-group-item-action py-2 px-3 job-item" data-job-id="' + job.job_id + '">' +
                    '<span class="badge badge-' + badge + ' mr-2">' + icon + job.status + '</span>' +
                    '<span class="small">' + escapeHtml(job.title) + '</span>' +
                    '<small class="text-muted float-right">' + ago + '</small>' +
                    '</a>';
            }).join('');

            container.querySelectorAll('.job-item').forEach(function (el) {
                el.addEventListener('click', function (e) {
                    e.preventDefault();
                    loadJobResult(this.dataset.jobId);
                });
            });
        } catch (e) {
            // Silently fail
        }
    }

    async function loadJobResult(jobId) {
        try {
            var resp = await fetch('/api/video/status/' + jobId);
            var data = await resp.json();
            if (data.status === 'completed' && data.result) {
                showSuccess(data.result, jobId);
            } else if (data.status === 'failed') {
                showError(data);
            } else if (data.status === 'running' || data.status === 'queued') {
                showState('running');
                document.getElementById('running-title').textContent = 'Generating "' + (data.title || '') + '"…';
                if (!pollInterval) pollJob(jobId);
            }
        } catch (e) { }
    }

    function timeAgo(ts) {
        var diff = Math.floor((Date.now() / 1000) - ts);
        if (diff < 60) return diff + 's ago';
        if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
        if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
        return Math.floor(diff / 86400) + 'd ago';
    }

    function escapeHtml(s) {
        var d = document.createElement('div');
        d.textContent = s || '';
        return d.innerHTML;
    }

    // ── Form submission ─────────────────────────────────────────────
    form.addEventListener('submit', async function (e) {
        e.preventDefault();
        generateBtn.disabled = true;
        generateBtn.innerHTML = '<span class="spinner-border spinner-border-sm mr-2" role="status"></span>Queuing…';
        showState('running');
        var title = document.getElementById('title').value;
        document.getElementById('running-title').textContent = 'Generating "' + title + '"…';
        document.getElementById('running-stage').textContent = 'Stage: Queued';
        document.getElementById('running-elapsed').textContent = 'Elapsed: 0s';
        document.getElementById('progress-bar').style.width = '5%';

        var payload = collectFormData();

        try {
            var resp = await fetch('/api/video/generate', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
            var data = await resp.json();
            if (!data.ok) {
                showError(data);
                resetButton();
                QDStudio.toast({ message: 'Video generation failed to start.', level: 'danger' });
                return;
            }
            generateBtn.innerHTML = '<span class="spinner-border spinner-border-sm mr-2" role="status"></span>Generating…';
            currentJobId = data.job_id;
            QDStudio.toast({ message: 'Job queued.', level: 'info' });
            pollJob(data.job_id);
        } catch (err) {
            showState('failed');
            document.getElementById('error-summary').textContent = 'Network error: ' + err.message;
            resetButton();
            QDStudio.toast({ message: 'Network error: ' + err.message, level: 'danger' });
        }
    });

    // ── Regenerate button ───────────────────────────────────────────
    document.getElementById('regenerate-btn').addEventListener('click', async function () {
        if (!currentJobId) return;
        this.disabled = true;
        this.textContent = 'Regenerating…';
        try {
            var resp = await fetch('/api/video/regenerate/' + currentJobId, { method: 'POST' });
            var data = await resp.json();
            if (data.ok) {
                showState('running');
                document.getElementById('running-title').textContent = 'Regenerating…';
                document.getElementById('running-stage').textContent = 'Stage: Queued';
                document.getElementById('running-elapsed').textContent = 'Elapsed: 0s';
                document.getElementById('progress-bar').style.width = '5%';
                currentJobId = data.job_id;
                pollJob(data.job_id);
            } else {
                QDStudio.toast({ message: data.error || 'Regeneration failed.', level: 'danger' });
            }
        } catch (e) {
            QDStudio.toast({ message: 'Network error: ' + e.message, level: 'danger' });
        } finally {
            this.disabled = false;
            this.textContent = 'Regenerate';
        }
    });

    // ── Retry button ────────────────────────────────────────────────
    document.getElementById('retry-btn').addEventListener('click', function () {
        form.dispatchEvent(new Event('submit'));
    });

    // ── Refresh jobs button ─────────────────────────────────────────
    document.getElementById('refresh-jobs-btn').addEventListener('click', loadJobHistory);

    // ── Advanced toggle arrow ───────────────────────────────────────
    var advLink = document.querySelector('[href="#advanced-section"]');
    var advSection = document.getElementById('advanced-section');
    if (advSection) {
        advSection.addEventListener('show.bs.collapse', function () { advLink.innerHTML = 'Advanced Options &#9660;'; });
        advSection.addEventListener('hide.bs.collapse', function () { advLink.innerHTML = 'Advanced Options &#9654;'; });
        if (typeof $ !== 'undefined') {
            $(advSection).on('show.bs.collapse', function () { advLink.innerHTML = 'Advanced Options &#9660;'; });
            $(advSection).on('hide.bs.collapse', function () { advLink.innerHTML = 'Advanced Options &#9654;'; });
        }
    }

    // ── Keyboard shortcut: Ctrl+Enter to submit ─────────────────────
    document.addEventListener('keydown', function (e) {
        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
            e.preventDefault();
            form.dispatchEvent(new Event('submit'));
        }
    });

    // ── Init ────────────────────────────────────────────────────────
    loadJobHistory();
})();
</script>
{% endblock %}