{% extends "layouts/base.html" %}
{% load static %}
{% load i18n %}
{% load humanize %}

{% block title %}{% trans "Campaign Dashboard" %} - {{ block.super }}{% endblock %}

{% block extra_css %}
<link href="{% static 'css/campaigns.css' %}" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.css" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">
                <i class="fas fa-tachometer-alt me-2"></i>{% trans "Campaign Dashboard" %}
            </h1>
            <p class="text-muted">{% trans "Overview of all your advertising campaigns" %}</p>
        </div>
        <div>
            <a href="{% url 'campaigns:create' %}" class="btn btn-primary">
                <i class="fas fa-plus me-2"></i>{% trans "New Campaign" %}
            </a>
            <a href="{% url 'campaigns:list' %}" class="btn btn-outline-secondary">
                <i class="fas fa-list me-2"></i>{% trans "View All" %}
            </a>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                {% trans "Total Campaigns" %}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.total_campaigns }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-bullhorn fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                {% trans "Active Campaigns" %}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.active_campaigns }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-play-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                {% trans "Total Budget" %}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                ${{ stats.total_budget|floatformat:0|intcomma }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                {% trans "Total Spend" %}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                ${{ stats.total_spend|floatformat:0|intcomma }}
                            </div>
                            <div class="row no-gutters align-items-center">
                                <div class="col-auto">
                                    <div class="h6 mb-0 mr-3 font-weight-bold text-gray-800">
                                        {{ stats.budget_utilization|floatformat:1 }}%
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="progress progress-sm mr-2">
                                        <div class="progress-bar bg-warning" role="progressbar"
                                             style="width: {{ stats.budget_utilization }}%"
                                             aria-valuenow="{{ stats.budget_utilization }}" aria-valuemin="0"
                                             aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-chart-line fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="row mb-4">
        <!-- Campaign Performance Chart -->
        <div class="col-xl-8 col-lg-7">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-area me-2"></i>{% trans "Campaign Performance" %}
                    </h6>
                    <div class="dropdown no-arrow">
                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
                           data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
                             aria-labelledby="dropdownMenuLink">
                            <div class="dropdown-header">{% trans "Time Period:" %}</div>
                            <a class="dropdown-item" href="#" onclick="updateChart('7d')">{% trans "Last 7 Days" %}</a>
                            <a class="dropdown-item" href="#" onclick="updateChart('30d')">{% trans "Last 30 Days" %}</a>
                            <a class="dropdown-item" href="#" onclick="updateChart('90d')">{% trans "Last 90 Days" %}</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-area">
                        <canvas id="performanceChart" width="100%" height="40"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Campaign Status Pie Chart -->
        <div class="col-xl-4 col-lg-5">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-chart-pie me-2"></i>{% trans "Campaign Status" %}
                    </h6>
                </div>
                <div class="card-body">
                    <div class="chart-pie pt-4 pb-2">
                        <canvas id="statusChart" width="100%" height="200"></canvas>
                    </div>
                    <div class="mt-4 text-center small">
                        <span class="mr-2">
                            <i class="fas fa-circle text-success"></i> {% trans "Active" %}
                        </span>
                        <span class="mr-2">
                            <i class="fas fa-circle text-warning"></i> {% trans "Paused" %}
                        </span>
                        <span class="mr-2">
                            <i class="fas fa-circle text-secondary"></i> {% trans "Draft" %}
                        </span>
                        <span class="mr-2">
                            <i class="fas fa-circle text-info"></i> {% trans "Completed" %}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Campaigns & Top Performers -->
    <div class="row">
        <!-- Recent Campaigns -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-clock me-2"></i>{% trans "Recent Campaigns" %}
                    </h6>
                </div>
                <div class="card-body">
                    {% if recent_campaigns %}
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>{% trans "Name" %}</th>
                                        <th>{% trans "Status" %}</th>
                                        <th>{% trans "Budget" %}</th>
                                        <th>{% trans "Actions" %}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for campaign in recent_campaigns %}
                                        <tr>
                                            <td>
                                                <a href="{% url 'campaigns:detail' campaign.pk %}" class="text-decoration-none">
                                                    {{ campaign.name|truncatechars:30 }}
                                                </a>
                                                <br>
                                                <small class="text-muted">{{ campaign.advertiser.name }}</small>
                                            </td>
                                            <td>
                                                {% if campaign.status == 'active' %}
                                                    <span class="badge badge-success">{{ campaign.get_status_display }}</span>
                                                {% elif campaign.status == 'paused' %}
                                                    <span class="badge badge-warning">{{ campaign.get_status_display }}</span>
                                                {% elif campaign.status == 'completed' %}
                                                    <span class="badge badge-secondary">{{ campaign.get_status_display }}</span>
                                                {% else %}
                                                    <span class="badge badge-light">{{ campaign.get_status_display }}</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                <div class="font-weight-bold">${{ campaign.total_budget|floatformat:0|intcomma }}</div>
                                                {% if campaign.total_spend %}
                                                    <small class="text-muted">
                                                        ${{ campaign.total_spend|floatformat:0|intcomma }} {% trans "spent" %}
                                                    </small>
                                                {% endif %}
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm" role="group">
                                                    <a href="{% url 'campaigns:detail' campaign.pk %}" 
                                                       class="btn btn-outline-primary btn-sm" title="{% trans 'View' %}">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    <a href="{% url 'campaigns:edit' campaign.pk %}" 
                                                       class="btn btn-outline-secondary btn-sm" title="{% trans 'Edit' %}">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <div class="text-center mt-3">
                            <a href="{% url 'campaigns:list' %}" class="btn btn-outline-primary btn-sm">
                                {% trans "View All Campaigns" %} <i class="fas fa-arrow-right ms-1"></i>
                            </a>
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fas fa-bullhorn fa-3x text-gray-300 mb-3"></i>
                            <h6 class="text-gray-500">{% trans "No campaigns yet" %}</h6>
                            <p class="text-muted">{% trans "Create your first campaign to get started" %}</p>
                            <a href="{% url 'campaigns:create' %}" class="btn btn-primary">
                                <i class="fas fa-plus me-2"></i>{% trans "Create Campaign" %}
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Top Performing Campaigns -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-trophy me-2"></i>{% trans "Top Performers" %}
                    </h6>
                </div>
                <div class="card-body">
                    {% if top_campaigns %}
                        {% for campaign in top_campaigns %}
                            <div class="d-flex align-items-center mb-3">
                                <div class="me-3">
                                    <div class="icon-circle bg-primary">
                                        <i class="fas fa-star text-white"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="font-weight-bold">
                                        <a href="{% url 'campaigns:detail' campaign.pk %}" class="text-decoration-none">
                                            {{ campaign.name|truncatechars:25 }}
                                        </a>
                                    </div>
                                    <div class="text-muted small">{{ campaign.advertiser.name }}</div>
                                    <div class="progress progress-sm mt-1">
                                        <div class="progress-bar bg-success" role="progressbar" 
                                             style="width: {{ campaign.budget_utilization }}%"
                                             aria-valuenow="{{ campaign.budget_utilization }}" 
                                             aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <div class="font-weight-bold text-success">
                                        {{ campaign.total_impressions|default:0|intcomma }}
                                    </div>
                                    <div class="text-muted small">{% trans "impressions" %}</div>
                                </div>
                            </div>
                        {% endfor %}
                        <div class="text-center mt-3">
                            <a href="{% url 'campaigns:list' %}?sort=performance" class="btn btn-outline-primary btn-sm">
                                {% trans "View Performance Report" %} <i class="fas fa-arrow-right ms-1"></i>
                            </a>
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fas fa-chart-line fa-3x text-gray-300 mb-3"></i>
                            <h6 class="text-gray-500">{% trans "No performance data yet" %}</h6>
                            <p class="text-muted">{% trans "Performance data will appear once campaigns start running" %}</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-bolt me-2"></i>{% trans "Quick Actions" %}
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <a href="{% url 'campaigns:create' %}" class="btn btn-primary btn-block">
                                <i class="fas fa-plus me-2"></i>{% trans "New Campaign" %}
                            </a>
                        </div>
                        <div class="col-md-3 mb-3">
                            <button class="btn btn-success btn-block" onclick="bulkActivate()">
                                <i class="fas fa-play me-2"></i>{% trans "Bulk Activate" %}
                            </button>
                        </div>
                        <div class="col-md-3 mb-3">
                            <button class="btn btn-warning btn-block" onclick="bulkPause()">
                                <i class="fas fa-pause me-2"></i>{% trans "Bulk Pause" %}
                            </button>
                        </div>
                        <div class="col-md-3 mb-3">
                            <a href="{% url 'campaigns:list' %}" class="btn btn-info btn-block">
                                <i class="fas fa-download me-2"></i>{% trans "Export Report" %}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
