{% extends "base.html" %}

{% block title %}
{% if filename %}{{ filename }} - {% endif %}Struckdown Playground
{% endblock %}

{% block body %}
<!-- Inputs Strip (left edge trigger) -->
<div id="inputs-strip">
    <span class="inputs-strip-text"><i class="bi bi-sliders"></i> Inputs</span>
</div>

<!-- Inputs Offcanvas (left side) -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="inputs-offcanvas" aria-labelledby="inputs-offcanvas-label">
    <div class="offcanvas-header border-bottom py-2">
        <h6 class="offcanvas-title mb-0" id="inputs-offcanvas-label">
            <i class="bi bi-sliders"></i> Inputs
        </h6>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="btn-group" role="group">
                <input type="radio" class="btn-check" name="mode" id="mode-single" value="single" checked>
                <label class="btn btn-outline-secondary btn-sm" for="mode-single">Interactive</label>
                <input type="radio" class="btn-check" name="mode" id="mode-file" value="file">
                <label class="btn btn-outline-secondary btn-sm" for="mode-file">File</label>
                <input type="radio" class="btn-check" name="mode" id="mode-batch" value="batch">
                <label class="btn btn-outline-secondary btn-sm" for="mode-batch">Batch</label>
            </div>
        </div>

        <!-- Single mode: individual inputs -->
        <div id="single-inputs-section">
            <div id="inputs-container">
                <p class="text-muted small mb-0">
                    Input fields will appear here based on <code>{{ "{{variables}}" }}</code> in your prompt.
                </p>
            </div>
        </div>

        <!-- File mode: single file upload as {{source}} -->
        <div id="file-upload-section" style="display: none;">
            <label for="source-file" class="form-label">Upload source file</label>
            <input type="file" class="form-control form-control-sm" id="source-file"
                   accept="*/*">
            <div id="source-file-info" class="mt-2" style="display: none;">
                <span class="badge bg-primary"><i class="bi bi-file-earmark-text"></i>
                    <span id="source-filename"></span>
                </span>
                <span class="text-muted ms-2"><span id="source-file-size"></span></span>
                <button class="btn btn-link btn-sm text-danger" onclick="clearSourceFile()">
                    <i class="bi bi-x"></i> Remove
                </button>
            </div>
            <p class="text-muted small mt-2 mb-0">
                File content will be available as <code>{{ "{{source}}" }}</code> in your prompt.
            </p>
        </div>

        <!-- Batch mode: xlsx/csv/zip/multiple files upload -->
        <div id="batch-upload-section" style="display: none;">
            <label for="batch-file" class="form-label">Upload data file(s)</label>
            <input type="file" class="form-control form-control-sm" id="batch-file"
                   multiple>
            <div id="batch-file-info" class="mt-2" style="display: none;">
                <span class="badge bg-success"><i class="bi bi-file-earmark-spreadsheet"></i>
                    <span id="batch-filename"></span>
                </span>
                <span class="text-muted ms-2"><span id="batch-row-count"></span> rows</span>
                <button class="btn btn-link btn-sm text-danger" onclick="clearBatchFile()">
                    <i class="bi bi-x"></i> Remove
                </button>
            </div>
            <p class="text-muted small mt-2 mb-0">
                Upload xlsx/csv with columns matching <code>{{ "{{variables}}" }}</code>, or select multiple files (each available as <code>{{ "{{source}}" }}</code>).
            </p>
        </div>

        <!-- Evidence files section (available in all modes) -->
        <div id="evidence-section" class="mt-4 pt-3 border-top">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <label class="form-label mb-0">
                    <i class="bi bi-file-earmark-text"></i> Evidence Files
                    <span class="badge bg-secondary ms-1" id="evidence-count">0</span>
                </label>
            </div>
            <input type="file" class="form-control form-control-sm" id="evidence-files"
                   accept=".txt,.md" multiple>
            <div id="evidence-list" class="mt-2">
                <!-- Populated dynamically -->
            </div>
            <p class="text-muted small mt-2 mb-0">
                Upload .txt/.md files for <code>[[@evidence|query="..."]]</code> BM25 search.
            </p>
        </div>
    </div>
</div>

