{% extends "base.html" %}

{% block title %}Dashboard{% endblock %}

{% block content %}

<style>
    body {
        background-color: #f5f7ff;
        font-family: 'Inter', sans-serif;
    }

    /* ================= TOP STATS GRID ================= */
    .row-top {
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        gap: 24px;
        margin-bottom: 30px;
        flex-wrap: wrap;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 1fr; /* all rows same height */
        gap: 20px;
    }

    .stat-box {
        border-radius: 20px;
        padding: 25px;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        min-height: 140px;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .stat-box:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }

    .stat-box h4 {
        font-size: 16px;
        margin-bottom: 8px;
        font-weight: 600;
        text-align: center;
    }

    .stat-box .count {
        font-size: 28px;
        font-weight: 700;
        text-align: center;
    }

    .bg-purple {
        background: linear-gradient(135deg, #7978e9, #5f5ad4);
    }

    /* ================= YEAR SWITCH ================= */
    .year-switch {
        margin-bottom: 20px;
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .year-btn {
        padding: 6px 14px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 600;
        border: 1px solid #4747a1;
        color: #4747a1;
        transition: all 0.2s;
    }

    .year-btn:hover {
        background-color: #4747a1;
        color: white;
    }

    .year-btn.active {
        background-color: #4747a1;
        color: white;
    }

    /* ================= CHART PANELS ================= */
    .row-bottom {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin-bottom: 30px;
    }

    .chart-panel {
        background: #fff;
        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
    }

    .chart-panel h3 {
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 700;
        color: #111322;
    }

    /* ================= RESPONSIVE ================= */
    @media (max-width: 1024px) {
        .row-top {
            grid-template-columns: 1fr;
        }

        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .row-bottom {
            grid-template-columns: 1fr;
        }

        .stat-box {
            width: 100% !important;
        }
    }

    @media (max-width: 600px) {
        .stats-grid {
            grid-template-columns: 1fr;
        }
    }
</style>

<!-- ================= TOP STATS ================= -->
<div class="row-top">
    <div class="stats-grid">
        <div class="stat-box bg-purple">
            <h4>Ham Emails</h4>
            <div class="count">{{ ham_count }}</div>
        </div>

        <div class="stat-box bg-purple">
            <h4>Spam Emails</h4>
            <div class="count">{{ spam_count }}</div>
        </div>

        <div class="stat-box bg-purple">
            <h4>Undecided Emails</h4>
            <div class="count">{{ undecided_count }}</div>
        </div>

        <div class="stat-box bg-purple">
            <h4>Email Sent</h4>
            <div class="count">{{ sent_leads }}</div>
        </div>
    </div>

    <div class="stats-grid">
        <div class="stat-box bg-purple">
            <h4>Total Leads</h4>
            <div class="count">{{ total_leads }}</div>
        </div>

        <div class="stat-box bg-purple">
            <h4>Lead Replies</h4>
            <div class="count">{{ replies }}</div>
        </div>

        <div class="stat-box bg-purple">
            <h4>Meetings</h4>
            <div class="count">{{ meetings }}</div>
        </div>

        <div class="stat-box bg-purple">
            <h4>Email Sent</h4>
            <div class="count">{{ sent_leads }}</div>
        </div>
    </div>
</div>

<!-- ================= YEAR SWITCH ================= -->
<div class="year-switch">
    <a href="/dashboard?year=2025" class="year-btn {% if selected_year == 2025 %}active{% endif %}">2025</a>
    <a href="/dashboard?year=2026" class="year-btn {% if selected_year == 2026 %}active{% endif %}">2026</a>
</div>

<!-- ================= CHARTS ================= -->
<div class="row-bottom">
    <div class="chart-panel">
        <h3>Email Sent Details ({{ selected_year }})</h3>
        <canvas id="detailsChart" height="300"></canvas>
    </div>

    <div class="chart-panel">
        <h3>Sales Report ({{ selected_year }})</h3>
        <canvas id="activityChart" height="300"></canvas>
    </div>
</div>

<div class="row-bottom">
    <div class="chart-panel">
        <h3>Daily Email Responses</h3>
        <canvas id="dailyResponseChart" height="300"></canvas>
    </div>

    <div class="chart-panel">
        <h3>Monthly Email Responses ({{ selected_year }})</h3>
        <canvas id="monthlyResponseChart" height="300"></canvas>
    </div>
</div>

<!-- ================= CHART.JS SCRIPTS ================= -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    new Chart(document.getElementById('detailsChart'), {
        type: 'line',
        data: {
            labels: {{ daily_labels | tojson }},
            datasets: [{
                data: {{ daily_sent_data | tojson }},
                borderColor: '#4747a1',
                backgroundColor: 'rgba(71,71,161,0.2)',
                fill: true,
                tension: 0.4
            }]
        },
        options: { responsive: true, plugins: { legend: { display: false } } }
    });

    new Chart(document.getElementById('activityChart'), {
        type: 'bar',
        data: {
            labels: {{ monthly_labels | tojson }},
            datasets: [
                { data: {{ monthly_online_data | tojson }}, backgroundColor: '#4747a1', label: 'Online' },
                { data: {{ monthly_offline_data | tojson }}, backgroundColor: '#7da0fa', label: 'Offline' }
            ]
        },
        options: { responsive: true }
    });

    new Chart(document.getElementById('dailyResponseChart'), {
        type: 'line',
        data: {
            labels: {{ daily_labels | tojson }},
            datasets: [{
                data: {{ daily_responses_data | tojson }},
                borderColor: '#f3797e',
                backgroundColor: 'rgba(243,121,126,0.2)',
                fill: true,
                tension: 0.4
            }]
        },
        options: { responsive: true, plugins: { legend: { display: false } } }
    });

    new Chart(document.getElementById('monthlyResponseChart'), {
        type: 'bar',
        data: {
            labels: {{ monthly_labels | tojson }},
            datasets: [{ data: {{ monthly_responses_data | tojson }}, backgroundColor: '#f3797e', label: 'Responses' }]
        },
        options: { responsive: true }
    });
</script>

{% endblock %}