{% extends "base.html" %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12">
            <h2>Video Studio</h2>
            <p class="text-muted">Generate narrated videos from structured inputs, presentations, or app walkthroughs.</p>
        </div>
    </div>

    <div class="row">
        <!-- ── Configuration Panel ─────────────────────────────────────── -->
        <div class="col-lg-5 mb-4">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white border-bottom-0 pt-4 pb-0">
                    <h5 class="mb-0">Video Configuration</h5>
                </div>
                <div class="card-body">
                    <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>
                        </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">Marketing</option>
                                    <option value="sales_demo">Sales Demo</option>
                                    <option value="tutorial">Tutorial</option>
                                    <option value="architecture_overview">Architecture Overview</option>
                                    <option value="delivery_status">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">Technical</option>
                                    <option value="executive">Executive</option>
                                    <option value="sales">Sales</option>
                                    <option value="end_user">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."></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 & 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">OpenAI (cloud)</option>
                                    <option value="piper">Piper (local)</option>
                                    <option value="bark">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"></select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="tts_speed" class="font-weight-bold">Narration Speed: <span id="speed-value">0.9</span></label>
                            <input type="range" class="custom-range" id="tts_speed" min="0.25" max="2.0" step="0.05" value="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">Dark</option>
                                            <option value="light">Light</option>
                                            <option value="corporate">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">
                                    </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>
            </div>
        </div>

        <!-- ── Output Panel ────────────────────────────────────────────── -->
        <div class="col-lg-7 mb-4">
            <!-- Main output card -->
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-white border-bottom-0 pt-4 pb-0">
                    <h5 class="mb-0">Output</h5>
                </div>
                <div class="card-body">
                    <!-- Empty state -->
                    <div class="text-center text-muted py-5" id="state-empty">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" class="mb-3">
                            <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 and click Generate to see results here.</p>
                    </div>

                    <!-- Running state -->
                    <div style="display:none;" id="state-running">
                        <div class="d-flex align-items-center mb-3">
                            <div class="spinner-border spinner-border-sm text-primary mr-2" role="status"></div>
                            <span class="font-weight-bold" id="running-title">Generating...</span>
                        </div>
                        <div class="progress mb-2" style="height: 8px;">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" id="progress-bar" style="width: 10%"></div>
                        </div>
                        <div class="d-flex justify-content-between">
                            <small class="text-muted" id="running-stage">Stage: Queued</small>
                            <small class="text-muted" id="running-elapsed">Elapsed: 0s</small>
                        </div>
                    </div>

                    <!-- Success state -->
                    <div style="display:none;" id="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="mb-3">
                            <a id="download-link" href="#" class="btn btn-success mr-2">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>

                    <!-- Failed state -->
                    <div style="display:none;" id="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>
            </div>

            <!-- Job history card -->
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white border-bottom-0 pt-3 pb-0 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 text-muted">Recent Jobs</h6>
                    <button type="button" class="btn btn-sm btn-link text-muted p-0" id="refresh-jobs-btn">Refresh</button>
                </div>
                <div class="card-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>
            </div>
        </div>
    </div>
</div>

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

    const stateEmpty = document.getElementById('state-empty');
    const stateRunning = document.getElementById('state-running');
    const stateSuccess = document.getElementById('state-success');
    const stateFailed = document.getElementById('state-failed');

    let currentJobId = null;
    let pollInterval = null;

    // ── Voice options per engine ────────────────────────────────────
    const 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() {
        const engine = ttsEngineSelect.value;
        const voices = VOICE_OPTIONS[engine] || [];
        voiceSelect.innerHTML = voices.map(v =>
            '<option value="'+v.v+'">'+v.l+'</option>'
        ).join('');
    }
    ttsEngineSelect.addEventListener('change', updateVoiceOptions);
    updateVoiceOptions();

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

    // ── Dynamic bullet editor ───────────────────────────────────────
    function addBullet(value) {
        const 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) {
        const 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);
    }

    // ── UI state management ─────────────────────────────────────────
    function showState(name) {
        stateEmpty.style.display = name === 'empty' ? 'block' : 'none';
        stateRunning.style.display = name === 'running' ? 'block' : 'none';
        stateSuccess.style.display = name === 'success' ? 'block' : 'none';
        stateFailed.style.display = name === 'failed' ? 'block' : 'none';
    }

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

    // ── Collect form data ───────────────────────────────────────────
    function collectFormData() {
        var res = document.getElementById('resolution').value.split('x');
        var payload = {
            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,
        };
        return payload;
    }

    // ── 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: ' + formatElapsed(elapsed);

            // Update stage heuristic
            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();
                } else if (data.status === 'failed') {
                    clearInterval(pollInterval);
                    pollInterval = null;
                    showError(data);
                    resetButton();
                    loadJobHistory();
                }
            } catch(e) {
                // Network error, keep polling
            }
        }, 3000);
    }

    function formatElapsed(ms) {
        var s = Math.floor(ms / 1000);
        if (s < 60) return s + 's';
        var m = Math.floor(s / 60);
        return m + 'm ' + (s % 60) + 's';
    }

    // ── 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: ' + formatElapsed(result.duration_ms));
        if (result.video_type) meta.push('Type: ' + result.video_type);
        document.getElementById('success-meta').textContent = meta.join(' | ');

        // Video player
        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';
        }

        // Artifacts
        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';
        }

        // Warnings
        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';
        }

        // Regenerate button
        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('');

            // Click handler for job items
            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();
                return;
            }
            generateBtn.innerHTML = '<span class="spinner-border spinner-border-sm mr-2" role="status"></span>Generating...';
            currentJobId = data.job_id;
            pollJob(data.job_id);
        } catch(err) {
            showState('failed');
            document.getElementById('error-summary').textContent = 'Network error: ' + err.message;
            resetButton();
        }
    });

    // ── 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 {
                alert(data.error || 'Regeneration failed.');
            }
        } catch(e) {
            alert('Network error: ' + e.message);
        } 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;'; });
        // jQuery fallback for Bootstrap 4
        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 %}