{% extends "base.html" %}

{% block title %}Chat — ICDEV™ Dashboard{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/chat.css') }}?v=20260518e">
{% endblock %}

{% block content %}
<div class="page-header">
    <h1>AI Assistant</h1>
    <p class="text-muted">Ask anything about your project — requirements, architecture, security design, or compliance. I route your question to the right specialist automatically.</p>
</div>

<!-- Stats bar -->
<div class="stat-grid" id="chat-top-stats">
    <div class="stat-card">
        <div class="stat-value" id="stat-active">0</div>
        <div class="stat-label">Active Chats</div>
    </div>
    <div class="stat-card">
        <div class="stat-value" id="stat-processing">0</div>
        <div class="stat-label">Processing</div>
    </div>
    <div class="stat-card">
        <div class="stat-value" id="stat-queued">0</div>
        <div class="stat-label">Queued Messages</div>
    </div>
    <div class="stat-card">
        <div class="stat-value" id="stat-total">0</div>
        <div class="stat-label">Total Conversations</div>
    </div>
</div>

<!-- Main layout: CSS Grid with resize handles (D-CU-5) -->
<div class="chat-layout" id="chat-layout">
    <!-- Left sidebar: context list -->
    <div class="chat-sidebar" id="chat-sidebar">
        <div class="chat-sidebar__header">
            <strong>Conversations</strong>
            <button id="btn-new-context" class="chat-sidebar__new-btn" title="Create new chat context">+ New</button>
        </div>
        <div id="context-list" class="chat-sidebar__list"></div>

        <!-- Common Use Cases -->
        <div class="chat-sidebar__uc-section">
            <div class="chat-sidebar__uc-header">
                <strong>Common Use Cases</strong>
                <span class="chat-uc-toolbar-btns">
                    <button id="btn-uc-chain-mode" class="chat-uc-toolbar-btn" title="Chain use cases">&#x26D3;</button>
                    <button id="btn-uc-create" class="chat-uc-toolbar-btn" title="Create new use case">&#xFF0B;</button>
                    <button id="btn-uc-import" class="chat-uc-toolbar-btn" title="Import use case bundle">&#x2191;</button>
                    <button id="btn-uc-compact" class="chat-uc-toolbar-btn chat-uc-toolbar-btn--active" title="Toggle compact view">&#x2261;</button>
                    <button id="btn-uc-collapse" class="chat-uc-collapse-btn" title="Collapse" aria-label="Toggle use cases">&#x25BE;</button>
                </span>
            </div>
            <div id="uc-panel" class="chat-uc-panel">
                <div class="chat-uc-search-wrap">
                    <input type="text" id="usecase-search" class="chat-uc-search" placeholder="Search use cases..." autocomplete="off">
                </div>
                <div id="uc-category-chips" class="chat-uc-chips"></div>
                <div id="uc-chain-bar" class="chat-uc-chain-bar" style="display:none">
                    <span id="uc-chain-count">0 selected</span>
                    <input id="uc-chain-name" class="chat-uc-chain-input" placeholder="Name this chain...">
                    <button id="btn-chain-activate" class="btn btn-xs btn-primary">Activate Chain</button>
                    <button id="btn-chain-cancel" class="btn btn-xs btn-secondary">Cancel</button>
                </div>
                <div id="usecase-list" class="chat-uc-list chat-uc-list--compact">
                    <div class="chat-uc-loading">Loading...</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Left resize handle -->
    <div class="chat-resize-handle" id="resize-left" title="Drag to resize"></div>

    <!-- Main chat pane -->
    <div class="chat-main">
        <!-- Chat header -->
        <div id="chat-header" class="chat-header">
            <span id="chat-title" class="chat-header__title">Start a new conversation</span>
            <div class="chat-header__actions">
                <span id="chat-status" class="badge chat-header__status"></span>
                <button id="btn-ricoas-toggle" class="chat-toggle-btn chat-toggle-btn--ricoas" title="Toggle Requirements sidebar">Requirements</button>
                <button id="btn-gov-toggle" class="chat-toggle-btn chat-toggle-btn--gov" title="Toggle AI Governance sidebar">Governance</button>
                <button id="btn-intel-toggle" class="chat-toggle-btn chat-toggle-btn--intel" title="Toggle Knowledge &amp; Intelligence sidebar">Knowledge</button>
                <button id="btn-focus-mode" class="chat-toggle-btn chat-toggle-btn--focus" title="Focus mode — hide side panels for a cleaner chat view">Focus</button>
                <button id="btn-close-context" class="chat-toggle-btn chat-toggle-btn--close">Close</button>
            </div>
        </div>

        <!-- Wizard origin banner -->
        <div id="wizard-origin-banner" class="wizard-origin-banner" style="display:none;">
            <span class="wizard-origin-icon">&#x1F3AF;</span>
            <span class="wizard-origin-text">Started from <strong id="wizard-origin-label">Getting Started</strong></span>
            <button class="wizard-origin-dismiss" onclick="document.getElementById('wizard-origin-banner').style.display='none';" title="Dismiss">&#x2715;</button>
        </div>

        <!-- Message stream -->
        <div id="message-stream" class="chat-messages">
            <div class="chat-welcome" id="chat-welcome-banner">
                <div class="chat-welcome__title">Hello! How can I help you today?</div>
                <div class="chat-welcome__subtitle">I can help you capture requirements, design systems, review security, and build government or commercial applications. Just describe what you want to accomplish.</div>
                <div class="chat-welcome__prompts">
                    <span class="chat-welcome__prompt-chip" data-prompt="I want to build a new application">I want to build an app</span>
                    <span class="chat-welcome__prompt-chip" data-prompt="Help me capture requirements for my project">Capture requirements</span>
                    <span class="chat-welcome__prompt-chip" data-prompt="Review my security architecture">Review security</span>
                    <span class="chat-welcome__prompt-chip" data-prompt="Explain the compliance requirements for a DoD system">DoD compliance guidance</span>
                </div>
            </div>
        </div>

        <!-- Typing indicator (D-CU-1) -->
        <div id="typing-indicator" class="typing-indicator">
            <div class="agent-avatar" id="typing-avatar" style="width:28px;height:28px;font-size:0.7rem;"></div>
            <div class="typing-dots">
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
            </div>
            <span class="typing-label" id="typing-label">Agent is thinking...</span>
        </div>

        <!-- Intervention bar (visible during processing) -->
        <div id="intervention-bar" class="chat-intervention">
            <div class="chat-intervention__inner">
                <span class="chat-intervention__label">AI is thinking…</span>
                <input type="text" id="intervention-input" class="chat-intervention__input" placeholder="Send a new direction or clarification…">
                <button id="btn-intervene" class="chat-intervention__btn" title="Send a new direction to the AI">Redirect</button>
            </div>
        </div>

        <!-- Input area with file upload -->
        <div id="input-area" class="chat-input-area">
            <div class="chat-input-area__inner">
                <button id="chat-upload-btn" class="chat-upload-btn" title="Attach a file (PDF, Word, image, CSV, JSON, YAML, Markdown)" aria-label="Attach file" style="padding:0 8px;">&#x1F4CE;</button>
                <input type="text" id="message-input" class="chat-message-input" placeholder="Type a message..." disabled>
                <button id="btn-send" class="chat-send-btn" disabled>Send</button>
                <input type="file" id="chat-file-input" style="display:none" accept=".txt,.md,.pdf,.docx,.png,.jpg,.jpeg,.gif,.webp">
            </div>
        </div>
    </div>

    <!-- Right resize handle -->
    <div class="chat-resize-handle" id="resize-right" title="Drag to resize"></div>

    <!-- Right sidebar: Tabbed (RICOAS | Gov | Intel) -->
    <div id="right-sidebar" class="chat-right-panel">
        <!-- Tabs -->
        <div class="chat-right-tabs" id="right-sidebar-tabs">
            <button class="chat-right-tab chat-right-tab--active" data-tab="ricoas" id="tab-ricoas" title="Requirements Intake — readiness score, test scenarios, and recommended next steps">Requirements</button>
            <button class="chat-right-tab" data-tab="gov" id="tab-gov" title="AI Governance — transparency and accountability status">Governance</button>
            <button class="chat-right-tab" data-tab="intel" id="tab-intel" title="Knowledge — documents, knowledge graph, and AI learning status">Knowledge</button>
        </div>

        <!-- RICOAS Tab Content -->
        <div id="ricoas-sidebar" class="chat-right-tab-content chat-right-tab-content--active" data-tab-content="ricoas">
            <div class="tab-processing-bar" id="ricoas-processing-bar">
                <span class="tab-processing-spinner"></span>
                <span>AI is processing&hellip;</span>
            </div>
            <!-- Workflow Step Bar — shown when active use case has workflow_steps -->
            <div id="workflow-step-bar" class="sidebar-section" style="display:none;">
                <h4 class="chat-sidebar-heading">Workflow Progress</h4>
                <div class="wf-step-progress">
                    <div class="wf-step-indicator" id="wf-step-indicator">Step 1</div>
                    <div class="wf-step-label" id="wf-step-label"></div>
                    <div class="wf-step-dots" id="wf-step-dots"></div>
                </div>
                <button class="btn btn-sm btn-primary wf-next-btn" id="wf-next-btn" onclick="advanceWorkflowStep()">Next Step &#x2192;</button>
            </div>

            <!-- Compliance Frameworks -->
            <div class="sidebar-section" id="frameworks-section" style="display:none;">
                <h4 class="chat-sidebar-heading">Compliance Frameworks</h4>
                <div id="framework-tags" class="framework-tags"></div>
            </div>

            <!-- Complexity -->
            <div class="sidebar-section" id="complexity-section" style="display:none;">
                <h4 class="chat-sidebar-heading">Project Complexity</h4>
                <div class="complexity-indicator" id="complexity-indicator">
                    <div class="complexity-level" id="complexity-level"></div>
                    <div class="complexity-bar-container"><div class="complexity-bar-fill" id="complexity-bar" style="width:0%"></div></div>
                    <div class="complexity-score-text" id="complexity-score-text"></div>
                </div>
                <div class="complexity-recommendation" id="complexity-recommendation" style="display:none;"></div>
            </div>

            <!-- Readiness Score -->
            <h4 class="chat-sidebar-heading">Readiness Score</h4>
            <div id="readiness-placeholder" style="font-size:0.82rem;color:var(--text-muted);padding:0.5rem 0 0.75rem;">Start chatting to track your requirements readiness.</div>
            <div class="readiness-gauge-container" id="readiness-gauge" style="display:none;text-align: center;">
                <svg viewBox="0 0 120 120" class="readiness-gauge-svg" style="width: 100px; height: 100px;">
                    <circle cx="60" cy="60" r="50" fill="none" stroke="var(--border-color)" stroke-width="10"/>
                    <circle cx="60" cy="60" r="50" fill="none" stroke="var(--accent-blue)" stroke-width="10"
                            stroke-dasharray="314" stroke-dashoffset="314" stroke-linecap="round"
                            transform="rotate(-90 60 60)" id="readiness-arc"/>
                    <text x="60" y="60" text-anchor="middle" dominant-baseline="central"
                          fill="var(--text-primary)" font-size="24" font-weight="bold" id="readiness-pct">0%</text>
                </svg>
            </div>

            <div class="readiness-dimensions" id="readiness-dimensions" style="display:none;">
                <div class="readiness-dim"><span class="readiness-dim-label">Completeness</span><div class="readiness-bar"><div class="readiness-bar-fill" id="bar-completeness" style="width:0%"></div></div><span class="readiness-dim-value" id="val-completeness">0%</span></div>
                <div class="readiness-dim"><span class="readiness-dim-label">Clarity</span><div class="readiness-bar"><div class="readiness-bar-fill" id="bar-clarity" style="width:0%"></div></div><span class="readiness-dim-value" id="val-clarity">0%</span></div>
                <div class="readiness-dim"><span class="readiness-dim-label">Feasibility</span><div class="readiness-bar"><div class="readiness-bar-fill" id="bar-feasibility" style="width:0%"></div></div><span class="readiness-dim-value" id="val-feasibility">0%</span></div>
                <div class="readiness-dim"><span class="readiness-dim-label">Compliance</span><div class="readiness-bar"><div class="readiness-bar-fill" id="bar-compliance" style="width:0%"></div></div><span class="readiness-dim-value" id="val-compliance">0%</span></div>
                <div class="readiness-dim"><span class="readiness-dim-label">Testability</span><div class="readiness-bar"><div class="readiness-bar-fill" id="bar-testability" style="width:0%"></div></div><span class="readiness-dim-value" id="val-testability">0%</span></div>
            </div>
            <div style="text-align:center;margin-top:8px;">
                <button class="btn btn-sm btn-explain" id="readiness-explain-btn" onclick="showExplain(window._CHAT_CONFIG && window._CHAT_CONFIG.sessionId)" style="padding:2px 12px;font-size:0.78rem;">&#x2753; Explain</button>
            </div>

            <div class="chat-stats">
                <div class="chat-stat"><span class="chat-stat-label">Requirements</span> <span class="chat-stat-value" id="stat-requirements">0</span></div>
                <div class="chat-stat"><span class="chat-stat-label">Documents</span> <span class="chat-stat-value" id="stat-documents">0</span></div>
                <div class="chat-stat"><span class="chat-stat-label">Turns</span> <span class="chat-stat-value" id="stat-turns">0</span></div>
            </div>

            <!-- Elicitation Techniques -->
            <div class="sidebar-section" id="techniques-section">
                <h4 class="chat-sidebar-heading">Ways to Explore Requirements</h4>
                <div id="technique-active" class="technique-active-banner" style="display:none;">
                    <span id="technique-active-name"></span>
                    <button class="technique-deactivate-btn" onclick="ICDEV.chatDeactivateTechnique()" title="Deactivate">&times;</button>
                </div>
                <div id="technique-chips" class="technique-chips"></div>
            </div>

            <!-- BDD Preview -->
            <div class="sidebar-section" id="bdd-preview-section" style="display:none;">
                <h4 class="chat-sidebar-heading">Test Scenarios (Draft)</h4>
                <div id="bdd-preview-list" class="bdd-preview-list"></div>
            </div>

            <!-- Courses of Action -->
            <div class="sidebar-section" id="coa-section" style="display:none;">
                <h4 class="chat-sidebar-heading">Options to Consider</h4>
                <div id="coa-list"></div>
                <div id="coa-selected-banner" class="coa-selected-banner" style="display:none;">&#x2713; <span id="coa-selected-name"></span> selected</div>
            </div>

            <div id="chat-actions" class="chat-actions">
                <button class="btn btn-secondary" id="export-btn" style="display:none;" onclick="ICDEV.chatExport()">Export Requirements</button>
            </div>

            <!-- Post-export actions -->
            <div id="post-export-actions" class="post-export-actions" style="display:none;">
                <!-- Use case deep links — populated by JS when a use case context is active -->
                <div id="uc-specific-actions" class="uc-specific-actions" style="display:none;"></div>
                <h4 class="chat-sidebar-heading">What's next?</h4>
                <button class="btn btn-warning" onclick="ICDEV.chatSendToKanban()">&#x1F4CB; Send to Kanban</button>
                <button class="btn btn-secondary" onclick="ICDEV.chatRunSimulation()">&#x1F9EA; Dry Run (COAs)</button>
                <button class="btn btn-secondary" onclick="ICDEV.chatViewRequirements()">View Requirements</button>
                <button class="btn btn-secondary" onclick="ICDEV.chatGeneratePRD()">&#x1F4C4; Generate PRD</button>
                <button class="btn btn-secondary" onclick="ICDEV.chatValidatePRD()">&#x2714; Validate PRD</button>
                <a id="uc-standalone-link" class="btn btn-secondary" style="display:none;" download>&#x2B07; Standalone App</a>
            </div>

            <!-- Build Pipeline -->
            <div class="sidebar-section" id="build-pipeline-section" style="display:none;">
                <h4 class="chat-sidebar-heading">Build Pipeline</h4>
                <div id="build-pipeline-phases" class="build-pipeline"></div>
                <div id="build-pipeline-status" class="build-pipeline-status"></div>
                <div id="build-done-actions" class="build-done-actions" style="display:none;">
                    <button class="btn btn-primary" onclick="ICDEV.chatViewProject()">View Project</button>
                    <button class="btn btn-secondary" onclick="ICDEV.chatRunTests()">Run Tests</button>
                    <button class="btn btn-secondary" onclick="window.open('/events','_blank')">View Events</button>
                </div>
            </div>
        </div>

        <!-- Governance Tab Content -->
        <div id="gov-sidebar" class="chat-right-tab-content" data-tab-content="gov">
            <div class="tab-processing-bar" id="gov-processing-bar">
                <span class="tab-processing-spinner"></span>
                <span>AI is processing&hellip;</span>
            </div>
            <div class="gov-sidebar-header">
                <strong class="gov-sidebar-title">AI Governance</strong>
            </div>
            <div id="gov-sidebar-content">
                <p class="gov-sidebar-placeholder">Governance status updates as the AI processes your request.</p>
            </div>
        </div>

        <!-- Intelligence Tab Content -->
        <div id="intel-sidebar" class="chat-right-tab-content" data-tab-content="intel">
            <div class="tab-processing-bar" id="intel-processing-bar">
                <span class="tab-processing-spinner"></span>
                <span>AI is processing&hellip;</span>
            </div>
            <div class="intel-sidebar-header">
                <strong class="intel-sidebar-title">Intelligence</strong>
                <span class="intel-sidebar-subtitle">Documents · Learning · Research</span>
            </div>

            <!-- RAG Knowledge Sources -->
            <div class="intel-section" id="intel-rag">
                <h4 class="intel-section-heading intel-section-heading--rag">Knowledge Sources (RAG)</h4>
                <div id="intel-rag-content" class="intel-section-content">
                    No sources retrieved yet. RAG context is automatically injected when you ask questions.
                </div>
            </div>

            <!-- Bayesian Learning -->
            <div class="intel-section" id="intel-bayesian">
                <h4 class="intel-section-heading intel-section-heading--bayesian">Bayesian Learning</h4>
                <div id="intel-bayesian-content" class="intel-section-content">
                    Discuss compliance topics to get information-gain optimized recommendations for control implementation order.
                </div>
            </div>

            <!-- Code Quality -->
            <div class="intel-section" id="intel-code-quality">
                <h4 class="intel-section-heading intel-section-heading--quality">Code Quality</h4>
                <div id="intel-code-quality-content" class="intel-section-content">
                    Discuss code or implementation topics to get maintainability insights, smell detection, and complexity alerts.
                </div>
            </div>

            <!-- Genesis Activity -->
            <div class="intel-section" id="intel-genesis">
                <h4 class="intel-section-heading intel-section-heading--genesis">Genesis Research Lab</h4>
                <div id="intel-genesis-content" class="intel-section-content">
                    Discuss improvements or research to see autonomous Genesis findings and pending knowledge packets.
                </div>
            </div>

            <!-- Context Health -->
            <div class="intel-section" id="intel-health">
                <h4 class="intel-section-heading intel-section-heading--health">Context Health</h4>
                <div id="intel-health-content" class="intel-section-content">
                    <span style="color: #4caf50;">Healthy</span> — Pressure and stuck detection monitored every 10 turns.
                </div>
            </div>
        </div>
    </div>
</div>

<!-- New Context Modal -->
<div id="new-context-modal" class="chat-modal-overlay">
    <div class="chat-modal">
        <h3 class="chat-modal__title">New Chat Context</h3>
        <div class="chat-modal__field">
            <label class="chat-modal__label">Title</label>
            <input type="text" id="new-ctx-title" class="chat-modal__input" placeholder="Chat title...">
        </div>
        <div class="chat-modal__advanced-toggle" id="ctx-advanced-toggle" style="margin-top:0.75rem;cursor:pointer;font-size:0.82rem;color:var(--text-muted);user-select:none;">Advanced settings &#x25B8;</div>
        <div id="ctx-advanced-body" style="display:none;">
            <div class="chat-modal__field">
                <label class="chat-modal__label">Agent Model</label>
                <select id="new-ctx-model" class="chat-modal__select">
                    <option value="kimi-cloud" selected>Kimi Cloud (Default)</option>
                    <option value="sonnet">Sonnet</option>
                    <option value="opus">Opus</option>
                    <option value="haiku">Haiku</option>
                </select>
            </div>
            <div class="chat-modal__field">
                <label class="chat-modal__label chat-modal__label--inline">
                    <input type="checkbox" id="new-ctx-intake" class="chat-modal__checkbox">
                    Link to Requirements Intake (RICOAS)
                </label>
            </div>
            <div class="chat-modal__field">
                <label class="chat-modal__label">System Prompt (optional)</label>
                <textarea id="new-ctx-prompt" class="chat-modal__textarea" placeholder="Custom system prompt..." rows="3"></textarea>
            </div>
        </div>
        <div class="chat-modal__actions">
            <button id="btn-cancel-modal" class="chat-modal__btn chat-modal__btn--cancel">Cancel</button>
            <button id="btn-create-context" class="chat-modal__btn chat-modal__btn--create">Create</button>
        </div>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
    var tog = document.getElementById('ctx-advanced-toggle');
    if (tog) tog.addEventListener('click', function () {
        var body = document.getElementById('ctx-advanced-body');
        var open = body.style.display !== 'none';
        body.style.display = open ? 'none' : '';
        this.textContent = open ? 'Advanced settings ▸' : 'Advanced settings ▾';
    });
});
</script>

