{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}

{% block content %}

<div class="dashboard-page">
<div class="dashboard">

    <!-- HEADER -->
    <div class="dashboard-header">
        <div>
            <h1>Dashboard</h1>
            <p class="subtitle">Email campaign performance overview</p>
        </div>
        <a href="/dashboard/upload" class="primary-btn">+ Upload Campaign</a>
    </div>

    <!-- KPI ROW -->
    <div class="kpi-row">
        <div class="kpi-card">
            <span class="kpi-label">Total Emails</span>
            <span class="kpi-value">{{ total or 0 }}</span>
        </div>

        <div class="kpi-card success">
            <span class="kpi-label">Sent</span>
            <span class="kpi-value">{{ sent or 0 }}</span>
        </div>

        <div class="kpi-card danger">
            <span class="kpi-label">Failed</span>
            <span class="kpi-value">{{ bounced or 0 }}</span>
        </div>

        <div class="kpi-card">
            <span class="kpi-label">Success Rate</span>
            <span class="kpi-value">{{ success_rate or 0 }}%</span>
        </div>
    </div>

    <!-- ANALYTICS -->
    <div class="analytics-grid">

        <div class="panel">
            <h3>Email Performance</h3>
            <canvas id="emailChart"></canvas>
        </div>

        <div class="panel">
            <h3>Recent Campaigns</h3>
            {% if campaigns %}
            <ul class="campaign-list">
                {% for c in campaigns[:5] %}
                <li onclick="location.href='/dashboard/campaign/{{ c.id }}'">
                    <span class="campaign-name">{{ c.name }}</span>
                    <span class="campaign-meta">
                        {{ c.sent }}/{{ c.total_emails }} sent
                    </span>
                </li>
                {% endfor %}
            </ul>
            {% else %}
            <p class="muted">No campaigns yet</p>
            {% endif %}
        </div>

    </div>

    <!-- ACTIVITY -->
    <div class="panel">
        <h3>Recent Activity</h3>
        {% if recent_emails %}
        <ul class="activity-list">
            {% for e in recent_emails %}
            <li>
                <span>{{ e.email }}</span>
                <span class="status {{ e.status|lower }}">{{ e.status }}</span>
            </li>
            {% endfor %}
        </ul>
        {% else %}
        <p class="muted">No recent activity</p>
        {% endif %}
    </div>

</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('emailChart');
new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Sent', 'Failed'],
        datasets: [{
            data: [{{ sent or 0 }}, {{ bounced or 0 }}],
            backgroundColor: ['#16a34a', '#dc2626']
        }]
    },
    options: {
        cutout: '65%',
        plugins: {
            legend: { position: 'bottom' }
        }
    }
});
</script>
{% endblock %}