{% extends "base.html" %}
{% block content %}
<div class="card">
    <h2>Cast Discovery</h2>
    <p style="color:#94a3b8">Review and edit the speakers found in the manuscript. Each speaker gets one voice.</p>
</div>
<div id="speakers-list"
     hx-get="/speakers/partial"
     hx-trigger="load"
     hx-swap="innerHTML">
    <p>Loading speakers...</p>
</div>

<div id="voice-analysis-section"
     hx-get="/voice-analysis/partial"
     hx-trigger="load"
     hx-swap="innerHTML">
    <p>Loading voice analysis...</p>
</div>

<div id="regen-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:1100; justify-content:center; align-items:center">
    <div style="background:#16213e; border-radius:8px; padding:1.5rem; max-width:420px; width:90%; border:1px solid #333; text-align:center">
        <div style="font-size:2rem; margin-bottom:0.75rem">🎙</div>
        <h3 style="color:#a78bfa; margin-bottom:0.5rem" id="regen-modal-title">Regenerating voice…</h3>
        <p style="color:#94a3b8; margin-bottom:1rem" id="regen-modal-msg"></p>
        <div id="regen-modal-spinner" style="color:#60a5fa; font-size:1.2rem">⏳</div>
        <div id="regen-modal-error" style="display:none; color:#f87171; margin-top:0.75rem"></div>
        <button id="regen-modal-close" class="btn" style="margin-top:1rem; background:#374151; color:#9ca3af; display:none">Close</button>
    </div>
</div>

<script>
var _regenPoll = null;
var _regenIdx = null;

// Runs after a successful PUT, so speakers.json already holds the new profile.
// The name is re-read from the swapped row because the reviewer may have just
// renamed the speaker, and regenerating under the old name would voice a
// speaker that no longer exists.
// "Save & Re-voice" plumbing.
//
// htmx reports a DIFFERENT detail.elt for each phase of a request on this form:
// the FORM at beforeRequest, the TR at beforeSwap, and the TBODY at afterRequest
// (row swaps get re-parented into a table context). So neither a form-level
// hx-on::after-request nor a body-level lookup on detail.elt works - the first
// never fires, the second finds a TBODY with no attributes on it.
//
// Capture the row index at beforeRequest, where the form is still the event
// target, and match it to the completing request by path.
var _pendingRegen = null;

document.body.addEventListener('htmx:beforeRequest', function (event) {
    var elt = event.detail && event.detail.elt;
    if (!elt || typeof elt.getAttribute !== 'function') {
        return;
    }
    var raw = elt.getAttribute('data-regen-on-save');
    if (raw === null || raw === undefined) {
        return;
    }
    _pendingRegen = {
        idx: parseInt(raw, 10),
        path: (event.detail.path || '').split('?')[0]
    };
});

document.body.addEventListener('htmx:afterRequest', function (event) {
    var pending = _pendingRegen;
    _pendingRegen = null;
    if (!pending || !event.detail || !event.detail.successful) {
        return;
    }
    var done = '';
    if (event.detail.path) {
        done = event.detail.path.split('?')[0];
    } else if (event.detail.pathInfo && event.detail.pathInfo.finalRequestPath) {
        done = event.detail.pathInfo.finalRequestPath.split('?')[0];
    }
    // Never act on a request other than the one we stashed against.
    if (done && pending.path && done !== pending.path) {
        return;
    }
    onSpeakerSaved(pending.idx);
});

function onSpeakerSaved(idx) {
    var row = document.getElementById('speaker-row-' + idx);
    var label = row ? row.querySelector('strong') : null;
    var name = label ? label.textContent.trim() : '';
    if (!name) {
        notify('Saved, but could not read the speaker name back to re-voice it.', true);
        return;
    }
    enqueueVoice(name, idx);
    notify('Saved ' + name + ' \u2014 re-voice queued. You can keep reviewing.');
}

