{% extends "base.html" %}

{% block title %}超话签到 - {{ account.remark or account.weibo_user_id }}{% endblock %}

{% block extra_css %}
<style>
    .topics-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
    .topics-header h1 { font-size: 24px; font-weight: 700; color: #1e293b; }
    .topic-list { display: flex; flex-direction: column; gap: 0; }
    .topic-item {
        display: flex; align-items: center; gap: 14px; padding: 14px 16px;
        border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: background 0.15s;
    }
    .topic-item:hover { background: #f8fafc; }
    .topic-item:last-child { border-bottom: none; }
    .topic-cb { width: 20px; height: 20px; accent-color: #6366f1; cursor: pointer; }
    .topic-name { font-weight: 500; color: #1e293b; font-size: 15px; }
    .topic-id { font-size: 12px; color: #94a3b8; font-family: monospace; }
    .select-bar {
        display: flex; justify-content: space-between; align-items: center;
        padding: 16px 0; border-bottom: 1px solid #e2e8f0; margin-bottom: 8px;
    }
    .select-bar label { font-weight: 600; color: #475569; font-size: 14px; cursor: pointer; }
    .signin-btn {
        padding: 14px 32px; border-radius: 16px; border: none; font-size: 16px;
        font-weight: 600; cursor: pointer; color: white;
        background: linear-gradient(135deg, #6366f1, #818cf8);
        box-shadow: 0 2px 12px rgba(99,102,241,0.3); transition: all 0.2s;
    }
    .signin-btn:hover { box-shadow: 0 4px 20px rgba(99,102,241,0.4); transform: translateY(-1px); }
    .signin-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
    .result-box {
        margin-top: 20px; padding: 16px; border-radius: 14px; display: none;
        font-size: 14px; font-weight: 500;
    }
    .result-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
    .result-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
</style>
{% endblock %}

{% block content %}
<div style="max-width: 720px; margin: 0 auto;">
    <div class="topics-header">
        <div>
            <h1>🔥 选择签到超话</h1>
            <div style="color:#94a3b8; font-size:14px; margin-top:4px;">
                {{ account.remark or account.weibo_user_id }} · 共 {{ topics|length }} 个超话
            </div>
        </div>
        <a href="{{ url_for('account_detail', account_id=account.id) }}" class="btn btn-secondary">← 返回</a>
    </div>

    <div class="card">
        {% if topics %}
        <div class="select-bar">
            <label><input type="checkbox" id="selectAll" class="topic-cb" checked onchange="toggleAll()"> 全选 (<span id="selectedCount">{{ topics|length }}</span>/{{ topics|length }})</label>
            <button class="signin-btn" id="signinBtn" onclick="doSignin()">🚀 签到选中超话</button>
        </div>
        <div class="topic-list" id="topicList">
            {% for topic in topics %}
            <label class="topic-item">
                <input type="checkbox" class="topic-cb topic-check" data-index="{{ loop.index0 }}" checked onchange="updateCount()">
                <div>
                    <div class="topic-name">{{ topic.title }}</div>
                    <div class="topic-id">{{ topic.containerid }}</div>
                </div>
            </label>
            {% endfor %}
        </div>
        {% else %}
        <p style="color:#94a3b8; text-align:center; padding:40px; font-size:15px;">
            未找到关注的超话，请确认 Cookie 有效且已关注超话
        </p>
        {% endif %}
    </div>

    <div id="resultBox" class="result-box"></div>
</div>

<script>
function toggleAll() {
    const checked = document.getElementById('selectAll').checked;
    document.querySelectorAll('.topic-check').forEach(cb => cb.checked = checked);
    updateCount();
}

function updateCount() {
    const total = document.querySelectorAll('.topic-check').length;
    const checked = document.querySelectorAll('.topic-check:checked').length;
    document.getElementById('selectedCount').textContent = checked;
    document.getElementById('selectAll').checked = (checked === total);
}

async function doSignin() {
    const btn = document.getElementById('signinBtn');
    const resultBox = document.getElementById('resultBox');
    const indices = [];
    document.querySelectorAll('.topic-check:checked').forEach(cb => {
        indices.push(parseInt(cb.dataset.index));
    });

    if (indices.length === 0) {
        resultBox.className = 'result-box result-error';
        resultBox.style.display = 'block';
        resultBox.textContent = '请至少选择一个超话';
        return;
    }

    btn.disabled = true;
    btn.textContent = '⏳ 签到中...';
    resultBox.style.display = 'none';

    try {
        const resp = await fetch('{{ url_for("signin_selected", account_id=account.id) }}', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({topic_indices: indices}),
        });
        const data = await resp.json();

        resultBox.style.display = 'block';
        if (data.success) {
            resultBox.className = 'result-box result-success';
            resultBox.textContent = data.message;
        } else {
            resultBox.className = 'result-box result-error';
            resultBox.textContent = data.message || '签到失败';
        }
    } catch (e) {
        resultBox.className = 'result-box result-error';
        resultBox.style.display = 'block';
        resultBox.textContent = '请求失败: ' + e.message;
    } finally {
        btn.disabled = false;
        btn.textContent = '🚀 签到选中超话';
    }
}
</script>
{% endblock %}