{% extends "base.html" %}

{% block title %}Ask - Talkpipe Vault{% endblock %}

{% block container_class %}container{% endblock %}

{% block content %}
<!-- Hidden element for JS to extract server response -->
{% if messages %}
{% for msg in messages %}
{% if msg.role == 'assistant' %}
<div id="server-response" data-content="{{ msg.content | e }}" style="display:none;"></div>
{% endif %}
{% endfor %}
{% endif %}
{% if error %}
<div id="server-error" data-content="{{ error | e }}" style="display:none;"></div>
{% endif %}
{% if answered_by %}
<div id="server-answered-by" data-content="{{ answered_by | e }}" style="display:none;"></div>
{% endif %}
{% if citations %}
<script id="server-citations" type="application/json">{{ citations | tojson }}</script>
{% endif %}
{% if agent_trace %}
<script id="server-agent-trace" type="application/json">{{ agent_trace | tojson }}</script>
{% endif %}

<div class="ask-container">
    <div class="ask-header">
        <div class="icon">&#128172;</div>
        <h2>Ask a Question</h2>
        <p class="subtitle">Each question is answered independently using your vault's documents, with source chunks shown below the answer.</p>
    </div>

    <div class="question-box">
        <form id="ask-form">
            <textarea name="message" id="question-input" placeholder="Ask a focused question, like: What did I write about deployment?" rows="3" autofocus></textarea>
            {% if keyword_search_enabled %}
            <label class="keyword-toggle" title="An LLM turns your question into full-text index keywords; matching chunks are added to the context used to answer.">
                <input type="checkbox" id="use-keyword-search" name="use_keyword_search" value="on">
                <span>Boost retrieval with keyword search</span>
            </label>
            {% endif %}
            {% if agent_chat_available %}
            <label class="keyword-toggle" title="An agent runs its own semantic and keyword searches, decides chunk by chunk what is relevant, and the answer is built from just those chunks. Slower than a single retrieval.">
                <input type="checkbox" id="use-agent" name="use_agent" value="on"{% if use_agent %} checked{% endif %}>
                <span>Use Agent (let an agent gather the context; slower)</span>
            </label>
            <label class="keyword-toggle" title="Lets the agent take up to {{ extra_effort_iterations }} iterations to follow questions that need several lookups. Slower; helps most with models strong at tool calling. Needs Use Agent.">
                <input type="checkbox" id="use-extra-effort" name="use_extra_effort" value="on"{% if use_extra_effort %} checked{% endif %}{% if not use_agent %} disabled{% endif %}>
                <span>Extra Effort (more agent iterations for multi-step questions)</span>
            </label>
            {% endif %}
            <button type="submit" id="ask-btn">Ask</button>
        </form>
        <p class="ask-hint">Press Enter to ask, or Shift+Enter for a new line.</p>
        {% if not agent_chat_available and agent_unavailable_reason %}
        <p class="ask-hint agent-unavailable">Use Agent is unavailable with the current chat model &mdash; choose one that supports tool calling on the <a href="/settings">Settings</a> page. ({{ agent_unavailable_reason }})</p>
        {% endif %}
    </div>

    <div class="answer-section" id="answer-section" style="display: none;">
        <div class="answer-header">
            <span class="label">Answer</span>
            <button type="button" id="copy-btn" class="copy-btn" title="Copy to clipboard">&#128203; Copy</button>
        </div>
        <div class="answer-content markdown-content" id="answer-content"></div>
        <div class="answer-meta" id="answer-meta" style="display: none;"></div>
        <details class="agent-trace" id="agent-trace-section" style="display: none;">
            <summary id="agent-trace-summary">Agent tool calls</summary>
            <pre id="agent-trace-body"></pre>
        </details>
        <div class="sources-section" id="sources-section" style="display: none;">
            <h3>Source Chunks</h3>
            <div id="sources-list"></div>
        </div>
    </div>

    <div class="loading-section" id="loading-section" style="display: none;">
        <div class="spinner"></div>
        <span id="loading-label">Searching vault and generating answer...</span>
    </div>
</div>

{% include "_document_modal.html" %}