<div class="container-fluid vh-100 d-flex flex-column">
    <!-- Compact Header -->
    <nav class="navbar navbar-dark py-0" id="top-navbar">
        <div class="container-fluid d-flex align-items-center justify-content-between">
            <!-- Title and filename -->
            <div class="d-flex align-items-center">
                <span class="navbar-brand mb-0 py-1">
                    <i class="bi bi-code-square"></i> Struckdown
                </span>
                {% if filename %}
                <span class="text-light opacity-75 small ms-2">
                    <i class="bi bi-file-earmark-code"></i> {{ filename }}
                </span>
                {% endif %}
            </div>
            <!-- Chat mode toggle -->
            <div class="d-flex align-items-center">
                <div class="form-check form-switch mb-0 me-3">
                    <input class="form-check-input" type="checkbox" role="switch" id="chat-mode-toggle" autocomplete="off">
                    <label class="form-check-label text-light small" for="chat-mode-toggle">Chat mode</label>
                </div>
            </div>
        </div>
    </nav>

    <!-- Error Banner -->
    <div id="error-banner" class="alert alert-danger alert-dismissible fade m-2 mb-0" role="alert" style="display: none;">
        <i class="bi bi-exclamation-triangle"></i>
        <span id="error-message"></span>
        <button type="button" class="btn-close" onclick="hideError()"></button>
    </div>

    <!-- Main Content -->
    <div class="row flex-grow-1 g-0 overflow-hidden">
        <!-- Editor Panel -->
        <div class="col-md-6 d-flex flex-column border-end" id="editor-column">
            <div class="panel-header p-2 border-bottom bg-light d-flex justify-content-between align-items-center">
                <span class="small text-muted">Editor <span id="dirty-indicator" class="dirty-dot" style="display: none;" title="Unsaved changes"></span></span>
                <div>
                    {% if not remote_mode %}
                    <button class="btn btn-outline-secondary btn-sm me-1" id="open-btn" onclick="showFileBrowser()">
                        <i class="bi bi-folder2-open"></i> Open
                    </button>
                    {% endif %}
                    <button class="btn btn-secondary btn-sm" id="save-btn" onclick="saveOnly()">
                        <i class="bi bi-check2"></i> Save
                    </button>
                </div>
            </div>
            <div class="flex-grow-1 overflow-hidden position-relative">
                <div id="editor-container" class="h-100"></div>
                <textarea id="syntax-source" style="display: none;">{{ syntax }}</textarea>
            </div>
        </div>

        <!-- Outputs Panel -->
        <div class="col-md-6 d-flex flex-column overflow-hidden" id="outputs-column">
            <!-- Single Mode View -->
            <div id="single-mode-view" class="d-flex flex-column h-100">
                <div class="panel-header p-2 border-bottom bg-light d-flex justify-content-between align-items-center">
                    <span class="small text-muted">Outputs</span>
                    <div class="d-flex align-items-center">
                        <div id="cost-display" class="small text-muted me-2" style="display: none;">
                            <span id="cost-tokens"></span> tokens |
                            <span id="cost-amount"></span>
                        </div>
                        <button class="btn btn-primary btn-sm" id="run-btn" onclick="saveAndRun()">
                            <i class="bi bi-play-fill"></i> Run
                        </button>
                    </div>
                </div>
                <div class="flex-grow-1 overflow-auto p-3" id="outputs-container">
                    <p class="text-muted text-center mt-5">
                        <i class="bi bi-arrow-left-circle"></i>
                        Edit your prompt and click "Run" to see outputs
                    </p>
                </div>
            </div>

            <!-- Chat Mode View (hidden by default) -->
            <div id="chat-mode-view" class="flex-column h-100" style="display: none;">
                <!-- Chat Pane -->
                <div class="d-flex flex-column" id="chat-pane" style="flex: 1; min-height: 0;">
                    <div class="panel-header p-2 border-bottom bg-light d-flex justify-content-between align-items-center">
                        <span class="small text-muted">Chat</span>
                        <div class="d-flex align-items-center">
                            <div id="chat-cost-display" class="small text-muted me-2" style="display: none;">
                                <span id="chat-cost-tokens"></span> tokens |
                                <span id="chat-cost-amount"></span>
                            </div>
                            <a href="#" class="small text-muted me-2" id="seed-chat-link" data-bs-toggle="popover" data-bs-placement="bottom">
                                <i class="bi bi-chat-left-text"></i> Seed
                            </a>
                            <a href="#" class="small text-muted me-2" id="restart-chat-link" onclick="restartChat(); return false;">
                                <i class="bi bi-arrow-counterclockwise"></i> Restart
                            </a>
                            <a href="#" class="small text-muted me-2" id="export-chat-link" onclick="exportChatHistory(); return false;">
                                <i class="bi bi-download"></i> Export
                            </a>
                        </div>
                    </div>
                    <div class="flex-grow-1 overflow-auto p-3" id="chat-messages">
                        <p class="text-muted text-center mt-3" id="chat-empty-state">
                            <i class="bi bi-chat-dots"></i>
                            Type a message below to start chatting
                        </p>
                    </div>
                    <div class="border-top p-2 bg-light" id="chat-input-area">
                        <div class="d-flex align-items-end gap-1">
                            <textarea class="form-control form-control-sm flex-grow-1" id="chat-input"
                                   rows="3" placeholder="Type a message..." autocomplete="off" style="resize: none;"></textarea>
                            <button class="btn btn-primary btn-sm" id="chat-send-btn" onclick="sendChatMessage()" style="border-radius: 6px; padding: 4px 12px; align-self: flex-end;">
                                <i class="bi bi-send"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Thinking Pane -->
                <div class="d-flex flex-column border-top" id="thinking-pane" style="flex: 0 0 35%; min-height: 150px;">
                    <div class="panel-header p-2 border-bottom bg-light d-flex justify-content-between align-items-center">
                        <span class="small text-muted">Thinking</span>
                        <span class="small text-muted" id="thinking-turn-label"></span>
                    </div>
                    <div class="flex-grow-1 overflow-auto p-2" id="thinking-container">
                        <p class="text-muted small mb-0" id="thinking-empty-state">
                            Slot completions will appear here as they stream in.
                            Click a message above to see its slots.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Status Bar -->
    <div class="border-top bg-light py-1 px-3 d-flex justify-content-between align-items-center small">
        <span id="status-text" class="text-muted">Ready</span>
        <span class="text-muted">
            Struckdown Playground
            {% if remote_mode %}<span class="badge bg-info ms-2">Remote</span>{% endif %}
        </span>
    </div>