// Without this the button looks dead: the row swaps, but nothing on screen
// says the edit was taken or that work was started.
function notify(message, isError) {
    var el = document.createElement('div');
    el.textContent = message;
    el.style.cssText = 'position:fixed; bottom:1.2rem; right:1.2rem; z-index:1100; ' +
        'background:' + (isError ? '#7f1d1d' : '#065f46') + '; color:#f0fdf4; ' +
        'padding:0.6rem 0.9rem; border-radius:6px; font-size:0.84rem; max-width:24rem; ' +
        'box-shadow:0 4px 12px rgba(0,0,0,0.4)';
    document.body.appendChild(el);
    setTimeout(function () { el.remove(); }, 5000);
}

// Delete a speaker.
//
// A plain hx-delete could not do this job: htmx does not swap a 409, and the
// server refuses to delete a speaker who still has dialogue unless told where
// that dialogue goes. Otherwise the utterances keep a speaker_name that no
// longer resolves - an orphaned utterance.
//
// The whole list is re-rendered on success because deleting renumbers every
// speaker after the removed one; swapping only the row would leave every
// later row pointing at the wrong speaker.
function deleteSpeaker(idx, name) {
    if (!confirm('Delete ' + name + '?')) return;
    requestDelete(idx, '', name);
}

function requestDelete(idx, reassignTo, name) {
    var url = '/api/speakers/' + idx +
        (reassignTo ? '?reassign_to=' + encodeURIComponent(reassignTo) : '');
    fetch(url, {method: 'DELETE', headers: {'HX-Request': 'true'}})
        .then(function (r) {
            return r.json().catch(function () { return {}; })
                .then(function (d) { return {status: r.status, data: d}; });
        })
        .then(function (res) {
            if (res.status === 409) {
                showReassignPrompt(idx, name, res.data);
                return;
            }
            if (res.status !== 200) {
                notify('Delete failed: ' + (res.data.error || res.status), true);
                return;
            }
            htmx.ajax('GET', '/speakers/partial', {
                target: '#speakers-list', swap: 'innerHTML'
            });
            notify('Deleted ' + name + '.');
            notify(msg);
            initSpeakerNames();
        })
        .catch(function (e) {
            notify('Delete failed: ' + e, true);
        });
}

