{% extends "blog/base.html" %}

{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<style>
.dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; }
.dash-card { background: var(--bg-card); border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px var(--shadow); text-align: center; transition: background 0.3s; }
.dash-card .label { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 6px; }
.dash-card .value { font-size: 1.8rem; font-weight: 700; color: var(--text-primary); }
.dash-card .value.blue { color: var(--accent); }
.dash-card .value.green { color: #16a34a; }
.dash-card .value.orange { color: #ea580c; }

.chart-box { background: var(--bg-card); border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px var(--shadow); margin-bottom: 24px; transition: background 0.3s; }
.chart-box h3 { font-size: 1rem; margin-bottom: 12px; color: var(--text-primary); }
.chart-box canvas { max-height: 320px; }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dash-panel { background: var(--bg-card); border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px var(--shadow); transition: background 0.3s; }
.dash-panel h3 { font-size: 1rem; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); }
.dash-panel table { width: 100%; font-size: 0.85rem; border-collapse: collapse; }
.dash-panel th { text-align: left; color: var(--text-muted); padding: 6px 0; font-weight: 500; }
.dash-panel td { padding: 6px 0; border-top: 1px solid var(--border-light); color: var(--text-body); }
.dash-panel td.num { text-align: right; font-weight: 600; color: var(--accent); }
.dash-panel code { background: var(--bg-code-inline); color: var(--text-code); padding: 1px 4px; border-radius: 3px; font-size: 0.8rem; }
.rank { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-filter); color: var(--text-muted); text-align: center; line-height: 20px; font-size: 0.7rem; margin-right: 6px; }
.rank.top3 { background: var(--accent); color: #fff; }
.period-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.period-tabs a { padding: 6px 16px; border-radius: 20px; font-size: 0.85rem; background: var(--bg-filter); color: var(--text-secondary); transition: background 0.2s; }
.period-tabs a.active { background: var(--accent); color: #fff; }
@media (max-width: 768px) { .dash-grid { grid-template-columns: 1fr; } }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <h2>统计仪表盘</h2>
</div>

<div class="period-tabs">
    <a href="?days=7" class="{% if days == 7 %}active{% endif %}">7天</a>
    <a href="?days=30" class="{% if days == 30 %}active{% endif %}">30天</a>
    <a href="?days=90" class="{% if days == 90 %}active{% endif %}">90天</a>
</div>

<div class="dash-cards">
    <div class="dash-card">
        <div class="label">今日 PV</div>
        <div class="value blue">{{ today_pv }}</div>
    </div>
    <div class="dash-card">
        <div class="label">今日 UV</div>
        <div class="value green">{{ today_uv }}</div>
    </div>
    <div class="dash-card">
        <div class="label">近{{ days }}天 PV</div>
        <div class="value blue">{{ total_pv }}</div>
    </div>
    <div class="dash-card">
        <div class="label">近{{ days }}天 UV</div>
        <div class="value orange">{{ total_uv }}</div>
    </div>
</div>

<div class="chart-box">
    <h3>访问趋势</h3>
    <canvas id="visitChart"></canvas>
</div>

<div class="dash-grid">
    <div class="dash-panel">
        <h3>热门文章 TOP10</h3>
        <table>
            <tr><th>文章</th><th style="text-align:right">阅读量</th></tr>
            {% for post in top_posts %}
            <tr>
                <td><span class="rank {% if forloop.counter <= 3 %}top3{% endif %}">{{ forloop.counter }}</span>{{ post.title|truncatechars:30 }}</td>
                <td class="num">{{ post.views }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="2" style="text-align:center;color:var(--text-faint)">暂无数据</td></tr>
            {% endfor %}
        </table>
    </div>

    <div class="dash-panel">
        <h3>热门页面 TOP10</h3>
        <table>
            <tr><th>路径</th><th style="text-align:right">访问次数</th></tr>
            {% for page in top_pages %}
            <tr>
                <td><span class="rank {% if forloop.counter <= 3 %}top3{% endif %}">{{ forloop.counter }}</span><code>{{ page.path|truncatechars:40 }}</code></td>
                <td class="num">{{ page.count }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="2" style="text-align:center;color:var(--text-faint)">暂无数据</td></tr>
            {% endfor %}
        </table>
    </div>

    <div class="dash-panel">
        <h3>文件下载 TOP10</h3>
        <table>
            <tr><th>文件</th><th style="text-align:right">下载次数</th></tr>
            {% for f in top_files %}
            <tr>
                <td><span class="rank {% if forloop.counter <= 3 %}top3{% endif %}">{{ forloop.counter }}</span>{{ f.original_name|truncatechars:30 }}</td>
                <td class="num">{{ f.download_count }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="2" style="text-align:center;color:var(--text-faint)">暂无文件</td></tr>
            {% endfor %}
        </table>
    </div>

    <div class="dash-panel">
        <h3>来源 TOP10</h3>
        <table>
            <tr><th>来源</th><th style="text-align:right">次数</th></tr>
            {% for r in top_referrers %}
            <tr>
                <td><span class="rank {% if forloop.counter <= 3 %}top3{% endif %}">{{ forloop.counter }}</span>{{ r.referer|truncatechars:40 }}</td>
                <td class="num">{{ r.count }}</td>
            </tr>
            {% empty %}
            <tr><td colspan="2" style="text-align:center;color:var(--text-faint)">暂无数据</td></tr>
            {% endfor %}
        </table>
    </div>
</div>

<script>
function getChartColors() {
    var s = getComputedStyle(document.documentElement);
    return {
        accent: s.getPropertyValue('--accent').trim() || '#60a5fa',
        accentBg: s.getPropertyValue('--accent-light').trim() || 'rgba(96,165,250,0.15)',
        grid: s.getPropertyValue('--border').trim() || '#334155',
        text: s.getPropertyValue('--text-muted').trim() || '#64748b',
    };
}

var chartInstance = null;

function renderChart() {
    var c = getChartColors();
    if (chartInstance) chartInstance.destroy();
    var ctx = document.getElementById('visitChart').getContext('2d');
    chartInstance = new Chart(ctx, {
        type: 'line',
        data: {
            labels: {{ chart_dates|safe }},
            datasets: [
                {
                    label: 'PV (页面浏览)',
                    data: {{ chart_pv|safe }},
                    borderColor: c.accent,
                    backgroundColor: c.accentBg,
                    fill: true, tension: 0.3,
                },
                {
                    label: 'UV (独立访客)',
                    data: {{ chart_uv|safe }},
                    borderColor: '#16a34a',
                    backgroundColor: 'rgba(22,163,74,0.08)',
                    fill: true, tension: 0.3,
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'top', labels: { color: c.text } },
            },
            scales: {
                y: { beginAtZero: true, ticks: { stepSize: 1, color: c.text }, grid: { color: c.grid } },
                x: { ticks: { color: c.text }, grid: { color: c.grid } }
            }
        }
    });
}

renderChart();

// 监听主题变化重建图表
var observer = new MutationObserver(function() { renderChart(); });
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
</script>
{% endblock %}