<!-- Pass config to JS -->
<script>
    window._CHAT_CONFIG = {
        sessionId: {{ session_id|tojson if session_id is defined else 'null' }},
        wizardGoal: {{ (wizard_goal or '')|tojson if wizard_goal is defined else '""' }},
        wizardRole: {{ (wizard_role or '')|tojson if wizard_role is defined else '""' }},
        wizardClassification: {{ (wizard_classification or '')|tojson if wizard_classification is defined else '""' }},
        wizardFrameworks: {{ (wizard_frameworks or '')|tojson if wizard_frameworks is defined else '""' }},
        customRoleName: {{ (wizard_custom_role_name or '')|tojson if wizard_custom_role_name is defined else '""' }},
        customRoleDesc: {{ (wizard_custom_role_desc or '')|tojson if wizard_custom_role_desc is defined else '""' }},
        useCaseId: {{ (wizard_use_case or '')|tojson if wizard_use_case is defined else '""' }},
        skipFastTrack: {{ 'true' if wizard_skip_fast_track else 'false' }},
        fromWizard: {{ 'true' if from_wizard else 'false' }}
    };
</script>
{% endblock %}

{% block scripts %}
<script defer src="{{ url_for('static', filename='js/chat.js') }}?v=20260518e"></script>
<script>
// Right sidebar tab switching
(function() {
    var tabs = document.querySelectorAll('.chat-right-tab');
    tabs.forEach(function(tab) {
        tab.addEventListener('click', function() {
            var tabName = this.getAttribute('data-tab');
            // Deactivate all tabs and contents
            document.querySelectorAll('.chat-right-tab').forEach(function(t) { t.classList.remove('chat-right-tab--active'); });
            document.querySelectorAll('.chat-right-tab-content').forEach(function(c) { c.classList.remove('chat-right-tab-content--active'); });
            // Activate clicked tab
            this.classList.add('chat-right-tab--active');
            var content = document.querySelector('[data-tab-content="' + tabName + '"]');
            if (content) content.classList.add('chat-right-tab-content--active');
        });
    });
})();

