{% extends "base.html" %}
{% block title %}{{ book.title }} - Book Detail{% endblock %}
{% block content %}
<div class="detail-page">
    <a href="/" class="back-link">&larr; Back to Library</a>
    <div class="book-info">
        {% if book.cover_path %}
        <img class="book-cover" src="/cover/{{ book.id }}" alt="Cover">
        {% endif %}
        <div class="book-info-text">
            <h1 class="editable" id="bookTitle" onclick="editField(this, 'title')">{{ book.title }}</h1>
            <p class="author editable" id="bookAuthor" onclick="editField(this, 'author')">{{ book.author }} &middot; {{ book.format.value | upper }} &middot; {{ book.chapters | length }} chapters</p>
        </div>
    </div>

    <div class="detail-layout">
        <!-- Left: Chapter list -->
        <div class="chapters-list">
            <div class="chapters-header">
                <h2>Chapters</h2>
                <div class="select-actions">
                    <button onclick="toggleAll(true)">All</button>
                    <button onclick="toggleAll(false)">None</button>
                </div>
            </div>
            <ul class="chapter-list" id="chapterList">
                {% for ch in book.chapters %}
                <li class="chapter-item" data-index="{{ ch.index }}">
                    <label>
                        <input type="checkbox" name="chapters" value="{{ ch.index }}" checked>
                        <span class="ch-title">{{ ch.title }}</span>
                        <span class="ch-meta">{{ ch.char_count }} chars &middot; ~{{ "%.0f" | format(ch.estimated_duration_seconds / 60) }} min</span>
                    </label>
                </li>
                {% endfor %}
            </ul>
        </div>

        <!-- Right: Settings + History -->
        <div class="right-panel">
            <div class="settings-panel">
                <h2>TTS Settings</h2>
                <div class="form-group">
                    <label>Provider</label>
                    <select id="provider" onchange="onProviderChange()">
                        <!-- populated by JS -->
                    </select>
                </div>
                <div class="form-group">
                    <label>Language</label>
                    <select id="language" onchange="onLanguageChange()">
                        <option value="zh-CN">Chinese (Mandarin)</option>
                        <option value="en-US">English (US)</option>
                        <option value="en-GB">English (UK)</option>
                        <option value="ja-JP">Japanese</option>
                        <option value="ko-KR">Korean</option>
                        <option value="fr-FR">French</option>
                        <option value="de-DE">German</option>
                        <option value="es-ES">Spanish</option>
                        <option value="ru-RU">Russian</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Voice</label>
                    <select id="voice"></select>
                    <button type="button" class="btn-preview" id="previewBtn" onclick="previewVoice()">&#9654; Preview Voice</button>
                </div>
                <div class="form-group">
                    <label>Speed: <span id="speedLabel">1.0x</span></label>
                    <input type="range" id="speed" min="0.5" max="2.0" step="0.1" value="1.0" oninput="document.getElementById('speedLabel').textContent=this.value+'x'">
                </div>
                <div class="form-group">
                    <label>Output Format</label>
                    <label class="checkbox-label"><input type="checkbox" id="outM4b" checked> M4B (with chapters)</label>
                    <label class="checkbox-label"><input type="checkbox" id="outMp3" checked> MP3 (combined)</label>
                </div>
                <button class="btn btn-primary btn-block" id="convertBtn" onclick="startConvert('{{ book.id }}')">&#9654; Start Conversion</button>
            </div>

            <!-- Inline progress -->
            <div class="progress-inline hidden" id="progressSection">
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill" style="width: 0%"></div>
                </div>
                <div class="progress-info">
                    <span id="progressText">0%</span>
                    <span id="currentChapter"></span>
                    <button class="btn btn-sm btn-danger" id="cancelBtn" onclick="cancelConvert('{{ book.id }}')">Cancel</button>
                </div>
                <p id="errorMsg" class="error-msg hidden"></p>
            </div>

            <!-- Conversion History -->
            {% if book.conversions %}
            <div class="history-panel">
                <h2>Generated Files</h2>
                {% for conv in book.conversions|reverse %}
                <div class="history-item">
                    <div class="history-header">
                        <span class="history-time">{{ conv.timestamp[:19] | replace('T', ' ') }}</span>
                        <button class="btn btn-sm btn-danger" onclick="deleteRecord('{{ book.id }}', '{{ conv.timestamp }}')">Delete</button>
                    </div>
                    <div class="history-files">
                        {% for f in conv.output_files %}
                        {% if f.type != 'chapter' %}
                        <a class="btn btn-sm" href="/download/{{ book.id }}/file/{{ f.filename }}">&#11015; {{ f.filename }}</a>
                        {% endif %}
                        {% endfor %}
                        <details class="chapter-dl-details">
                            <summary>Per-chapter files ({{ conv.output_files | selectattr('type', 'eq', 'chapter') | list | length }})</summary>
                            <div class="chapter-dl-list">
                                {% for f in conv.output_files %}
                                {% if f.type == 'chapter' %}
                                <a href="/download/{{ book.id }}/file/{{ f.filename }}">{{ f.title }}</a>
                                {% endif %}
                                {% endfor %}
                            </div>
                        </details>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/js/app.js?v=3"></script>
<script>
var bookId = '{{ book.id }}';
initTTSUI();

function deleteRecord(bookId, timestamp) {
    if (!confirm('Delete this conversion record and all its files?')) return;
    fetch('/api/convert/' + bookId + '/record/' + encodeURIComponent(timestamp), {method: 'DELETE'})
        .then(function(r) {
            if (!r.ok) throw new Error('Delete failed');
            location.reload();
        })
        .catch(function(e) { alert('Error: ' + e.message); });
}

function editField(el, field) {
    if (el.querySelector('input')) return;
    var current = field === 'author'
        ? el.textContent.split(' · ')[0].trim()
        : el.textContent.trim();
    var input = document.createElement('input');
    input.type = 'text';
    input.value = current;
    input.className = 'edit-input';
    input.onblur = function() { saveField(field, input.value, el, current); };
    input.onkeydown = function(e) {
        if (e.key === 'Enter') { e.preventDefault(); input.blur(); }
        if (e.key === 'Escape') { el.textContent = current; }
    };
    el.textContent = '';
    el.appendChild(input);
    input.focus();
}

function saveField(field, value, el, original) {
    var data = {};
    data[field] = value;
    fetch('/api/books/' + bookId, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data),
    }).then(function(r) {
        if (!r.ok) throw new Error('Save failed');
        return r.json();
    }).then(function(d) {
        location.reload();
    }).catch(function(e) {
        alert('Error: ' + e.message);
        el.textContent = original;
    });
}
</script>
{% endblock %}