{% 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>
{% if sent_country_stats %}
new Chart(document.getElementById('chart-sent'), {
    type: 'bar',
    data: {
        labels: [{% for code, _ in sent_country_stats %}'{{ code|flag }} {{ code }}',{% endfor %}],
        datasets: [{ data: [{% for _, count in sent_country_stats %}{{ count }},{% endfor %}], backgroundColor: '#3b82f6', borderRadius: 4, maxBarThickness: 40 }]
    },
    options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } }, x: { grid: { display: false } } } }
});
{% endif %}
{% if received_country_stats %}
new Chart(document.getElementById('chart-received'), {
    type: 'bar',
    data: {
        labels: [{% for code, _ in received_country_stats %}'{{ code|flag }} {{ code }}',{% endfor %}],
        datasets: [{ data: [{% for _, count in received_country_stats %}{{ count }},{% endfor %}], backgroundColor: '#8b5cf6', borderRadius: 4, maxBarThickness: 40 }]
    },
    options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } }, x: { grid: { display: false } } } }
});
{% endif %}
</script>
{% endif %}

<div class="dash-sections">
    <div class="dash-section">
        <h2>{{ 'dash.recent'|t(user.language) }}</h2>
        {% if recent %}
        <div class="recent-list">
            {% for pc in recent %}
            <a href="/postcards/{{ pc.id }}" class="recent-item">
                <div class="recent-img">
                    {% if pc.image_front %}
                    <img src="{{ pc.image_front }}" alt="" loading="lazy">
                    {% else %}
                    <span>📷</span>
                    {% endif %}
                </div>
                <div class="recent-info">
                    <strong>{{ pc.card_number }}</strong>
                    <span class="badge badge-{{ pc.status }}">{{ {'sent':'已寄出','delivered':'已送达','received':'已收到'}.get(pc.status) if user.language=='zh' else {'sent':'Sent','delivered':'Delivered','received':'Received'}.get(pc.status) }}</span>
                </div>
                <div class="recent-meta">
                    {% if pc.status in ('sent','delivered') %}
                    <span>{{ pc.country|flag }} {{ pc.country or '' }}</span>
                    <span>→ {{ pc.recipient_name or '-' }}</span>
                    {% else %}
                    <span>← {{ pc.sender_name or '-' }}</span>
                    {% endif %}
                    <span class="recent-time">
                        {% if pc.status == 'sent' and pc.send_time %}
                            {% set delta = (now.date() - pc.send_time.date()).days %}
                            {% if delta == 0 %}{{ 'dash.today'|t(user.language) }}{% elif delta == 1 %}{{ 'dash.yesterday'|t(user.language) }}{% else %}{{ delta }}{{ 'dash.days_ago'|t(user.language) }}{% endif %}
                        {% elif pc.status == 'delivered' and pc.arrival_time %}
                            {% set delta = (now.date() - pc.arrival_time.date()).days %}
                            {% if delta == 0 %}{{ 'dash.today'|t(user.language) }}{% elif delta == 1 %}{{ 'dash.yesterday'|t(user.language) }}{% else %}{{ delta }}{{ 'dash.days_ago'|t(user.language) }}{% endif %}
                        {% elif pc.status == 'received' and pc.receive_time %}
                            {% set delta = (now.date() - pc.receive_time.date()).days %}
                            {% if delta == 0 %}{{ 'dash.today'|t(user.language) }}{% elif delta == 1 %}{{ 'dash.yesterday'|t(user.language) }}{% else %}{{ delta }}{{ 'dash.days_ago'|t(user.language) }}{% endif %}
                        {% endif %}
                    </span>
                </div>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <p class="empty">{{ 'dash.empty'|t(user.language) }}</p>
        {% endif %}
    </div>

    <div class="dash-section">
        <h2>Profile</h2>
        <div class="dash-profiles">
            {% for p in profiles %}
            <a href="/profiles/{{ p.id }}/postcards" class="dash-profile-link">
                <span class="dash-profile-name">{{ p.nickname }}</span>
                <span class="dash-profile-arrow">→</span>
            </a>
            {% endfor %}
            <a href="/profiles" class="dash-profile-link dash-profile-more">
                <span class="dash-profile-name">{{ 'profiles.new_btn'|t(user.language) }}</span>
                <span class="dash-profile-arrow">→</span>
            </a>
        </div>
    </div>
</div>

{% else %}
<div class="empty-state">
    <div class="empty-icon">📮</div>
    <p>{{ 'dash.welcome_title'|t(user.language) }}</p>
    <p class="empty-sub">{{ 'dash.welcome_hint'|t(user.language) }} <a href="/profiles">{{ 'nav.profiles'|t(user.language) }}</a></p>
</div>
{% endif %}
{% endblock %}