<style>
    .ask-container {
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid var(--panel-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        padding: 40px;
    }
    .ask-header {
        text-align: center;
        margin-bottom: 30px;
    }
    .ask-header .icon {
        font-size: 3rem;
        margin-bottom: 15px;
    }
    .ask-header h2 {
        font-size: 1.8rem;
        color: #333;
        margin-bottom: 10px;
    }
    .ask-header .subtitle {
        color: #666;
        font-size: 1rem;
    }
    .question-box {
        margin-bottom: 25px;
    }
    .question-box form {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .question-box textarea {
        background: #f8fafc;
        width: 100%;
        padding: 15px 20px;
        font-size: 1rem;
        border: 1px solid #dbe3ef;
        border-radius: 12px;
        outline: none;
        transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
        resize: vertical;
        font-family: inherit;
        line-height: 1.5;
    }
    .question-box textarea:focus {
        background: white;
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(91, 110, 225, 0.14);
    }
    .question-box button {
        align-self: flex-end;
        padding: 12px 35px;
        font-size: 1rem;
        background: var(--grad);
        color: white;
        border: none;
        border-radius: 25px;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .question-box button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(79, 70, 229, 0.35);
    }
    .question-box button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }
    .ask-hint {
        color: #64748b;
        font-size: 0.88rem;
        text-align: right;
    }
    .keyword-toggle {
        align-items: center;
        color: #475569;
        cursor: pointer;
        display: flex;
        font-size: 0.92rem;
        gap: 8px;
    }
    .keyword-toggle input {
        accent-color: var(--primary);
        cursor: pointer;
    }
    .answer-section {
        border-top: 1px solid #eee;
        padding-top: 25px;
        margin-top: 10px;
    }
    .answer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }
    .answer-header .label {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .copy-btn {
        background: #f1f3f4;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 6px 12px;
        cursor: pointer;
        font-size: 0.85rem;
        color: #666;
        transition: background 0.2s, color 0.2s;
    }
    .copy-btn:hover {
        background: #e2e4e6;
        color: #333;
    }
    .copy-btn.copied {
        background: var(--success);
        color: white;
        border-color: var(--success);
    }
    .answer-content {
        background: #f8f9fa;
        padding: 20px 25px;
        border-radius: 10px;
        line-height: 1.7;
    }
    .answer-content.error {
        background: #fce8e6;
        color: #d93025;
    }
    .answer-meta {
        color: #64748b;
        font-size: 0.82rem;
        margin-top: 8px;
        text-align: right;
    }
    .sources-section {
        border-top: 1px solid #e2e8f0;
        margin-top: 22px;
        padding-top: 18px;
    }
    .sources-section h3 {
        color: var(--primary-dark);
        font-size: 0.9rem;
        letter-spacing: 0.5px;
        margin-bottom: 12px;
        text-transform: uppercase;
    }
    .source-card {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        margin-bottom: 10px;
        padding: 14px 16px;
    }
    .source-card-header {
        align-items: flex-start;
        display: flex;
        gap: 12px;
        justify-content: space-between;
        margin-bottom: 6px;
    }
    .source-card-title {
        background: transparent;
        border: 0;
        color: #1e293b;
        cursor: pointer;
        font: inherit;
        font-weight: 700;
        padding: 0;
        text-align: left;
    }
    .source-card-title:hover,
    .source-card-title:focus {
        color: var(--primary-dark);
        text-decoration: underline;
    }
    .source-copy-btn {
        flex-shrink: 0;
        font-size: 0.8rem;
        padding: 4px 10px;
    }
    .source-card-actions {
        display: flex;
        flex-shrink: 0;
        gap: 8px;
    }
    a.source-open-btn {
        display: inline-block;
        text-decoration: none;
    }
    .source-card-snippet {
        color: #475569;
        font-size: 0.92rem;
    }
    .source-card-score {
        color: #64748b;
        display: inline-block;
        font-size: 0.78rem;
        margin-top: 8px;
    }
    .loading-section {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 30px;
        color: #666;
    }
    .loading-section .spinner {
        width: 24px;
        height: 24px;
        border: 3px solid #ddd;
        border-top-color: var(--primary);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
</style>

<script>
requireValue('question-input', 'ask-btn');

document.addEventListener('DOMContentLoaded', function() {
    // The answer is model output, which can repeat text from indexed
    // documents, and it is inserted with innerHTML: show raw HTML as text and
    // drop links that would run script. Other Markdown renders as usual.
    function escapeHtml(value) {
        const div = document.createElement('div');
        div.textContent = value;
        return div.innerHTML;
    }
    if (typeof marked !== 'undefined') {
        marked.use({
            renderer: {
                html: function (token) { return escapeHtml(token.text); },
                link: function (token) {
                    return /^\s*(javascript|vbscript|data):/i.test(token.href)
                        ? escapeHtml(token.text) : false;
                },
            },
        });
    }

    const askForm = document.getElementById('ask-form');
    const questionInput = document.getElementById('question-input');
    const askBtn = document.getElementById('ask-btn');
    const answerSection = document.getElementById('answer-section');
    const answerContent = document.getElementById('answer-content');
    const loadingSection = document.getElementById('loading-section');
    const loadingLabel = document.getElementById('loading-label');
    const copyBtn = document.getElementById('copy-btn');
    const sourcesSection = document.getElementById('sources-section');
    const sourcesList = document.getElementById('sources-list');
    const answerMeta = document.getElementById('answer-meta');
    const agentTraceSection = document.getElementById('agent-trace-section');
    const agentTraceSummary = document.getElementById('agent-trace-summary');
    const agentTraceBody = document.getElementById('agent-trace-body');

    let currentAnswer = '';

    function flashCopy(button, ok, copiedLabel, originalLabel) {
        button.textContent = ok ? copiedLabel : 'Copy failed';
        button.classList.toggle('copied', ok);
        setTimeout(function() {
            button.textContent = originalLabel;
            button.classList.remove('copied');
        }, 2000);
    }

    // Prefer a rich-text copy so pasting into a document keeps formatting.
    // ClipboardItem only exists in secure contexts; otherwise fall back to
    // the plain-text helper (which handles insecure origins itself).
    async function handleCopy() {
        if (!currentAnswer) return;

        if (navigator.clipboard && navigator.clipboard.write && window.ClipboardItem) {
            const html = typeof marked !== 'undefined' ? marked.parse(currentAnswer) : currentAnswer;
            try {
                const clipboardItem = new ClipboardItem({
                    'text/html': new Blob([html], { type: 'text/html' }),
                    'text/plain': new Blob([currentAnswer], { type: 'text/plain' })
                });
                await navigator.clipboard.write([clipboardItem]);
                flashCopy(copyBtn, true, '✓ Copied', '📋 Copy');
                return;
            } catch (err) {
                // Fall through to the plain-text path.
            }
        }
        const ok = await copyTextToClipboard(currentAnswer);
        flashCopy(copyBtn, ok, '✓ Copied', '📋 Copy');
    }

    copyBtn.addEventListener('click', handleCopy);

    // Handle Enter key to submit, Shift+Enter for newline
    questionInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            // Use requestSubmit when available so the submit event is a trusted
            // user-initiated submit (avoids untrusted submit deprecation warnings
            // and potential browser-specific behavior differences).
            if (typeof askForm.requestSubmit === 'function') {
                askForm.requestSubmit();
            } else {
                askForm.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
            }
        }
    });

    function showLoading() {
        const agentToggle = document.getElementById('use-agent');
        // An agent run is several searches and several model turns; say so,
        // because it takes far longer than the single retrieval this message
        // normally describes.
        loadingLabel.textContent = agentToggle && agentToggle.checked
            ? 'Agent is searching the vault and choosing chunks, then answering. This takes a while...'
            : 'Searching vault and generating answer...';
        loadingSection.style.display = 'flex';
        answerSection.style.display = 'none';
    }

    function hideLoading() {
        loadingSection.style.display = 'none';
    }

    function renderSources(citations) {
        sourcesList.innerHTML = '';
        if (!citations || !citations.length) {
            sourcesSection.style.display = 'none';
            return;
        }

        citations.forEach(function(citation, index) {
            const card = document.createElement('div');
            card.className = 'source-card';

            const header = document.createElement('div');
            header.className = 'source-card-header';

            const lookupPath = citation.lookup_path || citation.path || '';

            const title = document.createElement('button');
            title.type = 'button';
            title.className = 'source-card-title';
            title.textContent = (index + 1) + '. ' + citation.filename;
            title.title = 'View full chunk';
            title.addEventListener('click', function() {
                openDocumentModal(lookupPath, citation.snippet || '', title, citation.filename);
            });

            const openLink = document.createElement('a');
            openLink.className = 'copy-btn source-copy-btn source-open-btn';
            openLink.textContent = 'Open';
            openLink.title = 'Open the source document';
            openLink.href = '/open-file?path=' + encodeURIComponent(lookupPath);
            openLink.target = '_blank';
            openLink.rel = 'noopener';

            const copyChunkBtn = document.createElement('button');
            copyChunkBtn.type = 'button';
            copyChunkBtn.className = 'copy-btn source-copy-btn';
            copyChunkBtn.textContent = 'Copy Chunk';
            copyChunkBtn.addEventListener('click', function() {
                const snippetText = citation.snippet || '';

                const textPromise = fetchChunkContent(lookupPath, snippetText).then(
                    function(content) { return content || snippetText; },
                    function() { return snippetText; }
                );
                copyPendingTextToClipboard(textPromise).then(function(ok) {
                    flashCopy(copyChunkBtn, ok, 'Copied', 'Copy Chunk');
                });
            });

            const actions = document.createElement('div');
            actions.className = 'source-card-actions';
            actions.appendChild(openLink);
            actions.appendChild(copyChunkBtn);

            header.appendChild(title);
            header.appendChild(actions);

            const snippet = document.createElement('div');
            snippet.className = 'source-card-snippet';
            snippet.textContent = citation.snippet;

            card.appendChild(header);
            card.appendChild(snippet);
            if (citation.score) {
                const score = document.createElement('span');
                score.className = 'source-card-score';
                score.textContent = 'Score: ' + citation.score;
                card.appendChild(score);
            }
            sourcesList.appendChild(card);
        });

        sourcesSection.style.display = 'block';
    }

    function getServerJson(doc, id) {
        const script = doc.getElementById(id);
        if (!script) {
            return [];
        }
        try {
            return JSON.parse(script.textContent || '[]');
        } catch (err) {
            return [];
        }
    }

    function renderAgentTrace(trace) {
        if (!trace || !trace.length) {
            agentTraceSection.style.display = 'none';
            agentTraceBody.textContent = '';
            return;
        }
        agentTraceSummary.textContent = 'Agent tool calls (' + trace.length + ')';
        agentTraceBody.textContent = trace.join('\n');
        agentTraceSection.style.display = 'block';
    }

    function showAnswer(content, isError = false, citations = [], answeredBy = '', agentTrace = []) {
        currentAnswer = content;
        answerContent.classList.toggle('error', isError);

        if (!isError && typeof marked !== 'undefined') {
            answerContent.innerHTML = marked.parse(content);
        } else {
            answerContent.textContent = content;
        }

        if (!isError && answeredBy) {
            answerMeta.textContent = 'Answered by ' + answeredBy;
            answerMeta.style.display = 'block';
        } else {
            answerMeta.textContent = '';
            answerMeta.style.display = 'none';
        }

        renderAgentTrace(isError ? [] : agentTrace);
        renderSources(isError ? [] : citations);
        answerSection.style.display = 'block';
    }

    // Extra Effort only changes an agent run, so it is greyed out without one.
    const agentCheckbox = document.getElementById('use-agent');
    const extraCheckbox = document.getElementById('use-extra-effort');
    if (agentCheckbox && extraCheckbox) {
        agentCheckbox.addEventListener('change', function() {
            extraCheckbox.disabled = !agentCheckbox.checked;
        });
    }

    // Handle form submission
    askForm.addEventListener('submit', async function(e) {
        e.preventDefault();

        const question = questionInput.value.trim();
        if (!question) return;

        // Disable input while processing
        questionInput.disabled = true;
        askBtn.disabled = true;

        // Show loading indicator
        showLoading();

        try {
            // Submit to server
            const formData = new FormData();
            formData.append('message', question);
            const keywordToggle = document.getElementById('use-keyword-search');
            if (keywordToggle && keywordToggle.checked) {
                formData.append('use_keyword_search', 'on');
            }
            const agentToggle = document.getElementById('use-agent');
            if (agentToggle && agentToggle.checked) {
                formData.append('use_agent', 'on');
                const extraToggle = document.getElementById('use-extra-effort');
                if (extraToggle && extraToggle.checked) {
                    formData.append('use_extra_effort', 'on');
                }
            }

            const response = await fetch('/chat', {
                method: 'POST',
                body: formData
            });

            const html = await response.text();

            // If server returned non-OK, log details and show an error
            if (!response.ok) {
                console.error('Chat request failed', response.status, response.statusText, html);
                hideLoading();
                showAnswer('Server error: ' + response.status + ' ' + response.statusText, true);
                return;
            }

            // Parse response to extract answer
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');

            // Look for server response in hidden elements
            const serverResponse = doc.getElementById('server-response');
            const serverError = doc.getElementById('server-error');
            const serverCitations = getServerJson(doc, 'server-citations');
            const serverAgentTrace = getServerJson(doc, 'server-agent-trace');
            const serverAnsweredBy = doc.getElementById('server-answered-by');
            const answeredBy = serverAnsweredBy ? serverAnsweredBy.getAttribute('data-content') : '';

            hideLoading();

            if (serverError) {
                showAnswer('Error: ' + serverError.getAttribute('data-content'), true);
            } else if (serverResponse) {
                showAnswer(serverResponse.getAttribute('data-content'), false, serverCitations, answeredBy, serverAgentTrace);
            } else {
                console.warn('No server-response or server-error found in HTML');
                showAnswer('No response from server.', true);
            }
        } catch (err) {
            hideLoading();
            showAnswer('Network error: ' + err.message, true);
        } finally {
            questionInput.disabled = false;
            askBtn.disabled = false;
            questionInput.focus();
        }
    });
});
</script>
{% endblock %}