// Chart configurations
let performanceChart;
let statusChart;

$(document).ready(function() {
    initializeCharts();
    loadPerformanceData();
});

function initializeCharts() {
    // Performance Chart
    const performanceCtx = document.getElementById('performanceChart').getContext('2d');
    performanceChart = new Chart(performanceCtx, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: '{% trans "Impressions" %}',
                data: [],
                borderColor: '#4e73df',
                backgroundColor: 'rgba(78, 115, 223, 0.1)',
                borderWidth: 2,
                fill: true,
                tension: 0.3
            }, {
                label: '{% trans "Spend ($)" %}',
                data: [],
                borderColor: '#1cc88a',
                backgroundColor: 'rgba(28, 200, 138, 0.1)',
                borderWidth: 2,
                fill: true,
                tension: 0.3,
                yAxisID: 'y1'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                    title: {
                        display: true,
                        text: '{% trans "Impressions" %}'
                    }
                },
                y1: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    title: {
                        display: true,
                        text: '{% trans "Spend ($)" %}'
                    },
                    grid: {
                        drawOnChartArea: false,
                    },
                }
            },
            plugins: {
                legend: {
                    display: true,
                    position: 'top'
                }
            }
        }
    });

    // Status Chart
    const statusCtx = document.getElementById('statusChart').getContext('2d');
    statusChart = new Chart(statusCtx, {
        type: 'doughnut',
        data: {
            labels: ['{% trans "Active" %}', '{% trans "Paused" %}', '{% trans "Draft" %}', '{% trans "Completed" %}'],
            datasets: [{
                data: [{{ stats.active_campaigns }}, {{ stats.paused_campaigns }}, {{ stats.draft_campaigns }}, {{ stats.completed_campaigns }}],
                backgroundColor: ['#1cc88a', '#f6c23e', '#e74a3b', '#36b9cc'],
                hoverBackgroundColor: ['#17a673', '#f4b619', '#e02d1b', '#2c9faf'],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
}

function loadPerformanceData(period = '30d') {
    $.ajax({
        url: '{% url "campaigns:performance_data" %}',
        data: { period: period },
        success: function(data) {
            updatePerformanceChart(data);
        },
        error: function() {
            console.error('Failed to load performance data');
        }
    });
}

function updatePerformanceChart(data) {
    performanceChart.data.labels = data.labels;
    performanceChart.data.datasets[0].data = data.impressions;
    performanceChart.data.datasets[1].data = data.spend;
    performanceChart.update();
}

function updateChart(period) {
    loadPerformanceData(period);
}

function bulkActivate() {
    if (confirm('{% trans "Are you sure you want to activate all eligible campaigns?" %}')) {
        // Implementation for bulk activate
        alert('{% trans "Bulk activation feature will be implemented" %}');
    }
}

function bulkPause() {
    if (confirm('{% trans "Are you sure you want to pause all active campaigns?" %}')) {
        // Implementation for bulk pause
        alert('{% trans "Bulk pause feature will be implemented" %}');
    }
}

// Auto-refresh dashboard every 5 minutes
setInterval(function() {
    loadPerformanceData();
}, 300000);
</script>
{% endblock %}