{% extends "base.html" %}

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

    <div class="studio-page-header">
        <h1 class="studio-page-title">Presentation Studio</h1>
        <p class="studio-page-subtitle">Generate a native, editable PowerPoint deck from a structured brief.</p>
    </div>

    <div class="studio-grid">

        <!-- Configuration panel -->
        <section class="studio-panel" aria-labelledby="presentation-config-title">
            <div class="studio-panel-header">
                <h5 id="presentation-config-title">Deck Configuration</h5>
            </div>
            <div class="studio-panel-body">
                {% set p = prefill or {} %}
                <form id="presentation-form">
                    <div class="form-group">
                        <label for="title" class="font-weight-bold">Title</label>
                        <input type="text" class="form-control" id="title" name="title" placeholder="e.g. QATO Architecture Update" required value="{{ p.title or '' }}">
                    </div>

                    <div class="form-group">
                        <label for="subtitle" class="font-weight-bold">Subtitle <span class="text-muted font-weight-normal">(Optional)</span></label>
                        <input type="text" class="form-control" id="subtitle" name="subtitle" placeholder="e.g. Q1 Delivery Milestone" value="{{ p.subtitle or '' }}">
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="deck_type" class="font-weight-bold">Deck Type</label>
                            <select class="form-control" id="deck_type" name="deck_type">
                                <option value="architecture_deck" {% if p.deck_type == 'architecture_deck' %}selected{% endif %}>Architecture Overview</option>
                                <option value="delivery_status_deck" {% if p.deck_type == 'delivery_status_deck' %}selected{% endif %}>Delivery Status</option>
                                <option value="requirements_briefing_deck" {% if p.deck_type == 'requirements_briefing_deck' %}selected{% endif %}>Requirements Briefing</option>
                                <option value="executive_summary_deck" {% if p.deck_type == 'executive_summary_deck' %}selected{% endif %}>Executive Summary</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" name="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="mixed" {% if p.audience == 'mixed' %}selected{% endif %}>Mixed</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="theme" class="font-weight-bold">Visual Theme</label>
                        <select class="form-control" id="theme" name="theme">
                            <option value="dark" {% if p.theme == 'dark' %}selected{% endif %}>Dark (Navy/Charcoal)</option>
                            <option value="light" {% if p.theme == 'light' %}selected{% endif %}>Light (Clean/White)</option>
                            <option value="corporate" {% if p.theme == 'corporate' %}selected{% endif %}>Corporate (Professional Blue/Gray)</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="content_brief" class="font-weight-bold">Content Brief</label>
                        <textarea class="form-control" id="content_brief" name="content_brief" rows="6" placeholder="Paste raw notes, bullets, or a summary here. The QPresentation service will automatically structure this into slides based on the selected Deck Type.">{{ p.content_brief or '' }}</textarea>
                        <small class="form-text text-muted">Use bullet points or plain text to describe what should be on the slides.</small>
                    </div>

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

        <!-- Output panel -->
        <section class="studio-panel" id="output-panel" aria-labelledby="presentation-output-title">
            <div class="studio-panel-header">
                <h5 id="presentation-output-title">Output &amp; Preview</h5>
                <div class="studio-panel-actions">
                    <a id="download-btn" href="#" class="btn btn-sm btn-success d-none" target="_blank">Download PPTX</a>
                </div>
            </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">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                        <line x1="3" y1="9" x2="21" y2="9"></line>
                        <line x1="9" y1="21" x2="9" y2="9"></line>
                    </svg>
                    <p>Fill out the configuration on the left and click <strong>Generate Presentation</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="presentation-running-title">Generating deck…</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%"></div>
                    </div>
                    <div class="studio-running-meta">
                        <span>Rendering slides and thumbnails…</span>
                        <span id="presentation-elapsed">Elapsed: 0s</span>
                    </div>
                </div>

                <div class="studio-state studio-state-success">
                    <div id="thumbnails-grid"></div>
                    <div id="presentation-info" class="mt-3 text-muted small"></div>
                </div>

                <div class="studio-state studio-state-failed">
                    <div class="alert alert-danger" role="alert">
                        <h6 class="alert-heading font-weight-bold">Generation Failed</h6>
                        <p id="error-message" class="mb-0"></p>
                    </div>
                    <button type="button" class="btn btn-outline-primary" id="retry-btn">Retry</button>
                </div>

            </div>
        </section>

    </div>
</div>

