{% extends "base.html" %}

{% block content %}
<div class="container-fluid studio-page">

    <div class="studio-page-header">
        <h1 class="studio-page-title">WhitePaper Studio</h1>
        <p class="studio-page-subtitle">Draft a WhitePaper from a template, brief, and uploaded evaluation criteria. Output is a native <code>.docx</code> with a Markdown sibling.</p>
    </div>

    <div class="studio-grid studio-grid-2x2">

        <!-- Templates + criteria editor -->
        <section class="studio-panel" aria-labelledby="wp-templates-title">
            <div class="studio-panel-header">
                <h5 id="wp-templates-title">Templates</h5>
                <div class="studio-panel-actions">
                    <button type="button" class="btn btn-sm btn-outline-primary" id="wp-new-template">New</button>
                </div>
            </div>
            <div class="studio-panel-body">
                <select class="form-control mb-2" id="wp-template-select" aria-label="Select a template"></select>
                <form id="wp-template-form">
                    <div class="form-group">
                        <label class="font-weight-bold mb-1">Template ID</label>
                        <input type="text" class="form-control" id="wp-template-id" placeholder="marketing_doc" required>
                    </div>
                    <div class="form-group">
                        <label class="font-weight-bold mb-1">Name</label>
                        <input type="text" class="form-control" id="wp-template-name" placeholder="Marketing Doc" required>
                    </div>
                    <div class="form-group">
                        <label class="font-weight-bold mb-1">Description</label>
                        <textarea class="form-control" id="wp-template-description" rows="2"></textarea>
                    </div>
                    <div class="form-group">
                        <label class="font-weight-bold mb-1">Sections (JSON)</label>
                        <textarea class="form-control" id="wp-template-sections" rows="10" spellcheck="false"></textarea>
                        <small class="form-text text-muted">Each section: <code>section_id</code>, <code>name</code>, <code>guidance</code>, <code>evaluation_criteria</code>, <code>max_words</code>.</small>
                    </div>
                    <div class="form-group">
                        <label class="font-weight-bold mb-1">Rubric (rendered as appendix)</label>
                        <textarea class="form-control" id="wp-template-rubric" rows="3"></textarea>
                    </div>
                    <div class="d-flex">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-outline-danger ml-2" id="wp-delete-template">Delete</button>
                    </div>
                </form>
            </div>
        </section>

        <!-- Brief + references + submit -->
        <section class="studio-panel" aria-labelledby="wp-brief-title">
            <div class="studio-panel-header">
                <h5 id="wp-brief-title">Brief &amp; References</h5>
            </div>
            <div class="studio-panel-body">
                <form id="wp-job-form">
                    <div class="form-group">
                        <label class="font-weight-bold mb-1">Title</label>
                        <input type="text" class="form-control" id="wp-title" required>
                    </div>
                    <div class="form-group">
                        <label class="font-weight-bold mb-1">Subtitle <span class="text-muted font-weight-normal">(Optional)</span></label>
                        <input type="text" class="form-control" id="wp-subtitle">
                    </div>
                    <div class="form-group">
                        <label class="font-weight-bold mb-1">Audience</label>
                        <input type="text" class="form-control" id="wp-audience" value="evaluators">
                    </div>
                    <div class="form-group">
                        <label class="font-weight-bold mb-1">Brief</label>
                        <textarea class="form-control" id="wp-brief" rows="6" placeholder="What this WhitePaper should argue, the relevant context, and any specific positioning you want."></textarea>
                    </div>
                    <div class="form-group">
                        <label class="font-weight-bold mb-1">Output formats</label>
                        <div>
                            <label class="mr-3"><input type="checkbox" id="wp-fmt-docx" checked> .docx</label>
                            <label><input type="checkbox" id="wp-fmt-md" checked> .md</label>
                        </div>
                    </div>

                    <hr>

                    <div class="form-group">
                        <label class="font-weight-bold mb-1">Reference / criteria documents</label>
                        <input type="file" class="form-control-file" id="wp-ref-upload" accept=".pdf,.docx,.txt,.md">
                        <small class="form-text text-muted">PDFs, .docx, or plain text. Chunks are embedded into Milvus and consulted per-section.</small>
                        <ul id="wp-ref-list" class="list-unstyled mt-2"></ul>
                    </div>

                    <button type="submit" class="btn btn-primary btn-block" id="wp-generate-btn">
                        Queue WhitePaper
                    </button>
                </form>
            </div>
        </section>

        <!-- Knowledge Base (persistent corpus mirrored into VS + KG) -->
        <section class="studio-panel" aria-labelledby="wp-kb-title">
            <div class="studio-panel-header">
                <h5 id="wp-kb-title">Knowledge Base</h5>
                <div class="studio-panel-actions">
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="wp-kb-refresh">Refresh</button>
                </div>
            </div>
            <div class="studio-panel-body">
                <p class="text-muted small mb-2">
                    Persistent corpus shared across every WhitePaper job.
                    Uploads are chunked into the Vector Store and registered as
                    artifacts in the Knowledge Graph; QAssistant can recall them
                    via <code>vector_store_search</code> and
                    <code>knowledge_graph_query</code>.
                </p>
                <div class="form-group">
                    <label class="font-weight-bold mb-1">Add document</label>
                    <input type="file" class="form-control-file" id="wp-kb-upload" accept=".pdf,.docx,.pptx,.txt,.md">
                    <small class="form-text text-muted">PDF, .docx, .pptx, .md, or .txt — capability briefs, presentations, prior write-ups.</small>
                </div>
                <ul id="wp-kb-list" class="list-unstyled mt-2"></ul>
                <hr>
                <div class="form-group">
                    <label class="font-weight-bold mb-1">Preview KB recall</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="wp-kb-search-q" placeholder="e.g. quantify threat hunting">
                        <div class="input-group-append">
                            <button type="button" class="btn btn-outline-primary" id="wp-kb-search-btn">Search</button>
                        </div>
                    </div>
                    <div id="wp-kb-search-results" class="mt-2"></div>
                </div>
            </div>
        </section>

        <!-- Job queue + progress -->
        <section class="studio-panel" aria-labelledby="wp-jobs-title">
            <div class="studio-panel-header">
                <h5 id="wp-jobs-title">Job Queue</h5>
                <div class="studio-panel-actions">
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="wp-refresh-jobs">Refresh</button>
                </div>
            </div>
            <div class="studio-panel-body">
                <div id="wp-jobs"></div>
            </div>
        </section>

    </div>