// Right sidebar toggle buttons (Gov, Intel, RICOAS)
(function() {
    var rightSidebar = document.getElementById('right-sidebar');

    function showRightSidebar(tabName) {
        rightSidebar.classList.add('chat-right-panel--visible');
        document.getElementById('chat-layout').classList.add('chat-layout--right-open');
        // Switch to the requested tab
        document.querySelectorAll('.chat-right-tab').forEach(function(t) { t.classList.remove('chat-right-tab--active'); });
        document.querySelectorAll('.chat-right-tab-content').forEach(function(c) { c.classList.remove('chat-right-tab-content--active'); });
        var tab = document.getElementById('tab-' + tabName);
        var content = document.querySelector('[data-tab-content="' + tabName + '"]');
        if (tab) tab.classList.add('chat-right-tab--active');
        if (content) content.classList.add('chat-right-tab-content--active');
    }

    function hideRightSidebar() {
        rightSidebar.classList.remove('chat-right-panel--visible');
        document.getElementById('chat-layout').classList.remove('chat-layout--right-open');
    }

    function toggleTab(tabName) {
        var isVisible = rightSidebar.classList.contains('chat-right-panel--visible');
        var activeTab = document.querySelector('.chat-right-tab--active');
        var activeTabName = activeTab ? activeTab.getAttribute('data-tab') : '';

        if (isVisible && activeTabName === tabName) {
            hideRightSidebar();
        } else {
            showRightSidebar(tabName);
            if (tabName === 'gov') refreshGovernanceSidebar();
        }
    }

    // Button handlers
    var btnGov = document.getElementById('btn-gov-toggle');
    var btnIntel = document.getElementById('btn-intel-toggle');
    var btnRicoas = document.getElementById('btn-ricoas-toggle');

    if (btnGov) btnGov.addEventListener('click', function() { toggleTab('gov'); });
    if (btnIntel) btnIntel.addEventListener('click', function() { toggleTab('intel'); });
    if (btnRicoas) btnRicoas.addEventListener('click', function() { toggleTab('ricoas'); });

    // Focus mode
    var btnFocus = document.getElementById('btn-focus-mode');
    if (btnFocus) {
        btnFocus.addEventListener('click', function() {
            var sidebar = document.getElementById('chat-sidebar');
            var layout = document.getElementById('chat-layout');
            var resizeLeft = document.getElementById('resize-left');
            var resizeRight = document.getElementById('resize-right');
            var isFocused = sidebar.style.display === 'none';

            if (isFocused) {
                sidebar.style.display = '';
                if (resizeLeft) resizeLeft.style.display = '';
                btnFocus.textContent = 'Focus';
            } else {
                sidebar.style.display = 'none';
                hideRightSidebar();
                if (resizeLeft) resizeLeft.style.display = 'none';
                if (resizeRight) resizeRight.style.display = 'none';
                layout.style.gridTemplateColumns = '1fr';
                btnFocus.textContent = 'Expand';
            }
        });
    }

    // AI Governance sidebar refresh
    function refreshGovernanceSidebar() {
        var content = document.getElementById('gov-sidebar-content');
        if (!content) return;
        var html = '';
        Promise.all([
            fetch('/api/ai-transparency/stats').then(function(r) { return r.ok ? r.json() : null; }).catch(function() { return null; }),
            fetch('/api/ai-accountability/stats').then(function(r) { return r.ok ? r.json() : null; }).catch(function() { return null; })
        ]).then(function(results) {
            var tStats = results[0];
            var aStats = results[1];

            html += '<div class="gov-section-heading"><strong>Transparency</strong></div>';
            if (tStats) {
                html += govStatRow('AI Systems', tStats.inventory_count || 0);
                html += govStatRow('Model Cards', tStats.model_cards || 0);
                html += govStatRow('System Cards', tStats.system_cards || 0);
            } else {
                html += '<p class="gov-sidebar-placeholder">Transparency API not available</p>';
            }

            html += '<div class="gov-section-heading" style="margin-top:12px;"><strong>Accountability</strong></div>';
            if (aStats) {
                html += govStatRow('Oversight Plans', aStats.oversight_plans || 0);
                html += govStatRow('CAIO Designated', aStats.caio_designations || 0);
                html += govStatRow('Open Appeals', aStats.open_appeals || aStats.total_appeals || 0);
                html += govStatRow('Ethics Reviews', aStats.ethics_reviews || 0);
                html += govStatRow('Reassessments', aStats.reassessment_schedules || 0);
            } else {
                html += '<p class="gov-sidebar-placeholder">Accountability API not available</p>';
            }

            content.innerHTML = html;
        });
    }

    function govStatRow(label, value) {
        return '<div class="gov-stat-row"><span class="gov-stat-label">' + label + '</span><span class="gov-stat-value">' + value + '</span></div>';
    }

    // Refresh on governance_advisory state change
    if (typeof window._chatOnStateChange === 'undefined') {
        window._chatOnStateChange = [];
    }
    window._chatOnStateChange.push(function(data) {
        if (data && data.change_type === 'governance_advisory' && rightSidebar.classList.contains('chat-right-panel--visible')) {
            var activeTab = document.querySelector('.chat-right-tab--active');
            if (activeTab && activeTab.getAttribute('data-tab') === 'gov') {
                refreshGovernanceSidebar();
            }
        }
    });
})();

