{% extends "base.html" %}

{% block title %}Spark - {{ conversation.name }}{% endblock %}

{% block head %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github-dark.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
{% endblock %}

{% block content %}
<div class="d-flex" style="height: calc(100vh - var(--app-navbar-height) - 80px);">

    <!-- Main chat column -->
    <div class="d-flex flex-column flex-grow-1" style="min-width: 0;">

    <!-- Chat header -->
    <div class="d-flex align-items-center justify-content-between px-3 py-2"
         style="border-bottom: 1px solid var(--app-border);">
        <div>
            <a href="/conversations" class="btn btn-app-ghost btn-sm me-2"><i class="bi bi-arrow-left"></i></a>
            <strong id="conv-display-name" style="cursor: pointer;" onclick="renameConversation()" onkeydown="if(event.key==='Enter')renameConversation()" tabindex="0" role="button" title="Click to rename">{{ conversation.name }}</strong>
            <button class="btn btn-app-ghost btn-sm ms-1" onclick="renameConversation()" title="Rename"><i class="bi bi-pencil" style="font-size: 0.7rem;"></i></button>
            <span class="ms-1" style="font-size: 0.8125rem; color: var(--app-text-muted); cursor: pointer;" onclick="changeModel()" onkeydown="if(event.key==='Enter')changeModel()" tabindex="0" role="button" title="Click to change model" id="conv-display-model">{{ conversation.model_id }}</span>
        </div>
        <div class="d-flex gap-1">
            <button class="btn btn-app-ghost btn-sm" id="btn-favourite" title="Favourite" onclick="toggleFavourite()"
                    style="color: {% if conversation.is_favourite %}var(--app-warning){% else %}var(--app-text-muted){% endif %};">
                <i class="bi {% if conversation.is_favourite %}bi-star-fill{% else %}bi-star{% endif %}"></i>
            </button>
            <button class="btn btn-app-ghost btn-sm" id="btn-voice-mode" title="Voice Conversation" onclick="toggleVoiceMode()" style="display: none;">
                <i class="bi bi-headset" id="voice-mode-icon"></i>
            </button>
            <button class="btn btn-app-ghost btn-sm" title="Tool Activity" onclick="toggleToolPanel()" id="btn-tool-panel">
                <i class="bi bi-tools"></i>
                <span id="tool-panel-toolbar-badge" class="badge rounded-pill" style="display: none; position: absolute; top: -2px; right: -2px; font-size: 0.55rem; background: var(--app-accent); color: var(--app-text-on-accent); min-width: 16px; padding: 2px 4px;"></span>
            </button>
            <button class="btn btn-app-ghost btn-sm" title="Info" onclick="showInfoModal()"><i class="bi bi-info-circle"></i></button>
            <button class="btn btn-app-ghost btn-sm" title="Create Action from Conversation" onclick="showCreateActionFromConv()"><i class="bi bi-play-circle"></i></button>
            <button class="btn btn-app-ghost btn-sm" title="Settings" onclick="showSettingsModal()"><i class="bi bi-gear"></i></button>
            <button class="btn btn-app-ghost btn-sm" title="Delete" onclick="confirmDeleteConversation()" style="color: var(--app-danger);"><i class="bi bi-trash"></i></button>
        </div>
    </div>

    <!-- Voice mode indicator -->
    <div id="voice-mode-bar" style="display: none; padding: 0.375rem 1rem; font-size: 0.75rem;
         background: var(--app-bg-tertiary); border-bottom: 1px solid var(--app-border);
         color: var(--app-text-secondary); text-align: center;">
        <i class="bi bi-headset me-1" style="color: var(--app-accent);"></i>
        <span id="voice-mode-status">Voice mode active</span>
        <span class="ms-2">|</span>
        <span class="ms-2">Voice: <select id="voice-select" style="background: transparent; border: none;
              color: var(--app-accent); font-size: 0.75rem; cursor: pointer; padding: 0;"
              onchange="saveVoicePreference()"></select></span>
        <span class="ms-2">|</span>
        <button class="btn btn-sm ms-2" onclick="toggleVoiceMode()"
                style="font-size: 0.7rem; padding: 0.1rem 0.5rem; color: var(--app-text-muted); border: 1px solid var(--app-border);">
            Exit Voice Mode
        </button>
    </div>

    <!-- Messages area -->
    <div id="chat-messages" class="flex-grow-1 overflow-auto px-3 chat-container"></div>

    <!-- Input area -->
    <div class="chat-input-container">
        <form id="chat-form" onsubmit="handleSubmit(event)">
            <div class="d-flex gap-2 align-items-end">
                <textarea id="chat-input" class="form-control" rows="1" placeholder="Type a message..." onkeydown="handleKeydown(event)" style="resize: none;"></textarea>
                <button type="button" class="btn btn-app-ghost" id="btn-mic" onclick="toggleSpeechInput()" title="Voice input" style="display: none; font-size: 1.125rem; padding: 0.25rem 0.5rem;">
                    <i class="bi bi-mic" id="mic-icon"></i>
                </button>
                <button type="submit" class="btn btn-app-primary" id="btn-send"><i class="bi bi-send"></i></button>
            </div>
        </form>
        <div style="font-size: 0.6875rem; color: var(--app-text-muted); margin-top: 0.375rem; padding-left: 0.25rem; display: flex; gap: 1rem;">
            <span>Tokens: <span id="tc-in">0</span> in / <span id="tc-out">0</span> out</span>
            <span id="tc-cache" style="display: none; color: var(--app-accent); opacity: 0.8;">
                Cache: <span id="tc-cache-read">0</span> read / <span id="tc-cache-create">0</span> created
                <span id="tc-cache-savings" style="display: none; color: var(--app-success); font-weight: 600;"></span>
            </span>
        </div>
    </div>

    </div><!-- end main chat column -->

    <!-- Tool Activity Sidecar Panel -->
    <div id="tool-panel" style="display: none; width: 380px; flex-shrink: 0;
         border-left: 1px solid var(--app-border); background: var(--app-bg-primary);
         display: none; flex-direction: column; position: relative;">
        <!-- Resize handle -->
        <div id="sidecar-resize-handle"
             style="width: 4px; cursor: col-resize; position: absolute; left: 0; top: 0; bottom: 0; z-index: 10; background: transparent;"
             onmousedown="startSidecarResize(event)"></div>
        <!-- Tabbed header -->
        <div style="display: flex; border-bottom: 1px solid var(--app-border);">
            <button class="sidecar-tab active" id="sidecar-tab-tools" onclick="switchSidecarTab('tools')"
                    style="flex: 1; padding: 0.5rem; border: none; background: none; font-size: 0.8125rem; font-weight: 600; cursor: pointer; color: var(--app-accent); border-bottom: 2px solid var(--app-accent);">
                <i class="bi bi-tools me-1"></i>Tools
                <span id="tool-panel-badge" class="badge rounded-pill" style="display: none; font-size: 0.55rem; background: var(--app-accent); color: var(--app-text-on-accent); min-width: 16px; padding: 2px 4px; vertical-align: top;"></span>
            </button>
            <button class="sidecar-tab" id="sidecar-tab-agents" onclick="switchSidecarTab('agents')"
                    style="flex: 1; padding: 0.5rem; border: none; background: none; font-size: 0.8125rem; font-weight: 600; cursor: pointer; color: var(--app-text-muted); border-bottom: 2px solid transparent;">
                <i class="bi bi-robot me-1"></i>Agents
                <span id="agent-panel-badge" class="badge rounded-pill" style="display: none; font-size: 0.55rem; background: var(--app-accent); color: var(--app-text-on-accent); min-width: 16px; padding: 2px 4px; vertical-align: top;"></span>
            </button>
            <button class="btn btn-app-ghost btn-sm" onclick="toggleToolPanel()" style="flex-shrink: 0; padding: 0.5rem;" title="Close">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
        <!-- Tools panel body -->
        <div id="tool-panel-body" class="flex-grow-1 overflow-auto px-2 py-2"
             style="font-size: 0.8125rem;">
            <div id="tool-panel-empty" class="text-center py-4" style="color: var(--app-text-muted);">
                <i class="bi bi-tools" style="font-size: 1.5rem; opacity: 0.3;"></i>
                <p class="mt-2 mb-0" style="font-size: 0.75rem;">No tool calls yet</p>
            </div>
        </div>
        <!-- Agents panel body -->
        <div id="agent-panel-body" class="flex-grow-1 overflow-auto px-2 py-2" style="display: none;">
            <div id="agent-panel-empty" class="text-center py-4" style="color: var(--app-text-muted);">
                <i class="bi bi-robot" style="font-size: 1.5rem; opacity: 0.3;"></i>
                <p class="mt-2 mb-0" style="font-size: 0.75rem;">No agents spawned yet</p>
            </div>
        </div>
    </div>

</div>

<!-- Info Modal -->
<div class="modal fade" id="infoModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title"><i class="bi bi-info-circle me-2"></i>Conversation Information</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <div class="modal-body" id="info-content"><div class="text-center py-3"><div class="app-spinner mx-auto"></div></div></div>
        </div>
    </div>
</div>

<!-- Settings Modal (two-panel) -->
<div class="modal fade" id="settingsModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title"><i class="bi bi-gear me-2"></i>Conversation Settings</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <div class="modal-body p-0">
                <div class="d-flex" style="min-height: 500px;">
                    <!-- Sidebar -->
                    <div class="settings-sidebar" style="width: 200px; border-right: 1px solid var(--app-border); padding: 1rem 0.5rem; flex-shrink: 0;">
                        <nav class="nav flex-column">
                            <a class="nav-link settings-tab-link active" href="#" data-tab="tab-instructions"><i class="bi bi-card-text me-2"></i>Instructions</a>
                            <a class="nav-link settings-tab-link" href="#" data-tab="tab-context"><i class="bi bi-diagram-3 me-2"></i>Context</a>
                            <a class="nav-link settings-tab-link" href="#" data-tab="tab-compaction"><i class="bi bi-layers me-2"></i>Compaction</a>
                            <a class="nav-link settings-tab-link" href="#" data-tab="tab-tools"><i class="bi bi-tools me-2"></i>Tools</a>
                            <a class="nav-link settings-tab-link" href="#" data-tab="tab-agents"><i class="bi bi-robot me-2"></i>Agents</a>
                            <a class="nav-link settings-tab-link" href="#" data-tab="tab-export"><i class="bi bi-download me-2"></i>Export</a>
                            <a class="nav-link settings-tab-link" href="#" data-tab="tab-links"><i class="bi bi-link-45deg me-2"></i>Linked Conversations</a>
                        </nav>
                    </div>
                    <!-- Content -->
                    <div class="flex-grow-1 p-4" style="overflow-y: auto; max-height: 500px;">
                        <!-- Instructions -->
                        <div class="settings-tab-panel" id="tab-instructions">
                            <h6 style="font-weight: 600;"><i class="bi bi-card-text me-1"></i> System Instructions</h6>
                            <textarea class="form-control" id="conv-instructions" rows="8" placeholder="Custom system instructions..."></textarea>
                            <div class="form-text">Sent as a system prompt with each message.</div>
                        </div>
                        <!-- Context -->
                        <div class="settings-tab-panel" id="tab-context" style="display:none;">
                            <h6 style="font-weight: 600;"><i class="bi bi-diagram-3 me-1"></i> Context Management</h6>
                            <div class="mb-3">
                                <div class="form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" id="conv-rag-enabled" checked>
                                    <label class="form-check-label" for="conv-rag-enabled">Enable RAG context retrieval</label>
                                </div>
                                <div class="form-text mb-3">Automatically retrieves relevant past messages using semantic search.</div>
                                <div class="row g-3 mb-3" id="rag-settings">
                                    <div class="col-md-6">
                                        <label class="form-label" style="font-size: 0.8125rem;">Top K Results</label>
                                        <input type="number" class="form-control form-control-sm" id="conv-rag-top-k" min="1" max="20" value="5">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label" style="font-size: 0.8125rem;">Minimum Similarity</label>
                                        <input type="number" class="form-control form-control-sm" id="conv-rag-threshold" min="0.1" max="1.0" step="0.05" value="0.4">
                                    </div>
                                </div>
                                <div class="form-switch mb-3">
                                    <input class="form-check-input" type="checkbox" id="conv-rag-tool">
                                    <label class="form-check-label" for="conv-rag-tool">Allow LLM to search chat history via tool</label>
                                </div>
                            </div>
                            <hr>
                            <h6 class="mt-3" style="font-weight: 600;">Message History</h6>
                            <div class="mb-3">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="historyMode" id="history-all" value="all" checked>
                                    <label class="form-check-label" for="history-all">Send all messages (within compaction limits)</label>
                                </div>
                                <div class="form-check mb-2 d-flex align-items-center gap-2">
                                    <input class="form-check-input" type="radio" name="historyMode" id="history-last" value="last">
                                    <label class="form-check-label" for="history-last">Send last</label>
                                    <input type="number" class="form-control form-control-sm" id="conv-max-messages" style="width: 80px;" min="2" max="200" value="20" disabled>
                                    <span style="font-size: 0.8125rem;">messages</span>
                                </div>
                            </div>
                            <div class="form-switch mb-2">
                                <input class="form-check-input" type="checkbox" id="conv-include-tools" checked>
                                <label class="form-check-label" for="conv-include-tools">Include tool results in context</label>
                            </div>
                            <div class="form-switch">
                                <input class="form-check-input" type="checkbox" id="conv-prompt-caching" checked>
                                <label class="form-check-label" for="conv-prompt-caching">Prompt caching</label>
                            </div>
                            <div class="form-switch">
                                <input class="form-check-input" type="checkbox" id="conv-memory" checked>
                                <label class="form-check-label" for="conv-memory">Enable persistent memory</label>
                            </div>
                        </div>
                        <!-- Compaction -->
                        <div class="settings-tab-panel" id="tab-compaction" style="display:none;">
                            <h6 style="font-weight: 600;"><i class="bi bi-layers me-1"></i> Context Compaction</h6>
                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label class="form-label" style="font-size: 0.8125rem;">Compaction Threshold</label>
                                    <div class="input-group input-group-sm">
                                        <input type="number" class="form-control" id="conv-threshold" min="5" max="95" step="5" value="70">
                                        <span class="input-group-text">%</span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label" style="font-size: 0.8125rem;">Summary Ratio</label>
                                    <div class="input-group input-group-sm">
                                        <input type="number" class="form-control" id="conv-ratio" min="5" max="90" step="5" value="30">
                                        <span class="input-group-text">%</span>
                                    </div>
                                </div>
                            </div>
                            <div id="compaction-indicator" class="app-card p-3" style="font-size: 0.8125rem;">
                                <div class="d-flex justify-content-between mb-1">
                                    <span>Context usage</span>
                                    <span id="ci-usage">0 / 0 tokens</span>
                                </div>
                                <div class="progress-app mb-2" style="height: 0.5rem; position: relative;">
                                    <div class="progress-bar" id="ci-bar" style="width: 0%;"></div>
                                    <div id="ci-threshold-marker" style="position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--app-warning); z-index: 1;"></div>
                                </div>
                                <div style="color: var(--app-text-muted); font-size: 0.75rem;">
                                    Compaction triggers at <strong id="ci-trigger-tokens">0</strong> tokens
                                </div>
                            </div>
                        </div>
                        <!-- Tools -->
                        <div class="settings-tab-panel" id="tab-tools" style="display:none;">
                            <h6 style="font-weight: 600;"><i class="bi bi-tools me-1"></i> Tool Control</h6>
                            <div id="tools-list"><div class="text-center py-3"><div class="app-spinner mx-auto"></div></div></div>
                        </div>
                        <!-- Agents -->
                        <div class="settings-tab-panel" id="tab-agents" style="display:none;">
                            <h6 style="font-weight: 600;"><i class="bi bi-robot me-1"></i> Agent Settings</h6>
                            <div class="mb-3">
                                <div class="form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" id="conv-agents-enabled">
                                    <label class="form-check-label" for="conv-agents-enabled">Enable agent spawning in this conversation</label>
                                </div>
                                <div class="form-text">When enabled, the AI can delegate tasks to independent sub-agents.</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="conv-agent-mode" style="font-size: 0.8125rem;">Agent Mode</label>
                                <select class="form-select form-select-sm" id="conv-agent-mode">
                                    <option value="">Use global default</option>
                                    <option value="orchestrator">Orchestrator-Workers</option>
                                    <option value="chain">Chain</option>
                                </select>
                                <div class="form-text">Orchestrator: agents work with fresh context. Chain: agents see conversation history.</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="conv-agent-model-selection" style="font-size: 0.8125rem;">Model Selection</label>
                                <select class="form-select form-select-sm" id="conv-agent-model-selection">
                                    <option value="">Use global default</option>
                                    <option value="same">Same as conversation model</option>
                                    <option value="auto_select">LLM chooses model (with approval)</option>
                                    <option value="auto_select_approved">LLM chooses model (no approval needed)</option>
                                </select>
                            </div>
                        </div>
                        <!-- Export -->
                        <div class="settings-tab-panel" id="tab-export" style="display:none;">
                            <h6 style="font-weight: 600;"><i class="bi bi-download me-1"></i> Export Conversation</h6>
                            <p style="font-size: 0.875rem; color: var(--app-text-secondary);">Download the conversation in your preferred format.</p>
                            <div class="d-flex flex-wrap gap-2">
                                <button class="btn btn-app-outline" onclick="exportConversation('markdown')"><i class="bi bi-filetype-md me-1"></i>Markdown</button>
                                <button class="btn btn-app-outline" onclick="exportConversation('html')"><i class="bi bi-filetype-html me-1"></i>HTML</button>
                                <button class="btn btn-app-outline" onclick="exportConversation('csv')"><i class="bi bi-filetype-csv me-1"></i>CSV</button>
                                <button class="btn btn-app-outline" onclick="exportConversation('json')"><i class="bi bi-filetype-json me-1"></i>JSON</button>
                            </div>
                        </div>
                        <!-- Linked Conversations -->
                        <div class="settings-tab-panel" id="tab-links" style="display:none;">
                            <h6 style="font-weight: 600;"><i class="bi bi-link-45deg me-1"></i> Linked Conversations</h6>
                            <p style="font-size: 0.8125rem; color: var(--app-text-secondary);">Linking gives this conversation access to the context of another conversation.</p>
                            <div id="links-content"><div class="text-center py-3"><div class="app-spinner mx-auto"></div></div></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-app-ghost" data-bs-dismiss="modal">Cancel</button>
                <button class="btn btn-app-primary" onclick="saveConversationSettings()"><i class="bi bi-check-lg me-1"></i>Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Model Selector Modal -->
<div class="modal fade" id="modelSelectorModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-cpu me-2" style="color: var(--app-accent);"></i>Change Model</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <input type="text" class="form-control form-control-sm" id="model-search"
                           placeholder="Search models..." oninput="filterModelList()"
                           style="font-size: 0.8125rem;">
                </div>
                <div id="model-selector-loading" class="text-center py-3">
                    <div class="spinner-border spinner-border-sm" style="color: var(--app-accent);"></div>
                    <span class="ms-2" style="color: var(--app-text-secondary);">Loading models...</span>
                </div>
                <div id="model-selector-list" style="display: none; max-height: 400px; overflow-y: auto;"></div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title"><i class="bi bi-trash me-2" style="color: var(--app-danger);"></i>Delete Conversation</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <div class="modal-body">
                <p>Are you sure you want to delete <strong>{{ conversation.name }}</strong>?</p>
                <p style="color: var(--app-text-muted); font-size: 0.875rem;">This action cannot be undone. All messages, files, and settings will be removed.</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-app-ghost" data-bs-dismiss="modal">Cancel</button>
                <button class="btn btn-app-danger" onclick="deleteConversation()"><i class="bi bi-trash me-1"></i>Delete</button>
            </div>
        </div>
    </div>
</div>

<!-- Create Action from Conversation Modal -->
<div class="modal fade" id="createActionModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-play-circle me-2"></i>Create Autonomous Action</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <!-- Step 1: Name -->
                <div id="action-step-setup" class="p-4">
                    <p style="font-size: 0.875rem; color: var(--app-text-secondary);">
                        Create an autonomous action based on this conversation. The AI will analyse the conversation
                        and guide you through setting up a scheduled action.
                    </p>
                    <div class="mb-3">
                        <label class="form-label" for="action-conv-name">Action Name</label>
                        <input type="text" class="form-control" id="action-conv-name" placeholder="e.g. Daily report summary">
                    </div>
                    <button class="btn btn-app-primary" onclick="startActionChat()">
                        <i class="bi bi-chat-dots me-1"></i>Continue with AI Assistant
                    </button>
                </div>
                <!-- Step 2: AI Chat -->
                <div id="action-step-chat" style="display: none;">
                    <div id="action-chat-messages" style="height: 400px; overflow-y: auto; padding: 1rem; background: var(--app-bg-deep);">
                    </div>
                    <div class="p-3 d-flex gap-2" style="border-top: 1px solid var(--app-border);">
                        <input type="text" class="form-control form-control-sm" id="action-chat-input"
                               placeholder="Describe how the action should work..."
                               onkeydown="if(event.key==='Enter' && !event.shiftKey) { event.preventDefault(); sendActionChatMessage(); }">
                        <button class="btn btn-app-primary btn-sm" onclick="sendActionChatMessage()">
                            <i class="bi bi-send"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Agent model approval modal -->
<div class="modal fade" id="agentModelModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-robot me-2"></i>Agent Model Selection</h5>
            </div>
            <div class="modal-body">
                <p id="agent-model-message" style="font-size: 0.875rem;"></p>
                <div id="agent-model-task" style="font-size: 0.8125rem; color: var(--app-text-secondary); margin-bottom: 0.75rem; padding: 0.5rem; background: var(--app-bg-tertiary); border-radius: 0.5rem;"></div>
                <div id="agent-model-justification-wrap" style="display: none; margin-bottom: 1rem;">
                    <label style="font-size: 0.75rem; font-weight: 600; color: var(--app-text-muted); text-transform: uppercase; letter-spacing: 0.03em;">Model Justification</label>
                    <div id="agent-model-justification" style="font-size: 0.8125rem; color: var(--app-text-secondary); padding: 0.5rem; background: var(--app-bg-secondary); border: 1px solid var(--app-border); border-radius: 0.5rem; margin-top: 0.25rem;"></div>
                </div>
                <label class="form-label" for="agent-model-select">Model</label>
                <select class="form-select" id="agent-model-select"></select>
            </div>
            <div class="modal-footer">
                <button class="btn btn-app-primary" onclick="approveAgentModel()">
                    <i class="bi bi-check-lg me-1"></i>Start Agent
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Tool permission modal -->
<div class="modal fade" id="permissionModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title"><i class="bi bi-shield-exclamation me-2"></i>Tool Permission</h5></div>
            <div class="modal-body">
                <p id="permission-message"></p>
                <div id="permission-details" style="font-size: 0.8125rem; color: var(--app-text-secondary);"></div>
            </div>
            <div class="modal-footer d-flex flex-wrap gap-2 justify-content-end">
                <button class="btn btn-app-ghost btn-sm" onclick="respondPermission('denied')" title="Block this tool call">
                    <i class="bi bi-x-circle me-1"></i>Deny
                </button>
                <button class="btn btn-app-outline btn-sm" onclick="respondPermission('once')" title="Allow this single call only">
                    <i class="bi bi-check me-1"></i>Approve Once
                </button>
                <button class="btn btn-app-primary btn-sm" onclick="respondPermission('allowed')" title="Allow this tool for the rest of this conversation">
                    <i class="bi bi-check-lg me-1"></i>Always (Conversation)
                </button>
                <button class="btn btn-app-primary btn-sm" onclick="respondPermission('allowed_global')" title="Allow this tool in all conversations">
                    <i class="bi bi-check-all me-1"></i>Always (Global)
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/main.js"></script>
<script src="/static/js/chat.js"></script>
<script src="/static/js/sse-client.js"></script>
<script>
const conversationId = {{ conversation.id }};
const conversationName = "{{ conversation.name }}";
window._currentModelId = "{{ conversation.model_id or '' }}";

document.addEventListener('DOMContentLoaded', async () => {
    configureMarked();
    initMermaid();
    loadChatHistory(conversationId);

    // Restore tool panel state and saved width
    if (sessionStorage.getItem('spark-tool-panel') === 'open') {
        document.getElementById('tool-panel').style.display = 'flex';
    }
    const savedWidth = sessionStorage.getItem('spark-sidecar-width');
    if (savedWidth) document.getElementById('tool-panel').style.width = savedWidth;

    // Seed token counter from stored values
    try {
        const info = await fetch(`/chat/${conversationId}/api/info`).then(r => r.json());
        totalTokensIn = info.tokens_sent || 0;
        totalTokensOut = info.tokens_received || 0;
        updateTokenDisplay(0, 0);
    } catch (e) {}
});

// -- Settings sidebar tab switching --
document.querySelectorAll('.settings-tab-link').forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();
        document.querySelectorAll('.settings-tab-link').forEach(l => l.classList.remove('active'));
        link.classList.add('active');
        document.querySelectorAll('.settings-tab-panel').forEach(p => p.style.display = 'none');
        document.getElementById(link.dataset.tab).style.display = '';
    });
});

