{% extends "base.html" %}
{% block content %}
<div class="card">
    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem">
        <h3 style="margin:0">Unresolved Name Tokens</h3>
        <div style="display:flex; gap:0.5rem">
            <button class="btn btn-primary" id="nt-scan-btn" onclick="ntScan()">Rescan manuscript</button>
            <a href="/speakers" class="btn" style="padding:0.3rem 0.8rem; background:#475569; color:#e0e0e0">← Speakers</a>
        </div>
    </div>

    <div style="margin-bottom:1.25rem; padding:1rem; background:#1e3a5f; border-radius:8px; border-left:3px solid #38bdf8">
        <h4 style="color:#38bdf8; margin:0 0 0.5rem 0">What is this?</h4>
        <p style="color:#94a3b8; font-size:0.85rem; margin:0 0 0.5rem 0">
            Names the manuscript uses as a speaker that don’t resolve to any speaker profile or alias —
            missed aliases, misspellings, and unnamed role speakers. Every token must be
            <strong style="color:#cbd5e1">assigned</strong>, turned into a <strong style="color:#cbd5e1">new speaker</strong>,
            or <strong style="color:#cbd5e1">dismissed</strong>, so the translation export can prove that every name in
            the text resolves to a speaker.
        </p>
        <p style="color:#64748b; font-size:0.78rem; margin:0">
            Assigning adds the token as an alias and re-points every utterance that used it — audio marks stale
            automatically and regenerates through the normal path.
        </p>
    </div>

    <div id="nt-summary" style="margin-bottom:1rem; color:#94a3b8; font-size:0.85rem"></div>

    <div id="nt-table">
        {% include "_name_tokens_list.html" %}
    </div>
</div>

<script>
function ntTokenize(msg) { return msg || ''; }

function ntRefresh() {
    fetch('/name-tokens/partial', {headers: {'HX-Request': 'true'}})
        .then(r => r.text())
        .then(html => { document.getElementById('nt-table').innerHTML = html; ntSummarize(); });
}

function ntSummarize() {
    var rows = document.querySelectorAll('#nt-table tbody tr').length;
    var el = document.getElementById('nt-summary');
    if (el) el.textContent = rows ? (rows + ' token(s) listed') : 'No tokens listed.';
}

function ntPost(url, payload) {
    return fetch(url, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(payload || {})
    }).then(r => r.json().then(d => ({ok: r.ok, data: d})));
}

function ntFail(res) {
    alert('Failed: ' + ntTokenize(res.data && (res.data.error || res.data.detail)));
    ntRefresh();
}

// Reads the token + row index off the clicked button. Using data-* attributes
// avoids quoting problems with names that contain spaces or quotes.
function ntToken(btn) { return btn.getAttribute('data-token') || ''; }
function ntIdx(btn) { return btn.getAttribute('data-idx') || ''; }

function ntAssign(btn) {
    var token = ntToken(btn);
    var sel = document.getElementById('nt-assign-' + ntIdx(btn));
    var speaker = sel ? sel.value : '';
    if (!speaker) { alert('Pick a speaker to assign "' + token + '" to.'); return; }
    ntPost('/api/name-tokens/' + encodeURIComponent(token) + '/assign', {speaker: speaker})
        .then(function (res) {
            if (!res.ok) { ntFail(res); return; }
            var n = res.data.utterances_changed || 0;
            var msg = 'Added "' + token + '" as an alias of ' + res.data.target_speaker + '.';
            if (n > 0) {
                msg += '\n\n' + n + ' utterance(s) re-pointed to ' + res.data.target_speaker +
                        '. Their audio is now stale and will regenerate.';
            } else {
                msg += '\n\nNo utterance was attributed to "' + token + '" — this name came from a ' +
                        'narration speech tag, not an assigned speaker, so only the alias was recorded. ' +
                        'Future runs will read "' + token + '" as ' + res.data.target_speaker + '.';
            }
            alert(msg);
            ntRefresh();
        }).catch(e => alert('Network error: ' + e));
}

function ntCreate(btn) {
    var token = ntToken(btn);
    if (!confirm('Create a new speaker named "' + token + '"?\n\nIt will be added to speakers.json and appear on the ' +
                 'Speakers tab, where you can generate and approve its voice.')) return;
    ntPost('/api/name-tokens/' + encodeURIComponent(token) + '/create', {})
        .then(function (res) {
            if (!res.ok) { ntFail(res); return; }
            alert('Created speaker "' + res.data.target_speaker + '".\n\nNext: open the Speakers tab to generate its voice reference, then approve it.');
            ntRefresh();
        }).catch(e => alert('Network error: ' + e));
}

function ntDismiss(btn) {
    var token = ntToken(btn);
    var reason = prompt('Dismiss "' + token + '" — why is it not a character?\n(e.g. a place, a sound, a one-off mention)', '');
    if (reason === null) return;
    ntPost('/api/name-tokens/' + encodeURIComponent(token) + '/dismiss', {reason: reason})
        .then(function (res) {
            if (!res.ok) { ntFail(res); return; }
            ntRefresh();
        }).catch(e => alert('Network error: ' + e));
}

function ntScan() {
    var btn = document.getElementById('nt-scan-btn');
    btn.disabled = true;
    btn.textContent = 'Scanning…';
    ntPost('/api/name-tokens/scan', {})
        .then(function (res) {
            btn.disabled = false;
            btn.textContent = 'Rescan manuscript';
            if (!res.ok) { alert('Scan failed: ' + ntTokenize(res.data.error)); return; }
            ntRefresh();
        });
}

document.addEventListener('DOMContentLoaded', ntSummarize);
</script>
{% endblock %}