</div>

<script>
const WP = {
    selectedTemplateId: null,
    pollers: new Map(),
    references: [],
};

async function wpFetchJSON(url, opts = {}) {
    const resp = await fetch(url, opts);
    const text = await resp.text();
    try { return JSON.parse(text); } catch { return { ok: resp.ok, raw: text }; }
}

// ── Templates ─────────────────────────────────────────────────────────
async function wpLoadTemplates(selectId) {
    const data = await wpFetchJSON('/api/whitepaper/templates');
    const select = document.getElementById('wp-template-select');
    select.innerHTML = '';
    (data.templates || []).forEach(t => {
        const opt = document.createElement('option');
        opt.value = t.template_id;
        opt.textContent = t.is_seed ? `${t.name} (seed)` : t.name;
        select.appendChild(opt);
    });
    if (selectId && [...select.options].some(o => o.value === selectId)) {
        select.value = selectId;
    }
    if (select.options.length) {
        WP.selectedTemplateId = select.value;
        wpLoadTemplateForm(select.value);
    } else {
        WP.selectedTemplateId = null;
    }
}

async function wpLoadTemplateForm(templateId) {
    const data = await wpFetchJSON(`/api/whitepaper/templates/${encodeURIComponent(templateId)}`);
    if (!data.ok) return;
    const t = data.template;
    document.getElementById('wp-template-id').value = t.template_id;
    document.getElementById('wp-template-name').value = t.name;
    document.getElementById('wp-template-description').value = t.description || '';
    document.getElementById('wp-template-sections').value = JSON.stringify(t.sections || [], null, 2);
    document.getElementById('wp-template-rubric').value = t.rubric || '';
}