function showReassignPrompt(idx, name, data) {
    var box = document.getElementById('delete-prompt-' + idx);
    if (!box) {
        notify('Cannot delete: ' + (data.error || 'has utterances'), true);
        return;
    }
    var opts = (data.options || []).map(function (n) {
        return '<option value="' + n.replace(/"/g, '&quot;') + '">' + n + '</option>';
    }).join('');
    box.innerHTML =
        '<div style="color:#fecaca; font-size:0.8rem; margin-bottom:0.4rem">' +
        (data.error || 'This speaker still has dialogue.') + '</div>' +
        '<select id="delete-target-' + idx + '" ' +
        'style="width:100%; padding:0.3rem; background:#1a1a2e; color:#e0e0e0; ' +
        'border:1px solid #555; border-radius:3px; margin-bottom:0.4rem">' +
        opts + '</select>' +
        '<div style="display:flex; gap:0.4rem">' +
        '<button class="btn btn-reject" style="font-size:0.75rem" ' +
        'onclick="requestDelete(' + idx + ', document.getElementById(\'delete-target-' +
        idx + '\').value, " + JSON.stringify(name) + ")">Reassign and delete</button>' +
        '<button class="btn" style="font-size:0.75rem" ' +
        'onclick="document.getElementById(\'delete-prompt-' + idx + '\').style.display=\'none\'">' +
        'Cancel</button></div>';
    box.style.display = 'block';
}

function queueVoiceRegenOnSave(idx) {
    var row = document.getElementById('speaker-row-' + idx);
    var label = row ? row.querySelector('strong') : null;
    var name = label ? label.textContent.trim() : '';
    if (!name) {
        return;
    }
    enqueueVoice(name, idx);
}

// Voice regeneration is queue-driven (see enqueueVoice below); the old
// modal-and-poll flow is gone, so nothing blocks the reviewer.
function refreshSpeakerRow(idx) {
    if (idx === null || idx === undefined) {
        htmx.ajax('GET', '/speakers/partial', {
            target: '#speakers-list',
            swap: 'innerHTML'
        });
        return;
    }
    htmx.ajax('GET', '/speakers/partial-row/' + idx, {
        target: '#speaker-row-' + idx,
        swap: 'outerHTML'
    });
}

document.body.addEventListener('htmx:afterSwap', function(e) {
    if (e.detail.target.id === 'speakers-list') {
        initSpeakerNames();
        bustAudioCache(e.detail.target);
    }
    // A swapped speaker row re-reads its queue tag from the snapshot, so queue
    // state survives an HTMX row swap without a resume handshake.
    if (e.detail.target.id && e.detail.target.id.indexOf('speaker-row-') === 0) {
        bustAudioCache(e.detail.target);
        refreshVoiceQueueTags();
    }
});

function bustAudioCache(root) {
    var audios = root.querySelectorAll('audio');
    for (var i = 0; i < audios.length; i++) {
        var srcEl = audios[i].querySelector('source');
        if (srcEl) {
            srcEl.src = srcEl.src.split('?')[0] + '?t=' + Date.now();
        }
    }
}

// --- Speaker Actions ---

function initSpeakerNames() {
    window._speakerNames = [];
    document.querySelectorAll('#speakers-list tr[id^="speaker-row-"]').forEach(function(row) {
        var name = row.querySelector('strong');
        window._speakerNames.push(name ? name.textContent.trim() : '');
    });
}

function toggleEditSpeaker(idx) {
    const el = document.getElementById('edit-speaker-' + idx);
    el.style.display = el.style.display === 'none' ? 'block' : 'none';
    const mergeEl = document.getElementById('merge-speaker-' + idx);
    if (mergeEl) mergeEl.style.display = 'none';
}

function toggleAddForm() {
    const el = document.getElementById('add-speaker-form');
    el.style.display = el.style.display === 'none' ? 'block' : 'none';
}

function toggleMergeSpeaker(idx) {
    const el = document.getElementById('merge-speaker-' + idx);
    el.style.display = el.style.display === 'none' ? 'block' : 'none';
    const editEl = document.getElementById('edit-speaker-' + idx);
    if (editEl) editEl.style.display = 'none';
}

function mergeSpeaker(sourceIdx) {
    const select = document.getElementById('merge-target-' + sourceIdx);
    const targetIdx = select.value;
    if (!targetIdx && targetIdx !== '0') return;
    if (!confirm('Merge this speaker into the selected target? This cannot be undone.')) return;
    htmx.ajax('POST', '/api/speakers/' + sourceIdx + '/merge/' + targetIdx, {
        target: '#speakers-list',
        swap: 'innerHTML'
    });
}

var activeSpeakerAudio = null;
var activeSpeakerBtn = null;

function toggleSpeakerPlay(idx, filename) {
    var audio = document.getElementById('audio-' + idx);
    var btn = document.getElementById('play-btn-' + idx);
    if (!audio || !btn) return;

    if (activeSpeakerAudio && activeSpeakerAudio !== audio) {
        activeSpeakerAudio.pause();
        activeSpeakerAudio.currentTime = 0;
        if (activeSpeakerBtn) activeSpeakerBtn.innerHTML = '▶ Play';
    }

    if (audio.paused) {
        audio.src = '/voice-test-audio/' + filename + '?t=' + Date.now();
        audio.currentTime = 0;
        audio.onended = function () {
            btn.innerHTML = '▶ Play';
            if (activeSpeakerAudio === audio) {
                activeSpeakerAudio = null;
                activeSpeakerBtn = null;
            }
        };
        audio.play().catch(function () {});
        btn.innerHTML = '■ Stop';
        activeSpeakerAudio = audio;
        activeSpeakerBtn = btn;
    } else {
        audio.pause();
        audio.currentTime = 0;
        btn.innerHTML = '▶ Play';
        activeSpeakerAudio = null;
        activeSpeakerBtn = null;
    }
}

function previewSpeakerEffects(idx, name) {
    const sel = document.querySelector('#edit-speaker-' + idx + ' select[name="distortion_effects"]');
    if (!sel) return;
    const effects = Array.from(sel.selectedOptions).map(o => o.value);
    if (effects.length === 0) { alert('Select at least one effect first.'); return; }
    const audio = document.getElementById('preview-audio-' + idx);
    const url = '/api/speakers/' + idx + '/preview-effects?effects=' + encodeURIComponent(effects.join(',')) + '&t=' + Date.now();
    audio.src = url;
    audio.load();
    audio.play().catch(function(e) {
        alert('Preview failed: ' + e.message);
    });
}

function approveSpeakerVoice(name, idx) {
    var effects = [];
    var sel = document.querySelector('#edit-speaker-' + idx + ' select[name="distortion_effects"]');
    if (sel) effects = Array.from(sel.selectedOptions).map(o => o.value);
    fetch('/api/speakers/voice-status', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({speaker_name: name, status: 'approved', distortion_effects: effects})
    }).then(r => r.json()).then(data => {
        if (data.ok) {
            // Swap ONLY this row. The old code targeted #speakers-list with an
            // innerHTML swap, which replaced the entire reviewer list with a
            // single <tr> - that is what read as navigating away to a new page.
            var pos = window._speakerNames ? window._speakerNames.indexOf(name) : -1;
            var rowIdx = (pos >= 0) ? pos : idx;
            htmx.ajax('GET', '/speakers/partial-row/' + rowIdx, {
                target: '#speaker-row-' + rowIdx,
                swap: 'outerHTML'
            });
            markApproved(name);
        } else {
            alert('Failed: ' + (data.error || 'unknown'));
        }
    });
}

