{% extends "base.html" %}
{% block content %}
<div class="card">
    <h2>Character Names</h2>
    <p style="color:#94a3b8">Edit character names and add phonetic spellings to ensure consistent pronunciation across all speakers and chapters.</p>
    <p style="color:#64748b; font-size:0.85rem; margin-top:0.5rem">Phonetic spellings override the character name in speech synthesis. Use simple phonetics (e.g., "KAYN-dah" for Kainda).</p>
</div>

<table>
    <thead>
        <tr>
            <th>Character</th>
            <th>Aliases</th>
            <th>Phonetic Spelling</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for speaker in speakers %}
        {% if not speaker.is_narrator %}
        <tr id="char-row-{{ loop.index0 }}">
            <td>
                <strong>{{ speaker.primary_name }}</strong>
                {% if speaker.description %}
                <br><small style="color:#64748b">{{ speaker.description[:80] }}{% if speaker.description|length > 80 %}...{% endif %}</small>
                {% endif %}
            </td>
            <td>
                {% for alias in speaker.aliases %}
                <span class="badge badge-blue" style="margin:0.1rem; font-size:0.7rem">{{ alias }}</span>
                {% endfor %}
                {% if not speaker.aliases %}
                <small style="color:#64748b">—</small>
                {% endif %}
            </td>
            <td>
                <div id="phonetic-display-{{ loop.index0 }}" onclick="editPhonetic({{ loop.index0 }})" style="cursor:pointer; padding:0.25rem; border-radius:3px; min-height:1.5rem" title="Click to edit">
                    {% if speaker.primary_name in phonetic %}
                    <code style="color:#f59e0b; font-size:0.85rem">{{ phonetic[speaker.primary_name] }}</code>
                    {% else %}
                    <small style="color:#64748b; font-style:italic">click to set pronunciation</small>
                    {% endif %}
                </div>
                <div id="phonetic-edit-{{ loop.index0 }}" style="display:none">
                    <input type="text" id="phonetic-input-{{ loop.index0 }}" 
                           value="{{ phonetic[speaker.primary_name] if speaker.primary_name in phonetic else '' }}"
                           placeholder='e.g. "KAYN-dah"'
                           onkeydown="if(event.key==='Enter')savePhonetic('{{ speaker.primary_name|e }}', {{ loop.index0 }}); if(event.key==='Escape')cancelPhonetic({{ loop.index0 }})"
                           style="width:100%; padding:0.3rem; background:#1a1a2e; border:1px solid #f59e0b; border-radius:3px; color:#e0e0e0; font-size:0.85rem">
                    <div style="margin-top:0.25rem; display:flex; gap:0.25rem">
                        <button class="btn btn-approve" style="font-size:0.7rem; padding:0.15rem 0.4rem" onclick="savePhonetic('{{ speaker.primary_name|e }}', {{ loop.index0 }})">Save</button>
                        <button class="btn" style="font-size:0.7rem; padding:0.15rem 0.4rem; background:#374151; color:#9ca3af" onclick="cancelPhonetic({{ loop.index0 }})">Cancel</button>
                        {% if speaker.primary_name in phonetic %}
                        <button class="btn btn-reject" style="font-size:0.7rem; padding:0.15rem 0.4rem" onclick="clearPhonetic('{{ speaker.primary_name|e }}', {{ loop.index0 }})">Clear</button>
                        {% endif %}
                    </div>
                </div>
            </td>
            <td>
                <small style="color:#64748b">
                    {% if speaker.vocal_traits %}
                    {% for trait in speaker.vocal_traits[:3] %}
                    <span class="badge badge-green" style="font-size:0.65rem">{{ trait }}</span>
                    {% endfor %}
                    {% endif %}
                </small>
            </td>
        </tr>
        {% endif %}
        {% endfor %}
    </tbody>
</table>

<script>
function editPhonetic(index) {
    document.getElementById('phonetic-display-' + index).style.display = 'none';
    document.getElementById('phonetic-edit-' + index).style.display = 'block';
    document.getElementById('phonetic-input-' + index).focus();
}

function cancelPhonetic(index) {
    document.getElementById('phonetic-display-' + index).style.display = 'block';
    document.getElementById('phonetic-edit-' + index).style.display = 'none';
}

function savePhonetic(name, index) {
    const val = document.getElementById('phonetic-input-' + index).value;
    fetch('/api/phonetic/' + encodeURIComponent(name), {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({phonetic: val})
    }).then(r => r.json()).then(data => {
        if (data.ok) { location.reload(); }
    });
}

function clearPhonetic(name, index) {
    fetch('/api/phonetic/' + encodeURIComponent(name), {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({phonetic: ''})
    }).then(r => r.json()).then(data => {
        if (data.ok) { location.reload(); }
    });
}
</script>
{% endblock %}