document.getElementById('wp-template-select').addEventListener('change', (e) => {
    WP.selectedTemplateId = e.target.value;
    wpLoadTemplateForm(e.target.value);
});

document.getElementById('wp-new-template').addEventListener('click', () => {
    document.getElementById('wp-template-id').value = '';
    document.getElementById('wp-template-name').value = '';
    document.getElementById('wp-template-description').value = '';
    document.getElementById('wp-template-sections').value = '[]';
    document.getElementById('wp-template-rubric').value = '';
});

document.getElementById('wp-template-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    let sections;
    try {
        sections = JSON.parse(document.getElementById('wp-template-sections').value || '[]');
    } catch (err) {
        alert('Sections must be valid JSON');
        return;
    }
    const body = {
        template_id: document.getElementById('wp-template-id').value.trim(),
        name: document.getElementById('wp-template-name').value.trim(),
        description: document.getElementById('wp-template-description').value,
        sections,
        rubric: document.getElementById('wp-template-rubric').value,
    };
    const data = await wpFetchJSON('/api/whitepaper/templates', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
    });
    if (!data.ok) { alert('Save failed: ' + (data.error || 'unknown')); return; }
    await wpLoadTemplates(body.template_id);
});

document.getElementById('wp-delete-template').addEventListener('click', async () => {
    if (!WP.selectedTemplateId) return;
    if (!confirm(`Delete template ${WP.selectedTemplateId}?`)) return;
    await wpFetchJSON(`/api/whitepaper/templates/${encodeURIComponent(WP.selectedTemplateId)}`, { method: 'DELETE' });
    WP.selectedTemplateId = null;
    await wpLoadTemplates();
});

// ── References ─────────────────────────────────────────────────────────
async function wpLoadReferences() {
    const data = await wpFetchJSON('/api/whitepaper/references');
    WP.references = data.references || [];
    const list = document.getElementById('wp-ref-list');
    list.innerHTML = '';
    WP.references.forEach(r => {
        const li = document.createElement('li');
        li.className = 'd-flex align-items-center';
        li.innerHTML = `
            <label class="mb-0 mr-2">
                <input type="checkbox" class="wp-ref-check" value="${r.ref_id}" checked>
                <span class="ml-1">${r.filename}</span>
                <small class="text-muted ml-1">(${r.chunk_count} chunks)</small>
            </label>
            <button type="button" class="btn btn-sm btn-link text-danger ml-auto wp-ref-delete" data-ref="${r.ref_id}">remove</button>
        `;
        list.appendChild(li);
    });
    list.querySelectorAll('.wp-ref-delete').forEach(btn => {
        btn.addEventListener('click', async (e) => {
            const ref = e.currentTarget.dataset.ref;
            await wpFetchJSON(`/api/whitepaper/references/${encodeURIComponent(ref)}`, { method: 'DELETE' });
            await wpLoadReferences();
        });
    });
}

document.getElementById('wp-ref-upload').addEventListener('change', async (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const fd = new FormData();
    fd.append('file', file);
    const data = await wpFetchJSON('/api/whitepaper/references', { method: 'POST', body: fd });
    if (!data.ok) { alert('Upload failed: ' + (data.error || 'unknown')); return; }
    e.target.value = '';
    await wpLoadReferences();
});

// ── Jobs ──────────────────────────────────────────────────────────────
function wpStatusClass(status) {
    return {
        queued: 'badge-secondary',
        planning: 'badge-info',
        writing: 'badge-info',
        rendering: 'badge-info',
        completed: 'badge-success',
        failed: 'badge-danger',
        interrupted: 'badge-warning',
    }[status] || 'badge-secondary';
}