// Intelligence sidebar state change handlers
(function() {
    if (typeof window._chatOnStateChange === 'undefined') {
        window._chatOnStateChange = [];
    }
    window._chatOnStateChange.push(function(data) {
        if (!data) return;
        var ct = data.change_type || '';

        if (ct === 'rag_attribution') {
            var ragEl = document.getElementById('intel-rag-content');
            if (ragEl && data.source_count) {
                ragEl.innerHTML = '<span style="color:#2196f3;font-weight:600;">' + data.source_count +
                    ' source(s)</span> used in last response. View the [Knowledge Sources] message in chat for details.';
            }
        }

        if (ct === 'bayesian_advisory') {
            var bayEl = document.getElementById('intel-bayesian-content');
            if (bayEl) {
                var domain = data.fitness_domain || 'compliance';
                bayEl.innerHTML = '<span style="color:#00bfa5;font-weight:600;">Active</span> — ' +
                    'Bayesian info-gain analysis running for <em>' + domain + '</em>. ' +
                    'See [Bayesian Learning] messages for recommended next actions.';
            }
        }

        if (ct === 'code_quality_advisory') {
            var cqEl = document.getElementById('intel-code-quality-content');
            if (cqEl) {
                var score = data.score ? (data.score * 100).toFixed(0) + '%' : 'N/A';
                var sev = data.severity || 'info';
                var color = sev === 'high' ? '#d44' : sev === 'medium' ? '#ff9800' : '#4caf50';
                cqEl.innerHTML = '<span style="color:' + color + ';font-weight:600;">Score: ' + score + '</span> — ' +
                    'See [Code Quality] messages for smell and complexity details.';
            }
        }

        if (ct === 'genesis_advisory') {
            var genEl = document.getElementById('intel-genesis-content');
            if (genEl) {
                genEl.innerHTML = '<span style="color:#e040fb;font-weight:600;">Activity detected</span> — ' +
                    'See [Genesis Insight] messages for research findings and pending GKPs.';
            }
        }

        if (ct === 'context_health') {
            var healthEl = document.getElementById('intel-health-content');
            if (healthEl) {
                var level = data.pressure_level || 'unknown';
                var stuck = data.is_stuck;
                var hColor = stuck ? '#ff5252' : (level === 'high' ? '#ff9800' : '#4caf50');
                var hText = stuck ? 'STUCK — agent may need intervention' :
                    (level === 'high' ? 'High pressure (' + level + ')' : 'Healthy');
                healthEl.innerHTML = '<span style="color:' + hColor + ';font-weight:600;">' + hText + '</span>';
            }
        }
    });
})();

