{% extends "base.html" %}
{% block title %}Generate Slide Deck - ICDEV™{% endblock %}

{% block content %}
{% from "includes/classification_macros.html" import design_classification_banner %}
{{ design_classification_banner('CUI') }}
<div class="breadcrumbs"><a href="/">Home</a><span class="separator">/</span><a href="/slides">Slide Decks</a><span class="separator">/</span><span>New Deck</span></div>

<div class="page-header">
    <h1>Generate New Slide Deck</h1>
    <p class="subtitle">A 3-step wizard for occasion-aware, AI-researched presentations.</p>
</div>

<form id="generate-form" style="max-width:900px;">
    <!-- Step nav -->
    <div style="display:flex; gap:8px; margin-bottom:20px;">
        <div class="step-dot active" data-step="1" style="flex:1; text-align:center; padding:10px; border-radius:8px; background:var(--bg-secondary); border:1px solid var(--border-color);">
            <div style="font-weight:700;">1. Topic & Occasion</div>
            <div style="font-size:11px; color:var(--text-secondary);">What it's about</div>
        </div>
        <div class="step-dot" data-step="2" style="flex:1; text-align:center; padding:10px; border-radius:8px; background:var(--bg-secondary); border:1px solid var(--border-color);">
            <div style="font-weight:700;">2. Tone & Style</div>
            <div style="font-size:11px; color:var(--text-secondary);">Voice & theme</div>
        </div>
        <div class="step-dot" data-step="3" style="flex:1; text-align:center; padding:10px; border-radius:8px; background:var(--bg-secondary); border:1px solid var(--border-color);">
            <div style="font-weight:700;">3. Layout & Output</div>
            <div style="font-size:11px; color:var(--text-secondary);">Formats & sources</div>
        </div>
    </div>

    <!-- Step 1 -->
    <div class="wizard-step" data-step="1">
        <div class="card" style="margin-bottom:20px;">
            <div class="card-header"><h3 style="margin:0;">Topic & Occasion</h3></div>
            <div class="card-body">
                <div class="form-group">
                    <label class="form-label">Presentation Title</label>
                    <input type="text" id="title" class="form-control" value="ICDEV™ Platform Overview"
                           placeholder="e.g. AI Adoption in Healthcare" required>
                </div>
                <div class="form-group" style="margin-top:16px;">
                    <label class="form-label">Occasion / Scenario</label>
                    <input type="text" id="occasion" class="form-control"
                           placeholder="e.g. board pitch, all-hands, wedding toast, training session">
                </div>
                <div class="form-group" style="margin-top:16px;">
                    <label class="form-label">Target Audience</label>
                    <input type="text" id="target_audience" class="form-control"
                           placeholder="e.g. C-suite executives, new hires, investors, patients">
                </div>
                <div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-top:16px;">
                    <div class="form-group">
                        <label class="form-label">Deck Type</label>
                        <select id="deck_type" class="form-control" onchange="onDeckTypeChange()">
                            {% for dt in deck_types %}
                            <option value="{{ dt }}" {% if dt == default_deck_type %}selected{% endif %}>
                                {{ dt | replace('_', ' ') | title }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Presentation Language</label>
                        <select id="output_language" class="form-control">
                            <option value="English" selected>English</option>
                            <option value="Spanish">Spanish</option>
                            <option value="French">French</option>
                            <option value="German">German</option>
                            <option value="Japanese">Japanese</option>
                            <option value="Korean">Korean</option>
                            <option value="Chinese (Simplified)">Chinese (Simplified)</option>
                            <option value="Portuguese">Portuguese</option>
                            <option value="Arabic">Arabic</option>
                            <option value="Italian">Italian</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Max Slides</label>
                        <input type="range" id="max_slides" min="5" max="16" value="10"
                               oninput="document.getElementById('slides-val').textContent=this.value">
                        <span id="slides-val" style="font-weight:600; margin-left:8px;">10</span> slides
                    </div>
                </div>

                {# Audience Mode #}
                <div class="form-group" style="margin-top:20px;">
                    <label class="form-label" style="font-weight:700;">Audience Mode <span style="font-weight:400; color:var(--text-secondary); font-size:12px;">(optional — tailors narrative arc)</span></label>
                    <div style="display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;" id="audience-mode-radios">
                        <label style="display:flex; align-items:center; gap:6px; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:8px; padding:8px 14px; cursor:pointer; font-size:13px;">
                            <input type="radio" name="audience_mode" value="" checked onchange="onAudienceModeChange('')"> None
                        </label>
                        {% for mode in audience_modes %}
                        <label style="display:flex; align-items:center; gap:6px; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:8px; padding:8px 14px; cursor:pointer; font-size:13px;">
                            <input type="radio" name="audience_mode" value="{{ mode }}" onchange="onAudienceModeChange('{{ mode }}')">
                            {{ mode | replace('_', ' ') | title }}
                        </label>
                        {% endfor %}
                    </div>
                    <div id="audience-hint" style="display:none; margin-top:10px; padding:10px 14px; background:rgba(212,160,23,0.08); border-left:3px solid #D4A017; border-radius:4px; font-size:12px; color:var(--text-secondary);"></div>
                </div>

                {# Pitch Template Presets #}
                {% if pitch_templates %}
                <div class="form-group" style="margin-top:16px;">
                    <label class="form-label" style="font-weight:700;">Pitch Template <span style="font-weight:400; color:var(--text-secondary); font-size:12px;">(optional preset)</span></label>
                    <select id="pitch_template" class="form-control" style="margin-top:6px;" onchange="onPitchTemplateChange()">
                        <option value="">— Custom / Manual —</option>
                        {% for key, tmpl in pitch_templates.items() %}
                        <option value="{{ key }}">{{ tmpl.label }} ({{ tmpl.slides }} slides)</option>
                        {% endfor %}
                    </select>
                </div>
                {% endif %}
            </div>
        </div>
        <div style="display:flex; justify-content:flex-end;">
            <button type="button" class="btn btn-primary" onclick="goStep(2)">Next →</button>
        </div>
    </div>

    <!-- Step 2 -->
    <div class="wizard-step" data-step="2" style="display:none;">
        <div class="card" style="margin-bottom:20px;">
            <div class="card-header"><h3 style="margin:0;">Tone & Visual Style</h3></div>
            <div class="card-body">
                <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
                    <div class="form-group">
                        <label class="form-label">Tone</label>
                        <select id="tone" class="form-control">
                            {% for t in tones %}
                            <option value="{{ t }}" {% if t == 'professional' %}selected{% endif %}>
                                {{ t | replace('_', ' ') | title }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Theme Palette</label>
                        <select id="theme" class="form-control">
                            {% for t in themes %}
                            <option value="{{ t }}" {% if t == default_theme %}selected{% endif %}>
                                {{ t | replace('_', ' ') | title }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div id="tone-hint" style="margin-top:16px; padding:12px; background:var(--bg-secondary); border-radius:8px; font-size:13px; color:var(--text-secondary);">
                    Select a tone to see how it shapes writing and visuals.
                </div>
            </div>
        </div>
        <div style="display:flex; justify-content:space-between;">
            <button type="button" class="btn btn-secondary" onclick="goStep(1)">← Back</button>
            <button type="button" class="btn btn-primary" onclick="goStep(3)">Next →</button>
        </div>
    </div>

    <!-- Step 3 -->
    <div class="wizard-step" data-step="3" style="display:none;">
        <div class="card" style="margin-bottom:20px;">
            <div class="card-header"><h3 style="margin:0;">Output Formats</h3></div>
            <div class="card-body">
                <p style="color:var(--text-secondary); font-size:13px; margin-bottom:12px;">
                    Choose which export formats to generate. PPTX is always produced.
                </p>
                <div style="display:flex; flex-wrap:wrap; gap:12px;">
                    {% for fmt in output_formats %}
                    <label style="display:flex; align-items:center; gap:8px; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:8px; padding:10px 14px; cursor:pointer;">
                        <input type="checkbox" name="output_formats" value="{{ fmt }}" {% if fmt == 'pptx' %}checked disabled{% endif %}>
                        <span style="font-size:13px; font-weight:600;">{{ fmt | upper }}</span>
                    </label>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="card" style="margin-bottom:20px;">
            <div class="card-header"><h3 style="margin:0;">Citations</h3></div>
            <div class="card-body">
                <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
                    <div class="form-group">
                        <label class="form-label">Citation Style</label>
                        <select id="citation_style" class="form-control">
                            {% for cs in citation_styles %}
                            <option value="{{ cs }}" {% if cs == 'inline_link' %}selected{% endif %}>
                                {{ cs | replace('_', ' ') | title }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="card" style="margin-bottom:20px;" id="internal-sources-card">
            <div class="card-header"><h3 style="margin:0;">ICDEV™ Content Sources</h3></div>
            <div class="card-body">
                <p style="color:var(--text-secondary); font-size:13px; margin-bottom:16px;">
                    Select which ICDEV™ live data sources to pull content from.
                </p>
                <div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:10px;">
                    {% for src in source_types %}
                    {% if src != 'upload' %}
                    <label class="source-card" style="display:flex; align-items:flex-start; gap:10px; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:8px; padding:12px; cursor:pointer;">
                        <input type="checkbox" name="sources" value="{{ src }}"
                               {% if src in ['icdev_capabilities', 'canvases', 'kanban'] %}checked{% endif %}
                               style="margin-top:2px;">
                        <div>
                            <div style="font-weight:600; font-size:13px;">{{ src | replace('_', ' ') | title }}</div>
                            <div style="font-size:11px; color:var(--text-secondary); margin-top:2px;">
                                {% if src == 'icdev_capabilities' %}Core platform capabilities + feature domains{% endif %}
                                {% if src == 'canvases' %}Active design canvases + descriptions{% endif %}
                                {% if src == 'child_apps' %}Showcase + child application catalog{% endif %}
                                {% if src == 'kanban' %}Project epics + task burndown{% endif %}
                                {% if src == 'genesis' %}Genesis reflex run summaries{% endif %}
                            </div>
                        </div>
                    </label>
                    {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="card" style="margin-bottom:20px;">
            <div class="card-header"><h3 style="margin:0;">🌐 Rich Diagrams & 3D Animations</h3></div>
            <div class="card-body">
                <label style="display:flex; align-items:flex-start; gap:10px; cursor:pointer;">
                    <input type="checkbox" id="enable_rich_diagrams" style="margin-top:3px;">
                    <div>
                        <div style="font-weight:600;">Enable rich diagrams (Three.js · Mermaid · Excalidraw)</div>
                        <div style="font-size:12px; color:var(--text-secondary); margin-top:4px;">
                            Adds interactive 3D animations, flowchart diagrams, and hand-drawn sketches to applicable slides.
                            <strong>Best experienced in the web presentation viewer (▶ Present).</strong>
                            PPTX export shows styled placeholder cards; HTML export embeds the interactive renderers (self-contained, air-gap safe).
                        </div>
                    </div>
                </label>
            </div>
        </div>

        <div class="card" style="margin-bottom:20px;">
            <div class="card-header"><h3 style="margin:0;">Graphics</h3></div>
            <div class="card-body">
                <label style="display:flex; align-items:center; gap:10px; cursor:pointer;">
                    <input type="checkbox" id="enable_graphics" checked>
                    <div>
                        <div style="font-weight:600;">Generate contextual images per slide</div>
                        <div style="font-size:12px; color:var(--text-secondary);">
                            {% set provider = env.SLIDES_IMAGE_PROVIDER|default('matplotlib') %}
                            {% set provider_label = {
                                'gpt_image_2': 'OpenAI GPT-Image-2',
                                'gpt-image-2': 'OpenAI GPT-Image-2',
                                'gpt_image': 'OpenAI GPT-Image',
                                'imagen_4': 'Google Imagen 4',
                                'ollama_cloud': 'Ollama cloud',
                                'dalle': 'OpenAI DALL-E 3',
                                'gemini': 'Google Imagen 3',
                                'matplotlib': 'programmatic fallback'
                            }.get(provider, provider|title) %}
                            Uses {{ provider_label }} image generation.
                            {% if provider == 'matplotlib' %}No cloud API required.{% else %}Fallback: programmatic themed diagram.{% endif %}
                        </div>
                    </div>
                </label>
            </div>
        </div>

        <div class="card" style="margin-bottom:20px;">
            <div class="card-header"><h3 style="margin:0;">Additional Context (optional)</h3></div>
            <div class="card-body">
                <textarea id="upload_text" class="form-control" rows="4"
                          placeholder="Paste any extra context, requirements, or document text to include in the deck…"></textarea>
            </div>
        </div>

        <div id="progress" style="display:none; margin-bottom:16px;">
            <div style="background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:8px; padding:20px;">
                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;">
                    <span style="font-weight:600; font-size:14px;">Generating your deck…</span>
                    <span id="progress-msg" style="font-size:13px; color:var(--text-secondary);">Starting…</span>
                </div>
                <!-- Phase steps -->
                <div style="display:flex; gap:0; margin-bottom:16px;" id="phase-steps">
                    {% for phase_label in ['Gather', 'Plan', 'Write', 'Images', 'Build'] %}
                    <div class="phase-step" data-phase="{{ loop.index }}"
                         style="flex:1; text-align:center; padding:8px 4px; font-size:11px; font-weight:600;
                                border-bottom:3px solid var(--border-color); color:var(--text-secondary);
                                transition:all 0.3s;">
                        {{ loop.index }}. {{ phase_label }}
                    </div>
                    {% endfor %}
                </div>
                <!-- Progress bar -->
                <div style="background:var(--bg-primary); border-radius:4px; height:6px; overflow:hidden;">
                    <div id="progress-bar" style="height:100%; background:#D4A017; width:0%; transition:width 0.5s ease;"></div>
                </div>
            </div>
        </div>

        <div id="error-msg" style="display:none;" class="alert alert-danger"></div>

        <div style="display:flex; justify-content:space-between; gap:12px;">
            <button type="button" class="btn btn-secondary" onclick="goStep(2)">← Back</button>
            <button type="submit" class="btn btn-primary" id="submit-btn">Generate Deck ✨</button>
            <a href="/slides" class="btn btn-secondary">Cancel</a>
        </div>
    </div>
</form>

<script>
var AUDIENCE_HINTS = {{ audience_mode_hints | tojson | safe }};
var PITCH_TEMPLATES = {{ pitch_templates | tojson | safe }};

var TONE_HINTS = {
    'professional': 'Polished, concise, and authoritative; clean corporate visuals.',
    'fun': 'Light, playful, conversational; friendly flat illustrations and warm accents.',
    'creative': 'Imaginative, story-driven, metaphor-rich; vibrant gradients and organic shapes.',
    'adventurous': 'Energetic and action-inspiring; dynamic compositions, nature textures, dramatic lighting.',
    'minimal': 'Ultra-concise, essential, no filler; lots of negative space and thin line art.',
    'bold': 'Direct, confident, high-impact; high-contrast color blocks and daring shapes.'
};

function goStep(n) {
    document.querySelectorAll('.wizard-step').forEach(function(el) { el.style.display = 'none'; });
    document.querySelectorAll('.step-dot').forEach(function(el) {
        el.classList.toggle('active', parseInt(el.dataset.step) === n);
        el.style.background = parseInt(el.dataset.step) === n ? 'var(--accent-color)' : 'var(--bg-secondary)';
        el.style.color = parseInt(el.dataset.step) === n ? '#fff' : 'var(--text-primary)';
    });
    document.querySelector('.wizard-step[data-step="' + n + '"]').style.display = 'block';
    updateToneHint();
}

function updateToneHint() {
    var tone = document.getElementById('tone').value;
    document.getElementById('tone-hint').textContent = TONE_HINTS[tone] || 'Select a tone to see how it shapes writing and visuals.';
}

document.getElementById('tone').addEventListener('change', updateToneHint);

function onDeckTypeChange() {
    var dt = document.getElementById('deck_type').value;
    var card = document.getElementById('internal-sources-card');
    if (dt === 'general_presentation') {
        card.style.display = 'none';
        document.querySelectorAll('input[name=sources]').forEach(function(cb) { cb.checked = false; });
    } else {
        card.style.display = '';
        document.querySelectorAll('input[name="sources"]').forEach(function(cb) {
            if (['icdev_capabilities','canvases','kanban'].indexOf(cb.value) !== -1) cb.checked = true;
        });
    }
}

function onAudienceModeChange(mode) {
    var hintEl = document.getElementById('audience-hint');
    if (!mode || !AUDIENCE_HINTS[mode]) {
        hintEl.style.display = 'none';
        return;
    }
    var hint = AUDIENCE_HINTS[mode];
    hintEl.innerHTML = '<strong>' + mode.replace('_', ' ').replace(/\b\w/g, function(c){ return c.toUpperCase(); }) + ' arc:</strong> ' +
        hint.narrative + '<br><span style="opacity:0.8;">Emphasis: ' + hint.emphasis + '</span>';
    hintEl.style.display = '';
    // Auto-set tone if mode recommends one and tone hasn't been manually changed
    if (hint.tone_override) {
        var toneEl = document.getElementById('tone');
        if (toneEl && !toneEl.dataset.manuallySet) {
            toneEl.value = hint.tone_override;
            updateToneHint();
        }
    }
}

function onPitchTemplateChange() {
    var key = document.getElementById('pitch_template').value;
    if (!key || !PITCH_TEMPLATES[key]) return;
    var tmpl = PITCH_TEMPLATES[key];
    // Auto-fill deck_type and max_slides
    var deckTypeEl = document.getElementById('deck_type');
    if (deckTypeEl && tmpl.deck_type) {
        deckTypeEl.value = tmpl.deck_type;
        onDeckTypeChange();
    }
    var maxSlidesEl = document.getElementById('max_slides');
    if (maxSlidesEl && tmpl.slides) {
        maxSlidesEl.value = tmpl.slides;
    }
    // Show a brief toast-style note
    var note = document.getElementById('pitch-template-note');
    if (!note) {
        note = document.createElement('div');
        note.id = 'pitch-template-note';
        note.style.cssText = 'font-size:12px; color:#D4A017; margin-top:6px;';
        document.getElementById('pitch_template').parentElement.appendChild(note);
    }
    note.textContent = 'Arc: ' + (tmpl.arc || []).join(' → ');
}

document.getElementById('tone').addEventListener('change', function() {
    this.dataset.manuallySet = '1';
});

document.getElementById('generate-form').addEventListener('submit', async function(e) {
    e.preventDefault();
    var btn = document.getElementById('submit-btn');
    var progress = document.getElementById('progress');
    var errorMsg = document.getElementById('error-msg');

    btn.disabled = true;
    btn.textContent = 'Generating…';
    progress.style.display = '';
    errorMsg.style.display = 'none';

    var sources = Array.from(document.querySelectorAll('input[name=sources]:checked')).map(i => i.value);
    var outputFormats = Array.from(document.querySelectorAll('input[name=output_formats]:checked')).map(i => i.value);

    var audienceModeEl = document.querySelector('input[name=audience_mode]:checked');
    var payload = {
        title: document.getElementById('title').value,
        occasion: document.getElementById('occasion').value,
        target_audience: document.getElementById('target_audience').value,
        deck_type: document.getElementById('deck_type').value,
        tone: document.getElementById('tone').value,
        theme: document.getElementById('theme').value,
        max_slides: parseInt(document.getElementById('max_slides').value),
        citation_style: document.getElementById('citation_style').value,
        output_formats: outputFormats,
        sources: sources,
        upload_text: document.getElementById('upload_text').value,
        enable_rich_diagrams: document.getElementById('enable_rich_diagrams').checked,
        audience_mode: (audienceModeEl && audienceModeEl.value) ? audienceModeEl.value : null,
        output_language: document.getElementById('output_language').value,
    };

    var _phaseMap = {
        'running':    {step: 0, pct: 5},
        'gathering':  {step: 1, pct: 10},
        'planning':   {step: 2, pct: 30},
        'generating': {step: 3, pct: 55},
        'graphics':   {step: 4, pct: 75},
        'building':   {step: 5, pct: 90},
        'completed':  {step: 5, pct: 100},
        'auto':       {step: 5, pct: 100},
    };

    function _updateProgress(status, label) {
        var info = _phaseMap[status] || {step: 0, pct: 5};
        document.getElementById('progress-msg').textContent = label;
        document.getElementById('progress-bar').style.width = info.pct + '%';
        document.querySelectorAll('#phase-steps .phase-step').forEach(function(el, i) {
            var stepNum = parseInt(el.dataset.phase);
            if (stepNum < info.step) {
                el.style.borderBottomColor = '#51cf66';
                el.style.color = '#51cf66';
            } else if (stepNum === info.step) {
                el.style.borderBottomColor = '#D4A017';
                el.style.color = '#D4A017';
            } else {
                el.style.borderBottomColor = 'var(--border-color)';
                el.style.color = 'var(--text-secondary)';
            }
        });
    }

    try {
        var resp = await fetch('/slides/api/generate', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(payload),
        });
        var data = await resp.json();
        if (!data.deck_id) {
            errorMsg.textContent = data.error || 'Failed to start generation.';
            errorMsg.style.display = '';
            btn.disabled = false;
            btn.textContent = 'Generate Deck ✨';
            progress.style.display = 'none';
            return;
        }

        // Poll status until done
        var deckId = data.deck_id;
        _updateProgress('running', 'Starting…');

        var pollInterval = setInterval(async function() {
            try {
                var sr = await fetch('/slides/api/' + deckId + '/status');
                var sd = await sr.json();
                _updateProgress(sd.status, sd.phase_label || sd.status);
                if (sd.done) {
                    clearInterval(pollInterval);
                    if (sd.error && sd.status === 'failed') {
                        errorMsg.textContent = 'Generation failed. Check the deck for details.';
                        errorMsg.style.display = '';
                        btn.disabled = false;
                        btn.textContent = 'Generate Deck ✨';
                        progress.style.display = 'none';
                    } else {
                        window.location.href = '/slides/' + deckId;
                    }
                }
            } catch(pollErr) {
                // Network hiccup — keep polling
            }
        }, 2000);

    } catch(err) {
        errorMsg.textContent = 'Network error: ' + err.message;
        errorMsg.style.display = '';
        btn.disabled = false;
        btn.textContent = 'Generate Deck ✨';
        progress.style.display = 'none';
    }
});

updateToneHint();
onDeckTypeChange();
goStep(1);
</script>
{% endblock %}