{% 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">Orphaned Utterances</h3>
        <a href="/speakers" class="btn" style="padding:0.3rem 0.8rem">← Back to Speakers</a>
    </div>

    {% if orphaned %}
    <div style="margin-bottom:1.5rem; padding:1rem; background:#1e3a5f; border-radius:8px; border-left:3px solid #eab308">
        <h4 style="color:#eab308; margin:0 0 0.5rem 0">Unmatched Speaker Names ({{ orphaned|length }})</h4>
        <p style="color:#94a3b8; font-size:0.85rem; margin:0">
            These utterances have speaker names that don't match any known speaker or alias.
            This happens when a speaker name in the text wasn't properly identified during analysis.
            Assign each to an existing speaker, or create a new speaker from the speaker review page.
        </p>
    </div>
    <table>
        <thead>
            <tr>
                <th>#</th>
                <th>Speaker Name</th>
                <th>Text Preview</th>
                <th>Chapter</th>
                <th>Reassign To</th>
            </tr>
        </thead>
        <tbody>
            {% for utt in orphaned %}
            <tr id="orphan-row-{{ utt.id }}">
                <td style="color:#64748b">{{ utt.utterance_index }}</td>
                <td><span class="badge badge-red">{{ utt.speaker_name }}</span></td>
                <td><small style="color:#cbd5e1">"{{ utt.text[:80] }}{% if utt.text|length > 80 %}...{% endif %}"</small></td>
                <td style="color:#64748b">Ch. {{ utt.chapter_id }}</td>
                <td>
                    <select id="reassign-target-{{ utt.id }}" style="padding:0.3rem; background:#1a1a2e; border:1px solid #333; border-radius:3px; color:#e0e0e0; font-size:0.8rem">
                        {% for sp in speakers %}
                        <option value="{{ sp.primary_name }}">{{ sp.primary_name }}</option>
                        {% endfor %}
                    </select>
                    <button class="btn btn-approve" style="font-size:0.75rem; padding:0.2rem 0.5rem"
                            onclick="reassignOrphan({{ utt.id }})">
                        Assign
                    </button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% endif %}

    {% if unassigned %}
    <div style="margin-bottom:1.5rem; padding:1rem; background:#3b1f3b; border-radius:8px; border-left:3px solid #a855f7">
        <h4 style="color:#a855f7; margin:0 0 0.5rem 0">Unassigned ({{ unassigned|length }})</h4>
        <p style="color:#94a3b8; font-size:0.85rem; margin:0">
            These utterances belonged to speakers that were deleted. Each needs reassignment.
        </p>
    </div>
    <table>
        <thead>
            <tr>
                <th>#</th>
                <th>Text Preview</th>
                <th>Chapter</th>
                <th>Reassign To</th>
            </tr>
        </thead>
        <tbody>
            {% for utt in unassigned %}
            <tr id="orphan-row-{{ utt.id }}">
                <td style="color:#64748b">{{ utt.utterance_index }}</td>
                <td><small style="color:#cbd5e1">"{{ utt.text[:80] }}{% if utt.text|length > 80 %}...{% endif %}"</small></td>
                <td style="color:#64748b">Ch. {{ utt.chapter_id }}</td>
                <td>
                    <select id="reassign-target-{{ utt.id }}" style="padding:0.3rem; background:#1a1a2e; border:1px solid #333; border-radius:3px; color:#e0e0e0; font-size:0.8rem">
                        {% for sp in speakers %}
                        <option value="{{ sp.primary_name }}">{{ sp.primary_name }}</option>
                        {% endfor %}
                    </select>
                    <button class="btn btn-approve" style="font-size:0.75rem; padding:0.2rem 0.5rem"
                            onclick="reassignOrphan({{ utt.id }})">
                        Assign
                    </button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% endif %}

    {% if not orphaned and not unassigned %}
    <div style="padding:2rem; text-align:center; color:#64748b">
        <p style="font-size:1.2rem">✓ All utterances are properly assigned to speakers.</p>
        <a href="/speakers" class="btn btn-approve" style="padding:0.5rem 1.5rem; margin-top:1rem; display:inline-block">Return to Speakers</a>
    </div>
    {% endif %}
</div>

<script>
function reassignOrphan(uttId) {
    var target = document.getElementById('reassign-target-' + uttId).value;
    fetch('/api/orphaned-utterances/' + uttId + '/reassign', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({speaker_name: target})
    }).then(r => r.json()).then(data => {
        if (data.ok) {
            var row = document.getElementById('orphan-row-' + uttId);
            row.style.opacity = '0.3';
            row.querySelector('td:last-child').innerHTML = '<span style="color:#22c55e">✓ Assigned to ' + target + '</span>';
        } else {
            alert('Failed: ' + (data.error || 'unknown'));
        }
    });
}
</script>
{% endblock %}