{% extends "base.html" %}
{% block title %}控制面板 - AutoMusic{% endblock %}
{% block content %}
<div class="page-header" style="margin-bottom: 24px;">
    <h1>📊 AutoMusic 控制面板</h1>
</div>

<div class="cards">
    <!-- Card 1: Suno Accounts & Clips -->
    <div class="card">
        <i class="ph ph-waveform" style="position: absolute; top: 16px; right: 16px; font-size: 24px; color: #a855f7; opacity: 0.85;"></i>
        <div class="card-number" style="color: #a855f7;">{{ suno_accounts.total or 0 }}</div>
        <div class="card-label">Suno 账号</div>
        <div class="card-sub">已登录: {{ suno_accounts.logged_in or 0 }}</div>
        <div style="font-size: 11px; color: var(--text-muted); margin-top: 8px; border-top: 1px solid var(--border-color); padding-top: 6px; display: flex; justify-content: space-between;">
            <span>已生成歌曲:</span>
            <strong>{{ suno_clips.total or 0 }} 首</strong>
        </div>
    </div>
    <!-- Card 2: Douyin Accounts -->
    <div class="card">
        <i class="ph ph-tiktok-logo" style="position: absolute; top: 16px; right: 16px; font-size: 24px; color: #00f2fe; opacity: 0.85;"></i>
        <div class="card-number" style="color: #00f2fe;">{{ dy_accounts.total or 0 }}</div>
        <div class="card-label">抖音账号</div>
        <div class="card-sub">已登录: {{ dy_accounts.logged_in or 0 }}</div>
        <div style="font-size: 11px; color: var(--text-muted); margin-top: 8px; border-top: 1px solid var(--border-color); padding-top: 6px; display: flex; justify-content: space-between;">
            <span>已同步至汽水:</span>
            <strong>{{ suno_clips.synced or 0 }} 首</strong>
        </div>
    </div>
    <!-- Card 3: Suno Batches -->
    <div class="card">
        <i class="ph ph-music-notes-plus" style="position: absolute; top: 16px; right: 16px; font-size: 24px; color: #3b82f6; opacity: 0.85;"></i>
        <div class="card-number" style="color: #3b82f6;">{{ suno_stats.total or 0 }}</div>
        <div class="card-label">SUNO 创作批次</div>
        <div class="card-sub">
            <span style="color: #3b82f6;">运行中: {{ suno_stats.running or 0 }}</span> |
            <span style="color: #ef4444;">失败: {{ suno_stats.failed or 0 }}</span>
        </div>
        <div style="font-size: 11px; color: var(--text-muted); margin-top: 8px; border-top: 1px solid var(--border-color); padding-top: 6px; display: flex; justify-content: space-between;">
            <span>已完成批次:</span>
            <strong>{{ suno_stats.completed or 0 }} 批</strong>
        </div>
    </div>
    <!-- Card 4: Lyrics Batches -->
    <div class="card">
        <i class="ph ph-scroll" style="position: absolute; top: 16px; right: 16px; font-size: 24px; color: #10b981; opacity: 0.85;"></i>
        <div class="card-number" style="color: #10b981;">{{ lyrics_stats.total or 0 }}</div>
        <div class="card-label">汽水创作批次</div>
        <div class="card-sub">
            <span style="color: #3b82f6;">运行中: {{ lyrics_stats.running or 0 }}</span> |
            <span style="color: #ef4444;">失败: {{ lyrics_stats.failed or 0 }}</span>
        </div>
        <div style="font-size: 11px; color: var(--text-muted); margin-top: 8px; border-top: 1px solid var(--border-color); padding-top: 6px; display: flex; justify-content: space-between;">
            <span>已写歌 / 已导出:</span>
            <strong>{{ lyrics_stats.composed or 0 }} / {{ lyrics_stats.exported or 0 }}</strong>
        </div>
    </div>
    <!-- Card 5: Publish Jobs -->
    <div class="card">
        <i class="ph ph-paper-plane-tilt" style="position: absolute; top: 16px; right: 16px; font-size: 24px; color: #f59e0b; opacity: 0.85;"></i>
        <div class="card-number" style="color: #f59e0b;">{{ publish_stats.total or 0 }}</div>
        <div class="card-label">作品发行任务</div>
        <div class="card-sub">
            <span style="color: #3b82f6;">发行中: {{ publish_stats.running or 0 }}</span> |
            <span style="color: #ef4444;">失败: {{ publish_stats.failed or 0 }}</span>
        </div>
        <div style="font-size: 11px; color: var(--text-muted); margin-top: 8px; border-top: 1px solid var(--border-color); padding-top: 6px; display: flex; justify-content: space-between;">
            <span>发行成功:</span>
            <strong>{{ publish_stats.completed or 0 }} 首</strong>
        </div>
    </div>