</div>

<!-- Hidden data -->
<input type="hidden" id="remote-mode" value="{{ 'true' if remote_mode else 'false' }}">
<input type="hidden" id="has-server-api-key" value="{{ 'true' if has_server_api_key else 'false' }}">
<input type="hidden" id="current-file-path" value="{{ current_file_path or '' }}">
<input type="hidden" id="current-file-id" value="">
<input type="hidden" id="current-source-file-id" value="">
<input type="hidden" id="current-task-id" value="">
<input type="hidden" id="current-prompt-id" value="{{ prompt_id or '' }}">

<!-- File Conflict Modal -->
<div class="modal fade" id="conflict-modal" tabindex="-1" aria-labelledby="conflict-modal-label" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-warning">
                <h5 class="modal-title" id="conflict-modal-label">
                    <i class="bi bi-exclamation-triangle"></i> File Changed Externally
                </h5>
            </div>
            <div class="modal-body">
                <p>The file has been modified outside the editor. You have unsaved changes that would be lost.</p>
                <p class="mb-0"><strong>What would you like to do?</strong></p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-outline-secondary" onclick="handleConflictKeepLocal()">
                    <i class="bi bi-pencil"></i> Keep My Changes
                </button>
                <button type="button" class="btn btn-outline-secondary" onclick="handleConflictLoadExternal()">
                    <i class="bi bi-arrow-clockwise"></i> Load External Version
                </button>
            </div>
        </div>
    </div>
</div>

<!-- File Browser Modal -->
<div class="modal fade" id="file-browser-modal" tabindex="-1" aria-labelledby="file-browser-modal-label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="file-browser-modal-label">
                    <i class="bi bi-folder2-open"></i> Open File
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- New file creation -->
                <div class="input-group mb-3">
                    <input type="text" class="form-control form-control-sm" id="new-file-name" placeholder="new-file.sd">
                    <button class="btn btn-outline-primary btn-sm" type="button" onclick="createNewFile()">
                        <i class="bi bi-plus-lg"></i> New
                    </button>
                </div>
                <!-- File list -->
                <div id="file-list" class="list-group" style="max-height: 300px; overflow-y: auto;">
                    <div class="text-muted text-center py-3">Loading files...</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Unsaved Changes Modal (for file switching) -->
