{% extends 'base.html.twig' %}

{% block title %}Dashboard – Rise Mailer{% endblock %}

{% block stylesheets %}
<style>
    /* KPI */
    .kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-bottom:1.5rem}
    @media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(3,1fr)}}
    @media(max-width:600px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:400px){.kpi-grid{grid-template-columns:1fr}}
    .kpi-card{background:rgba(255,255,255,.97);border-radius:1.1rem;padding:1.25rem 1.1rem;
              box-shadow:0 4px 20px rgba(0,0,0,.07);display:flex;align-items:center;gap:.9rem;
              transition:transform .22s,box-shadow .22s}
    .kpi-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.12)}
    .kpi-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;
              justify-content:center;font-size:1.35rem;flex-shrink:0}
    .kpi-val{font-size:1.65rem;font-weight:700;color:#1e293b;line-height:1}
    .kpi-lbl{font-size:.72rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;margin-top:.2rem}

    /* Cards */
    .dash-card{background:rgba(255,255,255,.97);border-radius:1.1rem;
               box-shadow:0 4px 20px rgba(0,0,0,.07);overflow:hidden}
    .dash-card-header{padding:1.1rem 1.4rem;border-bottom:1px solid #f1f5f9;
                      display:flex;align-items:center;justify-content:space-between}
    .dash-card-header h3{font-size:.95rem;font-weight:700;color:#1e293b;margin:0;
                         display:flex;align-items:center;gap:.45rem}
    .dash-card-header h3 i{color:var(--primary)}
    .dash-card-body{padding:1.25rem 1.4rem}

    /* Chart containers */
    .chart-wrap{position:relative;width:100%}
    .chart-wrap canvas{max-width:100%}

    /* Table */
    .dt{width:100%;border-collapse:collapse}
    .dt thead tr{background:linear-gradient(135deg,#7c3aed,#ec4899)}
    .dt thead th{padding:.65rem 1rem;font-size:.72rem;font-weight:700;color:#fff;
                 text-transform:uppercase;letter-spacing:.05em;border:none;white-space:nowrap}
    .dt tbody tr{border-bottom:1px solid #f1f5f9;transition:background .15s}
    .dt tbody tr:last-child{border-bottom:none}
    .dt tbody tr:hover{background:#fafafa}
    .dt tbody td{padding:.75rem 1rem;font-size:.85rem;color:#334155;vertical-align:middle}
    .prog-wrap{background:#f1f5f9;border-radius:999px;height:5px;width:80px;overflow:hidden;display:inline-block}
    .prog-fill{height:100%;border-radius:999px;background:linear-gradient(135deg,#7c3aed,#ec4899)}
    .bs{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .65rem;
        border-radius:999px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
    .bs-ok{background:#dcfce7;color:#16a34a}
    .bs-send{background:#fef9c3;color:#ca8a04}
    .bs-fail{background:#fee2e2;color:#dc2626}
    .bs-draft{background:#f1f5f9;color:#64748b}

    /* Quick actions */
    .qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;padding:1.1rem 1.4rem}
    .qa-btn{display:flex;align-items:center;gap:.65rem;padding:.85rem;border-radius:.85rem;
            text-decoration:none;font-weight:600;font-size:.82rem;
            transition:transform .18s,box-shadow .18s;border:1.5px solid transparent}
    .qa-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.1)}
    .qa-ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;
            justify-content:center;font-size:1rem;flex-shrink:0}
    .qa-purple{background:#f5f3ff;border-color:#ddd6fe;color:#7c3aed}.qa-purple .qa-ico{background:#ede9fe}
    .qa-pink{background:#fdf2f8;border-color:#fbcfe8;color:#db2777}.qa-pink .qa-ico{background:#fce7f3}
    .qa-blue{background:#eff6ff;border-color:#bfdbfe;color:#2563eb}.qa-blue .qa-ico{background:#dbeafe}
    .qa-green{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a}.qa-green .qa-ico{background:#dcfce7}

    /* Empty */
    .empty{text-align:center;padding:2.5rem 1rem}
    .empty i{font-size:2.5rem;color:#cbd5e1;display:block;margin-bottom:.75rem}
    .empty p{color:#94a3b8;font-size:.875rem;margin-bottom:1rem}

    /* Section gap */
    .dash-row{display:grid;gap:1.25rem;margin-bottom:1.25rem}
    .dash-row-2{grid-template-columns:2fr 1fr}
    .dash-row-3{grid-template-columns:3fr 1fr}
    @media(max-width:992px){.dash-row-2,.dash-row-3{grid-template-columns:1fr}}
    @media(max-width:768px){
        .dash-head h1{font-size:1.2rem}
        .dt thead th,.dt tbody td{padding:.5rem .6rem;font-size:.78rem}
    }

    /* Header */
    .dash-head{margin-bottom:1.5rem}
    .dash-head h1{font-size:1.5rem;font-weight:700;color:#fff;margin:0 0 .2rem}
    .dash-head p{color:rgba(255,255,255,.7);font-size:.875rem;margin:0}

    /* Legend dot */
    .ldot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px}
</style>
{% endblock %}

{% block body %}

{# ── Header ── #}
<div class="dash-head animate-fade-in">
    {% set hour = "now"|date("H") %}
    <h1>{{ hour < 12 ? "Good morning" : (hour < 18 ? "Good afternoon" : "Good evening") }}, {{ app.user.email|split('@')|first }} 👋</h1>
    <p>Here's your email marketing overview for today.</p>
</div>

{# ── Deliverability Score ── #}
<div class="animate-fade-in" style="background:{{ score.bg }};border:1.5px solid {{ score.color }}22;border-radius:1.1rem;padding:1.1rem 1.4rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap">
    <div style="width:72px;height:72px;border-radius:50%;background:conic-gradient({{ score.color }} {{ score.score * 3.6 }}deg,#e2e8f0 0deg);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 16px {{ score.color }}33">
        <div style="width:52px;height:52px;border-radius:50%;background:{{ score.bg }};display:flex;align-items:center;justify-content:center">
            <span style="font-size:1.15rem;font-weight:800;color:{{ score.color }}">{{ score.score }}</span>
        </div>
    </div>
    <div style="flex:1;min-width:200px">
        <div style="display:flex;align-items:center;gap:.55rem;margin-bottom:.3rem">
            <i class="bi {{ score.icon }}" style="color:{{ score.color }};font-size:1.1rem"></i>
            <span style="font-weight:800;font-size:1rem;color:#1e293b">Deliverability Score: <span style="color:{{ score.color }}">{{ score.label }}</span></span>
        </div>
        <div style="display:flex;gap:1.5rem;flex-wrap:wrap">
            <span style="font-size:.78rem;color:#64748b"><i class="bi bi-envelope-open me-1" style="color:#10b981"></i>Open <strong style="color:#1e293b">{{ score.open_rate }}%</strong></span>
            <span style="font-size:.78rem;color:#64748b"><i class="bi bi-cursor me-1" style="color:#3b82f6"></i>Click <strong style="color:#1e293b">{{ score.click_rate }}%</strong></span>
            <span style="font-size:.78rem;color:#64748b"><i class="bi bi-arrow-return-left me-1" style="color:#ef4444"></i>Bounce <strong style="color:#1e293b">{{ score.bounce_rate }}%</strong></span>
            <span style="font-size:.78rem;color:#64748b"><i class="bi bi-person-dash me-1" style="color:#f59e0b"></i>Unsub <strong style="color:#1e293b">{{ score.unsub_rate }}%</strong></span>
        </div>
    </div>
    <a href="{{ path('app_tracking_index') }}" style="background:{{ score.color }};color:#fff;text-decoration:none;border-radius:.65rem;padding:.5rem 1rem;font-size:.8rem;font-weight:700;white-space:nowrap;flex-shrink:0">
        <i class="bi bi-bar-chart-line me-1"></i>View Details
    </a>
</div>

{# ── KPI Row ── #}
<div class="kpi-grid animate-fade-in">
    <div class="kpi-card">
        <div class="kpi-icon" style="background:#f5f3ff"><i class="bi bi-people-fill" style="color:#7c3aed"></i></div>
        <div><div class="kpi-val">{{ totalClients }}</div><div class="kpi-lbl">Clients</div></div>
    </div>
    <div class="kpi-card">
        <div class="kpi-icon" style="background:#fdf2f8"><i class="bi bi-send-fill" style="color:#ec4899"></i></div>
        <div><div class="kpi-val">{{ totalCampaigns }}</div><div class="kpi-lbl">Campaigns</div></div>
    </div>
    <div class="kpi-card">
        <div class="kpi-icon" style="background:#eff6ff"><i class="bi bi-envelope-check-fill" style="color:#3b82f6"></i></div>
        <div><div class="kpi-val">{{ totalEmailsSent }}</div><div class="kpi-lbl">Emails Sent</div></div>
    </div>
    <div class="kpi-card">
        <div class="kpi-icon" style="background:#f0fdf4"><i class="bi bi-envelope-open-fill" style="color:#10b981"></i></div>
        <div><div class="kpi-val">{{ openRate }}%</div><div class="kpi-lbl">Open Rate</div></div>
    </div>
    <div class="kpi-card">
        <div class="kpi-icon" style="background:#fff7ed"><i class="bi bi-cursor-fill" style="color:#f97316"></i></div>
        <div><div class="kpi-val">{{ clickRate }}%</div><div class="kpi-lbl">Click Rate</div></div>
    </div>
</div>

{# ── Row 2: Line chart + Donut ── #}
<div class="dash-row dash-row-2 animate-fade-in" style="animation-delay:.08s">

    {# Line chart – emails sent per day #}
    <div class="dash-card">
        <div class="dash-card-header">
            <h3><i class="bi bi-activity"></i> Emails Sent – Last 30 Days</h3>
        </div>
        <div class="dash-card-body">
            <div class="chart-wrap" style="height:230px">
                <canvas id="lineChart"></canvas>
            </div>
        </div>
    </div>

    {# Donut chart – delivery status #}
    <div class="dash-card">
        <div class="dash-card-header">
            <h3><i class="bi bi-pie-chart-fill"></i> Delivery Status</h3>
        </div>
        <div class="dash-card-body" style="display:flex;flex-direction:column;align-items:center;gap:1rem">
            <div class="chart-wrap" style="height:180px;width:180px">
                <canvas id="donutChart"></canvas>
            </div>
            <div style="display:flex;gap:1.25rem;font-size:.8rem;font-weight:600">
                <span><span class="ldot" style="background:#10b981"></span>Delivered {{ deliverySent }}</span>
                <span><span class="ldot" style="background:#ef4444"></span>Failed {{ deliveryFailed }}</span>
            </div>
        </div>
    </div>

</div>

{# ── Row 3: Bar chart + Quick actions ── #}
<div class="dash-row dash-row-2 animate-fade-in" style="animation-delay:.16s">

    {# Bar chart – campaign performance #}
    <div class="dash-card">
        <div class="dash-card-header">
            <h3><i class="bi bi-bar-chart-fill"></i> Campaign Performance</h3>
            <span style="font-size:.75rem;color:#94a3b8">last {{ perfLabels|length }} completed campaigns</span>
        </div>
        <div class="dash-card-body">
            <div class="chart-wrap" style="height:230px">
                <canvas id="barChart"></canvas>
            </div>
        </div>
    </div>

    {# Quick actions + summary #}
    <div style="display:flex;flex-direction:column;gap:1.25rem">

        <div class="dash-card">
            <div class="dash-card-header"><h3><i class="bi bi-lightning-charge-fill"></i> Quick Actions</h3></div>
            <div class="qa-grid">
                <a href="{{ path('app_client_index') }}" class="qa-btn qa-purple">
                    <div class="qa-ico"><i class="bi bi-people-fill"></i></div><span>Clients</span>
                </a>
                <a href="{{ path('app_campaign_new') }}" class="qa-btn qa-pink">
                    <div class="qa-ico"><i class="bi bi-send-fill"></i></div><span>New Campaign</span>
                </a>
                <a href="{{ path('app_tracking_index') }}" class="qa-btn qa-blue">
                    <div class="qa-ico"><i class="bi bi-graph-up"></i></div><span>Tracking</span>
                </a>
                <a href="{{ path('app_template_index') }}" class="qa-btn qa-green">
                    <div class="qa-ico"><i class="bi bi-file-earmark-code"></i></div><span>Templates</span>
                </a>
            </div>
        </div>

        <div class="dash-card">
            <div class="dash-card-header"><h3><i class="bi bi-bar-chart-fill"></i> Summary</h3></div>
            <div style="padding:.9rem 1.4rem;display:flex;flex-direction:column;gap:.75rem">
                {% for item in [
                    {icon:'bi-file-earmark-code', label:'Templates',    val:totalTemplates,  color:'#7c3aed'},
                    {icon:'bi-people',            label:'Clients',      val:totalClients,    color:'#ec4899'},
                    {icon:'bi-envelope-check',    label:'Delivered',    val:deliverySent,    color:'#10b981'},
                    {icon:'bi-envelope-x',        label:'Failed',       val:deliveryFailed,  color:'#ef4444'},
                ] %}
                <div style="display:flex;align-items:center;justify-content:space-between">
                    <span style="display:flex;align-items:center;gap:.5rem;font-size:.83rem;color:#475569">
                        <i class="bi {{ item.icon }}" style="color:{{ item.color }}"></i>{{ item.label }}
                    </span>
                    <strong style="font-size:.9rem;color:#1e293b">{{ item.val }}</strong>
                </div>
                {% endfor %}
            </div>
        </div>

    </div>
</div>

{# ── Row 4: Recent Campaigns ── #}
<div class="dash-card animate-fade-in" style="animation-delay:.24s">
    <div class="dash-card-header">
        <h3><i class="bi bi-clock-history"></i> Recent Campaigns</h3>
        <a href="{{ path('app_campaign_new') }}" class="btn btn-primary btn-sm" style="border-radius:.6rem;padding:.35rem .85rem;font-size:.78rem">
            <i class="bi bi-plus-lg"></i> New
        </a>
    </div>

    {% if recentCampaigns|length > 0 %}
    <div class="table-responsive">
        <table class="dt">
            <thead>
                <tr>
                    <th>Campaign</th>
                    <th>Status</th>
                    <th>Delivery</th>
                    <th>Date</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for c in recentCampaigns %}
                <tr>
                    <td>
                        <div style="font-weight:600;color:#1e293b">{{ c.name }}</div>
                        <div style="font-size:.73rem;color:#94a3b8">{{ c.template.name }}</div>
                    </td>
                    <td>
                        {% if c.status == 'completed' %}
                            <span class="bs bs-ok"><i class="bi bi-check-circle-fill"></i> Done</span>
                        {% elseif c.status == 'sending' %}
                            <span class="bs bs-send"><i class="bi bi-arrow-repeat"></i> Sending</span>
                        {% elseif c.status == 'failed' %}
                            <span class="bs bs-fail"><i class="bi bi-x-circle-fill"></i> Failed</span>
                        {% else %}
                            <span class="bs bs-draft"><i class="bi bi-circle"></i> Draft</span>
                        {% endif %}
                    </td>
                    <td>
                        {% set pct = c.totalRecipients > 0 ? ((c.sentCount / c.totalRecipients) * 100)|round : 0 %}
                        <div style="display:flex;align-items:center;gap:.5rem">
                            <div class="prog-wrap"><div class="prog-fill" style="width:{{ pct }}%"></div></div>
                            <span style="font-size:.73rem;color:#64748b">{{ c.sentCount }}/{{ c.totalRecipients }}</span>
                        </div>
                    </td>
                    <td style="color:#94a3b8;font-size:.78rem;white-space:nowrap">{{ c.createdAt|date('d M Y') }}</td>
                    <td>
                        <a href="{{ path('app_campaign_show', {id: c.id}) }}" style="color:var(--primary);font-size:.78rem;font-weight:600;text-decoration:none;white-space:nowrap">
                            View <i class="bi bi-arrow-right"></i>
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div style="padding:.75rem 1.4rem;border-top:1px solid #f1f5f9;text-align:center">
        <a href="{{ path('app_campaign_index') }}" style="font-size:.8rem;font-weight:600;color:var(--primary);text-decoration:none">
            View all campaigns <i class="bi bi-arrow-right"></i>
        </a>
    </div>
    {% else %}
    <div class="empty">
        <i class="bi bi-send"></i>
        <p>No campaigns yet.</p>
        <a href="{{ path('app_campaign_new') }}" class="btn btn-primary btn-sm">
            <i class="bi bi-plus-lg"></i> Create Campaign
        </a>
    </div>
    {% endif %}
</div>

{% endblock %}

{% block javascripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
Chart.defaults.font.family = "'Inter', sans-serif";
Chart.defaults.color = '#64748b';

// ── 1. Line chart: emails per day ────────────────────────────────────────
new Chart(document.getElementById('lineChart'), {
    type: 'line',
    data: {
        labels: {{ dailyLabels|raw }},
        datasets: [{
            label: 'Emails Sent',
            data: {{ dailyValues|raw }},
            fill: true,
            borderColor: '#7c3aed',
            backgroundColor: 'rgba(124,58,237,0.08)',
            borderWidth: 2.5,
            pointBackgroundColor: '#7c3aed',
            pointRadius: 3,
            pointHoverRadius: 5,
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            x: { grid: { display: false }, ticks: { maxTicksLimit: 8, font: { size: 11 } } },
            y: { grid: { color: '#f1f5f9' }, beginAtZero: true, ticks: { stepSize: 1, font: { size: 11 } } }
        }
    }
});

// ── 2. Donut chart: delivery status ─────────────────────────────────────
new Chart(document.getElementById('donutChart'), {
    type: 'doughnut',
    data: {
        labels: ['Delivered', 'Failed'],
        datasets: [{
            data: [{{ deliverySent }}, {{ deliveryFailed }}],
            backgroundColor: ['#10b981', '#ef4444'],
            borderWidth: 0,
            hoverOffset: 6
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        cutout: '72%',
        plugins: {
            legend: { display: false },
            tooltip: { callbacks: {
                label: ctx => ' ' + ctx.label + ': ' + ctx.parsed
            }}
        }
    }
});

// ── 3. Bar chart: campaign performance ──────────────────────────────────
new Chart(document.getElementById('barChart'), {
    type: 'bar',
    data: {
        labels: {{ perfLabels|raw }},
        datasets: [
            {
                label: 'Sent',
                data: {{ perfSent|raw }},
                backgroundColor: 'rgba(124,58,237,0.75)',
                borderRadius: 5,
                borderSkipped: false
            },
            {
                label: 'Opened',
                data: {{ perfOpened|raw }},
                backgroundColor: 'rgba(16,185,129,0.75)',
                borderRadius: 5,
                borderSkipped: false
            },
            {
                label: 'Clicked',
                data: {{ perfClicked|raw }},
                backgroundColor: 'rgba(249,115,22,0.75)',
                borderRadius: 5,
                borderSkipped: false
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'top',
                labels: { boxWidth: 12, padding: 14, font: { size: 12 } }
            }
        },
        scales: {
            x: { grid: { display: false }, ticks: { font: { size: 10 } } },
            y: { grid: { color: '#f1f5f9' }, beginAtZero: true, ticks: { stepSize: 1, font: { size: 11 } } }
        }
    }
});
</script>
{% endblock %}