// History mode radio toggle
document.getElementById('history-last')?.addEventListener('change', () => {
    document.getElementById('conv-max-messages').disabled = false;
});
document.getElementById('history-all')?.addEventListener('change', () => {
    document.getElementById('conv-max-messages').disabled = true;
});

// RAG toggle
document.getElementById('conv-rag-enabled')?.addEventListener('change', (e) => {
    const settings = document.getElementById('rag-settings');
    settings.style.opacity = e.target.checked ? '1' : '0.35';
    settings.style.pointerEvents = e.target.checked ? '' : 'none';
});

// -- Info Modal --
async function showInfoModal() {
    new bootstrap.Modal(document.getElementById('infoModal')).show();
    const content = document.getElementById('info-content');
    try {
        const info = await fetch(`/chat/${conversationId}/api/info`).then(r => r.json());
        const total = (info.tokens_sent || 0) + (info.tokens_received || 0);
        const cw = info.context_window || 0;
        const pct = cw > 0 ? Math.round((total / cw) * 100) : 0;
        const cls = pct > 90 ? 'danger' : pct > 60 ? 'warning' : 'success';
        content.innerHTML = `
            <div class="row g-3 mb-3">
                <div class="col-sm-6"><div style="font-size:0.8125rem;color:var(--app-text-secondary);">Model</div><div style="font-weight:600;">${info.model_id||'N/A'}</div></div>
                <div class="col-sm-6"><div style="font-size:0.8125rem;color:var(--app-text-secondary);">Created</div><div style="font-weight:600;">${info.created_at?new Date(info.created_at).toLocaleString():'N/A'}</div></div>
            </div>
            <div class="mb-3">
                <div style="font-size:0.8125rem;color:var(--app-text-secondary);">Context Usage</div>
                <div class="d-flex align-items-center gap-2 mt-1"><div class="progress-app flex-grow-1" style="height:0.5rem;"><div class="progress-bar ${cls}" style="width:${pct}%;"></div></div><span class="badge-app badge-app-${cls}" style="font-size:0.6875rem;">${pct}%</span></div>
                <div style="font-size:0.75rem;color:var(--app-text-muted);margin-top:0.25rem;">${total.toLocaleString()} / ${cw.toLocaleString()} tokens</div>
            </div>
            <div class="row g-3">
                <div class="col-sm-4"><div style="font-size:0.8125rem;color:var(--app-text-secondary);">Tokens In</div><div style="font-weight:600;">${(info.tokens_sent||0).toLocaleString()}</div></div>
                <div class="col-sm-4"><div style="font-size:0.8125rem;color:var(--app-text-secondary);">Tokens Out</div><div style="font-weight:600;">${(info.tokens_received||0).toLocaleString()}</div></div>
                <div class="col-sm-4"><div style="font-size:0.8125rem;color:var(--app-text-secondary);">Total</div><div style="font-weight:600;">${total.toLocaleString()}</div></div>
            </div>
            `;
    } catch (err) { content.innerHTML = '<div class="alert-app alert-app-danger">Failed to load info.</div>'; }
}

