{% extends "base.html" %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12">
            <h2>Presentation Studio</h2>
            <p class="text-muted">Generate native, editable PowerPoint presentations from structured inputs.</p>
        </div>
    </div>

    <div class="row">
        <!-- Configuration Panel -->
        <div class="col-lg-5 mb-4">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-header bg-white border-bottom-0 pt-4 pb-0">
                    <h5 class="mb-0">Deck Configuration</h5>
                </div>
                <div class="card-body">
                    <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>
                        </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">
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <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">Architecture Overview</option>
                                        <option value="delivery_status_deck">Delivery Status</option>
                                        <option value="requirements_briefing_deck">Requirements Briefing</option>
                                        <option value="executive_summary_deck">Executive Summary</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="audience" class="font-weight-bold">Audience</label>
                                    <select class="form-control" id="audience" name="audience">
                                        <option value="technical">Technical</option>
                                        <option value="executive">Executive</option>
                                        <option value="mixed">Mixed</option>
                                    </select>
                                </div>
                            </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">Dark (Navy/Charcoal)</option>
                                <option value="light">Light (Clean/White)</option>
                                <option value="corporate">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."></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>
            </div>
        </div>

        <!-- Output & Preview Panel -->
        <div class="col-lg-7 mb-4">
            <div class="card h-100 shadow-sm border-0">
                <div class="card-header bg-white border-bottom-0 pt-4 pb-0 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Output & Preview</h5>
                    <a id="download-btn" href="#" class="btn btn-sm btn-success d-none" target="_blank">Download PPTX</a>
                </div>
                <div class="card-body bg-light rounded m-3 d-flex flex-column align-items-center justify-content-center" id="preview-container" style="min-height: 400px; border: 2px dashed #dee2e6;">
                    
                    <div id="empty-state" class="text-center text-muted">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mb-2"><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 to the left and click Generate.</p>
                    </div>

                    <div id="error-state" class="alert alert-danger w-100 d-none" role="alert">
                        <h6 class="alert-heading font-weight-bold">Generation Failed</h6>
                        <p id="error-message" class="mb-0"></p>
                    </div>

                    <div id="thumbnails-grid" class="w-100 d-none">
                        <!-- Thumbnails injected here by JS -->
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<style>
.thumbnail-card {
    transition: transform 0.2s;
}
.thumbnail-card:hover {
    transform: scale(1.02);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('presentation-form');
    const generateBtn = document.getElementById('generate-btn');

    const emptyState = document.getElementById('empty-state');
    const errorState = document.getElementById('error-state');
    const errorMessage = document.getElementById('error-message');
    
    const thumbnailsGrid = document.getElementById('thumbnails-grid');
    const downloadBtn = document.getElementById('download-btn');
    const previewContainer = document.getElementById('preview-container');

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

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

        // UI Reset & Loading State
        generateBtn.disabled = true;
        generateBtn.innerHTML = '<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Processing\u2026';
        emptyState.classList.add('d-none');
        errorState.classList.add('d-none');
        thumbnailsGrid.classList.add('d-none');
        downloadBtn.classList.add('d-none');
        previewContainer.classList.remove('bg-light');
        thumbnailsGrid.innerHTML = '';

        const payload = {
            title: document.getElementById('title').value,
            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 {
            const response = await fetch('/api/presentation/generate', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
            
            const data = await response.json();
            
            if (response.ok && data.ok) {
                // Success State
                downloadBtn.href = `/api/presentation/download/${data.pptx_filename}`;
                downloadBtn.classList.remove('d-none');
                
                if (data.thumbnails && data.thumbnails.length > 0) {
                    let html = '<div class="row">';
                    data.thumbnails.forEach((thumb, idx) => {
                        const thumbUrl = `/api/presentation/thumbnails/${data.basename}/${thumb}`;
                        html += `
                            <div class="col-md-6 col-lg-4 mb-4">
                                <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;
                    thumbnailsGrid.classList.remove('d-none');
                } else {
                    // No thumbnails generated (e.g. libreoffice not installed)
                    thumbnailsGrid.innerHTML = `
                        <div class="alert alert-info" role="alert">
                            Presentation generated successfully, but thumbnail dependencies (LibreOffice/poppler) are not available to generate previews.
                        </div>
                    `;
                    thumbnailsGrid.classList.remove('d-none');
                }
            } else {
                // API Error State
                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>`;
                }
                errorState.classList.remove('d-none');
            }
        } catch (error) {
            // Network/Execution Error State
            errorMessage.textContent = "Failed to communicate with the presentation server.";
            errorState.classList.remove('d-none');
        } finally {
            resetToReady();
        }
    });
});
</script>
{% endblock %}