<div class="modal fade" id="unsaved-changes-modal" tabindex="-1" aria-labelledby="unsaved-changes-modal-label" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-warning">
                <h5 class="modal-title" id="unsaved-changes-modal-label">
                    <i class="bi bi-exclamation-triangle"></i> Unsaved Changes
                </h5>
            </div>
            <div class="modal-body">
                <p>You have unsaved changes that will be lost if you switch files.</p>
                <p class="mb-0"><strong>What would you like to do?</strong></p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-outline-secondary" onclick="handleFileSwitchCancel()">
                    <i class="bi bi-x"></i> Cancel
                </button>
                <button type="button" class="btn btn-outline-secondary" onclick="handleFileSwitchConfirm()">
                    <i class="bi bi-arrow-right"></i> Discard & Switch
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Right Strip (triggers for Settings/Help panel) -->
<div id="right-strip">
    <span class="right-strip-link" id="settings-link"><i class="bi bi-gear"></i> Settings</span>
    <span class="right-strip-link" id="help-link"><i class="bi bi-question-circle"></i> Help</span>
</div>

<!-- Settings Offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="settings-offcanvas" aria-labelledby="settings-offcanvas-label">
    <div class="offcanvas-header border-bottom py-2">
        <h6 class="offcanvas-title mb-0" id="settings-offcanvas-label">
            <i class="bi bi-gear"></i> Settings
        </h6>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <!-- Setup hint alert (shown when credentials needed) -->
        <div id="setup-hint-alert" class="alert alert-info alert-dismissible fade show mb-3" role="alert" style="display: none;">
            <i class="bi bi-info-circle"></i>
            <strong>Setup required</strong><br>
            Enter your LLM API credentials below to run prompts.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

        <div class="mb-3">
            <label for="model-input" class="form-label">Model</label>
            {% if allowed_models %}
            <select class="form-select form-select-sm" id="model-input">
                {% for m in allowed_models %}
                <option value="{{ m }}" {% if m == model %}selected{% endif %}>{{ m }}</option>
                {% endfor %}
            </select>
            {% else %}
            <input type="text" class="form-control form-control-sm" id="model-input"
                   value="{{ model or '' }}" placeholder="e.g. gpt-4o">
            {% endif %}
            <div class="form-text">LLM model identifier</div>
        </div>
        <div class="mb-3">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="strict-mode-toggle" autocomplete="off">
                <label class="form-check-label" for="strict-mode-toggle">
                    Strict mode
                </label>
            </div>
            <div class="form-text">Error on missing template variables (default: preserve as-is)</div>
        </div>
        {% if remote_mode %}
        <div class="mb-3" id="api-base-group">
            <label for="api-base-input" class="form-label">API Base URL</label>
            <input type="url" class="form-control form-control-sm" id="api-base-input">
            <div class="form-text">OpenAI-compatible endpoint</div>
        </div>
        <div class="mb-3" id="api-key-group">
            <label for="api-key-input" class="form-label">API Key</label>
            <input type="password" class="form-control form-control-sm" id="api-key-input"
                   placeholder="sk-...">
            <div class="form-text">Stored in browser only</div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Help Offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="help-offcanvas" aria-labelledby="help-offcanvas-label">
    <div class="offcanvas-header border-bottom py-2">
        <h6 class="offcanvas-title mb-0" id="help-offcanvas-label">
            <i class="bi bi-question-circle"></i> Help
        </h6>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <!-- Syntax Reference -->
        <h6 class="text-muted mb-2">Syntax</h6>
        <table class="table table-sm cheatsheet-table">
            <tbody>
                <tr>
                    <td><code>[[slot]]</code></td>
                    <td>LLM completion</td>
                </tr>
                <tr>
                    <td><code>[[type:name]]</code></td>
                    <td>Typed slot (bool, number, pick...)</td>
                </tr>
                <tr>
                    <td><code>{{ "{{var}}" }}</code></td>
                    <td>Input variable</td>
                </tr>
                <tr>
                    <td><code>[[@action|params]]</code></td>
                    <td>Action call</td>
                </tr>
                <tr>
                    <td><code>&lt;system&gt;...&lt;/system&gt;</code></td>
                    <td>System message</td>
                </tr>
                <tr>
                    <td><code>&lt;checkpoint&gt;</code></td>
                    <td>Memory boundary</td>
                </tr>
                <tr>
                    <td><code>{% raw %}{% if %}...{% endif %}{% endraw %}</code></td>
                    <td>Jinja conditional</td>
                </tr>
            </tbody>
        </table>

        <!-- Keyboard Shortcuts -->
        <h6 class="text-muted mb-2 mt-4">Keyboard Shortcuts</h6>
        <table class="table table-sm cheatsheet-table">
            <tbody>
                <tr>
                    <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td>
                    <td>Save</td>
                </tr>
                <tr>
                    <td><kbd>Ctrl</kbd> + <kbd>Enter</kbd></td>
                    <td>Save & Run</td>
                </tr>
                <tr>
                    <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td>
                    <td>Open file</td>
                </tr>
                <tr>
                    <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td>
                    <td>Toggle Inputs</td>
                </tr>
                <tr>
                    <td><kbd>Ctrl</kbd> + <kbd>,</kbd></td>
                    <td>Settings</td>
                </tr>
                <tr>
                    <td><kbd>Ctrl</kbd> + <kbd>?</kbd></td>
                    <td>Help</td>
                </tr>
            </tbody>
        </table>

        <!-- Examples -->
        <h6 class="text-muted mb-2 mt-4">Examples</h6>
        <div class="cheatsheet-example">
            <div class="example-label">Simple completion:</div>
            <pre class="example-code">Tell me a joke about {{ "{{topic}}" }}