// -- Settings Modal --
async function showSettingsModal() {
    try {
        const info = await fetch(`/chat/${conversationId}/api/info`).then(r => r.json());
        document.getElementById('conv-instructions').value = info.instructions || '';
        document.getElementById('conv-threshold').value = Math.round((info.compaction_threshold || 0.7) * 100);
        document.getElementById('conv-ratio').value = Math.round((info.compaction_summary_ratio || 0.3) * 100);
        document.getElementById('conv-memory').checked = info.memory_enabled !== false;
        document.getElementById('conv-rag-enabled').checked = info.rag_enabled !== false;
        document.getElementById('conv-rag-top-k').value = info.rag_top_k || 5;
        document.getElementById('conv-rag-threshold').value = info.rag_threshold || 0.4;
        document.getElementById('conv-rag-tool').checked = !!info.rag_tool_enabled;
        document.getElementById('conv-include-tools').checked = info.include_tool_results !== false;
        document.getElementById('conv-prompt-caching').checked = info.prompt_caching !== false;

        if (info.max_history_messages) {
            document.getElementById('history-last').checked = true;
            document.getElementById('conv-max-messages').value = info.max_history_messages;
            document.getElementById('conv-max-messages').disabled = false;
        } else {
            document.getElementById('history-all').checked = true;
            document.getElementById('conv-max-messages').disabled = true;
        }

        // Compaction indicator
        const cw = info.context_window || 0;
        const total = (info.tokens_sent || 0) + (info.tokens_received || 0);
        const threshPct = parseInt(document.getElementById('conv-threshold').value);
        document.getElementById('ci-usage').textContent = `${total.toLocaleString()} / ${cw.toLocaleString()} tokens`;
        document.getElementById('ci-bar').style.width = (cw > 0 ? Math.round(total/cw*100) : 0) + '%';
        document.getElementById('ci-threshold-marker').style.left = threshPct + '%';
        document.getElementById('ci-trigger-tokens').textContent = Math.round(cw * threshPct / 100).toLocaleString();

        // RAG settings visibility
        const ragEl = document.getElementById('rag-settings');
        const ragOn = document.getElementById('conv-rag-enabled').checked;
        ragEl.style.opacity = ragOn ? '1' : '0.35';
        ragEl.style.pointerEvents = ragOn ? '' : 'none';

        // Agent settings
        document.getElementById('conv-agents-enabled').checked = !!info.agents_enabled;
        document.getElementById('conv-agent-mode').value = info.agent_mode || '';
        document.getElementById('conv-agent-model-selection').value = info.agent_model_selection || '';
    } catch (err) {}
    new bootstrap.Modal(document.getElementById('settingsModal')).show();
    loadToolsTab();
    loadLinksTab();
}

