{% extends "base.html" %}
{% block title %}歌词详情 #{{ gen.id }}{% endblock %}
{% block content %}
<div class="page-header">
    <h1>歌词 #{{ gen.id }}{% if gen.title %} — {{ gen.title }}{% endif %}</h1>
    <a href="{{ url_for('lyrics.index') }}" class="btn btn-sm">返回列表</a>
</div>

<div class="card-form">
    <div class="form-row">
        <div class="form-group">
            <label>状态</label>
            <span class="badge badge-{{ gen.status }}" id="status-badge"
                  data-status-url="{{ url_for('lyrics.status', lyrics_id=gen.id) }}">{{ gen.status }}</span>
            {% if gen.status in ('pending', 'running') %}
            <form method="post" action="{{ url_for('lyrics.reset', lyrics_id=gen.id) }}"
                  onsubmit="return confirm('确认将此任务标记为失败？卡住的记录会释放，但不会重新执行。');"
                  style="display:inline; margin-left:0.8rem;">
                <button type="submit" class="btn btn-sm btn-danger">标记失败</button>
            </form>
            {% endif %}
        </div>
        <div class="form-group">
            <label>模型</label>
            <span>{{ gen.model }}</span>
        </div>
    </div>

    <div class="form-group">
        <label>提示词</label>
        <p>{{ gen.prompt }}</p>
    </div>

    {% if gen.error_message %}
    <div class="form-group">
        <label>错误</label>
        <p style="color: #f5222d;">{{ gen.error_message }}</p>
    </div>
    {% endif %}

    {% if gen.style_description %}
    <div class="form-group">
        <label>风格描述</label>
        <div class="log-box" style="white-space: pre-wrap; max-height: none;">{{ gen.style_description }}</div>
    </div>
    {% endif %}

    {% if gen.final_lyrics %}
    <div class="form-group">
        <label>歌词 (重排后)</label>
        <div class="log-box" id="lyrics-box" style="white-space: pre-wrap; max-height: none; font-size: 14px; line-height: 1.8;">{{ gen.final_lyrics }}</div>
        <button type="button" class="btn btn-sm" onclick="copyLyrics()" style="margin-top: 0.5rem;">复制歌词</button>
    </div>
    {% endif %}

    {% if gen.sections_data %}
    <div class="form-group">
        <label>结构对比</label>
        <div class="form-row">
            <div class="form-group">
                <label style="font-size: 12px; color: #999;">AI 原始结构</label>
                <code>{{ gen.sections_data.original_structure | join(' → ') }}</code>
            </div>
            <div class="form-group">
                <label style="font-size: 12px; color: #999;">目标结构</label>
                <code>{{ gen.sections_data.target_structure | join(' → ') }}</code>
            </div>
        </div>
    </div>
    {% endif %}

    {% if gen.created_at %}
    <div class="form-row">
        <div class="form-group">
            <label>创建时间</label>
            <span>{{ gen.created_at[:19] }}</span>
        </div>
        {% if gen.finished_at %}
        <div class="form-group">
            <label>完成时间</label>
            <span>{{ gen.finished_at[:19] }}</span>
        </div>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/lyrics_detail.js') }}"></script>
{% endblock %}