{% extends "admin_base.html" %}

{% block title %}杯赛管理 - 智联青云管理后台{% endblock %}

{% block admin_content %}
<div class="space-y-6">
    <h1 class="text-3xl font-extrabold bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">杯赛管理</h1>

    <div class="futuristic-card-dark overflow-hidden">
        <div class="overflow-x-auto">
            <table class="table-futuristic">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>名称</th>
                        <th>主办方</th>
                        <th>状态</th>
                        <th>开始日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="contests-tbody">
                </tbody>
            </table>
        </div>
        <div id="empty-msg" class="text-center py-12 text-slate-500 hidden">暂无杯赛</div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const statusMap = {
    'upcoming': ['即将开始', 'bg-blue-500/20 text-blue-400 border-blue-500/30'],
    'registering': ['正在报名', 'bg-green-500/20 text-green-400 border-green-500/30'],
    'ongoing': ['进行中', 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30'],
    'ended': ['已结束', 'bg-slate-500/20 text-slate-400 border-slate-500/30'],
    'abolished': ['已废止', 'bg-red-500/20 text-red-400 border-red-500/30']
};

async function loadContests() {
    try {
        const res = await fetch('/api/admin/contests');
        const data = await res.json();
        const tbody = document.getElementById('contests-tbody');
        const empty = document.getElementById('empty-msg');
        if (!data.success || !data.contests.length) {
            empty.classList.remove('hidden');
            return;
        }
        let html = '';
        data.contests.forEach(c => {
            const [statusText, statusClass] = statusMap[c.status] || ['未知', 'bg-slate-500/20 text-slate-400 border-slate-500/30'];
            const abolishBtn = c.status !== 'abolished'
                ? `<button onclick="abolishContest(${c.id}, '${c.name.replace(/'/g, "\\'")}')" class="btn-outline-futuristic px-3 py-1 text-xs border-red-500/30 text-red-400 hover:bg-red-500/20 hover:border-red-500/50">废止</button>`
                : '<span class="text-xs text-red-500">已废止</span>';
            html += `<tr>
                <td>${c.id}</td>
                <td class="font-medium text-slate-200">${c.name}</td>
                <td class="text-slate-400">${c.organizer || '-'}</td>
                <td><span class="badge-futuristic ${statusClass}">${statusText}</span></td>
                <td class="text-slate-400">${c.start_date || '-'}</td>
                <td class="space-x-2">
                    <a href="/contests/${c.id}" class="text-xs text-cyan-400 hover:text-cyan-300 hover:underline">查看</a>
                    ${abolishBtn}
                </td>
            </tr>`;
        });
        tbody.innerHTML = html;
    } catch(e) {
        console.error(e);
    }
}

async function abolishContest(id, name) {
    if (!confirm(`确定要废止杯赛「${name}」吗？\n\n废止后：\n- 该杯赛下所有考试将被关闭\n- 无法再报名或参加考试\n- 数据将保留但杯赛不可恢复`)) return;
    try {
        const res = await fetch(`/api/admin/contests/${id}/abolish`, {method: 'POST'});
        const data = await res.json();
        if (data.success) {
            alert('杯赛已废止');
            loadContests();
        } else {
            alert(data.message || '操作失败');
        }
    } catch(e) {
        alert('网络错误');
    }
}

document.addEventListener('DOMContentLoaded', loadContests);
</script>
{% endblock %}