// Resize handles
(function() {
    function initResize(handleId, targetId, side) {
        var handle = document.getElementById(handleId);
        var target = document.getElementById(targetId);
        if (!handle || !target) return;

        var startX, startWidth;

        handle.addEventListener('mousedown', function(e) {
            e.preventDefault();
            startX = e.clientX;
            startWidth = target.offsetWidth;
            handle.classList.add('chat-resize-handle--active');
            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);
        });

        function onMouseMove(e) {
            var diff = e.clientX - startX;
            var newWidth = side === 'left' ? startWidth + diff : startWidth - diff;
            newWidth = Math.max(200, Math.min(400, newWidth));
            target.style.width = newWidth + 'px';
            var layout = document.getElementById('chat-layout');
            if (side === 'left') {
                layout.style.gridTemplateColumns = newWidth + 'px 6px 1fr 6px var(--chat-right-w, 0px)';
            }
            try { localStorage.setItem('icdev_chat_' + side + '_w', newWidth); } catch(ex) {}
        }

        function onMouseUp() {
            handle.classList.remove('chat-resize-handle--active');
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
        }
    }

    initResize('resize-left', 'chat-sidebar', 'left');
    initResize('resize-right', 'right-sidebar', 'right');


    // Restore saved widths
    try {
        var leftW = localStorage.getItem('icdev_chat_left_w');
        if (leftW) document.getElementById('chat-sidebar').style.width = leftW + 'px';
    } catch(ex) {}
})();
</script>