function wpRenderJob(job) {
    const pct = Math.round((job.overall_progress || 0) * 100);
    const sections = (job.progress || []).map(p => `
        <li>
            <span class="badge ${p.status === 'completed' ? 'badge-success' : (p.status === 'running' ? 'badge-info' : 'badge-light')}">
                ${p.status}
            </span>
            ${p.name} ${p.word_count ? `<small class="text-muted">(${p.word_count} words)</small>` : ''}
        </li>
    `).join('');
    const downloads = [];
    if (job.result && job.result.docx_filename) {
        downloads.push(`<a class="btn btn-sm btn-success mr-2" href="/api/whitepaper/download/${encodeURIComponent(job.result.docx_filename)}">.docx</a>`);
    }
    if (job.result && job.result.md_filename) {
        downloads.push(`<a class="btn btn-sm btn-outline-success" href="/api/whitepaper/download/${encodeURIComponent(job.result.md_filename)}">.md</a>`);
    }
    const isTerminal = ['completed', 'failed', 'interrupted'].includes(job.status);
    const deleteBtn = isTerminal
        ? `<button type="button" class="btn btn-sm btn-outline-danger wp-job-delete" data-job="${job.job_id}">Delete</button>`
        : '';
    return `
        <div class="wp-job mb-3 p-2 border rounded" data-job="${job.job_id}">
            <div class="d-flex justify-content-between align-items-center">
                <strong>${job.request.title}</strong>
                <div>
                    <span class="badge ${wpStatusClass(job.status)} mr-2">${job.status}</span>
                    ${deleteBtn}
                </div>
            </div>
            <div class="text-muted small">${job.job_id}</div>
            <div class="progress mt-2"><div class="progress-bar" style="width: ${pct}%">${pct}%</div></div>
            <ul class="mt-2 mb-1 pl-3">${sections}</ul>
            ${job.error ? `<div class="text-danger small">${job.error}</div>` : ''}
            <div class="mt-1">${downloads.join('')}</div>
        </div>
    `;
}

async function wpDeleteJob(jobId) {
    if (!confirm(`Delete job ${jobId}?`)) return;
    const data = await wpFetchJSON(`/api/whitepaper/jobs/${encodeURIComponent(jobId)}`, { method: 'DELETE' });
    if (!data.ok) {
        alert('Delete failed: ' + (data.error || 'unknown'));
        return;
    }
    if (WP.pollers.has(jobId)) {
        clearInterval(WP.pollers.get(jobId));
        WP.pollers.delete(jobId);
    }
    await wpRefreshJobs();
}

async function wpRefreshJobs() {
    const data = await wpFetchJSON('/api/whitepaper/jobs');
    const container = document.getElementById('wp-jobs');
    if (!data.jobs || !data.jobs.length) {
        container.innerHTML = '<p class="text-muted">No jobs yet — queue one from the middle panel.</p>';
        return;
    }
    container.innerHTML = data.jobs.map(wpRenderJob).join('');
    data.jobs.forEach(j => {
        if (['queued', 'planning', 'writing', 'rendering'].includes(j.status)) {
            wpStartPolling(j.job_id);
        }
    });
}

// Event delegation — survives outerHTML re-renders during polling.
document.getElementById('wp-jobs').addEventListener('click', (e) => {
    const btn = e.target.closest('.wp-job-delete');
    if (!btn) return;
    wpDeleteJob(btn.dataset.job);
});

function wpStartPolling(jobId) {
    if (WP.pollers.has(jobId)) return;
    const handle = setInterval(async () => {
        const data = await wpFetchJSON(`/api/whitepaper/jobs/${encodeURIComponent(jobId)}`);
        if (!data.ok) { clearInterval(handle); WP.pollers.delete(jobId); return; }
        const card = document.querySelector(`[data-job="${jobId}"]`);
        if (card) card.outerHTML = wpRenderJob(data.job);
        if (['completed', 'failed', 'interrupted'].includes(data.job.status)) {
            clearInterval(handle); WP.pollers.delete(jobId);
        }
    }, 1500);
    WP.pollers.set(jobId, handle);
}