[[joke]]</pre>
        </div>
        <div class="cheatsheet-example">
            <div class="example-label">Typed extraction:</div>
            <pre class="example-code">{{ "{{text}}" }}

[[bool:is_positive]] Is sentiment positive?
[[pick:category|tech,sports,other]]</pre>
        </div>
        <div class="cheatsheet-example">
            <div class="example-label">With system message:</div>
            <pre class="example-code">&lt;system&gt;You are a helpful assistant.&lt;/system&gt;

{{ "{{question}}" }}

[[answer]]</pre>
        </div>

        <!-- Documentation Links -->
        <h6 class="text-muted mb-2 mt-4">Documentation</h6>
        <ul class="list-unstyled">
            <li>
                <a href="https://benwhalley.github.io/struckdown/" target="_blank" class="text-decoration-none">
                    <i class="bi bi-box-arrow-up-right"></i> Full Documentation
                </a>
            </li>
            <li class="mt-1">
                <a href="https://benwhalley.github.io/struckdown/examples.html" target="_blank" class="text-decoration-none">
                    <i class="bi bi-box-arrow-up-right"></i> More Examples
                </a>
            </li>
        </ul>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
// Wait for CodeMirror module to load, with timeout fallback
function waitForCodeMirror(callback, timeout) {
    const start = Date.now();
    function check() {
        if (window.StruckdownEditor) {
            callback();
        } else if (Date.now() - start < timeout) {
            setTimeout(check, 50);
        } else {
            // Timeout - proceed without CodeMirror
            callback();
        }
    }
    check();
}

// Toggle inputs offcanvas
function toggleInputs() {
    const offcanvas = bootstrap.Offcanvas.getOrCreateInstance(document.getElementById('inputs-offcanvas'));
    offcanvas.toggle();
}

// Toggle settings offcanvas (closes help if open)
function toggleSettings() {
    const settingsOffcanvas = bootstrap.Offcanvas.getOrCreateInstance(document.getElementById('settings-offcanvas'));
    const helpOffcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('help-offcanvas'));
    if (helpOffcanvas) {
        helpOffcanvas.hide();
    }
    settingsOffcanvas.toggle();
}

// Toggle help offcanvas (closes settings if open)
function toggleHelp() {
    const helpOffcanvas = bootstrap.Offcanvas.getOrCreateInstance(document.getElementById('help-offcanvas'));
    const settingsOffcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('settings-offcanvas'));
    if (settingsOffcanvas) {
        settingsOffcanvas.hide();
    }
    helpOffcanvas.toggle();
}

