{% extends "base.html" %}

{% block title %}TMH - 概览{% endblock %}

{% block breadcrumb %}{% endblock %}

{% block content %}
<h2>系统概览</h2>

<!-- KPI Cards -->
<div class="stat-grid">
    <article class="stat-card">
        <h3>{{ stats.total_memories }}
            {% if stats.memory_trend is defined %}
            <span class="stat-trend {% if stats.memory_trend > 0 %}up{% elif stats.memory_trend < 0 %}down{% else %}flat{% endif %}">
                {% if stats.memory_trend > 0 %}&uarr;{% elif stats.memory_trend < 0 %}&darr;{% else %}&rarr;{% endif %}
            </span>
            {% endif %}
        </h3>
        <small>记忆总数</small>
        {% if stats.memory_sparkline is defined %}
        <canvas class="sparkline" data-values="{{ stats.memory_sparkline | tojson }}" width="120" height="40"></canvas>
        {% endif %}
    </article>
    <article class="stat-card">
        <h3>{{ stats.total_users }}
            {% if stats.user_trend is defined %}
            <span class="stat-trend {% if stats.user_trend > 0 %}up{% elif stats.user_trend < 0 %}down{% else %}flat{% endif %}">
                {% if stats.user_trend > 0 %}&uarr;{% elif stats.user_trend < 0 %}&darr;{% else %}&rarr;{% endif %}
            </span>
            {% endif %}
        </h3>
        <small>用户数</small>
    </article>
    <article class="stat-card">
        <h3>{{ stats.total_teams }}</h3>
        <small>团队数</small>
    </article>
    <article class="stat-card">
        <h3>{{ stats.total_projects }}</h3>
        <small>项目数</small>
    </article>
</div>

<!-- Charts: Doughnut + Trend -->
<div class="chart-grid">
    <article class="card">
        <h4>质量分布</h4>
        <canvas id="qualityChart" height="200"></canvas>
    </article>
    <article class="card">
        <h4>活跃趋势（近 14 天）</h4>
        {% if stats.trend_labels %}
        <canvas id="trendChart" height="200"></canvas>
        {% else %}
        <p style="color:var(--tmh-text-muted);text-align:center;padding:var(--tmh-space-2xl) 0">暂无趋势数据</p>
        {% endif %}
    </article>
</div>

<!-- Recent Activity -->
<article class="card">
    <h4>最近活动</h4>
    <div class="tmh-table-wrapper">
    <table>
        <thead>
            <tr><th>记忆</th><th>更新时间</th></tr>
        </thead>
        <tbody>
            {% for m in stats.recent_memories %}
            <tr>
                <td>{{ m.summary[:60] }}</td>
                <td>{{ m.updated_at }}</td>
            </tr>
            {% else %}
            <tr><td colspan="2" style="color:var(--tmh-text-muted)">暂无活动记录</td></tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
</article>

<!-- Quick Actions -->
<h4>快速操作</h4>
<div class="quick-actions">
    <a href="/dashboard/memories" class="quick-action-btn">&#128203; 浏览记忆</a>
    <a href="/dashboard/search" class="quick-action-btn">&#128269; 搜索记忆</a>
    {% if is_admin %}
    <a href="/dashboard/admin/curation" class="quick-action-btn">&#9989; 查看待审核</a>
    {% endif %}
    <a href="/dashboard/consolidation" class="quick-action-btn">&#128279; 合并建议</a>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
// Quality Distribution Doughnut Chart
{% if stats.quality_dist %}
(function() {
    var labels = [];
    var data = [];
    var colors = [
        'rgba(6, 182, 212, 0.8)',
        'rgba(34, 197, 94, 0.8)',
        'rgba(245, 158, 11, 0.8)',
        'rgba(239, 68, 68, 0.8)',
        'rgba(163, 163, 163, 0.8)'
    ];
    {% for q in stats.quality_dist %}
    labels.push('{{ q.quality }}');
    data.push({{ q.count }});
    {% endfor %}
    new Chart(document.getElementById('qualityChart'), {
        type: 'doughnut',
        data: {
            labels: labels,
            datasets: [{
                data: data,
                backgroundColor: colors.slice(0, labels.length),
                borderWidth: 0,
                hoverOffset: 8
            }]
        },
        options: {
            responsive: true,
            cutout: '60%',
            plugins: {
                legend: { position: 'bottom', labels: { padding: 16, font: { size: 12 } } },
                tooltip: {
                    callbacks: {
                        label: function(ctx) {
                            var total = ctx.dataset.data.reduce(function(a, b) { return a + b; }, 0);
                            var pct = total > 0 ? Math.round(ctx.parsed / total * 100) : 0;
                            return ctx.label + ': ' + ctx.parsed + ' (' + pct + '%)';
                        }
                    }
                }
            }
        }
    });
})();
{% endif %}

// Trend Line Chart
{% if stats.trend_labels %}
new Chart(document.getElementById('trendChart'), {
    type: 'line',
    data: {
        labels: {{ stats.trend_labels | tojson }},
        datasets: [{
            label: '新增记忆',
            data: {{ stats.trend_data | tojson }},
            borderColor: 'rgba(59, 130, 246, 1)',
            backgroundColor: 'rgba(59, 130, 246, 0.1)',
            fill: true,
            tension: 0.3,
            pointRadius: 3,
            pointHoverRadius: 6
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: {
            y: { beginAtZero: true, ticks: { stepSize: 1 } },
            x: { grid: { display: false } }
        }
    }
});
{% endif %}

// Sparkline mini charts
document.querySelectorAll('.sparkline').forEach(function(canvas) {
    try {
        var values = JSON.parse(canvas.dataset.values);
        if (!values || !values.length) return;
        new Chart(canvas, {
            type: 'line',
            data: {
                labels: values.map(function(_, i) { return i; }),
                datasets: [{
                    data: values,
                    borderColor: 'rgba(59, 130, 246, 0.6)',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    fill: true,
                    tension: 0.4,
                    pointRadius: 0,
                    borderWidth: 1.5
                }]
            },
            options: {
                responsive: false,
                plugins: { legend: { display: false }, tooltip: { enabled: false } },
                scales: { x: { display: false }, y: { display: false } },
                elements: { line: { borderWidth: 1.5 } }
            }
        });
    } catch(e) {}
});
</script>
{% endblock %}