{% extends "base.html" %}

{% block title %}管理面板 - 微博超话签到{% endblock %}

{% block extra_css %}
<style>
    .admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
    @media (max-width: 768px) { .admin-grid { grid-template-columns: 1fr; } }
    .admin-title {
        font-size: 28px; font-weight: 700; margin-bottom: 24px;
        background: linear-gradient(135deg, #6366f1, #a855f7);
        -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .stat-row { display: flex; gap: 16px; margin-bottom: 24px; }
    .stat-card {
        flex: 1; background: rgba(255,255,255,0.9); border-radius: 16px;
        padding: 20px; text-align: center; border: 1px solid rgba(0,0,0,0.05);
    }
    .stat-num { font-size: 32px; font-weight: 700; color: #6366f1; }
    .stat-label { font-size: 13px; color: #94a3b8; margin-top: 4px; }
    .user-row, .code-row {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px;
    }
    .user-row:last-child, .code-row:last-child { border-bottom: none; }
    .code-text {
        font-family: 'SF Mono', Monaco, monospace; background: #eef2ff; color: #6366f1;
        padding: 4px 12px; border-radius: 8px; font-size: 14px; font-weight: 600;
        letter-spacing: 1px;
    }
    .code-used { background: #f1f5f9; color: #94a3b8; text-decoration: line-through; }
</style>
{% endblock %}

{% block content %}
<div style="max-width: 960px; margin: 0 auto;">
    <h1 class="admin-title">🛡️ 管理面板</h1>

    <div class="stat-row">
        <div class="stat-card">
            <div class="stat-num">{{ users|length }}</div>
            <div class="stat-label">总用户数</div>
        </div>
        <div class="stat-card">
            <div class="stat-num">{{ users|selectattr('is_active')|list|length }}</div>
            <div class="stat-label">活跃用户</div>
        </div>
        <div class="stat-card">
            <div class="stat-num">{{ invite_codes|rejectattr('is_used')|list|length }}</div>
            <div class="stat-label">可用邀请码</div>
        </div>
    </div>

    <div class="admin-grid">
        <div class="card">
            <div class="card-header" style="display:flex; justify-content:space-between; align-items:center;">
                🎟️ 邀请码管理
                <form method="POST" action="{{ url_for('create_invite_code') }}" style="display:inline;">
                    <button type="submit" class="btn btn-primary" style="padding:6px 16px; font-size:13px;">+ 生成邀请码</button>
                </form>
            </div>
            {% if invite_codes %}
                {% for code in invite_codes %}
                <div class="code-row">
                    <div>
                        <span class="code-text {{ 'code-used' if code.is_used }}">{{ code.code }}</span>
                        {% if code.is_used %}
                            <span style="color:#94a3b8; font-size:12px; margin-left:8px;">已使用</span>
                        {% else %}
                            <span style="color:#10b981; font-size:12px; margin-left:8px;">可用</span>
                        {% endif %}
                    </div>
                    <div>
                        {% if not code.is_used %}
                        <form method="POST" action="{{ url_for('delete_invite_code', code_id=code.id) }}" style="display:inline;" onsubmit="return confirm('确定删除？');">
                            <button type="submit" class="btn btn-danger" style="padding:4px 12px; font-size:12px;">删除</button>
                        </form>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <p style="color:#94a3b8; text-align:center; padding:24px; font-size:14px;">暂无邀请码，点击上方按钮生成</p>
            {% endif %}
        </div>

        <div class="card">
            <div class="card-header">👥 用户管理</div>
            {% for u in users %}
            <div class="user-row">
                <div>
                    <span style="font-weight:600; color:#1e293b;">{{ u.username }}</span>
                    {% if u.is_admin %}<span class="badge badge-info" style="margin-left:6px;">管理员</span>{% endif %}
                    <div style="font-size:12px; color:#94a3b8;">{{ u.email or '-' }}</div>
                </div>
                <div style="display:flex; align-items:center; gap:8px;">
                    {% if u.is_active %}
                        <span class="badge badge-success">正常</span>
                    {% else %}
                        <span class="badge badge-danger">已禁用</span>
                    {% endif %}
                    {% if not u.is_admin %}
                    <form method="POST" action="{{ url_for('toggle_user', user_id=u.id) }}" style="display:inline;">
                        <button type="submit" class="btn {{ 'btn-danger' if u.is_active else 'btn-primary' }}" style="padding:4px 12px; font-size:12px;">
                            {{ '禁用' if u.is_active else '启用' }}
                        </button>
                    </form>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}