<!-- Use Case Edit Modal -->
<div id="uc-edit-modal" class="uc-modal-overlay" style="display:none;" role="dialog" aria-modal="true" aria-labelledby="uc-modal-title">
    <div class="uc-modal">
        <div class="uc-modal__header">
            <h3 id="uc-modal-title">Edit Use Case</h3>
            <div class="uc-modal__header-actions">
                <button class="btn btn-sm btn-outline uc-reset-btn" id="uc-reset-btn" title="Discard overrides and restore factory defaults">&#x21BA; Reset to Default</button>
                <button class="uc-modal__close" id="uc-modal-close" aria-label="Close">&#x2715;</button>
            </div>
        </div>
        <div class="uc-modal__body">
            <input type="hidden" id="uc-f-id">
            <div class="uc-form-grid">
                <div class="uc-form-group uc-form-group--half">
                    <label for="uc-f-label">Label</label>
                    <input type="text" id="uc-f-label" class="form-control" placeholder="Display name">
                </div>
                <div class="uc-form-group uc-form-group--icon">
                    <label for="uc-f-icon">Icon</label>
                    <input type="text" id="uc-f-icon" class="form-control" placeholder="⚙" maxlength="8">
                </div>
                <div class="uc-form-group uc-form-group--badge">
                    <label for="uc-f-badge">Badge</label>
                    <input type="text" id="uc-f-badge" class="form-control" placeholder="AI Boost">
                </div>
                <div class="uc-form-group uc-form-group--third">
                    <label for="uc-f-category">Category</label>
                    <select id="uc-f-category" class="form-control">
                        <option value="modernization">Modernization</option>
                        <option value="budget">Budget</option>
                        <option value="knowledge">Knowledge</option>
                        <option value="acquisition">Acquisition &amp; Contracting</option>
                        <option value="compliance_ato">Compliance &amp; ATO</option>
                        <option value="zero_trust">Zero Trust</option>
                        <option value="it_operations">IT Operations</option>
                        <option value="state_local">State &amp; Local</option>
                        <option value="compliance">Compliance</option>
                        <option value="general">General</option>
                    </select>
                </div>
                <div class="uc-form-group uc-form-group--third">
                    <label for="uc-f-model">Agent Model</label>
                    <select id="uc-f-model" class="form-control">
                        <option value="kimi-cloud">Kimi Cloud (Default)</option>
                        <option value="sonnet">Sonnet</option>
                        <option value="opus">Opus</option>
                        <option value="haiku">Haiku</option>
                    </select>
                </div>
                <div class="uc-form-group uc-form-group--third uc-form-group--vcenter">
                    <label class="uc-toggle-label">RICOAS Intake</label>
                    <label class="uc-toggle"><input type="checkbox" id="uc-f-ricoas"><span class="uc-toggle__slider"></span></label>
                    <span class="uc-label-hint">Links to intake session</span>
                </div>
                <div class="uc-form-group uc-form-group--full">
                    <label for="uc-f-desc">Description <span class="uc-label-hint">Shown in sidebar card</span></label>
                    <textarea id="uc-f-desc" class="form-control" rows="2" placeholder="One-line summary of what this use case helps with"></textarea>
                </div>
                <div class="uc-form-group uc-form-group--full">
                    <label for="uc-f-system">System Prompt <span class="uc-label-hint">Expert AI persona — injected as system context at conversation start</span></label>
                    <textarea id="uc-f-system" class="form-control uc-textarea--large" rows="9" placeholder="You are a senior advisor with expertise in..."></textarea>
                </div>
                <div class="uc-form-group uc-form-group--full">
                    <label for="uc-f-seed">Seed Message <span class="uc-label-hint">First message auto-sent to open the conversation</span></label>
                    <textarea id="uc-f-seed" class="form-control uc-textarea--large" rows="6" placeholder="I'm here to help you plan..."></textarea>
                </div>
                <div class="uc-form-group uc-form-group--full">
                    <label>Quick Actions <span class="uc-label-hint">Deep links shown on card and in the post-export action bar</span></label>
                    <div id="uc-f-qa-list" class="uc-qa-list"></div>
                    <button type="button" class="btn btn-sm btn-secondary" id="uc-qa-add-btn">+ Add Action</button>
                </div>
                <!-- Fast-track user_config section — shown only when use case has fast_track:true -->
                <div id="uc-user-config-section" class="uc-form-group uc-form-group--full" style="display:none;">
                    <div class="uc-user-config-header">
                        <span class="uc-badge uc-badge--blue">Fast Track</span>
                        <span class="uc-label-hint" style="margin-left:6px;">Customize the pre-loaded requirements framework for this use case</span>
                    </div>
                    <div class="uc-user-config-grid">
                        <div class="uc-user-config-col">
                            <label class="uc-config-label">Industries</label>
                            <div id="uc-industries-list" class="uc-tag-list"></div>
                            <div class="uc-tag-add-row">
                                <input type="text" id="uc-industries-input" class="uc-tag-input" placeholder="Add industry...">
                                <button type="button" class="btn btn-sm btn-secondary" id="uc-industries-add-btn">+</button>
                            </div>
                        </div>
                        <div class="uc-user-config-col">
                            <label class="uc-config-label">Equipment Types</label>
                            <div id="uc-equipment-list" class="uc-tag-list"></div>
                            <div class="uc-tag-add-row">
                                <input type="text" id="uc-equipment-input" class="uc-tag-input" placeholder="Add equipment type...">
                                <button type="button" class="btn btn-sm btn-secondary" id="uc-equipment-add-btn">+</button>
                            </div>
                        </div>
                        <div class="uc-user-config-col">
                            <label class="uc-config-label">Vendors</label>
                            <div id="uc-vendors-list" class="uc-tag-list"></div>
                            <div class="uc-tag-add-row">
                                <input type="text" id="uc-vendors-input" class="uc-tag-input" placeholder="Add vendor...">
                                <button type="button" class="btn btn-sm btn-secondary" id="uc-vendors-add-btn">+</button>
                            </div>
                        </div>
                    </div>
                    <div class="uc-skip-types-section">
                        <label class="uc-config-label">Skip Requirement Types <span class="uc-label-hint">(excluded from AI Boost and RICOAS score)</span></label>
                        <div class="uc-skip-checkboxes">
                            <label class="uc-skip-check"><input type="checkbox" class="uc-skip-type" value="security"> Security</label>
                            <label class="uc-skip-check"><input type="checkbox" class="uc-skip-type" value="non_functional"> Non-Functional</label>
                            <label class="uc-skip-check"><input type="checkbox" class="uc-skip-type" value="compliance"> Compliance</label>
                            <label class="uc-skip-check"><input type="checkbox" class="uc-skip-type" value="interface"> Interface</label>
                            <label class="uc-skip-check"><input type="checkbox" class="uc-skip-type" value="data"> Data</label>
                            <label class="uc-skip-check"><input type="checkbox" class="uc-skip-type" value="performance"> Performance</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="uc-modal__footer">
            <button class="btn btn-secondary" id="uc-modal-cancel">Cancel</button>
            <button class="btn btn-primary" id="uc-modal-save">Save Changes</button>
        </div>
    </div>