</div>

<div class="recent-grids" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 24px; margin-top: 12px;">
    <!-- Column 1: Suno Batches -->
    <div class="card" style="padding: 20px; overflow-x: auto; border-top: 4px solid #3b82f6;">
        <h2 style="margin: 0 0 16px 0; font-size: 15px; display: flex; align-items: center; gap: 8px; color: #1e293b;">
            <i class="ph ph-waveform" style="color: #3b82f6; font-size: 18px;"></i> 最近 SUNO 创作批次
        </h2>
        {% if recent_suno_batches %}
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>角色名 (Persona)</th>
                    <th>状态</th>
                    <th>进度</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for b in recent_suno_batches %}
                <tr>
                    <td><strong>{{ b.id }}</strong></td>
                    <td>{{ b.persona_name or '-' }}</td>
                    <td><span class="badge badge-{{ b.status }}">{{ b.status }}</span></td>
                    <td>{{ b.completed_count }}/{{ b.total_count }}</td>
                    <td><a href="{{ url_for('suno.batch_detail', batch_id=b.id) }}">详情</a></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <p class="empty" style="text-align: center; padding: 20px; color: var(--text-muted);">暂无 SUNO 任务</p>
        {% endif %}
    </div>

    <!-- Column 2: Lyrics Batches -->
    <div class="card" style="padding: 20px; overflow-x: auto; border-top: 4px solid #10b981;">
        <h2 style="margin: 0 0 16px 0; font-size: 15px; display: flex; align-items: center; gap: 8px; color: #1e293b;">
            <i class="ph ph-scroll" style="color: #10b981; font-size: 18px;"></i> 最近汽水创作批次
        </h2>
        {% if recent_lyrics_batches %}
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>作词模板</th>
                    <th>状态</th>
                    <th>进度 (作词/总)</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for l in recent_lyrics_batches %}
                <tr>
                    <td><strong>{{ l.id }}</strong></td>
                    <td style="max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ l.template_file }}">
                        {{ l.template_file.replace('\\', '/').split('/')[-1].removesuffix('.json') }}
                    </td>
                    <td><span class="badge badge-{{ l.status }}">{{ l.status }}</span></td>
                    <td>{{ l.composed_count }}/{{ l.total_count }}</td>
                    <td><a href="{{ url_for('lyrics.batch_detail', batch_id=l.id) }}">详情</a></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <p class="empty" style="text-align: center; padding: 20px; color: var(--text-muted);">暂无汽水创作任务</p>
        {% endif %}
    </div>
</div>

<!-- Column 3: Publish Jobs -->
<div class="card" style="padding: 20px; margin-top: 24px; overflow-x: auto; border-top: 4px solid #f59e0b;">
    <h2 style="margin: 0 0 16px 0; font-size: 15px; display: flex; align-items: center; gap: 8px; color: #1e293b;">
        <i class="ph ph-paper-plane-tilt" style="color: #f59e0b; font-size: 18px;"></i> 最近作品发行任务
    </h2>
    {% if recent_publish_jobs %}
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>发行歌曲标题</th>
                <th>类型</th>
                <th>工作 ID</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for j in recent_publish_jobs %}
            <tr>
                <td><strong>{{ j.id }}</strong></td>
                <td><strong>{{ j.title or '-' }}</strong></td>
                <td>
                    {% if j.is_ai_created %}
                    <span style="font-size:11px; padding:1px 6px; background:#e6f7ff; color:#1890ff; border-radius:3px;">SUNO 作品</span>
                    {% else %}
                    <span style="font-size:11px; padding:1px 6px; background:#f9f0ff; color:#722ed1; border-radius:3px;">汽水作品</span>
                    {% endif %}
                </td>
                <td>{{ j.work_id or '-' }}</td>
                <td><span class="badge badge-{{ j.status }}">{{ j.status }}</span></td>
                <td>{{ j.created_at[:16] }}</td>
                <td><a href="{{ url_for('publish.detail', job_id=j.id) }}">详情</a></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p class="empty" style="text-align: center; padding: 20px; color: var(--text-muted);">暂无发行任务</p>
    {% endif %}
</div>
{% endblock %}