async function saveConversationSettings() {
    const historyMode = document.querySelector('input[name="historyMode"]:checked')?.value;
    const data = {
        instructions: document.getElementById('conv-instructions').value || null,
        compaction_threshold: parseInt(document.getElementById('conv-threshold').value) / 100,
        compaction_summary_ratio: parseInt(document.getElementById('conv-ratio').value) / 100,
        memory_enabled: document.getElementById('conv-memory').checked,
        rag_enabled: document.getElementById('conv-rag-enabled').checked,
        rag_top_k: parseInt(document.getElementById('conv-rag-top-k').value) || 5,
        rag_threshold: parseFloat(document.getElementById('conv-rag-threshold').value) || 0.4,
        rag_tool_enabled: document.getElementById('conv-rag-tool').checked,
        include_tool_results: document.getElementById('conv-include-tools').checked,
        prompt_caching: document.getElementById('conv-prompt-caching').checked,
        max_history_messages: historyMode === 'last' ? parseInt(document.getElementById('conv-max-messages').value) || 20 : null,
        agents_enabled: document.getElementById('conv-agents-enabled').checked,
        agent_mode: document.getElementById('conv-agent-mode').value || null,
        agent_model_selection: document.getElementById('conv-agent-model-selection').value || null,
    };
    try {
        const resp = await fetch(`/chat/${conversationId}/api/settings`, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data) });
        if (resp.ok) { AppToast.success('Saved', 'Settings updated.'); bootstrap.Modal.getInstance(document.getElementById('settingsModal'))?.hide(); }
        else { const err = await resp.json(); AppToast.danger('Error', err.detail || 'Failed.'); }
    } catch (err) { AppToast.danger('Error', 'Network error.'); }
}

