{% 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 %}

<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>
            <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>
    </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>
        <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>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;
    }
    .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-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() {
    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 copyBtn = document.getElementById('copy-btn');
    const sourcesSection = document.getElementById('sources-section');
    const sourcesList = document.getElementById('sources-list');
    const answerMeta = document.getElementById('answer-meta');

    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() {
        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 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');
                });
            });

            header.appendChild(title);
            header.appendChild(copyChunkBtn);

            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 getServerCitations(doc) {
        const citationsScript = doc.getElementById('server-citations');
        if (!citationsScript) {
            return [];
        }
        try {
            return JSON.parse(citationsScript.textContent || '[]');
        } catch (err) {
            return [];
        }
    }

    function showAnswer(content, isError = false, citations = [], answeredBy = '') {
        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';
        }

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

    // 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 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 = getServerCitations(doc);
            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);
            } 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 %}