{% extends "base.html" %}
{% block title %}Getting Started - ICDEV™ Dashboard{% endblock %}

{% block content %}
<div class="page-header">
    <div class="breadcrumbs">
        <a href="/">Home</a>
        <span class="separator">/</span>
        <span class="current">Getting Started</span>
    </div>
    <h1>Getting Started</h1>
    <p class="subtitle">Answer 4 quick questions and we'll recommend the best path for you</p>
</div>

<div class="wizard-container">
    <!-- Progress dots -->
    <div class="wizard-progress" id="wizard-progress">
        <div class="wizard-progress-dot active" data-step="0"></div>
        <div class="wizard-progress-dot" data-step="1"></div>
        <div class="wizard-progress-dot" data-step="2"></div>
        <div class="wizard-progress-dot" data-step="3"></div>
        <div class="wizard-progress-dot" data-step="4"></div>
        <div class="wizard-progress-dot" data-step="5"></div>
    </div>

    <!-- Step 1: Goal -->
    <div class="wizard-step active" id="wizard-step-0">
        <div class="wizard-question">What are you trying to do?</div>
        <div class="wizard-options">
            <div class="wizard-option" data-value="build" onclick="ICDEV.wizardSelect(this)">
                <span class="wizard-option-icon">&#x1F528;</span>
                <div class="wizard-option-title">Build a New Application</div>
                <div class="wizard-option-desc">Start a new project from scratch with compliance built in</div>
            </div>
            <div class="wizard-option" data-value="modernize" onclick="ICDEV.wizardSelect(this)">
                <span class="wizard-option-icon">&#x1F504;</span>
                <div class="wizard-option-title">Modernize a Legacy App</div>
                <div class="wizard-option-desc">Migrate an existing system to modern architecture</div>
            </div>
            <div class="wizard-option" data-value="comply" onclick="ICDEV.wizardSelect(this)">
                <span class="wizard-option-icon">&#x1F6E1;</span>
                <div class="wizard-option-title">Get ATO / Compliance</div>
                <div class="wizard-option-desc">Generate security artifacts and pass compliance gates</div>
            </div>
            <div class="wizard-option" data-value="requirements" onclick="ICDEV.wizardSelect(this)">
                <span class="wizard-option-icon">&#x1F4CB;</span>
                <div class="wizard-option-title">Capture Requirements</div>
                <div class="wizard-option-desc">Gather and structure requirements from stakeholders</div>
            </div>
        </div>
    </div>

    <!-- Step 2: Role -->
    <div class="wizard-step" id="wizard-step-1">
        <div class="wizard-question">What is your role?</div>
        <div class="wizard-options">
            <div class="wizard-option" data-value="pm" onclick="ICDEV.wizardSelect(this)">
                <span class="wizard-option-icon">&#x1F4CA;</span>
                <div class="wizard-option-title">Program Manager</div>
                <div class="wizard-option-desc">I manage timelines, budgets, and stakeholders</div>
            </div>
            <div class="wizard-option" data-value="developer" onclick="ICDEV.wizardSelect(this)">
                <span class="wizard-option-icon">&#x1F4BB;</span>
                <div class="wizard-option-title">Developer / Architect</div>
                <div class="wizard-option-desc">I write code and design systems</div>
            </div>
            <div class="wizard-option" data-value="isso" onclick="ICDEV.wizardSelect(this)">
                <span class="wizard-option-icon">&#x1F510;</span>
                <div class="wizard-option-title">ISSO / Security Officer</div>
                <div class="wizard-option-desc">I manage security and compliance</div>
            </div>
            <div class="wizard-option" data-value="co" onclick="ICDEV.wizardSelect(this)">
                <span class="wizard-option-icon">&#x1F4DD;</span>
                <div class="wizard-option-title">Contracting Officer</div>
                <div class="wizard-option-desc">I manage contracts and vendor requirements</div>
            </div>
            <div class="wizard-option" data-value="analyst" onclick="ICDEV.wizardSelect(this)">
                <span class="wizard-option-icon">&#x1F50D;</span>
                <div class="wizard-option-title">Analyst</div>
                <div class="wizard-option-desc">I research data, requirements, and threats</div>
            </div>
            <div class="wizard-option" data-value="solutions_architect" onclick="ICDEV.wizardSelect(this)">
                <span class="wizard-option-icon">&#x1F3D7;</span>
                <div class="wizard-option-title">Solutions Architect</div>
                <div class="wizard-option-desc">I design technical solutions and architectures</div>
            </div>
            <div class="wizard-option" data-value="sales_engineer" onclick="ICDEV.wizardSelect(this)">
                <span class="wizard-option-icon">&#x1F4E1;</span>
                <div class="wizard-option-title">Sales Engineer</div>
                <div class="wizard-option-desc">I demo capabilities and support proposals</div>
            </div>
            <div class="wizard-option" data-value="innovator" onclick="ICDEV.wizardSelect(this)">
                <span class="wizard-option-icon">&#x1F4A1;</span>
                <div class="wizard-option-title">Innovator</div>
                <div class="wizard-option-desc">I explore emerging tech and prototype ideas</div>
            </div>
            <div class="wizard-option" data-value="biz_dev" onclick="ICDEV.wizardSelect(this)">
                <span class="wizard-option-icon">&#x1F91D;</span>
                <div class="wizard-option-title">Business Development</div>
                <div class="wizard-option-desc">I identify opportunities and grow partnerships</div>
            </div>
            <div class="wizard-option" data-value="custom" onclick="ICDEV.wizardSelect(this)">
                <span class="wizard-option-icon">&#x270D;</span>
                <div class="wizard-option-title">Custom Role</div>
                <div class="wizard-option-desc">Define your own role and persona</div>
            </div>
        </div>
        <!-- Custom role input (hidden until "Custom" selected) -->
        <div id="custom-role-form" style="display:none; margin-top:16px;">
            <div style="margin-bottom:8px;">
                <label for="custom-role-name" style="font-weight:600; display:block; margin-bottom:4px;">Role Name</label>
                <input type="text" id="custom-role-name" placeholder="e.g., Logistics Officer"
                       style="width:100%; padding:8px 12px; border:1px solid var(--border-color); border-radius:6px; background:var(--bg-primary); color:var(--text-primary);">
            </div>
            <div>
                <label for="custom-role-desc" style="font-weight:600; display:block; margin-bottom:4px;">What do you do?</label>
                <input type="text" id="custom-role-desc" placeholder="e.g., I manage supply chain operations and vendor logistics"
                       style="width:100%; padding:8px 12px; border:1px solid var(--border-color); border-radius:6px; background:var(--bg-primary); color:var(--text-primary);">
            </div>
        </div>
    </div>

    <!-- Step 3: Classification -->
    <div class="wizard-step" id="wizard-step-2">
        <div class="wizard-question">What classification level?</div>
        <div class="wizard-options">
            <div class="wizard-option" data-value="il2" onclick="ICDEV.wizardSelect(this)">
                <span class="wizard-option-icon">&#x1F310;</span>
                <div class="wizard-option-title">IL2 &mdash; Public</div>
                <div class="wizard-option-desc">Non-sensitive data, commercial cloud OK</div>
            </div>
            <div class="wizard-option" data-value="il4" onclick="ICDEV.wizardSelect(this)">
                <span class="wizard-option-icon">&#x1F512;</span>
                <div class="wizard-option-title">IL4 &mdash; CUI (GovCloud)</div>
                <div class="wizard-option-desc">Controlled Unclassified Information in AWS GovCloud</div>
            </div>
            <div class="wizard-option" data-value="il5" onclick="ICDEV.wizardSelect(this)">
                <span class="wizard-option-icon">&#x1F510;</span>
                <div class="wizard-option-title">IL5 &mdash; CUI (Dedicated)</div>
                <div class="wizard-option-desc">CUI requiring dedicated GovCloud infrastructure</div>
            </div>
            <div class="wizard-option" data-value="il6" onclick="ICDEV.wizardSelect(this)">
                <span class="wizard-option-icon">&#x1F6D1;</span>
                <div class="wizard-option-title">IL6 &mdash; SECRET</div>
                <div class="wizard-option-desc">Classified data requiring SIPR network and air-gapped systems</div>
            </div>
        </div>
    </div>

    <!-- Step 4: Compliance Frameworks -->
    <div class="wizard-step" id="wizard-step-3">
        <div class="wizard-question">Which compliance frameworks apply?</div>
        <p style="color: var(--text-secondary); margin-bottom:16px; font-size:0.9rem;">
            Auto-suggested based on your classification level. Check additional frameworks as needed.
        </p>
        <div class="wizard-frameworks" id="wizard-frameworks">
            <!-- Populated by JS based on classification selection -->
        </div>
    </div>

    <!-- Step 5: Development Standards (Phase 34) -->
    <div class="wizard-step" id="wizard-step-4">
        <div class="wizard-question">How should we set up your development standards?</div>
        <p style="color: var(--text-secondary); margin-bottom:16px; font-size:0.9rem;">
            Choose how to configure coding conventions, tooling preferences, and quality standards.
        </p>
        <div class="wizard-options">
            <div class="wizard-option" data-value="template_recommended" onclick="ICDEV.wizardSelect(this)">
                <span class="wizard-option-icon">&#x1F4CB;</span>
                <div class="wizard-option-title">Use recommended standards</div>
                <div class="wizard-option-desc">Apply the recommended template based on your sector and compliance needs</div>
            </div>
            <div class="wizard-option" data-value="scan_codebase" onclick="ICDEV.wizardSelect(this)">
                <span class="wizard-option-icon">&#x1F50D;</span>
                <div class="wizard-option-title">Scan my existing codebase</div>
                <div class="wizard-option-desc">Auto-detect standards from an existing repository (advisory — you review before applying)</div>
            </div>
            <div class="wizard-option" data-value="skip_profile" onclick="ICDEV.wizardSelect(this)">
                <span class="wizard-option-icon">&#x23ED;</span>
                <div class="wizard-option-title">Skip for now</div>
                <div class="wizard-option-desc">Configure development standards later via the Dev Profiles page</div>
            </div>
        </div>
    </div>

    <!-- Step 6: Results -->
    <div class="wizard-step" id="wizard-step-5">
        <div class="wizard-result" id="wizard-result">
            <!-- Populated by JS -->
        </div>
    </div>

    <!-- Navigation -->
    <div class="wizard-nav" id="wizard-nav">
        <button class="btn btn-secondary" id="wizard-back" onclick="ICDEV.wizardBack()" style="visibility: hidden;">
            &larr; Back
        </button>
        <span id="wizard-step-label" class="text-muted">Step 1 of 5</span>
        <button class="btn btn-primary" id="wizard-next" onclick="ICDEV.wizardNext()" disabled>
            Next &rarr;
        </button>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