// -- Tools Tab --
async function loadToolsTab() {
    const container = document.getElementById('tools-list');
    try {
        const resp = await fetch(`/chat/${conversationId}/api/tools`);
        const data = await resp.json();
        let html = '';

        // Embedded tools
        if (data.embedded.length) {
            html += '<div class="mb-3"><strong style="font-size:0.875rem;"><i class="bi bi-puzzle me-1" style="color:var(--app-accent);"></i>Embedded Tools</strong></div>';
            data.embedded.forEach(t => {
                html += `<div class="d-flex align-items-center justify-content-between py-1 px-2 mb-1" style="font-size:0.8125rem; border-radius:0.375rem;">
                    <span>${escapeHtml(t.name)}<span style="color:var(--app-text-muted); font-size:0.6875rem; margin-left:0.5rem;">${escapeHtml(t.description || '').substring(0, 60)}</span></span>
                    <div class="form-switch"><input class="form-check-input" type="checkbox" ${t.enabled?'checked':''} onchange="toggleTool('embedded','${t.name}',this.checked)"></div>
                </div>`;
            });
        }

        // MCP servers
        if (data.mcp_servers.length) {
            data.mcp_servers.forEach(s => {
                const serverId = 'mcp-srv-' + s.name.replace(/[^a-z0-9]/gi, '-');
                html += `
                    <div class="mt-4 mb-2" style="border:1px solid var(--app-border); border-radius:0.5rem; overflow:hidden;">
                        <div class="d-flex align-items-center justify-content-between px-3 py-2" style="background:var(--app-bg-secondary);">
                            <div class="d-flex align-items-center gap-2">
                                <i class="bi bi-hdd-network" style="color:var(--app-accent);"></i>
                                <strong style="font-size:0.875rem;">${escapeHtml(s.name)}</strong>
                                <span style="font-size:0.6875rem; color:var(--app-text-muted);">${s.tools.length} tools</span>
                            </div>
                            <div class="form-switch">
                                <input class="form-check-input" type="checkbox" ${s.enabled?'checked':''}
                                       onchange="toggleTool('mcp_server','${s.name}',this.checked); setTimeout(loadToolsTab, 500);"
                                       title="Enable/disable entire server">
                            </div>
                        </div>
                        <div style="padding:0.375rem 0.5rem; ${!s.enabled ? 'opacity:0.35; pointer-events:none;' : ''}">
                            ${s.tools.map(t => `
                                <div class="d-flex align-items-center justify-content-between py-1 px-2 mb-1" style="font-size:0.8125rem;">
                                    <span>${escapeHtml(t.name)}<span style="color:var(--app-text-muted); font-size:0.6875rem; margin-left:0.5rem;">${escapeHtml(t.description || '').substring(0, 60)}</span></span>
                                    <div class="form-switch"><input class="form-check-input" type="checkbox" ${t.enabled?'checked':''} onchange="toggleTool('embedded','${t.name}',this.checked)"></div>
                                </div>
                            `).join('')}
                        </div>
                    </div>`;
            });
        }

        container.innerHTML = html || '<p style="color:var(--app-text-muted);">No tools available.</p>';
    } catch (err) { container.innerHTML = '<div class="alert-app alert-app-danger">Failed to load tools.</div>'; }
}

async function toggleTool(type, name, enabled) {
    await fetch(`/chat/${conversationId}/api/tools`, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({type, name, enabled}) });
}

// -- Links Tab --
async function loadLinksTab() {
    const container = document.getElementById('links-content');
    try {
        const resp = await fetch(`/chat/${conversationId}/api/links`);
        const data = await resp.json();
        let html = '';
        if (data.linked.length) {
            html += '<div class="mb-3"><strong style="font-size:0.875rem;">Currently Linked</strong></div>';
            data.linked.forEach(c => {
                html += `<div class="d-flex align-items-center justify-content-between py-2 px-2 mb-1" style="font-size:0.8125rem; border: 1px solid var(--app-border); border-radius: 0.375rem;">
                    <span>${escapeHtml(c.name)} <span style="color:var(--app-text-muted);">(${c.model_id||''})</span></span>
                    <button class="btn btn-app-ghost btn-sm" onclick="unlinkConversation(${c.id})" style="color:var(--app-danger);"><i class="bi bi-x-lg"></i></button>
                </div>`;
            });
        }
        if (data.available.length) {
            html += '<div class="mb-2 mt-3"><strong style="font-size:0.875rem;">Add Link</strong></div>';
            html += '<div class="d-flex gap-2"><select class="form-select form-select-sm" id="link-target">';
            data.available.forEach(c => { html += `<option value="${c.id}">${escapeHtml(c.name)}</option>`; });
            html += '</select><button class="btn btn-app-primary btn-sm" onclick="linkConversation()"><i class="bi bi-plus-lg"></i></button></div>';
        }
        if (!data.linked.length && !data.available.length) html = '<p style="color:var(--app-text-muted);">No conversations available for linking.</p>';
        container.innerHTML = html;
    } catch (err) { container.innerHTML = '<div class="alert-app alert-app-danger">Failed to load links.</div>'; }
}

async function linkConversation() {
    const target = document.getElementById('link-target')?.value;
    if (!target) return;
    await fetch(`/chat/${conversationId}/api/links`, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({target_id: parseInt(target)}) });
    loadLinksTab();
}