</div>

<!-- Creation Wizard Modal -->
<div id="uc-create-wizard" class="uc-modal-overlay" style="display:none;" role="dialog" aria-modal="true" aria-labelledby="uc-wiz-title">
    <div class="uc-modal uc-wizard-modal">
        <div class="uc-modal__header">
            <h3 id="uc-wiz-title">Create Use Case</h3>
            <div style="font-size:0.75rem;color:#8b949e">Step <span id="uc-wiz-step-num">1</span> of 5</div>
            <button class="uc-modal__close" id="uc-wiz-close" aria-label="Close">&#x2715;</button>
        </div>
        <div class="uc-modal__body uc-wizard-body">
            <!-- Step 1: Starting Point -->
            <div class="uc-wizard-step" id="uc-wiz-s1">
                <label class="uc-field-label">How would you like to start?</label>
                <div class="uc-archetype-btns" style="flex-direction:column;gap:10px;margin-top:10px">
                    <label class="uc-wiz-radio-label"><input type="radio" name="wiz-start" value="blank" checked> Start blank — define everything yourself</label>
                    <label class="uc-wiz-radio-label"><input type="radio" name="wiz-start" value="clone"> Clone an existing use case</label>
                </div>
                <div id="uc-wiz-clone-wrap" style="display:none;margin-top:12px">
                    <label class="uc-field-label">Clone from</label>
                    <select id="uc-wiz-clone-from" class="form-control"></select>
                </div>
            </div>
            <!-- Step 2: Identity -->
            <div class="uc-wizard-step" id="uc-wiz-s2" style="display:none">
                <div class="uc-field-group">
                    <label class="uc-field-label">Name <span style="color:#f85149">*</span></label>
                    <input id="uc-wiz-label" class="form-control" placeholder="e.g. ATO Package Builder">
                </div>
                <div style="display:flex;gap:10px">
                    <div class="uc-field-group" style="flex:0 0 80px">
                        <label class="uc-field-label">Icon</label>
                        <input id="uc-wiz-icon" class="form-control" placeholder="🛡" maxlength="4">
                    </div>
                    <div class="uc-field-group" style="flex:1">
                        <label class="uc-field-label">Category</label>
                        <select id="uc-wiz-category" class="form-control">
                            <option value="general">General</option>
                            <option value="modernization">Modernization</option>
                            <option value="budget">Budget</option>
                            <option value="knowledge">Knowledge</option>
                            <option value="acquisition">Acquisition &amp; Contracting</option>
                            <option value="compliance_ato">Compliance &amp; ATO</option>
                            <option value="zero_trust">Zero Trust</option>
                            <option value="it_operations">IT Operations</option>
                            <option value="state_local">State &amp; Local</option>
                        </select>
                    </div>
                    <div class="uc-field-group" style="flex:0 0 120px">
                        <label class="uc-field-label">Badge</label>
                        <input id="uc-wiz-badge" class="form-control" placeholder="RMF">
                    </div>
                </div>
                <div class="uc-field-group">
                    <label class="uc-field-label">Description</label>
                    <textarea id="uc-wiz-desc" class="form-control" rows="3" placeholder="One sentence describing what this use case helps users accomplish..."></textarea>
                </div>
            </div>
            <!-- Step 3: AI Persona -->
            <div class="uc-wizard-step" id="uc-wiz-s3" style="display:none">
                <label class="uc-field-label">Government persona templates</label>
                <div class="uc-archetype-btns" style="margin-bottom:10px">
                    <button type="button" class="uc-archetype-btn" data-archetype="ko">KO</button>
                    <button type="button" class="uc-archetype-btn" data-archetype="isso">ISSO/RMF</button>
                    <button type="button" class="uc-archetype-btn" data-archetype="zt">Zero Trust</button>
                    <button type="button" class="uc-archetype-btn" data-archetype="ito">IT Ops</button>
                    <button type="button" class="uc-archetype-btn" data-archetype="sl">State/Local</button>
                    <button type="button" class="uc-archetype-btn" data-archetype="pm">Gov PM</button>
                </div>
                <div class="uc-field-group">
                    <label class="uc-field-label">AI System Prompt <span style="color:#8b949e;font-size:0.75rem">(defines the AI persona)</span></label>
                    <textarea id="uc-wiz-system" class="form-control" rows="10" placeholder="You are a senior government program manager with expertise in..."></textarea>
                </div>
                <div class="uc-field-group">
                    <label class="uc-field-label">Opening Message <span style="color:#8b949e;font-size:0.75rem">(shown to user when starting)</span></label>
                    <textarea id="uc-wiz-seed" class="form-control" rows="4" placeholder="Welcome! I'm here to help you..."></textarea>
                </div>
            </div>
            <!-- Step 4: Requirements -->
            <div class="uc-wizard-step" id="uc-wiz-s4" style="display:none">
                <label class="uc-field-label">Template Requirements <span style="color:#8b949e;font-size:0.75rem">(pre-seeded when use case starts)</span></label>
                <div id="uc-wiz-req-list" style="display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto;margin:8px 0"></div>
                <button type="button" id="uc-wiz-add-req" class="btn btn-secondary btn-sm">&#xFF0B; Add Requirement</button>
            </div>
            <!-- Step 5: Wiring -->
            <div class="uc-wizard-step" id="uc-wiz-s5" style="display:none">
                <div style="display:flex;gap:20px;flex-wrap:wrap;margin-bottom:12px">
                    <label class="uc-skip-check"><input type="checkbox" id="uc-wiz-ricoas" checked> RICOAS intake</label>
                    <label class="uc-skip-check"><input type="checkbox" id="uc-wiz-fast-track" checked> Fast Track (⚡ Ready badge)</label>
                    <div style="display:flex;align-items:center;gap:6px">
                        <label class="uc-field-label" style="margin:0">AI Boost %</label>
                        <input type="number" id="uc-wiz-boost" class="form-control" value="70" min="0" max="100" style="width:70px">
                    </div>
                    <div style="display:flex;align-items:center;gap:6px">
                        <label class="uc-field-label" style="margin:0">Model</label>
                        <select id="uc-wiz-model" class="form-control" style="width:140px">
                            <option value="kimi-cloud">kimi-cloud</option>
                            <option value="sonnet">claude-sonnet</option>
                            <option value="opus">claude-opus</option>
                            <option value="gpt-4o">gpt-4o</option>
                        </select>
                    </div>
                </div>
                <label class="uc-field-label">Workflow Steps <span style="color:#8b949e;font-size:0.75rem">(ordered journey for the user)</span></label>
                <div id="uc-wiz-steps-list" style="display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto;margin:8px 0"></div>
                <button type="button" id="uc-wiz-add-step" class="btn btn-secondary btn-sm">&#xFF0B; Add Step</button>
            </div>
        </div>
        <div class="uc-modal__footer">
            <button class="btn btn-secondary" id="uc-wiz-prev" style="display:none">&#x2190; Previous</button>
            <button class="btn btn-primary" id="uc-wiz-next">Next &#x2192;</button>
            <button class="btn btn-primary" id="uc-wiz-finish" style="display:none">&#x2713; Create Use Case</button>
        </div>
    </div>
