{% extends "layouts/dashboard.html" %}

{% block title %}Playground - Nautilus Admin{% endblock %}

{% block dashboard_content %}
<h1>Playground</h1>
<p>Submit queries to the broker and see routing decisions, scope enforcement, and audit trails in real time.</p>

<div class="playground-grid">
    <div class="card">
        <h2>Query</h2>
        <form id="playground-form" onsubmit="submitQuery(event)">
            <div class="form-group">
                <label class="form-label" for="pg-agent">Agent ID</label>
                <select class="form-select" id="pg-agent">
                    <option value="analyst" selected>analyst (cui-basic clearance)</option>
                    <option value="auditor">auditor (cui-specified clearance)</option>
                    <option value="intern">intern (unclassified clearance)</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label" for="pg-intent">Intent (natural language query)</label>
                <textarea class="form-textarea" id="pg-intent" rows="3" placeholder="e.g. Show me recent critical CVEs affecting our Linux servers"></textarea>
            </div>
            <div class="form-group">
                <label class="form-label" for="pg-context">Context (JSON, optional)</label>
                <textarea class="form-textarea" id="pg-context" rows="2" placeholder='e.g. {"purpose": "threat-analysis"}'>{}</textarea>
            </div>
            <button type="submit" class="btn btn-primary" id="pg-submit">Submit Query</button>
        </form>

        <div class="example-queries">
            <h3>Try these examples</h3>
            <button class="example-btn" onclick="loadExample('vuln')">
                <strong>Vulnerability lookup</strong>
                <span>analyst &rarr; vuln_db (PostgreSQL) &mdash; cui-basic / threat-analysis</span>
            </button>
            <button class="example-btn" onclick="loadExample('metrics')">
                <strong>Server performance</strong>
                <span>intern &rarr; server_metrics (InfluxDB) &mdash; unclassified / monitoring</span>
            </button>
            <button class="example-btn" onclick="loadExample('compliance')">
                <strong>Compliance audit</strong>
                <span>auditor &rarr; compliance_docs (S3/MinIO) &mdash; cui-specified / compliance-audit</span>
            </button>
            <button class="example-btn" onclick="loadExample('logs')">
                <strong>Application errors</strong>
                <span>analyst &rarr; app_logs (Elasticsearch) &mdash; cui-basic / incident-response</span>
            </button>
            <button class="example-btn" onclick="loadExample('threat')">
                <strong>Threat intelligence</strong>
                <span>analyst &rarr; threat_graph (Neo4j) &mdash; cui-basic / threat-analysis</span>
            </button>
            <button class="example-btn" onclick="loadExample('denied')">
                <strong>Denied query (clearance too low)</strong>
                <span>intern &rarr; compliance_docs &mdash; unclassified can't access cui-specified</span>
            </button>
        </div>
    </div>

    <div class="card playground-result">
        <h2>Result</h2>
        <div id="pg-result">
            <div class="empty-state">
                <p>Submit a query to see the broker response</p>
                <p class="empty-hint">The response shows routing decisions, scope enforcement, and which sources were queried or denied</p>
            </div>
        </div>
    </div>
</div>

<script>
const EXAMPLES = {
    vuln: {
        agent: 'analyst',
        intent: 'Show me critical CVEs from the last 30 days affecting Linux servers',
        context: '{"purpose": "threat-analysis"}'
    },
    metrics: {
        agent: 'intern',
        intent: 'What is the average CPU utilization across production servers this week?',
        context: '{"purpose": "monitoring"}'
    },
    compliance: {
        agent: 'auditor',
        intent: 'Retrieve the latest FedRAMP compliance assessment report',
        context: '{"purpose": "compliance-audit"}'
    },
    logs: {
        agent: 'analyst',
        intent: 'Show me all ERROR level log entries from the past hour',
        context: '{"purpose": "incident-response"}'
    },
    threat: {
        agent: 'analyst',
        intent: 'Find threat actors associated with ransomware campaigns targeting healthcare',
        context: '{"purpose": "threat-analysis"}'
    },
    denied: {
        agent: 'intern',
        intent: 'Get the FedRAMP compliance report and audit trail',
        context: '{"purpose": "compliance-audit"}'
    }
};

function loadExample(key) {
    const ex = EXAMPLES[key];
    document.getElementById('pg-agent').value = ex.agent;
    document.getElementById('pg-intent').value = ex.intent;
    document.getElementById('pg-context').value = ex.context;
}