async function unlinkConversation(targetId) {
    await fetch(`/chat/${conversationId}/api/links/${targetId}`, { method: 'DELETE' });
    loadLinksTab();
}

// -- Export --
function exportConversation(format) {
    window.open(`/chat/${conversationId}/api/export?format=${format}`, '_blank');
}

// -- Delete --
let isFavourite = {{ 'true' if conversation.is_favourite else 'false' }};
async function toggleFavourite() {
    isFavourite = !isFavourite;
    try {
        await fetch(`/conversations/api/${conversationId}/favourite`, {
            method: 'POST', headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ favourite: isFavourite }),
        });
        const btn = document.getElementById('btn-favourite');
        const icon = btn.querySelector('i');
        if (isFavourite) {
            icon.className = 'bi bi-star-fill';
            btn.style.color = 'var(--app-warning)';
        } else {
            icon.className = 'bi bi-star';
            btn.style.color = 'var(--app-text-muted)';
        }
    } catch (err) { AppToast.danger('Error', 'Failed to update.'); }
}

async function renameConversation() {
    const newName = prompt('Rename conversation:', document.getElementById('conv-display-name').textContent);
    if (!newName || !newName.trim()) return;
    try {
        const resp = await fetch(`/conversations/api/${conversationId}/rename`, {
            method: 'POST', headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ name: newName.trim() }),
        });
        if (resp.ok) {
            document.getElementById('conv-display-name').textContent = newName.trim();
            document.title = `Spark - ${newName.trim()}`;
        }
    } catch (err) { AppToast.danger('Error', 'Failed to rename.'); }
}

let _allModels = [];

async function changeModel() {
    const modal = new bootstrap.Modal(document.getElementById('modelSelectorModal'));
    document.getElementById('model-selector-loading').style.display = '';
    document.getElementById('model-selector-list').style.display = 'none';
    document.getElementById('model-search').value = '';
    modal.show();

    try {
        const resp = await fetch('/conversations/api/models');
        const data = await resp.json();
        _allModels = data.models || [];

        document.getElementById('model-selector-loading').style.display = 'none';
        renderModelList(_allModels);
        document.getElementById('model-selector-list').style.display = '';
    } catch (err) {
        AppToast.danger('Error', 'Failed to load models.');
        modal.hide();
    }
}

function renderModelList(models) {
    const list = document.getElementById('model-selector-list');
    const currentModel = window._currentModelId || '';

    // Group by provider
    const grouped = {};
    models.forEach(m => {
        const provider = m.provider || 'Unknown';
        if (!grouped[provider]) grouped[provider] = [];
        grouped[provider].push(m);
    });

    let html = '';
    for (const [provider, providerModels] of Object.entries(grouped)) {
        html += `<div style="font-size: 0.6875rem; font-weight: 600; color: var(--app-text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0.5rem 0.5rem 0.25rem; margin-top: 0.25rem;">${provider}</div>`;
        providerModels.forEach(m => {
            const isActive = m.id === currentModel;
            const toolBadge = m.supports_tools
                ? '<span style="font-size:0.5625rem; color:var(--app-success);">tools</span>'
                : '';
            const ctx = m.context_length > 0
                ? (m.context_length >= 1000000 ? (m.context_length / 1000000).toFixed(1) + 'M'
                   : m.context_length >= 1000 ? Math.round(m.context_length / 1000) + 'K'
                   : m.context_length)
                : '';

            html += `
                <div class="d-flex align-items-center gap-2 px-2 py-2 rounded model-selector-item${isActive ? ' active' : ''}"
                     style="cursor: pointer; font-size: 0.8125rem; ${isActive ? 'background: var(--app-active-bg);' : ''}"
                     onclick="selectModel('${m.id}')"
                     data-model-name="${(m.name || m.id).toLowerCase()}"
                     data-model-id="${m.id.toLowerCase()}">
                    ${isActive ? '<i class="bi bi-check-circle-fill" style="color: var(--app-accent); flex-shrink:0;"></i>' : '<i class="bi bi-circle" style="color: var(--app-text-muted); opacity:0.3; flex-shrink:0;"></i>'}
                    <div style="flex:1; min-width:0;">
                        <div style="font-weight: ${isActive ? '600' : '400'}; color: var(--app-text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${m.name || m.id}</div>
                        <div style="font-size:0.6875rem; color:var(--app-text-muted);">${m.id}</div>
                    </div>
                    <div class="d-flex align-items-center gap-2" style="flex-shrink:0;">
                        ${toolBadge}
                        <span style="font-size:0.625rem; color:var(--app-text-muted);">${ctx}</span>
                    </div>
                </div>`;
        });
    }
    list.innerHTML = html;
}

function filterModelList() {
    const query = document.getElementById('model-search').value.toLowerCase();
    document.querySelectorAll('.model-selector-item').forEach(item => {
        const name = item.dataset.modelName || '';
        const id = item.dataset.modelId || '';
        item.style.display = (name.includes(query) || id.includes(query)) ? '' : 'none';
    });
}

async function selectModel(modelId) {
    try {
        const r = await fetch(`/conversations/api/${conversationId}/model`, {
            method: 'POST', headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ model_id: modelId }),
        });
        if (r.ok) {
            window._currentModelId = modelId;
            document.getElementById('conv-display-model').textContent = modelId;
            AppToast.success('Model changed', `Now using ${modelId}`);
            bootstrap.Modal.getInstance(document.getElementById('modelSelectorModal'))?.hide();
        }
    } catch (err) { AppToast.danger('Error', 'Failed to change model.'); }
}

function confirmDeleteConversation() { new bootstrap.Modal(document.getElementById('deleteModal')).show(); }
async function deleteConversation() {
    try {
        await fetch(`/conversations/api/${conversationId}`, { method: 'DELETE' });
        window.location.href = '/conversations';
    } catch (err) { AppToast.danger('Error', 'Failed to delete.'); }
}

// ==========================================================================
// Speech Input (mic button) + Voice Conversation Mode
// ==========================================================================

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
let _speechRecognition = null;
let _isListening = false;
let _voiceModeActive = false;
let _voiceSilenceTimer = null;
let _voiceTTS = window.speechSynthesis;
let _voiceIsSpeaking = false;
let _voiceSelectedVoice = null;
let _voiceSendInFlight = false;

// -- Init: show buttons if supported --
function initSpeechInput() {
    if (!SpeechRecognition) return;
    document.getElementById('btn-mic').style.display = '';
    document.getElementById('btn-voice-mode').style.display = '';
    _populateVoiceSelect();
    // Voices load async in some browsers
    if (_voiceTTS) _voiceTTS.onvoiceschanged = _populateVoiceSelect;
}

function _populateVoiceSelect() {
    if (!_voiceTTS) return;
    const select = document.getElementById('voice-select');
    if (!select) return;
    const voices = _voiceTTS.getVoices();
    if (voices.length === 0) return;
    const saved = localStorage.getItem('spark-voice-name');
    select.innerHTML = '';
    voices.forEach((v, i) => {
        const opt = document.createElement('option');
        opt.value = i;
        opt.textContent = `${v.name} (${v.lang})`;
        if (saved && v.name === saved) { opt.selected = true; _voiceSelectedVoice = v; }
        select.appendChild(opt);
    });
    if (!_voiceSelectedVoice && voices.length > 0) _voiceSelectedVoice = voices[0];
}

function saveVoicePreference() {
    const select = document.getElementById('voice-select');
    const voices = _voiceTTS.getVoices();
    const idx = parseInt(select.value);
    if (voices[idx]) {
        _voiceSelectedVoice = voices[idx];
        localStorage.setItem('spark-voice-name', voices[idx].name);
    }
}

