{% extends "base.html" %}

{% block title %}管理控制台{% endblock %}
{% block page_title %}{% if is_superadmin %}超级管理员控制台{% else %}管理员控制台{% endif %}{% endblock %}

{% block styles %}
<style>
/* 欢迎区域 */
.welcome-section {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(236, 72, 153, 0.08));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.welcome-info h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-info p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.welcome-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 600;
}

.welcome-badge.superadmin {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: white;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.welcome-badge.admin {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

/* 统计卡片网格 */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s;
}

.stat-card:hover {
    background: var(--glass-bg-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin: 0 auto 1rem;
}

.stat-icon.primary { background: var(--primary); }
.stat-icon.success { background: linear-gradient(135deg, #10b981, #34d399); }
.stat-icon.warning { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.stat-icon.danger { background: linear-gradient(135deg, #ef4444, #f87171); }

.stat-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* 快速操作区域 */
.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}

.section-title i {
    color: var(--primary);
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.action-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 0.875rem 1rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
}

.action-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.action-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
    flex-shrink: 0;
}

.action-icon.categories { background: var(--primary); }
.action-icon.config { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.action-icon.tools { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.action-icon.generate { background: linear-gradient(135deg, #10b981, #34d399); }
.action-icon.permissions { background: linear-gradient(135deg, #ef4444, #f87171); }
.action-icon.data { background: linear-gradient(135deg, #06b6d4, #22d3ee); }

.action-info {
    flex: 1;
    min-width: 0;
}

.action-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.action-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.3;
}

/* 方向概览 */
.categories-section {
    margin-bottom: 1.5rem;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.category-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.category-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.category-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.category-info {
    flex: 1;
    min-width: 0;
}

.category-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
    line-height: 1.3;
}

.category-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.category-status {
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
}

.category-status.active {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.category-status.inactive {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
}

.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-muted);
    background: var(--glass-bg);
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius-lg);
}

.empty-state i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.4;
}

.empty-state p {
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .welcome-section {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding: 1.5rem;
    }
    
    .welcome-info h2 {
        font-size: 1.5rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .actions-grid {
        grid-template-columns: 1fr;
    }
    
    .categories-grid {
        grid-template-columns: 1fr;
    }
}
</style>
{% endblock %}

{% block content %}
<!-- 快速操作 -->
<h5 class="section-title"><i class="fas fa-bolt"></i>快速操作</h5>
<div class="actions-grid">
    <a href="{{ url_for('admin.categories') }}" class="action-card">
        <div class="action-icon categories"><i class="fas fa-layer-group"></i></div>
        <div class="action-info">
            <div class="action-title">方向管理</div>
            <p class="action-desc">配置CTF方向</p>
        </div>
    </a>
    <a href="{{ url_for('wizard.select_category') }}" class="action-card">
        <div class="action-icon generate"><i class="fas fa-magic"></i></div>
        <div class="action-info">
            <div class="action-title">生成题目</div>
            <p class="action-desc">选择方向创建新题目</p>
        </div>
    </a>
    {% if is_superadmin %}
    <a href="{{ url_for('admin.data', tab='users') }}" class="action-card">
        <div class="action-icon data"><i class="fas fa-database"></i></div>
        <div class="action-info">
            <div class="action-title">数据管理</div>
            <p class="action-desc">用户与题目数据</p>
        </div>
    </a>
    <a href="{{ url_for('admin.settings') }}" class="action-card">
        <div class="action-icon config"><i class="fas fa-cog"></i></div>
        <div class="action-info">
            <div class="action-title">系统设置</div>
            <p class="action-desc">维护与诊断</p>
        </div>
    </a>
    {% endif %}
</div>

<!-- 方向概览 -->
<div class="categories-section">
    <h5 class="section-title"><i class="fas fa-folder-open"></i>{% if is_superadmin %}方向概览{% else %}我管理的方向{% endif %}</h5>
    <div class="categories-grid">
        {% if categories %}
            {% for category in categories %}
            <div class="category-card" style="display: flex; align-items: center; gap: 1rem; padding: 1rem;">
                <a href="{{ url_for('admin.category_detail', category_id=category.id) }}" style="flex: 1; display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit;">
                    <div class="category-icon">
                        <i class="{{ (category.icon or 'folder') | icon_class }}"></i>
                    </div>
                    <div class="category-info" style="flex: 1;">
                        <div class="category-name">{{ category.name }}</div>
                        <div class="category-meta">{{ category.id }}</div>
                    </div>
                    <span class="category-status {% if category.enabled %}active{% else %}inactive{% endif %}">
                        {{ '启用' if category.enabled else '禁用' }}
                    </span>
                </a>
                {% if category.enabled %}
                <a href="{{ url_for('wizard.dynamic_wizard', category_id=category.id) }}" class="btn btn-sm btn-success" title="生成题目" style="flex-shrink: 0;">
                    <i class="fas fa-magic"></i>
                </a>
                {% endif %}
            </div>
            {% endfor %}
        {% else %}
            <div class="empty-state" style="grid-column: 1 / -1;">
                <i class="fas fa-folder-open d-block"></i>
                <p class="mb-0">{% if is_superadmin %}暂无方向配置{% else %}暂无授权方向{% endif %}</p>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}