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

{% block title %}访问趋势{% endblock %}
{% block page_title %}访问趋势图表{% endblock %}

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

<div class="chart-container">
    <h3>📈 最近30天访问趋势</h3>
    <div class="chart-wrapper">
        <canvas id="visitChart"></canvas>
    </div>
</div>

<div class="chart-stats">
    <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">30天总访问</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>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('visitChart').getContext('2d');
const data = {{ daily_data | tojson | safe }};
const reversedData = data.reverse();

new Chart(ctx, {
    type: 'line',
    data: {
        labels: reversedData.map(d => d.date),
        datasets: [
            {
                label: '总访问量',
                data: reversedData.map(d => d.visits),
                borderColor: '#3498db',
                backgroundColor: 'rgba(52, 152, 219, 0.1)',
                fill: true,
                tension: 0.4
            },
            {
                label: '独立访客',
                data: reversedData.map(d => d.unique_ips),
                borderColor: '#e74c3c',
                backgroundColor: 'rgba(231, 76, 60, 0.1)',
                fill: false,
                tension: 0.4
            },
            {
                label: '文章浏览',
                data: reversedData.map(d => d.article_views),
                borderColor: '#2ecc71',
                backgroundColor: 'rgba(46, 204, 113, 0.1)',
                fill: false,
                tension: 0.4
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top'
            }
        },
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>

<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);
}

.chart-container {
    background: var(--admin-card-bg);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: var(--admin-shadow);
}

.chart-container h3 {
    margin-bottom: 20px;
}

.chart-wrapper {
    position: relative;
    height: 300px;
}

.chart-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
</style>
{% endblock %}