{% extends "base.html" %}
{# CUI // SP-CTI #}
{% block title %}{{ app_name }} — AI Launchpad Wizard{% endblock %}

{% block content %}
<div class="page-header">
    <h1>AI Launchpad Wizard</h1>
    <p class="page-subtitle">Answer a few questions and ICDEV™ generates a ready-to-run AI project plan tailored to your mission.</p>
</div>

<div class="wizard-container">
    <!-- Progress Bar -->
    <div class="wizard-progress">
        <div class="progress-steps">
            <div class="step active" id="step-dot-1">1</div>
            <div class="step-line"></div>
            <div class="step" id="step-dot-2">2</div>
            <div class="step-line"></div>
            <div class="step" id="step-dot-3">3</div>
            <div class="step-line"></div>
            <div class="step" id="step-dot-4">4</div>
        </div>
        <div class="progress-labels">
            <span>Mission</span>
            <span>Team</span>
            <span>Tech</span>
            <span>Generate</span>
        </div>
    </div>

    <!-- Step 1: Mission -->
    <div class="wizard-step active" id="step-1">
        <h2>What is your mission objective?</h2>
        <p class="step-desc">Describe the problem you want AI to solve in plain English.</p>
        <div class="form-group">
            <textarea id="mission-text" rows="4" placeholder="Example: Automate the review of contract documents to flag missing clauses before submission." style="width:100%;padding:12px;border-radius:8px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font-size:0.95rem;resize:vertical;"></textarea>
        </div>
        <div class="form-group">
            <label>Which area does this fall under?</label>
            <div class="option-grid" id="domain-options">
                <div class="option-card" data-value="document_qa" onclick="selectOption(this, 'domain')">
                    <span class="option-icon">📄</span>
                    <span>Document Q&amp;A</span>
                </div>
                <div class="option-card" data-value="procurement" onclick="selectOption(this, 'domain')">
                    <span class="option-icon">🏛️</span>
                    <span>Procurement</span>
                </div>
                <div class="option-card" data-value="threat_triage" onclick="selectOption(this, 'domain')">
                    <span class="option-icon">🛡️</span>
                    <span>Threat / Security</span>
                </div>
                <div class="option-card" data-value="compliance" onclick="selectOption(this, 'domain')">
                    <span class="option-icon">✅</span>
                    <span>Compliance / RMF</span>
                </div>
                <div class="option-card" data-value="analytics" onclick="selectOption(this, 'domain')">
                    <span class="option-icon">📊</span>
                    <span>Data Analytics</span>
                </div>
                <div class="option-card" data-value="custom" onclick="selectOption(this, 'domain')">
                    <span class="option-icon">⚙️</span>
                    <span>Custom / Other</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Step 2: Team -->
    <div class="wizard-step hidden" id="step-2">
        <h2>Tell us about your team</h2>
        <p class="step-desc">ICDEV™ adjusts the generated plan to match your team's skill level.</p>
        <div class="form-group">
            <label>Team AI experience</label>
            <div class="option-grid">
                <div class="option-card" data-value="none" onclick="selectOption(this, 'experience')">
                    <span class="option-icon">🌱</span>
                    <span>No AI experience</span>
                </div>
                <div class="option-card" data-value="beginner" onclick="selectOption(this, 'experience')">
                    <span class="option-icon">📚</span>
                    <span>Some training done</span>
                </div>
                <div class="option-card" data-value="intermediate" onclick="selectOption(this, 'experience')">
                    <span class="option-icon">⚡</span>
                    <span>1–2 AI projects shipped</span>
                </div>
                <div class="option-card" data-value="advanced" onclick="selectOption(this, 'experience')">
                    <span class="option-icon">🚀</span>
                    <span>AI team in place</span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label>Team size</label>
            <select id="team-size" style="padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font-size:0.95rem;width:100%;max-width:280px;">
                <option value="1-3">1–3 people</option>
                <option value="4-10" selected>4–10 people</option>
                <option value="11-30">11–30 people</option>
                <option value="30+">30+ people</option>
            </select>
        </div>
    </div>

    <!-- Step 3: Tech -->
    <div class="wizard-step hidden" id="step-3">
        <h2>Technology constraints</h2>
        <p class="step-desc">ICDEV™ will only recommend options that fit your environment.</p>
        <div class="form-group">
            <label>Deployment environment</label>
            <div class="option-grid">
                <div class="option-card" data-value="cloud" onclick="selectOption(this, 'deploy')">
                    <span class="option-icon">☁️</span>
                    <span>Cloud (GovCloud / Commercial)</span>
                </div>
                <div class="option-card" data-value="on_prem" onclick="selectOption(this, 'deploy')">
                    <span class="option-icon">🖥️</span>
                    <span>On-Premise</span>
                </div>
                <div class="option-card" data-value="airgap" onclick="selectOption(this, 'deploy')">
                    <span class="option-icon">🔒</span>
                    <span>Air-Gapped / SIPR</span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label>Classification level</label>
            <div class="option-grid">
                <div class="option-card" data-value="il2" onclick="selectOption(this, 'il')">
                    <span class="option-icon">🟢</span>
                    <span>IL2 — Public</span>
                </div>
                <div class="option-card" data-value="il4" onclick="selectOption(this, 'il')">
                    <span class="option-icon">🟡</span>
                    <span>IL4 — CUI</span>
                </div>
                <div class="option-card" data-value="il5" onclick="selectOption(this, 'il')">
                    <span class="option-icon">🟠</span>
                    <span>IL5 — CUI Dedicated</span>
                </div>
                <div class="option-card" data-value="il6" onclick="selectOption(this, 'il')">
                    <span class="option-icon">🔴</span>
                    <span>IL6 — SECRET</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Step 4: Generate -->
    <div class="wizard-step hidden" id="step-4">
        <h2>Ready to generate your AI project plan</h2>
        <div id="wizard-summary" class="summary-card">
            <p class="text-muted">Review your answers below, then click Generate.</p>
        </div>
        <div id="wizard-result" style="display:none;margin-top:24px;">
            <div class="result-card">
                <div id="result-content"></div>
                <div style="margin-top:20px;display:flex;gap:12px;flex-wrap:wrap;">
                    <a id="result-pattern-link" href="/ai-patterns" class="btn btn-primary">Browse Pattern Library</a>
                    <a href="/kanban" class="btn">View in Kanban</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Navigation -->
    <div class="wizard-nav">
        <button class="btn" id="btn-back" onclick="stepBack()" style="display:none;">← Back</button>
        <button class="btn btn-primary" id="btn-next" onclick="stepNext()">Next →</button>
        <button class="btn btn-primary" id="btn-generate" onclick="generatePlan()" style="display:none;">✨ Generate Plan</button>
    </div>
</div>
{% endblock %}

{% block styles %}
<style>
.wizard-container {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
}
.wizard-progress {
    margin-bottom: 36px;
}
.progress-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 8px;
}
.step {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bg-elevated, rgba(255,255,255,0.06));
    border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 600;
    transition: all 0.2s;
}
.step.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.step.done { background: var(--success, #10b981); border-color: var(--success, #10b981); color: #fff; }
.step-line { flex: 1; height: 2px; background: var(--border); max-width: 120px; }
.progress-labels {
    display: flex;
    justify-content: space-around;
    font-size: 0.78rem;
    color: var(--text-dim);
}
.wizard-step h2 { font-size: 1.2rem; margin-bottom: 8px; }
.step-desc { color: var(--text-dim); margin-bottom: 20px; font-size: 0.9rem; }
.form-group { margin-bottom: 24px; }
.form-group label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 10px; }
.option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.option-card {
    background: var(--bg-elevated, rgba(255,255,255,0.04));
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 14px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}
.option-card:hover { border-color: var(--accent); }
.option-card.selected { border-color: var(--accent); background: rgba(59,130,246,0.12); }
.option-icon { font-size: 1.6rem; }
.wizard-nav {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.summary-card {
    background: var(--bg-elevated, rgba(255,255,255,0.04));
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
}
.result-card {
    background: var(--bg-elevated, rgba(255,255,255,0.04));
    border: 1px solid var(--accent);
    border-radius: 10px;
    padding: 20px;
}
.hidden { display: none !important; }
</style>
{% endblock %}

{% block scripts %}
<script>
var _step = 1;
var _answers = { domain: '', experience: '', deploy: '', il: '' };

function selectOption(el, key) {
    var parent = el.closest('.option-grid');
    parent.querySelectorAll('.option-card').forEach(function(c) { c.classList.remove('selected'); });
    el.classList.add('selected');
    _answers[key] = el.dataset.value;
}

function stepNext() {
    if (_step === 1) {
        var txt = document.getElementById('mission-text').value.trim();
        if (!txt) { alert('Please describe your mission objective.'); return; }
        _answers.mission = txt;
    }
    if (_step < 3) {
        document.getElementById('step-' + _step).classList.remove('active');
        _step++;
        document.getElementById('step-' + _step).classList.add('active');
        document.getElementById('step-dot-' + (_step - 1)).classList.add('done');
        document.getElementById('step-dot-' + _step).classList.add('active');
        document.getElementById('btn-back').style.display = 'inline-flex';
        if (_step === 3) {
            document.getElementById('btn-next').style.display = 'none';
            document.getElementById('btn-generate').style.display = 'inline-flex';
        }
    }
}

function stepBack() {
    if (_step > 1) {
        document.getElementById('step-' + _step).classList.remove('active');
        document.getElementById('step-dot-' + _step).classList.remove('active');
        document.getElementById('step-dot-' + (_step - 1)).classList.remove('done');
        _step--;
        document.getElementById('step-' + _step).classList.add('active');
        document.getElementById('step-dot-' + _step).classList.add('active');
        if (_step === 1) document.getElementById('btn-back').style.display = 'none';
        document.getElementById('btn-next').style.display = 'inline-flex';
        document.getElementById('btn-generate').style.display = 'none';
    }
}

function generatePlan() {
    var btn = document.getElementById('btn-generate');
    btn.disabled = true;
    btn.textContent = 'Generating…';

    document.getElementById('step-3').classList.remove('active');
    document.getElementById('step-dot-3').classList.add('done');
    _step = 4;
    document.getElementById('step-4').classList.add('active');
    document.getElementById('step-dot-4').classList.add('active');
    document.getElementById('wizard-nav').style.display = 'none';

    var complexityMap = { none: 'beginner', beginner: 'beginner', intermediate: 'intermediate', advanced: 'advanced' };
    var complexity = complexityMap[_answers.experience] || 'beginner';
    var categoryMap = { document_qa: 'document_qa', procurement: 'procurement', threat_triage: 'threat_triage', compliance: 'compliance' };
    var category = categoryMap[_answers.domain] || null;

    var apiUrl = '/api/aisg/patterns' + (category ? '?category=' + category + '&complexity=' + complexity : '?complexity=' + complexity);
    fetch(apiUrl)
        .then(function(r) { return r.json(); })
        .then(function(d) {
            var patterns = d.patterns || [];
            var summary = document.getElementById('wizard-summary');
            summary.innerHTML =
                '<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">' +
                  '<div><strong>Mission</strong><br><span style="color:var(--text-dim);font-size:0.88rem;">' + (_answers.mission || '—') + '</span></div>' +
                  '<div><strong>Domain</strong><br>' + (_answers.domain || '—') + '</div>' +
                  '<div><strong>Experience</strong><br>' + (_answers.experience || '—') + '</div>' +
                  '<div><strong>Environment</strong><br>' + (_answers.deploy || '—') + ' / ' + (_answers.il || '—') + '</div>' +
                '</div>';

            var resultContent = document.getElementById('result-content');
            if (patterns.length === 0) {
                resultContent.innerHTML = '<p>No matching patterns found. <a href="/ai-patterns">Browse all patterns →</a></p>';
            } else {
                var best = patterns[0];
                document.getElementById('result-pattern-link').href = '/ai-patterns';
                resultContent.innerHTML =
                    '<h3 style="margin-top:0;">✅ Recommended Pattern</h3>' +
                    '<div style="padding:16px;background:var(--bg-card);border-radius:8px;border-left:3px solid var(--accent);margin-bottom:16px;">' +
                      '<strong>' + best.name + '</strong><br>' +
                      '<span style="color:var(--text-dim);font-size:0.88rem;">' + (best.description || '') + '</span>' +
                    '</div>' +
                    '<p style="color:var(--text-dim);font-size:0.88rem;">Click <strong>Browse Pattern Library</strong> to deploy this pattern, or view all ' + patterns.length + ' matching pattern(s).</p>';
            }
            document.getElementById('wizard-result').style.display = 'block';
            btn.textContent = '✨ Generate Plan';
            btn.disabled = false;
        })
        .catch(function() {
            document.getElementById('result-content').innerHTML = '<p style="color:#e94560;">Failed to generate plan. Please try again.</p>';
            document.getElementById('wizard-result').style.display = 'block';
            btn.textContent = '✨ Generate Plan';
            btn.disabled = false;
        });
}
</script>
{% endblock %}