document.getElementById('wp-job-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    if (!WP.selectedTemplateId) { alert('Select a template first.'); return; }
    const formats = [];
    if (document.getElementById('wp-fmt-docx').checked) formats.push('docx');
    if (document.getElementById('wp-fmt-md').checked) formats.push('md');
    const refIds = [...document.querySelectorAll('.wp-ref-check:checked')].map(el => el.value);
    const body = {
        title: document.getElementById('wp-title').value.trim(),
        subtitle: document.getElementById('wp-subtitle').value.trim() || null,
        template_id: WP.selectedTemplateId,
        brief: document.getElementById('wp-brief').value,
        audience: document.getElementById('wp-audience').value.trim() || 'evaluators',
        formats,
        reference_ids: refIds,
    };
    const data = await wpFetchJSON('/api/whitepaper/jobs', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
    });
    if (!data.ok) { alert('Submit failed: ' + (data.error || 'unknown')); return; }
    await wpRefreshJobs();
    wpStartPolling(data.job.job_id);
});

document.getElementById('wp-refresh-jobs').addEventListener('click', wpRefreshJobs);

// ── Knowledge Base ────────────────────────────────────────────────────
async function wpLoadKB() {
    const data = await wpFetchJSON('/api/whitepaper/knowledge-base');
    const list = document.getElementById('wp-kb-list');
    list.innerHTML = '';
    (data.documents || []).forEach(d => {
        const li = document.createElement('li');
        li.className = 'd-flex align-items-center';
        li.innerHTML = `
            <span>${d.filename}</span>
            <small class="text-muted ml-2">(${d.chunk_count} chunks)</small>
            <button type="button" class="btn btn-sm btn-link text-danger ml-auto wp-kb-delete" data-doc="${d.doc_id}">remove</button>
        `;
        list.appendChild(li);
    });
    list.querySelectorAll('.wp-kb-delete').forEach(btn => {
        btn.addEventListener('click', async (e) => {
            const id = e.currentTarget.dataset.doc;
            await wpFetchJSON(`/api/whitepaper/knowledge-base/${encodeURIComponent(id)}`, { method: 'DELETE' });
            await wpLoadKB();
        });
    });
}

document.getElementById('wp-kb-upload').addEventListener('change', async (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const fd = new FormData();
    fd.append('file', file);
    const data = await wpFetchJSON('/api/whitepaper/knowledge-base', { method: 'POST', body: fd });
    if (!data.ok) { alert('Upload failed: ' + (data.error || 'unknown')); return; }
    e.target.value = '';
    await wpLoadKB();
});

document.getElementById('wp-kb-refresh').addEventListener('click', wpLoadKB);

document.getElementById('wp-kb-search-btn').addEventListener('click', async () => {
    const q = document.getElementById('wp-kb-search-q').value.trim();
    const out = document.getElementById('wp-kb-search-results');
    if (!q) { out.innerHTML = ''; return; }
    out.innerHTML = '<div class="text-muted small">Searching…</div>';
    const data = await wpFetchJSON('/api/whitepaper/knowledge-base/search', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query: q, k: 5 }),
    });
    if (!data.ok) { out.innerHTML = `<div class="text-danger small">Error: ${data.error || 'unknown'}</div>`; return; }
    if (!data.hits.length) { out.innerHTML = '<div class="text-muted small">No matches.</div>'; return; }
    out.innerHTML = data.hits.map(h => `
        <div class="border rounded p-2 mb-2 small">
            <div class="font-weight-bold">${h.filename}</div>
            <div class="text-muted">${h.content.substring(0, 320)}${h.content.length > 320 ? '…' : ''}</div>
        </div>
    `).join('');
});

(async () => {
    await wpLoadTemplates();
    await wpLoadReferences();
    await wpLoadKB();
    await wpRefreshJobs();
})();
</script>
{% endblock %}