(function() {
    var state = { step: 0, answers: [null, null, null, null, null] };
    var TOTAL_STEPS = 5;

    // Framework definitions
    var FRAMEWORKS = {
        fedramp_moderate: { name: "FedRAMP Moderate", desc: "Federal cloud authorization — Moderate baseline" },
        fedramp_high: { name: "FedRAMP High", desc: "Federal cloud authorization — High baseline" },
        cmmc_l2: { name: "CMMC Level 2", desc: "Cybersecurity Maturity Model — Advanced" },
        cmmc_l3: { name: "CMMC Level 3", desc: "Cybersecurity Maturity Model — Expert" },
        nist_800_171: { name: "NIST 800-171", desc: "CUI protection (DFARS)" },
        nist_800_207: { name: "NIST 800-207 (ZTA)", desc: "Zero Trust Architecture" },
        cnssi_1253: { name: "CNSSI 1253", desc: "Classified system overlay" },
        hipaa: { name: "HIPAA", desc: "Healthcare data protection" },
        pci_dss: { name: "PCI DSS v4.0", desc: "Payment card data security" },
        cjis: { name: "CJIS", desc: "Criminal justice information" },
        soc2: { name: "SOC 2 Type II", desc: "Trust services criteria" },
        iso_27001: { name: "ISO 27001:2022", desc: "Information security management" },
        hitrust: { name: "HITRUST CSF", desc: "Health information trust" }
    };

    // Auto-suggest mapping per IL level
    var IL_FRAMEWORKS = {
        il2: ["fedramp_moderate"],
        il4: ["fedramp_moderate", "cmmc_l2", "nist_800_171"],
        il5: ["fedramp_high", "cmmc_l2", "nist_800_171", "nist_800_207"],
        il6: ["fedramp_high", "cmmc_l3", "cnssi_1253", "nist_800_207"]
    };

    var PATHS = {
        build_developer: {
            name: "Build & Ship",
            desc: "Full development pipeline with compliance baked in from the start.",
            steps: [
                { title: "Create Project", desc: "Initialize with compliance scaffolding", cmd: "/icdev-init" },
                { title: "Write Tests First", desc: "Generate test cases from requirements", cmd: "/icdev-build (RED phase)" },
                { title: "Build Code", desc: "TDD: write code to pass tests", cmd: "/icdev-build (GREEN phase)" },
                { title: "Security Scan", desc: "SAST, dependency audit, secrets", cmd: "/icdev-secure" },
                { title: "Generate ATO Artifacts", desc: "SSP, POA&M, STIG, SBOM", cmd: "/icdev-comply" },
                { title: "Deploy", desc: "Generate IaC and CI/CD pipeline", cmd: "/icdev-deploy" }
            ]
        },
        build_pm: {
            name: "Requirements to Build",
            desc: "Start by capturing requirements, then hand off to development team.",
            steps: [
                { title: "Capture Requirements", desc: "AI-guided intake conversation", cmd: "/icdev-intake" },
                { title: "Review & Approve", desc: "Score readiness, detect gaps", cmd: "readiness_scorer.py" },
                { title: "Generate COAs", desc: "3 options: speed, balanced, comprehensive", cmd: "/icdev-simulate" },
                { title: "Approve & Decompose", desc: "SAFe epics, features, stories", cmd: "decomposition_engine.py" },
                { title: "Hand Off to Dev Team", desc: "Push to Jira/GitLab", cmd: "/icdev-integrate" }
            ]
        },
        comply_isso: {
            name: "Quick ATO Package",
            desc: "Generate the minimum required ATO artifacts for your project.",
            steps: [
                { title: "Categorize System", desc: "FIPS 199 security categorization", cmd: "fips199_categorizer.py" },
                { title: "Validate Requirements", desc: "Check all 17 FIPS 200 security areas", cmd: "fips200_validator.py" },
                { title: "Generate SSP", desc: "System Security Plan", cmd: "/icdev-comply" },
                { title: "Create POA&M", desc: "Document gaps with fix deadlines", cmd: "poam_generator.py" },
                { title: "STIG Check", desc: "Security technical compliance", cmd: "stig_checker.py" },
                { title: "Generate SBOM", desc: "Software inventory", cmd: "sbom_generator.py" }
            ]
        },
        comply_developer: {
            name: "Build with Compliance",
            desc: "Build your application with security compliance integrated from day one.",
            steps: [
                { title: "Create Project", desc: "Scaffolding includes compliance templates", cmd: "/icdev-init" },
                { title: "Build with TDD", desc: "Tests include security scenarios", cmd: "/icdev-build" },
                { title: "Run Security Scans", desc: "SAST + dependency audit", cmd: "/icdev-secure" },
                { title: "Generate Artifacts", desc: "SSP, POA&M, STIG, SBOM", cmd: "/icdev-comply" },
                { title: "ATO Assessment", desc: "FedRAMP + CMMC readiness", cmd: "fedramp_assessor.py" }
            ]
        },
        modernize: {
            name: "Modernize Legacy App",
            desc: "Analyze, assess, and migrate your legacy application to modern architecture.",
            steps: [
                { title: "Analyze Legacy Code", desc: "Scan codebase for complexity", cmd: "/icdev-modernize" },
                { title: "UI Analysis", desc: "Analyze screenshots for complexity", cmd: "ui_analyzer.py" },
                { title: "7R Assessment", desc: "Score migration strategies", cmd: "seven_r_assessor.py" },
                { title: "Create Migration Plan", desc: "Strangler fig or big bang", cmd: "migration_code_generator.py" },
                { title: "Generate Code", desc: "Modernized code output", cmd: "/icdev-modernize --generate" },
                { title: "Validate Compliance", desc: "Ensure ATO maintained", cmd: "compliance_bridge.py" }
            ]
        },
        requirements: {
            name: "Requirements to Approval",
            desc: "AI-guided conversation to capture, analyze, and approve requirements.",
            steps: [
                { title: "Start Intake Session", desc: "AI-guided Q&A conversation", cmd: "/icdev-intake" },
                { title: "Upload Documents", desc: "SOW, CDD, CONOPS extraction", cmd: "document_extractor.py" },
                { title: "Detect Gaps", desc: "Find missing requirements", cmd: "gap_detector.py" },
                { title: "Score Readiness", desc: "5-dimension readiness check", cmd: "readiness_scorer.py" },
                { title: "Decompose Work", desc: "Epics, features, stories", cmd: "decomposition_engine.py" },
                { title: "Generate COAs", desc: "3 cost/schedule options", cmd: "/icdev-simulate" },
                { title: "Submit for Approval", desc: "Route to reviewers", cmd: "/icdev-integrate" }
            ]
        }
    };

    function getPath(goal, role) {
        var r = (typeof role === "object") ? "developer" : role;
        if (goal === "modernize") return PATHS.modernize;
        if (goal === "requirements") return PATHS.requirements;
        if (goal === "comply" && r === "isso") return PATHS.comply_isso;
        if (goal === "comply") return PATHS.comply_developer;
        var pmRoles = ["pm", "co", "sales_engineer", "biz_dev"];
        if (goal === "build" && pmRoles.indexOf(r) !== -1) return PATHS.build_pm;
        return PATHS.build_developer;
    }

    window.ICDEV = window.ICDEV || {};

    ICDEV.wizardSelect = function(el) {
        var siblings = el.parentNode.querySelectorAll(".wizard-option");
        for (var i = 0; i < siblings.length; i++) siblings[i].classList.remove("selected");
        el.classList.add("selected");
        var val = el.getAttribute("data-value");

        // Handle custom role
        if (state.step === 1) {
            var customForm = document.getElementById("custom-role-form");
            if (val === "custom") {
                customForm.style.display = "block";
                state.answers[1] = { custom: true, name: "", description: "" };
            } else {
                customForm.style.display = "none";
                state.answers[1] = val;
            }
        } else {
            state.answers[state.step] = val;
        }

        document.getElementById("wizard-next").disabled = false;
    };

    // Update custom role fields on input
    function wireCustomRoleInputs() {
        var nameInput = document.getElementById("custom-role-name");
        var descInput = document.getElementById("custom-role-desc");
        if (nameInput) {
            nameInput.addEventListener("input", function() {
                if (typeof state.answers[1] === "object") {
                    state.answers[1].name = nameInput.value.trim();
                    // Enable next only if both fields have content
                    document.getElementById("wizard-next").disabled =
                        !nameInput.value.trim() || !descInput.value.trim();
                }
            });
        }
        if (descInput) {
            descInput.addEventListener("input", function() {
                if (typeof state.answers[1] === "object") {
                    state.answers[1].description = descInput.value.trim();
                    document.getElementById("wizard-next").disabled =
                        !nameInput.value.trim() || !descInput.value.trim();
                }
            });
        }
    }

    ICDEV.wizardNext = function() {
        // When leaving Step 3 (classification), populate Step 4 (frameworks)
        if (state.step === 2) {
            populateFrameworks(state.answers[2]);
        }
        if (state.step >= TOTAL_STEPS - 1) {
            showResult();
            state.step = TOTAL_STEPS;
            updateUI();
            return;
        }
        state.step++;
        updateUI();
    };

    ICDEV.wizardBack = function() {
        if (state.step <= 0) return;
        state.step--;
        updateUI();
    };

    function populateFrameworks(classification) {
        var container = document.getElementById("wizard-frameworks");
        var suggested = IL_FRAMEWORKS[classification] || [];
        var html = "";

        // Suggested frameworks section
        html += '<div style="margin-bottom:12px; font-weight:600; color:var(--text-secondary);">Recommended for ' + classification.toUpperCase() + '</div>';

        var allIds = Object.keys(FRAMEWORKS);
        for (var i = 0; i < allIds.length; i++) {
            var id = allIds[i];
            var fw = FRAMEWORKS[id];
            var isSuggested = suggested.indexOf(id) !== -1;
            var checked = isSuggested ? " checked" : "";

            if (i > 0 && !isSuggested && suggested.indexOf(allIds[i - 1]) !== -1) {
                html += '<div style="margin:16px 0 12px; font-weight:600; color:var(--text-secondary); border-top:1px solid var(--border-color); padding-top:12px;">Additional Frameworks</div>';
            }

            html += '<label class="framework-checkbox' + (isSuggested ? ' suggested' : '') + '">';
            html += '<input type="checkbox" value="' + id + '"' + checked + ' onchange="ICDEV.wizardFrameworkChange()">';
            html += '<span class="framework-name">' + fw.name + '</span>';
            html += '<span class="framework-desc">' + fw.desc + '</span>';
            html += '</label>';
        }
        container.innerHTML = html;

        // Set initial framework selection
        updateFrameworkAnswer();
    }

    ICDEV.wizardFrameworkChange = function() {
        updateFrameworkAnswer();
    };

    function updateFrameworkAnswer() {
        var checks = document.querySelectorAll("#wizard-frameworks input[type=checkbox]:checked");
        var selected = [];
        for (var i = 0; i < checks.length; i++) selected.push(checks[i].value);
        state.answers[3] = selected;
        // Frameworks step is always valid (even with 0 selected)
        document.getElementById("wizard-next").disabled = false;
    }

    function updateUI() {
        var steps = document.querySelectorAll(".wizard-step");
        for (var i = 0; i < steps.length; i++) {
            steps[i].classList.toggle("active", i === state.step);
        }
        var dots = document.querySelectorAll(".wizard-progress-dot");
        for (var j = 0; j < dots.length; j++) {
            dots[j].classList.remove("active", "completed");
            if (j < state.step) dots[j].classList.add("completed");
            if (j === state.step) dots[j].classList.add("active");
        }
        var backBtn = document.getElementById("wizard-back");
        var nextBtn = document.getElementById("wizard-next");
        var label = document.getElementById("wizard-step-label");
        var nav = document.getElementById("wizard-nav");

        backBtn.style.visibility = state.step > 0 ? "visible" : "hidden";

        if (state.step >= TOTAL_STEPS) {
            nav.style.display = "none";
        } else {
            nav.style.display = "flex";
            // Framework step is always ready
            if (state.step === 3) {
                nextBtn.disabled = false;
            } else if (state.step === 1 && typeof state.answers[1] === "object") {
                // Custom role: need both name and desc
                var n = document.getElementById("custom-role-name");
                var d = document.getElementById("custom-role-desc");
                nextBtn.disabled = !(n && n.value.trim() && d && d.value.trim());
            } else {
                nextBtn.disabled = !state.answers[state.step];
            }
            nextBtn.textContent = state.step === (TOTAL_STEPS - 1) ? "See Recommendation \u2192" : "Next \u2192";
            label.textContent = "Step " + (state.step + 1) + " of " + TOTAL_STEPS;
        }
    }

    function showResult() {
        var roleVal = state.answers[1];
        var roleParam = (typeof roleVal === "object") ? "custom" : roleVal;
        var path = getPath(state.answers[0], roleVal);
        var frameworks = state.answers[3] || [];

        var chatUrl = "/chat?goal=" + encodeURIComponent(state.answers[0])
            + "&role=" + encodeURIComponent(roleParam)
            + "&classification=" + encodeURIComponent(state.answers[2])
            + "&frameworks=" + encodeURIComponent(frameworks.join(","));

        // Add custom role params if applicable
        if (typeof roleVal === "object" && roleVal.custom) {
            chatUrl += "&custom_role_name=" + encodeURIComponent(roleVal.name || "");
            chatUrl += "&custom_role_desc=" + encodeURIComponent(roleVal.description || "");
        }

        var html = '<h2>Recommended Path</h2>';
        html += '<div class="recommended-path">' + path.name + '</div>';
        html += '<p style="color: var(--text-secondary); margin-bottom: 20px;">' + path.desc + '</p>';

        // Show selected persona
        var personaLabel = roleParam;
        if (typeof roleVal === "object" && roleVal.name) personaLabel = roleVal.name;
        html += '<p style="color: var(--accent-blue); margin-bottom: 8px;"><strong>Your Persona:</strong> ' + personaLabel + '</p>';

        // Show selected frameworks
        if (frameworks.length > 0) {
            html += '<p style="margin-bottom: 16px;"><strong>Compliance:</strong> ';
            for (var f = 0; f < frameworks.length; f++) {
                var fw = FRAMEWORKS[frameworks[f]];
                if (fw) html += '<span class="framework-tag">' + fw.name + '</span> ';
            }
            html += '</p>';
        }

        html += '<div class="path-steps">';
        for (var i = 0; i < path.steps.length; i++) {
            var s = path.steps[i];
            html += '<div class="path-step">';
            html += '<div class="step-number">' + (i + 1) + '</div>';
            html += '<div class="step-text"><strong>' + s.title + '</strong>';
            html += '<span>' + s.desc + '</span>';
            html += '<br><code style="font-size:0.75rem; margin-top:4px; display:inline-block;">' + s.cmd + '</code>';
            html += '</div></div>';
        }
        html += '</div>';
        html += '<div style="margin-top:24px;">';
        html += '<a href="' + chatUrl + '" class="btn btn-primary btn-lg">Start Requirements Chat &rarr;</a> ';
        html += '<a href="/quick-paths" class="btn btn-secondary">View All Quick Paths</a> ';
        html += '<button class="btn btn-secondary" onclick="location.reload()">Start Over</button>';
        html += '</div>';
        document.getElementById("wizard-result").innerHTML = html;
    }

    // Wire custom role inputs after DOM ready
    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", wireCustomRoleInputs);
    } else {
        wireCustomRoleInputs();
    }
})();
</script>
{% endblock %}