// Queue-based voice regeneration. The POST returns as soon as the task is
// captured, so the page is never blocked by a modal and the reviewer can keep
// reviewing other speakers while generation runs.
function regenerateSpeakerVoice(name, idx) {
    enqueueVoice(name, idx === undefined ? null : idx);
}

function generateSingleVoice(name, idx) {
    enqueueVoice(name, idx === undefined ? null : idx);
}

function enqueueVoice(name, idx) {
    var body = {speaker_name: name};
    if (idx !== null && idx !== undefined) body.row_index = idx;

    fetch('/api/voices/queue', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(body)
    }).then(function(r) {
        return r.json().then(function(d) { return {status: r.status, data: d}; });
    }).then(function(res) {
        if (res.data.ok) {
            // Show the tag immediately rather than waiting for the next poll.
            applyQueueState(name, res.data.item.status, '');
            startVoiceQueuePolling();
        } else {
            applyQueueState(name, 'error', res.data.error || 'Could not queue this speaker');
        }
    }).catch(function(e) {
        applyQueueState(name, 'error', 'Request failed: ' + e);
    });
}

function cancelVoiceQueue(name, idx) {
    fetch('/api/voices/queue/' + encodeURIComponent(name) + '/cancel', {method: 'POST'})
        .then(function(r) { return r.json(); })
        .then(function(d) {
            if (d.error) {
                applyQueueState(name, 'error', d.error);
            } else {
                applyQueueState(name, '', '');
            }
        }).catch(function() {});
}

var VOICE_TAG_STYLES = {
    queued:  {label: 'queued',  color: '#a78bfa', bg: '#2e1065'},
    running: {label: 'working', color: '#67e8f9', bg: '#164e63'},
    done:    {label: 'done',    color: '#6ee7b7', bg: '#064e3b'},
    error:   {label: 'failed',  color: '#fca5a5', bg: '#450a0a'}
};

function applyQueueState(name, status, error) {
    var tags = document.querySelectorAll('.voice-queue-tag');
    for (var i = 0; i < tags.length; i++) {
        if (tags[i].getAttribute('data-speaker') !== name) continue;
        var tag = tags[i];
        var idx = tag.id.replace('vq-tag-', '');
        var btn = document.getElementById('vq-btn-' + idx);
        var cancel = document.getElementById('vq-cancel-' + idx);

        if (!status) {
            tag.style.display = 'none';
            if (btn) { btn.style.display = ''; btn.disabled = false; }
            if (cancel) cancel.style.display = 'none';
            continue;
        }

        var style = VOICE_TAG_STYLES[status] || VOICE_TAG_STYLES.queued;
        tag.style.display = 'inline-block';
        tag.style.background = style.bg;
        tag.style.color = style.color;
        tag.textContent = style.label;
        if (error) tag.title = error; else tag.removeAttribute('title');

        var pending = (status === 'queued' || status === 'running');
        if (btn) btn.disabled = pending;
        if (cancel) cancel.style.display = (status === 'queued') ? 'inline-block' : 'none';
    }
}