// Global keyboard shortcuts
document.addEventListener('keydown', function(e) {
    // Check for Ctrl (or Cmd on Mac)
    const modifier = e.ctrlKey || e.metaKey;
    if (!modifier) return;

    // Ctrl+I - Toggle Inputs
    if (e.key === 'i' || e.key === 'I') {
        e.preventDefault();
        toggleInputs();
        return;
    }

    // Ctrl+O - Open file browser (local mode only)
    if (e.key === 'o' || e.key === 'O') {
        if (document.getElementById('remote-mode').value !== 'true') {
            e.preventDefault();
            showFileBrowser();
            return;
        }
    }

    // Ctrl+, - Toggle Settings offcanvas
    if (e.key === ',') {
        e.preventDefault();
        toggleSettings();
        return;
    }

    // Ctrl+S - Save only
    if (e.key === 's' || e.key === 'S') {
        e.preventDefault();
        saveOnly();
        return;
    }

    // Ctrl+Enter - Save & Run
    if (e.key === 'Enter') {
        e.preventDefault();
        saveAndRun();
        return;
    }

    // Ctrl+? or Ctrl+/ - Toggle Help
    if (e.key === '?' || e.key === '/') {
        e.preventDefault();
        toggleHelp();
        return;
    }
});

// Check if API credentials are needed and show settings panel
function checkCredentialsNeeded() {
    const remoteMode = document.getElementById('remote-mode').value === 'true';
    const hasServerApiKey = document.getElementById('has-server-api-key').value === 'true';

    // Only check in remote mode when server doesn't have an API key
    if (!remoteMode || hasServerApiKey) {
        return;
    }

    // Check if user has saved credentials in localStorage
    const savedKey = localStorage.getItem('struckdown_api_key');
    const savedBase = localStorage.getItem('struckdown_api_base');

    // If either is missing, show the settings panel with hint
    if (!savedKey || !savedBase) {
        // Show the setup hint alert
        const hintAlert = document.getElementById('setup-hint-alert');
        if (hintAlert) {
            hintAlert.style.display = 'block';
        }

        // Highlight the missing fields
        if (!savedBase) {
            const baseGroup = document.getElementById('api-base-group');
            if (baseGroup) {
                baseGroup.classList.add('input-missing');
            }
        }
        if (!savedKey) {
            const keyGroup = document.getElementById('api-key-group');
            if (keyGroup) {
                keyGroup.classList.add('input-missing');
            }
        }

        // Open the settings panel
        setTimeout(function() {
            const settingsOffcanvas = bootstrap.Offcanvas.getOrCreateInstance(
                document.getElementById('settings-offcanvas')
            );
            settingsOffcanvas.show();
        }, 500);
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    // Initialize session for localStorage persistence
    initSession();

    // Initialize file browser (sets currentFilePath)
    initFileBrowser();

    // Wait for CodeMirror (up to 2 seconds), then init editor
    waitForCodeMirror(function() {
        initEditor();
        // Start file watching after editor is ready
        startFileWatching();
    }, 2000);

    // Check if credentials are needed (after a brief delay to allow localStorage load)
    setTimeout(checkCredentialsNeeded, 100);

    // Inputs strip click handler
    document.getElementById('inputs-strip').addEventListener('click', toggleInputs);

    // Move inputs strip when offcanvas opens/closes
    const inputsOffcanvas = document.getElementById('inputs-offcanvas');
    inputsOffcanvas.addEventListener('show.bs.offcanvas', function() {
        document.getElementById('inputs-strip').classList.add('offcanvas-open');
    });
    inputsOffcanvas.addEventListener('hide.bs.offcanvas', function() {
        document.getElementById('inputs-strip').classList.remove('offcanvas-open');
    });

    // Right strip link handlers
    document.getElementById('settings-link').addEventListener('click', toggleSettings);
    document.getElementById('help-link').addEventListener('click', toggleHelp);

    // Move right strip when either offcanvas opens/closes
    const settingsOffcanvas = document.getElementById('settings-offcanvas');
    const helpOffcanvas = document.getElementById('help-offcanvas');

    settingsOffcanvas.addEventListener('show.bs.offcanvas', function() {
        document.getElementById('right-strip').classList.add('offcanvas-open');
    });
    settingsOffcanvas.addEventListener('hide.bs.offcanvas', function() {
        // Only remove if help is also closed
        if (!document.getElementById('help-offcanvas').classList.contains('show')) {
            document.getElementById('right-strip').classList.remove('offcanvas-open');
        }
    });

    helpOffcanvas.addEventListener('show.bs.offcanvas', function() {
        document.getElementById('right-strip').classList.add('offcanvas-open');
    });
    helpOffcanvas.addEventListener('hide.bs.offcanvas', function() {
        // Only remove if settings is also closed
        if (!document.getElementById('settings-offcanvas').classList.contains('show')) {
            document.getElementById('right-strip').classList.remove('offcanvas-open');
        }
    });

    // Load API credentials from localStorage if remote mode
    if (document.getElementById('remote-mode').value === 'true') {
        const savedKey = localStorage.getItem('struckdown_api_key');
        if (savedKey) {
            document.getElementById('api-key-input').value = savedKey;
        }
        const savedBase = localStorage.getItem('struckdown_api_base');
        if (savedBase) {
            document.getElementById('api-base-input').value = savedBase;
        }
    }

    // Mode toggle - switch between single, file, and batch modes
    document.querySelectorAll('input[name="mode"]').forEach(radio => {
        radio.addEventListener('change', function() {
            const singleSection = document.getElementById('single-inputs-section');
            const fileSection = document.getElementById('file-upload-section');
            const batchSection = document.getElementById('batch-upload-section');

            singleSection.style.display = 'none';
            fileSection.style.display = 'none';
            batchSection.style.display = 'none';

            if (this.value === 'single') {
                singleSection.style.display = 'block';
            } else if (this.value === 'file') {
                fileSection.style.display = 'block';
            } else if (this.value === 'batch') {
                batchSection.style.display = 'block';
            }
        });
    });

    // Source file upload (file mode)
    document.getElementById('source-file').addEventListener('change', handleSourceFileUpload);

    // Batch file upload
    document.getElementById('batch-file').addEventListener('change', handleBatchFileUpload);

    // Evidence file upload
    document.getElementById('evidence-files').addEventListener('change', handleEvidenceUpload);

    // Load evidence list on page load
    loadEvidenceList();

    // Chat mode toggle
    document.getElementById('chat-mode-toggle').addEventListener('change', function() {
        toggleChatMode(this.checked);
    });

    // Initialize seed popover
    initSeedPopover();

    // Restore chat mode from localStorage (default: off)
    const savedChatMode = localStorage.getItem('struckdown_chat_mode') === 'true';
    const chatToggle = document.getElementById('chat-mode-toggle');
    if (savedChatMode) {
        chatToggle.checked = true;
        toggleChatMode(true, true); // skipReset=true to not clear on page load
    } else {
        chatModeEnabled = false;
    }

    // Restore strict mode from localStorage (default: off)
    const savedStrictMode = localStorage.getItem('struckdown_strict_mode') === 'true';
    const strictToggle = document.getElementById('strict-mode-toggle');
    if (strictToggle && savedStrictMode) {
        strictToggle.checked = true;
    }

    // Chat input - Enter to send
    document.getElementById('chat-input').addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendChatMessage();
        }
    });

    // API credentials save on change and clear missing highlight
    const apiKeyInput = document.getElementById('api-key-input');
    if (apiKeyInput) {
        apiKeyInput.addEventListener('change', function() {
            localStorage.setItem('struckdown_api_key', this.value);
            // Clear missing highlight when filled
            if (this.value) {
                const group = document.getElementById('api-key-group');
                if (group) group.classList.remove('input-missing');
            }
        });
    }
    const apiBaseInput = document.getElementById('api-base-input');
    if (apiBaseInput) {
        apiBaseInput.addEventListener('change', function() {
            localStorage.setItem('struckdown_api_base', this.value);
            // Clear missing highlight when filled
            if (this.value) {
                const group = document.getElementById('api-base-group');
                if (group) group.classList.remove('input-missing');
            }
        });
    }

    // Model input save on change (works for both input and select)
    const modelInput = document.getElementById('model-input');
    if (modelInput) {
        const eventType = modelInput.tagName === 'SELECT' ? 'change' : 'input';
        modelInput.addEventListener(eventType, debounce(saveInputsToStorage, 500));
    }

    // Strict mode toggle save on change
    const strictModeToggle = document.getElementById('strict-mode-toggle');
    if (strictModeToggle) {
        strictModeToggle.addEventListener('change', function() {
            localStorage.setItem('struckdown_strict_mode', this.checked ? 'true' : 'false');
        });
    }
});
</script>
{% endblock %}