</div>

<!-- Import Modal -->
<div id="uc-import-modal" class="uc-modal-overlay" style="display:none;" role="dialog" aria-modal="true">
    <div class="uc-modal" style="max-width:420px">
        <div class="uc-modal__header">
            <h3>Import Use Case Bundle</h3>
            <button class="uc-modal__close" id="uc-import-close" aria-label="Close">&#x2715;</button>
        </div>
        <div class="uc-modal__body" style="padding:16px">
            <p style="font-size:0.8rem;color:#8b949e;margin-bottom:12px">Select a <code>.yaml</code> bundle file exported from any ICDEV instance.</p>
            <input type="file" id="uc-import-file" accept=".yaml,.yml" class="form-control" style="margin-bottom:10px">
            <label class="uc-skip-check" style="margin-bottom:12px">
                <input type="checkbox" id="uc-import-overwrite"> Overwrite existing use cases with same ID
            </label>
            <div id="uc-import-result" style="font-size:0.8rem;margin-top:8px"></div>
        </div>
        <div class="uc-modal__footer">
            <button class="btn btn-secondary" id="uc-import-cancel">Cancel</button>
            <button class="btn btn-primary" id="uc-import-submit">&#x2191; Import</button>
        </div>
    </div>
</div>
<script>
(function () {
    var _roleMap = {
        'Program Manager': 'pm',
        'Contracting Officer': 'contracting',
        'Analyst': 'analyst',
        'Business Development': 'bizdev',
        'Contracting Officer Representative': 'cor'
    };
    function _applyRole(val) {
        var body = document.body;
        Object.values(_roleMap).forEach(function (cls) { body.classList.remove('view-role--' + cls); });
        if (val && _roleMap[val]) body.classList.add('view-role--' + _roleMap[val]);
    }
    document.addEventListener('DOMContentLoaded', function () {
        var sel = document.getElementById('role-select');
        if (sel) {
            _applyRole(sel.options[sel.selectedIndex] ? sel.options[sel.selectedIndex].text : '');
            sel.addEventListener('change', function () {
                _applyRole(this.options[this.selectedIndex] ? this.options[this.selectedIndex].text : '');
            });
        }
    });
})();
</script>
{% endblock %}