{% extends "base.html" %}

{% block title %}Add Documents - Talkpipe Vault{% endblock %}

{% block content %}
<div class="search-box">
    <h2>Add Documents to This Vault</h2>
    <p class="panel-hint">
        Index files from a folder (searched recursively) or a glob pattern such as
        <code>~/notes/**/*.md</code>. Documents are embedded with
        <strong>{{ models.embedding_source }}/{{ models.embedding_model }}</strong>
        (change this under Settings) into the vault at
        <code>{{ vault_path }}</code>.
    </p>
    <form method="post" action="/documents/index" id="index-form">
        <input type="text" name="source_path" id="source-path-input"
               placeholder="No folder chosen yet &mdash; click Browse, or type a path or glob"
               required autofocus>
        <button type="button" id="source-browse-btn" class="btn-secondary">Browse&hellip;</button>
        <button type="submit" id="index-btn">Index Documents</button>
    </form>
    <label class="overwrite-option">
        <input type="checkbox" name="overwrite" value="true" form="index-form">
        Overwrite: replace the vault's existing index instead of adding to it
    </label>
</div>

<div class="search-box" id="index-progress" style="display: none;" aria-live="polite">
    <div class="progress-header">
        <div class="spinner"></div>
        <h3 id="progress-title">Indexing documents&hellip;</h3>
    </div>
    <div class="progress-track">
        <div class="progress-fill" id="progress-fill" style="width: 0%;"></div>
    </div>
    <p class="progress-text" id="progress-text"></p>
</div>

<style>
    .progress-header {
        align-items: center;
        display: flex;
        gap: 12px;
        margin-bottom: 14px;
    }
    .progress-header h3 {
        margin-bottom: 0;
    }
    .progress-track {
        background: var(--field-bg);
        border: 1px solid var(--field-border);
        border-radius: 999px;
        height: 12px;
        overflow: hidden;
    }
    .progress-fill {
        background: var(--grad);
        border-radius: 999px;
        height: 100%;
        min-width: 6px;
        transition: width 0.4s ease;
    }
    .progress-fill.indeterminate {
        animation: progress-slide 1.2s ease-in-out infinite;
        width: 30% !important;
    }
    @keyframes progress-slide {
        0% { margin-left: 0; }
        50% { margin-left: 70%; }
        100% { margin-left: 0; }
    }
    .progress-text {
        color: var(--muted);
        font-size: 0.9rem;
        margin-top: 10px;
    }
    .progress-text code {
        font-size: 0.85em;
    }
</style>

{% include "_dir_picker.html" %}
<script>
    attachDirPicker('source-browse-btn', 'source-path-input', { allowNewFolder: false });
    requireValue('source-path-input', 'index-btn');

    (function () {
        const panel = document.getElementById('index-progress');
        const fill = document.getElementById('progress-fill');
        const text = document.getElementById('progress-text');
        const indexBtn = document.getElementById('index-btn');
        let sawRunningJob = false;

        function render(status) {
            panel.style.display = 'block';
            indexBtn.disabled = true;
            const embedder = status.embedding ? ' via ' + status.embedding : '';
            if (status.total_files > 0) {
                const done = Math.min(status.files_done, status.total_files);
                const pct = Math.round((done / status.total_files) * 100);
                fill.classList.remove('indeterminate');
                fill.style.width = pct + '%';
                let detail = 'File ' + Math.min(done + 1, status.total_files) + ' of ' +
                    status.total_files;
                if (status.current_file) {
                    detail += ' — ' + status.current_file;
                }
                detail += ' · ' + status.chunks + ' chunk(s) embedded' + embedder;
                text.textContent = detail;
            } else {
                fill.classList.add('indeterminate');
                text.textContent = status.chunks + ' chunk(s) embedded' + embedder;
            }
        }

        async function poll() {
            let status;
            try {
                status = await (await fetch('/api/index-status')).json();
            } catch (err) {
                setTimeout(poll, 2000);
                return;
            }
            if (status.running) {
                sawRunningJob = true;
                render(status);
                setTimeout(poll, 800);
            } else if (sawRunningJob) {
                // The job we were watching finished: reload with its outcome.
                const params = new URLSearchParams();
                if (status.error) {
                    params.set('error', status.error);
                } else if (status.message) {
                    params.set('message', status.message);
                }
                window.location = '/documents' + (params.toString() ? '?' + params : '');
            } else {
                panel.style.display = 'none';
            }
        }

        poll();
    })();
</script>
{% endblock %}