// -- Mic button (push-to-talk, manual send) --
function toggleSpeechInput() {
    if (!SpeechRecognition) return;
    if (_voiceModeActive) return; // Use voice mode controls instead

    if (_isListening) {
        if (_speechRecognition) _speechRecognition.stop();
        _isListening = false;
        _updateMicUI(false);
        return;
    }

    const input = document.getElementById('chat-input');
    input.dataset.preVoiceText = input.value;
    _isListening = true;
    _updateMicUI(true);
    _startRecognition(false); // manual mode — no auto-send
}

// -- Voice Conversation Mode --
function toggleVoiceMode() {
    if (_voiceModeActive) {
        _exitVoiceMode();
    } else {
        _enterVoiceMode();
    }
}

function _enterVoiceMode() {
    _voiceModeActive = true;
    document.getElementById('voice-mode-bar').style.display = '';
    const btn = document.getElementById('btn-voice-mode');
    btn.classList.remove('btn-app-ghost');
    btn.classList.add('btn-app-primary');
    document.getElementById('voice-mode-icon').classList.replace('bi-headset', 'bi-headset');
    btn.title = 'Exit Voice Mode';
    _setVoiceStatus('Listening...');
    _voiceStartListening();
}

function _exitVoiceMode() {
    _voiceModeActive = false;
    _voiceStopAll();
    document.getElementById('voice-mode-bar').style.display = 'none';
    const btn = document.getElementById('btn-voice-mode');
    btn.classList.remove('btn-app-primary');
    btn.classList.add('btn-app-ghost');
    btn.title = 'Voice Conversation';
    _isListening = false;
    _updateMicUI(false);
}

function _voiceStopAll() {
    if (_speechRecognition) { try { _speechRecognition.abort(); } catch(e) {} }
    if (_voiceTTS) _voiceTTS.cancel();
    if (_voiceSilenceTimer) { clearTimeout(_voiceSilenceTimer); _voiceSilenceTimer = null; }
    _voiceIsSpeaking = false;
    _voiceSendInFlight = false;
    _isListening = false;
}

function _setVoiceStatus(text) {
    const el = document.getElementById('voice-mode-status');
    if (el) el.textContent = text;
}

function _voiceStartListening() {
    if (!_voiceModeActive) return;
    if (_voiceIsSpeaking) return; // Wait for TTS to finish
    if (isRequestInProgress()) {
        // LLM still responding — wait then retry
        setTimeout(() => _voiceStartListening(), 500);
        return;
    }
    _setVoiceStatus('Listening...');
    _isListening = true;
    _updateMicUI(true);
    _startRecognition(true); // auto-send mode
}

function _startRecognition(autoSend) {
    const input = document.getElementById('chat-input');
    if (!autoSend) input.dataset.preVoiceText = input.value;

    _speechRecognition = new SpeechRecognition();
    _speechRecognition.continuous = true;
    _speechRecognition.interimResults = true;
    _speechRecognition.lang = navigator.language || 'en-US';

    let finalTranscript = '';
    let lastResultTime = Date.now();

    _speechRecognition.onresult = (event) => {
        let interim = '';
        for (let i = event.resultIndex; i < event.results.length; i++) {
            const t = event.results[i][0].transcript;
            if (event.results[i].isFinal) {
                finalTranscript += t;
            } else {
                interim += t;
            }
        }
        lastResultTime = Date.now();
        const pre = autoSend ? '' : (input.dataset.preVoiceText || '');
        const sep = pre && !pre.endsWith(' ') ? ' ' : '';
        input.value = pre + sep + finalTranscript + interim;
        input.style.height = 'auto';
        input.style.height = Math.min(input.scrollHeight, 200) + 'px';

        if (autoSend) {
            _setVoiceStatus('Listening...');
            // Reset silence timer — auto-send after 1.5s of silence
            if (_voiceSilenceTimer) clearTimeout(_voiceSilenceTimer);
            if (finalTranscript.trim()) {
                _voiceSilenceTimer = setTimeout(() => {
                    if (_voiceModeActive && finalTranscript.trim()) {
                        _voiceAutoSend(finalTranscript.trim());
                    }
                }, 1500);
            }
        }
    };

    _speechRecognition.onend = () => {
        _isListening = false;
        _updateMicUI(false);
        if (autoSend && _voiceModeActive && !_voiceSendInFlight && finalTranscript.trim()) {
            // Only send from onend if the silence timer hasn't already sent
            if (_voiceSilenceTimer) clearTimeout(_voiceSilenceTimer);
            _voiceAutoSend(finalTranscript.trim());
        } else if (autoSend && _voiceModeActive && !_voiceSendInFlight) {
            // No transcript but still in voice mode — restart listening
            setTimeout(() => _voiceStartListening(), 300);
        } else if (!autoSend) {
            const pre = input.dataset.preVoiceText || '';
            const sep = pre && !pre.endsWith(' ') ? ' ' : '';
            if (finalTranscript) input.value = pre + sep + finalTranscript;
        }
    };

    _speechRecognition.onerror = (event) => {
        _isListening = false;
        _updateMicUI(false);
        if (event.error === 'no-speech' && autoSend && _voiceModeActive && !_voiceSendInFlight) {
            // No speech detected — just restart listening in voice mode
            setTimeout(() => _voiceStartListening(), 300);
            return;
        }
        if (event.error === 'no-speech' || event.error === 'aborted') return;
        AppToast.danger('Voice Input', 'Speech recognition error: ' + event.error);
        if (_voiceModeActive && !_voiceSendInFlight) setTimeout(() => _voiceStartListening(), 1000);
    };

    try { _speechRecognition.start(); } catch(e) {
        _isListening = false;
        _updateMicUI(false);
    }
}

function _voiceAutoSend(text) {
    if (!_voiceModeActive || _voiceSendInFlight) return;
    _voiceSendInFlight = true;

    // Stop recognition without triggering another send (guard prevents re-entry)
    if (_voiceSilenceTimer) { clearTimeout(_voiceSilenceTimer); _voiceSilenceTimer = null; }
    if (_speechRecognition) { try { _speechRecognition.abort(); } catch(e) {} }
    _isListening = false;
    _updateMicUI(false);
    _setVoiceStatus('Processing...');

    // Wait a tick for any in-flight SSE to be fully cleaned up
    setTimeout(() => {
        const input = document.getElementById('chat-input');
        clearEmptyState();
        appendTextMessage('user', text, null);
        input.value = '';
        scrollToBottom();

        // Send via SSE and hook into completion for TTS
        sendMessageWithSSE(conversationId, text);

        // Poll for completion
        const pollDone = setInterval(() => {
            if (!isRequestInProgress()) {
                clearInterval(pollDone);
                _voiceSendInFlight = false;
                if (_voiceModeActive) {
                    // Get the last assistant message text and speak it
                    const msgs = document.querySelectorAll('.chat-message.assistant .markdown-content');
                    if (msgs.length > 0) {
                        const lastMsg = msgs[msgs.length - 1];
                        const responseText = lastMsg.innerText || lastMsg.textContent || '';
                        if (responseText.trim()) {
                            _voiceSpeak(responseText.trim());
                        } else {
                            _voiceStartListening();
                        }
                    } else {
                        _voiceStartListening();
                    }
                }
            }
        }, 300);
    }, 100);
}