var _vqPoll = null;

function stopVoiceQueuePolling() {
    if (_vqPoll) {
        clearInterval(_vqPoll);
        _vqPoll = null;
    }
}

function startVoiceQueuePolling() {
    if (_vqPoll) return;
    _vqPoll = setInterval(pollVoiceQueue, 2000);
    pollVoiceQueue();
}

function pollVoiceQueue() {
    fetch('/api/voices/queue').then(function(r) { return r.json(); }).then(function(s) {
        // An unexpected payload must STOP the poll, not skip the check. The
        // bare return that used to be here left the interval running forever,
        // so a page left open hit /api/voices/queue every 2s indefinitely.
        if (!s || !Array.isArray(s.items)) {
            stopVoiceQueuePolling();
            return;
        }
        var anyPending = false;
        s.items.forEach(function(item) {
            applyQueueState(item.speaker_name, item.status, item.error || '');
            if (item.status === 'queued' || item.status === 'running') anyPending = true;
        });
        // Stop polling once nothing is outstanding, and refresh the list so the
        // new audio file / voice badge appears without a manual reload.
        if (!anyPending) {
            stopVoiceQueuePolling();
            refreshSpeakerRow(null);
        }
    }).catch(function() {});
}

// Re-apply tags without polling. Used after an HTMX row swap and on first load,
// so navigating back to the speakers page still shows anything queued earlier.
function refreshVoiceQueueTags() {
    fetch('/api/voices/queue').then(function(r) { return r.json(); }).then(function(s) {
        if (!s || !s.items) return;
        s.items.forEach(function(item) {
            applyQueueState(item.speaker_name, item.status, item.error || '');
        });
        var anyPending = s.items.some(function(i) {
            return i.status === 'queued' || i.status === 'running';
        });
        if (anyPending) startVoiceQueuePolling();
    }).catch(function() {});
}

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

// Approving used to be silent: the speaker simply stopped appearing in the
// needs-check panel, which reads exactly like the speaker being deleted. Say
// what happened, keep the counts honest, and drop the entry from the worklist.
function markApproved(name) {
    var toast = document.createElement('div');
    toast.textContent = '\u2713 ' + name + ' approved \u2014 still in the speaker list, just no longer needing review.';
    toast.style.cssText = 'position:fixed; bottom:1.2rem; right:1.2rem; z-index:1100; ' +
        'background:#065f46; color:#ecfdf5; padding:0.6rem 0.9rem; border-radius:6px; ' +
        'font-size:0.84rem; box-shadow:0 4px 12px rgba(0,0,0,0.4); max-width:22rem';
    document.body.appendChild(toast);
    setTimeout(function () { toast.remove(); }, 5000);

    var entry = document.querySelector('[data-review-item="' + CSS.escape(name) + '"]');
    if (entry) entry.remove();

    var needs = document.querySelector('[data-vq-needs-count]');
    if (needs) {
        var n = Math.max(0, (parseInt(needs.textContent, 10) || 0) - 1);
        needs.textContent = n + ' need checking';
    }
    var clear = document.querySelector('[data-vq-clear-count]');
    if (clear) clear.textContent = ((parseInt(clear.textContent, 10) || 0) + 1) + ' clear';

    var head = document.querySelector('[data-vq-needs-heading]');
    if (head) {
        var left = (parseInt(head.getAttribute('data-left'), 10));
        if (isNaN(left)) left = (parseInt(head.textContent, 10) || 1);
        head.setAttribute('data-left', left - 1);
        head.textContent = '\u26a0 ' + Math.max(0, left - 1) + ' speaker' +
            (left - 1 === 1 ? '' : 's') + ' need' + (left - 1 === 1 ? 's' : '') + ' checking';
    }
}