async function submitQuery(e) {
    e.preventDefault();
    const btn = document.getElementById('pg-submit');
    const result = document.getElementById('pg-result');
    const agent = document.getElementById('pg-agent').value;
    const intent = document.getElementById('pg-intent').value.trim();
    let context = {};
    try { context = JSON.parse(document.getElementById('pg-context').value || '{}'); } catch(err) {
        result.innerHTML = '<pre style="color:var(--color-danger)">Invalid JSON in context field: ' + err.message + '</pre>';
        return;
    }
    if (!intent) {
        result.innerHTML = '<pre style="color:var(--color-danger)">Intent is required</pre>';
        return;
    }

    btn.disabled = true;
    btn.textContent = 'Querying\u2026';
    result.innerHTML = '<div class="empty-state"><div class="spinner"></div><p style="margin-top:0.75rem">Routing query through broker\u2026</p></div>';

    const start = performance.now();
    try {
        const resp = await fetch('/admin/api/query', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            credentials: 'same-origin',
            body: JSON.stringify({ agent_id: agent, intent: intent, context: context })
        });
        const elapsed = Math.round(performance.now() - start);
        const data = await resp.json();

        if (!resp.ok) {
            result.innerHTML = '<pre style="color:var(--color-danger)">HTTP ' + resp.status + '\n' + escapeHtml(JSON.stringify(data, null, 2)) + '</pre>';
        } else {
            result.innerHTML = renderResult(data, elapsed);
        }
    } catch (err) {
        result.innerHTML = '<pre style="color:var(--color-danger)">Request failed: ' + err.message + '</pre>';
    } finally {
        btn.disabled = false;
        btn.textContent = 'Submit Query';
    }
}

function renderResult(data, elapsed) {
    const queried = data.sources_queried || [];
    const denied = data.sources_denied || [];
    const skipped = data.sources_skipped || [];
    const errored = data.sources_errored || [];

    let html = '<div style="margin-bottom:0.75rem;display:flex;flex-wrap:wrap;gap:0.375rem">';
    html += '<span class="badge badge-info">' + (data.duration_ms || elapsed) + 'ms</span>';
    if (queried.length > 0)
        html += '<span class="badge badge-success">' + queried.length + ' queried</span>';
    if (denied.length > 0)
        html += '<span class="badge badge-danger">' + denied.length + ' denied</span>';
    if (skipped.length > 0)
        html += '<span class="badge">' + skipped.length + ' skipped</span>';
    if (errored.length > 0)
        html += '<span class="badge badge-warning">' + errored.length + ' errored</span>';
    if (queried.length === 0 && denied.length === 0)
        html += '<span class="badge">No sources matched</span>';
    html += '</div>';

    // Summary cards
    html += '<div style="display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-bottom:0.75rem;font-size:0.8125rem">';
    if (queried.length > 0)
        html += '<div style="padding:0.5rem;background:#dcfce7;border-radius:var(--radius)"><strong>Queried:</strong> ' + escapeHtml(queried.join(', ')) + '</div>';
    if (denied.length > 0)
        html += '<div style="padding:0.5rem;background:#fee2e2;border-radius:var(--radius)"><strong>Denied:</strong> ' + escapeHtml(denied.join(', ')) + '</div>';
    html += '</div>';

    if (data.attestation_token)
        html += '<div style="margin-bottom:0.75rem;font-size:0.75rem;color:var(--color-text-muted)"><strong>Attestation:</strong> <code id="attest-token" style="word-break:break-all;display:block;margin-top:0.25rem;user-select:all">' + escapeHtml(data.attestation_token) + '</code><button onclick="navigator.clipboard.writeText(document.getElementById(\'attest-token\').textContent)" style="margin-top:0.25rem;padding:0.2rem 0.5rem;font-size:0.75rem;cursor:pointer;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface)">Copy token</button></div>';

    html += '<pre><code>' + escapeHtml(JSON.stringify(data, null, 2)) + '</code></pre>';
    html += '<p style="margin-top:0.75rem;font-size:0.8125rem;color:var(--color-text-muted)">';
    html += 'Check <a href="/admin/decisions">Decisions</a> and <a href="/admin/audit">Audit Log</a> to see the full trace for this query.';
    html += '</p>';
    return html;
}

function escapeHtml(s) {
    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}
</script>
{% endblock %}