{% extends "base.html" %}
{% block title %}Suno 批次 #{{ batch.id }}{% endblock %}
{% block content %}
<div class="page-header">
    <h1>🎼 Suno 批次 #{{ batch.id }}</h1>
    <div style="display:flex; gap:10px;">
        <form action="{{ url_for('suno.retry_batch', batch_id=batch.id) }}" method="post" style="display:inline-block;"
              onsubmit="return confirm('将重试本批次中所有已失败或待提交的 Suno 任务。已成功的任务不会重复提交。确认继续？');">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="btn btn-sm btn-primary" style="background:#eb2f96; color:#fff; border-color:#eb2f96;">重试失败/挂起任务</button>
        </form>
        <a href="{{ url_for('suno.index') }}" class="btn btn-sm">← 返回</a>
    </div>
</div>

<div class="task-form" style="max-width:none;"
     id="suno-detail"
     data-batch-id="{{ batch.id }}"
     data-status-url="{{ url_for('suno.batch_status', batch_id=batch.id) }}"
     data-resume-url="{{ url_for('suno.resume_batch', batch_id=batch.id) }}"
     data-rename-url-tpl="{{ url_for('suno.rename_clip', clip_id='__CLIP__') }}"
     data-publish-url-tpl="{{ url_for('suno.set_clip_publish', clip_id='__CLIP__') }}">
    <div style="display:flex; gap:24px; flex-wrap:wrap; margin-bottom:1rem;">
        <div><strong>账号：</strong> {{ batch.account_name }}</div>
        <div><strong>Persona：</strong> {{ batch.persona_name }}</div>
        <div><strong>进度：</strong> <span id="d-progress">{{ batch.completed_count }}/{{ batch.total_count }}</span></div>
        <div><strong>失败：</strong> <span id="d-failed">{{ batch.failed_count }}</span></div>
        <div><strong>状态：</strong> <span class="badge badge-{{ batch.status }}" id="d-status">{{ batch.status }}</span></div>
        <div><strong>创建：</strong> {{ batch.created_at[:16] }}</div>
    </div>

    <div id="d-resume-panel" style="display:{% if batch.status == 'paused_verification' %}block{% else %}none{% endif %}; padding:1rem; background:#fffbe6; border:1px solid #ffe58f; border-radius:6px; margin-bottom:1rem;">
        <div style="color:#d48806; font-weight:600; margin-bottom:0.5rem;">⚠️ Suno 触发人机验证</div>
        <div style="font-size:13px; margin-bottom:0.8rem;">
            请在浏览器打开 <a href="https://suno.com/create" target="_blank">https://suno.com/create</a> 手动通过验证,然后回来点下面的按钮继续提交剩余任务。
        </div>
        <button type="button" id="d-resume-btn" class="btn btn-primary">已验证,继续提交</button>
        <span id="d-resume-msg" style="margin-left:1rem; color:#888; font-size:12px;"></span>
    </div>

    {% if batch.error_message %}
    <div class="flash flash-error" style="margin-bottom:1rem;">{{ batch.error_message }}</div>
    {% endif %}

    {% for j in jobs %}
    <div class="job-block" style="margin-bottom:1.5rem; padding:1rem; background:#fafbfc; border:1px solid #e1e4e8; border-radius:8px;">
        <div style="font-size:13px; color:#555; margin-bottom:0.5rem;">
            <strong>#{{ loop.index }}</strong>
            描述词：{{ j.description }}
            {% if j.tags %}　Styles：{{ j.tags }}{% endif %}
            　<span class="badge badge-{{ j.submit_status }}">{{ j.submit_status }}</span>
            {% if j.error_message %}<span style="color:#f5222d;">　错误：{{ j.error_message }}</span>{% endif %}
        </div>

        {% if j.clips %}
        <div style="display:flex; gap:12px; flex-wrap:wrap;">
            {% for c in j.clips %}
            <div class="clip-card" data-clip-id="{{ c.clip_id }}"
                 style="flex:1 1 360px; max-width:520px; border:1px solid #ddd; border-radius:8px; background:#fff; padding:10px; display:flex; gap:10px;">
                <div class="clip-cover" style="flex:0 0 100px;">
                    {% if c.image_url %}
                    <img class="c-cover" src="{{ c.image_url }}" alt=""
                         style="width:100px; height:100px; object-fit:cover; border-radius:6px; background:#eee;">
                    {% else %}
                    <div class="c-cover" style="width:100px; height:100px; background:#eee; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#bbb; font-size:11px;">无封面</div>
                    {% endif %}
                </div>
                <div style="flex:1; min-width:0;">
                    <div style="display:flex; gap:6px; align-items:center; margin-bottom:6px;">
                        <input type="text" class="c-rename-input"
                               value="{{ c.title or c.suno_title or '' }}"
                               placeholder="名称" style="flex:1; min-width:0; font-size:13px;">
                        <button type="button" class="btn btn-sm c-rename-btn">改名</button>
                    </div>
                    <div style="margin-bottom:6px;">
                        <span class="badge c-status badge-{{ c.status }}">{{ c.status or '-' }}</span>
                        {% if c.duration %}<span style="font-size:11px; color:#888;">　{{ '%.1f'|format(c.duration) }}s</span>{% endif %}
                        <label style="float:right; font-size:12px; cursor:pointer;">
                            <input type="checkbox" class="c-publish-chk"{% if c.is_published %} checked{% endif %}>
                            发行
                        </label>
                    </div>
                    <div class="c-audio-wrap" style="margin-bottom:6px;">
                        {% if c.audio_url %}
                        <audio controls preload="none" src="{{ c.audio_url }}" class="c-audio" style="width:100%; height:30px;"></audio>
                        {% else %}
                        <span style="color:#999; font-size:12px;">暂无音频</span>
                        {% endif %}
                    </div>
                    <details>
                        <summary style="cursor:pointer; font-size:12px; color:#555;">
                            歌词{% if c.lyrics %}（{{ c.lyrics|length }} 字）{% else %}（暂无）{% endif %}
                        </summary>
                        <pre class="c-lyrics" style="white-space:pre-wrap; font-size:12px; max-height:300px; overflow:auto; background:#f6f8fa; padding:8px; border-radius:6px; margin:6px 0 0 0;">{{ c.lyrics or '' }}</pre>
                    </details>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div style="color:#999; font-size:13px;">尚未提交</div>
        {% endif %}
    </div>
    {% endfor %}
</div>

{% endblock %}

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