{% extends "base.html" %}
{% block title %}{{ {'zh':'总览','en':'Dashboard'}[user.language] }} - {{ 'brand'|t(user.language) }}{% endblock %}
{% block content %}
<div class="section-header">
    <h1>{{ 'dash.welcome'|t(user.language) }}{{ user.username }}</h1>
</div>

{% if profiles %}
<div class="dash-stats">
    <div class="dash-stat-card">
        <div class="dash-stat-icon">📮</div>
        <div class="dash-stat-body">
            <span class="dash-stat-value">{{ total }}</span>
            <span class="dash-stat-label">{{ 'dash.total_cards'|t(user.language) }}</span>
        </div>
    </div>
    <div class="dash-stat-card">
        <div class="dash-stat-icon">📤</div>
        <div class="dash-stat-body">
            <span class="dash-stat-value dash-sent">{{ sent }}</span>
            <span class="dash-stat-label">{{ 'dash.sent'|t(user.language) }}</span>
        </div>
    </div>
    <div class="dash-stat-card">
        <div class="dash-stat-icon">📬</div>
        <div class="dash-stat-body">
            <span class="dash-stat-value dash-delivered">{{ delivered }}</span>
            <span class="dash-stat-label">{{ 'dash.delivered'|t(user.language) }}</span>
        </div>
    </div>
    <div class="dash-stat-card">
        <div class="dash-stat-icon">💌</div>
        <div class="dash-stat-body">
            <span class="dash-stat-value dash-received">{{ received }}</span>
            <span class="dash-stat-label">{{ 'dash.received'|t(user.language) }}</span>
        </div>
    </div>
    <div class="dash-stat-card">
        <div class="dash-stat-icon">🌍</div>
        <div class="dash-stat-body">
            <span class="dash-stat-value">{{ countries }}</span>
            <span class="dash-stat-label">{{ 'dash.countries'|t(user.language) }}</span>
        </div>
    </div>
</div>

{% if total > 0 %}
<div class="dash-progress">
    <div class="progress-bar">
        <div class="progress-seg progress-sent" style="width:{{ sent_pct }}%"></div>
        <div class="progress-seg progress-delivered" style="width:{{ delivered_pct }}%"></div>
        <div class="progress-seg progress-received" style="width:{{ received_pct }}%"></div>
    </div>
    <div class="progress-legend">
        <span><i class="dot dot-sent"></i>{{ 'dash.sent'|t(user.language) }} {{ sent_pct }}%</span>
        <span><i class="dot dot-delivered"></i>{{ 'dash.delivered'|t(user.language) }} {{ delivered_pct }}%</span>
        <span><i class="dot dot-received"></i>{{ 'dash.received'|t(user.language) }} {{ received_pct }}%</span>
    </div>
</div>
{% endif %}

{% if sent_country_stats or received_country_stats %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem">
    {% if sent_country_stats %}
    <div style="background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:1.25rem">
        <h2 style="margin-bottom:.75rem">{{ 'dash.chart_sent'|t(user.language) }}</h2>
        <canvas id="chart-sent"></canvas>
    </div>
    {% endif %}
    {% if received_country_stats %}
    <div style="background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:1.25rem">
        <h2 style="margin-bottom:.75rem">{{ 'dash.chart_received'|t(user.language) }}</h2>
        <canvas id="chart-received"></canvas>
    </div>
    {% endif %}
</div>
<script>
(function() {
    var labels = {{ sent_country_stats|map(attribute=0)|list|tojson }};
    var data = {{ sent_country_stats|map(attribute=1)|list|tojson }};
    if (labels.length) {
        new Chart(document.getElementById('chart-sent'), {
            type: 'bar',
            data: { labels: labels, datasets: [{ data: data, backgroundColor: '#f59e0b', borderRadius: 4 }] },
            options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } } }
        });
    }
    var rlabels = {{ received_country_stats|map(attribute=0)|list|tojson }};
    var rdata = {{ received_country_stats|map(attribute=1)|list|tojson }};
    if (rlabels.length) {
        new Chart(document.getElementById('chart-received'), {
            type: 'bar',
            data: { labels: rlabels, datasets: [{ data: rdata, backgroundColor: '#8b5cf6', borderRadius: 4 }] },
            options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } } }
        });
    }
})();
</script>
{% endif %}

{% if profiles %}
<div class="dash-sections">
    {% for p in profiles %}
    <a href="/profiles/{{ p.id }}/postcards" class="card dashboard-card">
        <h3>{{ p.nickname }}</h3>
        <div class="stats">
            <span class="stat">{{ p.postcards|length }} {{ 'profiles.total'|t(user.language) }}</span>
        </div>
    </a>
    {% endfor %}
</div>
{% endif %}

{% else %}
<div class="empty-state">
    <p>{{ 'dash.welcome'|t(user.language) }}{{ user.username }} 👋</p>
</div>
{% endif %}
{% endblock %}