<style>
.thumbnail-card { transition: transform 0.2s; border-radius: 0.45rem; overflow: hidden; }
.thumbnail-card:hover { transform: scale(1.02); }
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var form = document.getElementById('presentation-form');
    var outputPanel = document.getElementById('output-panel');
    var generateBtn = document.getElementById('generate-btn');
    var downloadBtn = document.getElementById('download-btn');
    var thumbnailsGrid = document.getElementById('thumbnails-grid');
    var presentationInfo = document.getElementById('presentation-info');
    var errorMessage = document.getElementById('error-message');
    var elapsedEl = document.getElementById('presentation-elapsed');
    var runningTitle = document.getElementById('presentation-running-title');

    var elapsedTimer = null;
    var startTs = 0;

    function startTimer() {
        startTs = Date.now();
        if (elapsedEl) elapsedEl.textContent = 'Elapsed: 0s';
        elapsedTimer = setInterval(function () {
            if (elapsedEl) elapsedEl.textContent = 'Elapsed: ' + QDStudio.formatElapsed(Date.now() - startTs);
        }, 1000);
    }

    function stopTimer() {
        if (elapsedTimer) { clearInterval(elapsedTimer); elapsedTimer = null; }
    }

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

    form.addEventListener('submit', async function (e) {
        e.preventDefault();

        // Enter running state.
        generateBtn.disabled = true;
        generateBtn.innerHTML = '<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Processing…';
        downloadBtn.classList.add('d-none');
        thumbnailsGrid.innerHTML = '';
        presentationInfo.textContent = '';
        var title = document.getElementById('title').value;
        runningTitle.textContent = title ? ('Generating "' + title + '"…') : 'Generating deck…';
        QDStudio.showState(outputPanel, 'running');
        startTimer();

        var payload = {
            title: title,
            subtitle: document.getElementById('subtitle').value,
            deck_type: document.getElementById('deck_type').value,
            audience: document.getElementById('audience').value,
            theme: document.getElementById('theme').value,
            content_brief: document.getElementById('content_brief').value
        };

        try {
            var response = await fetch('/api/presentation/generate', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
            var data = await response.json();

            if (response.ok && data.ok) {
                downloadBtn.href = '/api/presentation/download/' + data.pptx_filename;
                downloadBtn.classList.remove('d-none');

                if (data.thumbnails && data.thumbnails.length > 0) {
                    var html = '<div class="row">';
                    data.thumbnails.forEach(function (thumb, idx) {
                        var thumbUrl = '/api/presentation/thumbnails/' + data.basename + '/' + thumb;
                        html += '<div class="col-md-6 col-lg-4 mb-3">' +
                                    '<div class="card thumbnail-card shadow-sm">' +
                                        '<img src="' + thumbUrl + '" class="card-img-top border-bottom" alt="Slide ' + (idx + 1) + '">' +
                                        '<div class="card-body py-2 px-3">' +
                                            '<p class="card-text text-muted small text-center mb-0">Slide ' + (idx + 1) + '</p>' +
                                        '</div>' +
                                    '</div>' +
                                '</div>';
                    });
                    html += '</div>';
                    thumbnailsGrid.innerHTML = html;
                    presentationInfo.textContent = data.slide_count ? (data.slide_count + ' slide(s) generated.') : '';
                } else {
                    thumbnailsGrid.innerHTML = '<div class="alert alert-info mb-0" role="alert">' +
                        'Deck generated successfully, but thumbnail dependencies (LibreOffice/poppler) are not available on this host, so no previews are shown.' +
                        '</div>';
                }

                QDStudio.showState(outputPanel, 'success');
                QDStudio.toast({ message: 'Presentation generated.', level: 'success' });
            } else {
                errorMessage.textContent = data.summary || 'An unexpected error occurred during generation.';
                if (data.warnings && data.warnings.length > 0) {
                    errorMessage.innerHTML += '<ul class="mt-2 mb-0"><li>' + data.warnings.join('</li><li>') + '</li></ul>';
                }
                QDStudio.showState(outputPanel, 'failed');
                QDStudio.toast({ message: 'Presentation generation failed.', level: 'danger' });
            }
        } catch (error) {
            errorMessage.textContent = 'Failed to communicate with the presentation server.';
            QDStudio.showState(outputPanel, 'failed');
            QDStudio.toast({ message: 'Network error: ' + error.message, level: 'danger' });
        } finally {
            stopTimer();
            resetButton();
        }
    });

    // Retry → resubmit the form.
    var retryBtn = document.getElementById('retry-btn');
    if (retryBtn) {
        retryBtn.addEventListener('click', function () {
            form.dispatchEvent(new Event('submit', { cancelable: true }));
        });
    }
});
</script>
{% endblock %}