function _voiceSpeak(text) {
    if (!_voiceTTS || !_voiceModeActive) { _voiceStartListening(); return; }
    _voiceIsSpeaking = true;
    _setVoiceStatus('Speaking...');

    // Split long text into chunks at sentence boundaries (TTS has length limits)
    const chunks = _splitIntoSentences(text);
    let idx = 0;

    function speakNext() {
        if (idx >= chunks.length || !_voiceModeActive) {
            _voiceIsSpeaking = false;
            if (_voiceModeActive) _voiceStartListening();
            return;
        }
        const utterance = new SpeechSynthesisUtterance(chunks[idx]);
        if (_voiceSelectedVoice) utterance.voice = _voiceSelectedVoice;
        utterance.rate = 1.0;
        utterance.pitch = 1.0;
        utterance.onend = () => { idx++; speakNext(); };
        utterance.onerror = (e) => {
            if (e.error !== 'canceled') console.warn('TTS error:', e.error);
            _voiceIsSpeaking = false;
            if (_voiceModeActive) _voiceStartListening();
        };
        _voiceTTS.speak(utterance);
    }

    // If user starts speaking while TTS is active, interrupt
    speakNext();
}

function _splitIntoSentences(text) {
    // Split on sentence endings, keeping chunks under ~200 chars for reliable TTS
    const raw = text.match(/[^.!?\n]+[.!?\n]+|[^.!?\n]+$/g) || [text];
    const chunks = [];
    let current = '';
    for (const s of raw) {
        if ((current + s).length > 200 && current) {
            chunks.push(current.trim());
            current = s;
        } else {
            current += s;
        }
    }
    if (current.trim()) chunks.push(current.trim());
    return chunks;
}

// -- Shared mic UI --
function _updateMicUI(listening) {
    const btn = document.getElementById('btn-mic');
    const icon = document.getElementById('mic-icon');
    if (listening) {
        btn.classList.remove('btn-app-ghost');
        btn.classList.add('btn-app-danger');
        icon.classList.remove('bi-mic');
        icon.classList.add('bi-mic-fill');
        btn.title = 'Stop listening';
    } else {
        btn.classList.remove('btn-app-danger');
        btn.classList.add('btn-app-ghost');
        icon.classList.remove('bi-mic-fill');
        icon.classList.add('bi-mic');
        btn.title = 'Voice input';
    }
}

// Init on page load
document.addEventListener('DOMContentLoaded', initSpeechInput);
</script>

<!-- Create Action from Conversation -->
<script>
let _actionChatHistory = [];
let _actionName = '';
let _actionSending = false;

function showCreateActionFromConv() {
    document.getElementById('action-step-setup').style.display = '';
    document.getElementById('action-step-chat').style.display = 'none';
    document.getElementById('action-conv-name').value = '';
    document.getElementById('action-chat-messages').innerHTML = '';
    _actionChatHistory = [];
    _actionSending = false;
    new bootstrap.Modal(document.getElementById('createActionModal')).show();
}

function startActionChat() {
    _actionName = document.getElementById('action-conv-name').value.trim();
    if (!_actionName) {
        AppToast.warning('Required', 'Enter a name for the action.');
        return;
    }

    document.getElementById('action-step-setup').style.display = 'none';
    document.getElementById('action-step-chat').style.display = '';

    // Welcome message from assistant
    _appendActionBubble('assistant',
        'I\'ll help you create an autonomous action based on this conversation. ' +
        'I\'m analysing the conversation now — what would you like this action to do? ' +
        'For example: run a daily summary, monitor something, send a recurring report, etc.'
    );

    document.getElementById('action-chat-input').focus();
}

async function sendActionChatMessage(overrideMsg) {
    if (_actionSending) return;
    const input = document.getElementById('action-chat-input');
    const message = overrideMsg || input.value.trim();
    if (!message) return;

    input.value = '';
    _actionSending = true;
    _appendActionBubble('user', message);

    // Show typing indicator
    const typing = document.createElement('div');
    typing.id = 'action-typing';
    typing.style.cssText = 'padding: 0.5rem 1rem; font-size: 0.8125rem; color: var(--app-text-muted);';
    typing.innerHTML = '<div class="app-spinner" style="width:1rem;height:1rem;border-width:2px;display:inline-block;vertical-align:middle;"></div> Thinking...';
    document.getElementById('action-chat-messages').appendChild(typing);
    _scrollActionChat();

    try {
        const resp = await fetch('/actions/api/ai-create', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                message: message,
                history: _actionChatHistory,
                action_name: _actionName,
                model_id: window._currentModelId || '',
                conversation_id: conversationId,
            }),
        });
        const data = await resp.json();

        // Remove typing indicator
        document.getElementById('action-typing')?.remove();

        if (data.error) {
            _appendActionBubble('assistant', 'Error: ' + data.error);
            _actionSending = false;
            return;
        }

        // Update history
        _actionChatHistory = data.history || [];

        // Show tool calls
        if (data.tool_calls && data.tool_calls.length) {
            data.tool_calls.forEach(tc => {
                const isCreate = tc.name === 'create_autonomous_action';
                const icon = isCreate ? 'bi-check-circle-fill' : 'bi-wrench';
                const colour = isCreate && tc.result && tc.result.includes('successfully') ? 'var(--app-success)' : 'var(--app-accent)';
                const el = document.createElement('div');
                el.style.cssText = 'padding: 0.375rem 1rem; font-size: 0.75rem; color: var(--app-text-muted);';
                el.innerHTML = `<i class="bi ${icon}" style="color:${colour};"></i> <strong>${escapeHtml(tc.name)}</strong>: ${escapeHtml((tc.result || '').substring(0, 200))}`;
                document.getElementById('action-chat-messages').appendChild(el);
            });
        }

        // Show response
        if (data.response) {
            _appendActionBubble('assistant', data.response);
        }

        // Check if action was created
        const wasCreated = data.tool_calls && data.tool_calls.some(
            tc => tc.name === 'create_autonomous_action' && tc.result && tc.result.includes('successfully')
        );
        if (wasCreated) {
            _appendActionConfirm();
        }
    } catch (err) {
        document.getElementById('action-typing')?.remove();
        _appendActionBubble('assistant', 'Network error. Please try again.');
    }

    _actionSending = false;
}

function _appendActionBubble(role, text) {
    const container = document.getElementById('action-chat-messages');
    const div = document.createElement('div');
    div.style.cssText = `margin-bottom: 0.75rem; display: flex; ${role === 'user' ? 'justify-content: flex-end;' : ''}`;
    const bubble = document.createElement('div');
    bubble.style.cssText = `max-width: 85%; padding: 0.625rem 0.875rem; border-radius: 0.75rem; font-size: 0.8125rem; line-height: 1.5; ${
        role === 'user'
            ? 'background: var(--app-accent); color: var(--app-text-on-accent);'
            : 'background: var(--app-bg-secondary); color: var(--app-text-primary); border: 1px solid var(--app-border);'
    }`;
    if (role === 'assistant' && typeof marked !== 'undefined') {
        try { bubble.innerHTML = marked.parse(text); } catch (e) { bubble.textContent = text; }
        bubble.classList.add('markdown-content');
    } else {
        bubble.textContent = text;
    }
    div.appendChild(bubble);
    container.appendChild(div);
    _scrollActionChat();
}

function _appendActionConfirm() {
    const container = document.getElementById('action-chat-messages');
    const div = document.createElement('div');
    div.style.cssText = 'text-align: center; padding: 0.75rem;';
    div.innerHTML = `
        <div class="alert-app alert-app-success" style="font-size: 0.8125rem;">
            <i class="bi bi-check-circle-fill me-1"></i> Action created successfully!
        </div>
        <a href="/actions" class="btn btn-app-primary btn-sm mt-2">
            <i class="bi bi-play-circle me-1"></i> Go to Actions
        </a>
        <button class="btn btn-app-ghost btn-sm mt-2" data-bs-dismiss="modal">
            Close
        </button>
    `;
    container.appendChild(div);
    _scrollActionChat();
}

function _scrollActionChat() {
    const c = document.getElementById('action-chat-messages');
    c.scrollTop = c.scrollHeight;
}
</script>
{% endblock %}