{% extends 'admin/base.html' %}

{% block title %}访问统计{% endblock %}
{% block page_title %}访问统计{% endblock %}

{% block content %}
<div class="stats-overview">
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon">👁️</div>
            <div class="stat-info">
                <div class="stat-value">{{ stats.total_visits }}</div>
                <div class="stat-label">总访问量</div>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon">📅</div>
            <div class="stat-info">
                <div class="stat-value">{{ stats.today_visits }}</div>
                <div class="stat-label">今日访问</div>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon">🌐</div>
            <div class="stat-info">
                <div class="stat-value">{{ stats.unique_ips }}</div>
                <div class="stat-label">独立访客</div>
            </div>
        </div>
    </div>
</div>

<div class="stats-tabs">
    <a href="{{ url_for('admin.stats') }}" class="tab active">概览</a>
    <a href="{{ url_for('admin.stats_charts') }}" class="tab">趋势图表</a>
    <a href="{{ url_for('admin.stats_logs') }}" class="tab">访问日志</a>
</div>

<div class="stats-sections">
    <!-- 热门IP -->
    <div class="stats-section">
        <h3>🔥 访问最多的IP (Top 10)</h3>
        <table class="data-table">
            <thead>
                <tr>
                    <th>IP地址</th>
                    <th>访问次数</th>
                    <th>首次访问</th>
                    <th>最近访问</th>
                </tr>
            </thead>
            <tbody>
                {% for ip, count, first, last in top_ips %}
                <tr>
                    <td>{{ ip }}</td>
                    <td>{{ count }}</td>
                    <td>{{ first|datetime_format('%Y-%m-%d %H:%M') }}</td>
                    <td>{{ last|datetime_format('%Y-%m-%d %H:%M') }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <!-- 热门文章 -->
    <div class="stats-section">
        <h3>📊 热门文章 (最近7天)</h3>
        <table class="data-table">
            <thead>
                <tr>
                    <th>文章标题</th>
                    <th>浏览次数</th>
                </tr>
            </thead>
            <tbody>
                {% for article, views in top_articles %}
                <tr>
                    <td>
                        <a href="{{ url_for('admin.article_edit', article_id=article.id) }}">
                            {{ article.title }}
                        </a>
                    </td>
                    <td>{{ views }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <!-- 热门路径 -->
    <div class="stats-section">
        <h3>📍 访问最多的路径</h3>
        <table class="data-table">
            <thead>
                <tr>
                    <th>路径</th>
                    <th>访问次数</th>
                </tr>
            </thead>
            <tbody>
                {% for path, count in top_paths %}
                <tr>
                    <td>{{ path }}</td>
                    <td>{{ count }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<style>
.stats-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.tab {
    padding: 10px 20px;
    background: var(--admin-card-bg);
    border-radius: 5px;
    color: var(--admin-text);
    border: 1px solid var(--admin-border);
}

.tab:hover {
    text-decoration: none;
    background: var(--admin-primary);
    color: #fff;
}

.tab.active {
    background: var(--admin-primary);
    color: #fff;
    border-color: var(--admin-primary);
}

.stats-sections {
    display: grid;
    gap: 20px;
}

.stats-section {
    background: var(--admin-card-bg);
    border-radius: 8px;
    padding: 20px;
    box-shadow: var(--admin-shadow);
}

.stats-section h3 {
    margin-bottom: 15px;
    color: var(--admin-text);
}
</style>
{% endblock %}