{% extends "base.html" %}
{% block title %}Suno 任务{% endblock %}
{% block content %}
<div class="page-header">
    <h1>🎼 Suno 任务</h1>
</div>

<div class="task-form" style="max-width:none;">
    {% set ready_accounts = accounts | selectattr('probe_ready') | list %}
    {% if suno_dispatch_mode != 'cloud' and not ready_accounts %}
    <div class="flash flash-info" style="margin-bottom:1rem;">
        还没有可用的 Suno 账号。请先去
        <a href="{{ url_for('accounts.index') }}">账号管理</a>
        添加 Suno 账号 → 打开登录 → 确认已登录（系统会自动抓 personas + API 端点）。
    </div>
    {% endif %}

    <h3>批量提交</h3>
    <div id="suno-form"
         data-batch-create-url="{{ url_for('suno.batch_multi') }}"
         data-personas-url="{{ url_for('suno.personas') }}"
         data-prompts-url="{{ url_for('suno.prompts') }}"
         data-index-url="{{ url_for('suno.index') }}"
         data-dispatch-mode="{{ suno_dispatch_mode }}">

        <div class="form-row">
            {% if suno_dispatch_mode == 'cloud' %}
            <div class="form-group" style="display:none;">
                <label>账号</label>
                <select id="suno-account">
                    <option value="cloud_pool" selected>云端公共账号池</option>
                </select>
            </div>
            <div class="form-group">
                <label>人声性质 (作曲模型)</label>
                <select id="suno-persona">
                    <option value="">加载中...</option>
                </select>
            </div>
            {% else %}
            <div class="form-group">
                <label>账号</label>
                <select id="suno-account">
                    <option value="">-- 选择账号 --</option>
                    {% for a in ready_accounts %}
                    <option value="{{ a.id }}" data-name="{{ a.name }}">{{ a.name }}{% if not a.is_logged_in %} (未登录){% endif %}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label>作曲模型</label>
                <select id="suno-persona">
                    <option value="">-- 请先选账号 --</option>
                </select>
            </div>
            {% endif %}
            <div class="form-group">
                <label>描述词模板</label>
                <select id="suno-prompt-template">
                    <option value="">-- 不使用模板 --</option>
                </select>
            </div>
            <div class="form-group" style="display:flex; align-items:center; padding-top:24px;">
                <label style="display:flex; align-items:center; cursor:pointer; gap:6px; margin:0; user-select:none;">
                    <input type="checkbox" id="suno-random-golden" checked style="width:auto; margin:0;">
                    🎲 随机金句
                </label>
            </div>
        </div>

        <div class="form-group">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
                <label style="margin-bottom:0;">描述词 (gpt_description_prompt)</label>
                <button type="button" class="btn btn-sm" id="suno-random-prompt" style="padding: 2px 8px; font-size: 12px; height: auto;">🎲 随机模板词</button>
            </div>
            <textarea id="suno-description" rows="3" placeholder="例：写一首关于结婚的歌曲，但是新郎不是自己。" style="width:100%;"></textarea>
        </div>

        <div style="display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;">
            <div class="form-group" style="margin-bottom:0;">
                <label>Styles (tags)</label>
                <input type="text" id="suno-tags" placeholder="例：流行抒情, 编曲简单, 人声清晰" style="width:250px;">
            </div>
            <div class="form-group" style="margin-bottom:0;">
                <label>数量 <span style="font-weight:normal;color:#888;font-size:12px;">(每次生成 2 首)</span></label>
                <input type="number" id="suno-count" value="1" min="1" max="10" style="width:70px;">
            </div>
            <div class="form-group" style="margin-bottom:0;">
                <label>&nbsp;</label>
                <button type="button" class="btn btn-primary" id="suno-add-queue">添加到队列</button>
            </div>
        </div>

        <div id="suno-queue-section" style="display:none; margin-top:1rem; padding:1rem; background:#f6f8fa; border-radius:8px; border:1px solid #e1e4e8;">
            <h4 style="margin:0 0 0.5rem 0; font-size:14px; color:#333;">待提交队列</h4>
            <table style="width:100%; font-size:13px;" id="suno-queue-table">
                <thead>
                    <tr><th>#</th><th>描述词</th><th>Styles</th><th>数量</th><th>操作</th></tr>
                </thead>
                <tbody></tbody>
            </table>
            <div style="margin-top:8px; font-size:12px; color:#666;" id="suno-queue-summary"></div>
        </div>

        <button type="button" class="btn btn-primary btn-lg" id="suno-submit-queue" disabled>请先添加到队列</button>
    </div>
</div>

{% if batches %}
<h2 style="margin-top:2rem;">批次记录</h2>
<table>
    <thead>
        <tr><th>ID</th><th>账号</th><th>Persona</th><th>进度</th><th>状态</th><th>创建时间</th></tr>
    </thead>
    <tbody>
        {% for b in batches %}
        <tr>
            <td><a href="{{ url_for('suno.batch_detail', batch_id=b.id) }}">{{ b.id }}</a></td>
            <td>{{ b.account_name or '-' }}</td>
            <td>{{ b.persona_name }}</td>
            <td>{{ b.completed_count }}/{{ b.total_count }}{% if b.failed_count %} <span style="color:#f5222d;">({{ b.failed_count }}失败)</span>{% endif %}</td>
            <td><span class="badge badge-{{ b.status }}">{{ b.status }}</span></td>
            <td>{{ b.created_at[:16] }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endif %}

{% endblock %}

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