{% extends "base.html" %}
{% block content %}

<div class="card">
    <h2 style="margin:0">m4b Meta</h2>
    <p style="color:#94a3b8; margin:0.25rem 0 0">
        Publishing metadata for <strong>{{ project_name }}</strong>. Required fields
        are marked <span class="badge badge-red">required</span> and must be filled before
        an .m4b can be produced.
    </p>
    <div style="margin-top:0.75rem">
        {% if ready.ready %}
        <span class="badge badge-green" style="font-size:0.8rem">Ready to publish ✓ ({{ ready.required_filled }}/{{ ready.required_total }} required filled)</span>
        {% else %}
        <span class="badge badge-yellow" style="font-size:0.8rem">Incomplete — {{ ready.required_filled }}/{{ ready.required_total }} required filled</span>
        {% if ready.missing %}
        <div style="margin-top:0.4rem; font-size:0.8rem; color:#fde68a">
            Missing: {% for k in ready.missing %}{% for f in fields %}{% if f.key == k %}<strong>{{ f.label }}</strong>{% if not loop.last %}{% endif %}{% endif %}{% endfor %}{% if not loop.last %}, {% endif %}{% endfor %}
        </div>
        {% endif %}
        {% endif %}
    </div>
</div>

<form id="m4b-form" onsubmit="event.preventDefault(); saveMeta();">
    <div class="card">
        <h3 style="margin-top:0">Required</h3>
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:1rem">
            {% for f in fields if f.required %}
            <div style="grid-column: span 1">
                <label style="color:#a78bfa; font-size:0.85rem; display:block; margin-bottom:0.25rem">
                    {{ f.label }} <span class="badge badge-red">required</span>
                </label>
                {% if f.type == 'textarea' %}
                <textarea name="{{ f.key }}" rows="3" style="width:100%; padding:0.5rem; background:#1a1a2e; border:1px solid #333; border-radius:4px; color:#e0e0e0">{{ meta[f.key] }}</textarea>
                {% elif f.type == 'select' %}
                <select name="{{ f.key }}" style="width:100%; padding:0.5rem; background:#1a1a2e; border:1px solid #333; border-radius:4px; color:#e0e0e0">
                    {% set opts = ['', 'No', 'Yes'] %}
                    {% for o in opts %}
                    <option value="{{ o }}" {% if meta[f.key] == o %}selected{% endif %}>{{ o if o else '— select —' }}</option>
                    {% endfor %}
                </select>
                {% elif f.key == 'synopsis' %}
                <textarea name="{{ f.key }}" rows="4" style="width:100%; padding:0.5rem; background:#1a1a2e; border:1px solid #333; border-radius:4px; color:#e0e0e0">{{ meta[f.key] }}</textarea>
                {% else %}
                <input type="text" name="{{ f.key }}" value="{{ meta[f.key] }}" style="width:100%; padding:0.5rem; background:#1a1a2e; border:1px solid #333; border-radius:4px; color:#e0e0e0">
                {% endif %}
            </div>
            {% endfor %}
        </div>

        <div style="margin-top:1rem">
            <label style="color:#a78bfa; font-size:0.85rem; display:block; margin-bottom:0.25rem">
                Cover image <span class="badge badge-red">required</span>
            </label>
            <div style="display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap">
                {% if meta.cover_path %}
                <img src="/m4b-assets/{{ meta.cover_path.rsplit('/', 1)[-1] }}" alt="cover"
                     style="height:90px; border-radius:6px; border:1px solid #333"
                     onerror="this.style.display='none'">
                <input type="text" name="cover_path" value="{{ meta.cover_path }}" style="flex:1; padding:0.5rem; background:#1a1a2e; border:1px solid #333; border-radius:4px; color:#e0e0e0">
                {% else %}
                <input type="text" name="cover_path" placeholder="path/to/cover.jpg" style="flex:1; padding:0.5rem; background:#1a1a2e; border:1px solid #333; border-radius:4px; color:#e0e0e0">
                {% endif %}
            </div>
            <div style="margin-top:0.5rem; display:flex; gap:0.5rem; align-items:center">
                <input type="file" id="cover-upload" accept="image/*" style="color:#94a3b8; font-size:0.85rem">
                <button type="button" class="btn btn-generate" onclick="uploadCover()" style="font-size:0.8rem">Upload Cover</button>
            </div>
        </div>
    </div>

    <div class="card">
        <h3 style="margin-top:0">Optional</h3>
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:1rem">
            {% for f in fields if not f.required %}
            <div>
                <label style="color:#a78bfa; font-size:0.85rem; display:block; margin-bottom:0.25rem">{{ f.label }}</label>
                <input type="text" name="{{ f.key }}" value="{{ meta[f.key] }}" style="width:100%; padding:0.5rem; background:#1a1a2e; border:1px solid #333; border-radius:4px; color:#e0e0e0">
            </div>
            {% endfor %}
        </div>
    </div>

    <div style="display:flex; gap:0.5rem; align-items:center">
        <button type="submit" class="btn btn-approve" style="font-size:0.95rem">Save Metadata</button>
        <button type="button" class="btn btn-generate" onclick="importEpub()" style="font-size:0.95rem">Import from uploaded EPUB</button>
        <span id="save-status" style="color:#94a3b8; font-size:0.85rem"></span>
    </div>
</form>

<script>
async function saveMeta() {
    var form = document.getElementById('m4b-form');
    var data = {};
    form.querySelectorAll('input[name], textarea[name], select[name]').forEach(function(el) {
        data[el.name] = el.value;
    });
    var resp = await fetch('/api/m4b-meta', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({meta: data})
    });
    var result = await resp.json();
    var status = document.getElementById('save-status');
    if (result.ok) {
        status.textContent = result.ready.ready
            ? 'Saved ✓ — Ready to publish (' + result.ready.required_filled + '/' + result.ready.required_total + ')'
            : 'Saved ✓ — still missing ' + (result.ready.required_total - result.ready.required_filled) + ' required: ' + result.ready.missing.join(', ');
    } else {
        status.textContent = 'Error saving: ' + (result.error || 'unknown');
    }
    setTimeout(function(){ location.reload(); }, 900);
}

async function uploadCover() {
    var fileInput = document.getElementById('cover-upload');
    if (!fileInput.files.length) { alert('Choose a cover image first.'); return; }
    var fd = new FormData();
    fd.append('cover', fileInput.files[0]);
    var resp = await fetch('/api/m4b-meta/cover', { method: 'POST', body: fd });
    var result = await resp.json();
    if (result.ok) {
        location.reload();
    } else {
        alert('Upload failed: ' + (result.error || 'unknown'));
    }
}

async function importEpub() {
    var status = document.getElementById('save-status');
    status.textContent = 'Importing metadata + cover from EPUB…';
    var resp;
    try {
        resp = await fetch('/api/m4b-meta/import-epub', { method: 'POST' });
    } catch (e) {
        status.textContent = 'Import error: ' + e;
        return;
    }
    var result = await resp.json();
    if (result.ok) {
        var names = Object.keys(result.filled || {});
        var msg = names.length
            ? 'Imported ✓ ' + names.join(', ') + (result.cover ? ' + cover' : '')
            : 'Imported ✓ (all fields already filled)';
        status.textContent = msg;
    } else {
        status.textContent = 'Import failed: ' + (result.error || 'unknown');
    }
    setTimeout(function(){ location.reload(); }, 900);
}
</script>

{% endblock %}