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

{% block title %}{{ campaign.name }} - {% trans "Campaign Details" %} - {{ block.super }}{% endblock %}

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

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'campaigns:list' %}">{% trans "Campaigns" %}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ campaign.name }}</li>
                </ol>
            </nav>
            <h1 class="h3 mb-0 text-gray-800">{{ campaign.name }}</h1>
            <p class="mb-0 text-muted">{{ campaign.description|default:"" }}</p>
        </div>
        <div>
            <div class="btn-group" role="group">
                <a href="{% url 'campaigns:edit' campaign.pk %}" class="btn btn-primary">
                    <i class="fas fa-edit me-2"></i>{% trans "Edit Campaign" %}
                </a>
                {% if campaign.status == 'draft' or campaign.status == 'paused' %}
                    <a href="{% url 'campaigns:activate' campaign.pk %}" class="btn btn-success">
                        <i class="fas fa-play me-2"></i>{% trans "Activate" %}
                    </a>
                {% elif campaign.status == 'active' %}
                    <a href="{% url 'campaigns:pause' campaign.pk %}" class="btn btn-warning">
                        <i class="fas fa-pause me-2"></i>{% trans "Pause" %}
                    </a>
                {% endif %}
                <a href="{% url 'campaigns:clone' campaign.pk %}" class="btn btn-info">
                    <i class="fas fa-copy me-2"></i>{% trans "Clone" %}
                </a>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                        <i class="fas fa-ellipsis-v"></i>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="{% url 'campaigns:delete' campaign.pk %}">
                            <i class="fas fa-trash me-2"></i>{% trans "Delete Campaign" %}
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Campaign Status and Key Metrics -->
    <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 "Status" %}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {% 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 %}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-info-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-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 "Budget Utilization" %}
                            </div>
                            <div class="row no-gutters align-items-center">
                                <div class="col-auto">
                                    <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">
                                        {{ campaign.budget_utilization|floatformat:1 }}%
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="progress progress-sm mr-2">
                                        <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>
                        </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-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 Impressions" %}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ campaign.total_impressions|default:"0" }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-eye 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 "Days Remaining" %}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ campaign.days_remaining|default:"0" }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-calendar fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Campaign Details -->
        <div class="col-lg-8">
            <!-- Basic Information -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{% trans "Campaign Information" %}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td><strong>{% trans "Advertiser" %}:</strong></td>
                                    <td>{{ campaign.advertiser.name }}</td>
                                </tr>
                                <tr>
                                    <td><strong>{% trans "Campaign Type" %}:</strong></td>
                                    <td>{{ campaign.get_campaign_type_display }}</td>
                                </tr>
                                <tr>
                                    <td><strong>{% trans "Priority" %}:</strong></td>
                                    <td>
                                        {% for i in "12345678910"|make_list %}
                                            {% if forloop.counter <= campaign.priority %}
                                                <i class="fas fa-star text-warning"></i>
                                            {% else %}
                                                <i class="far fa-star text-muted"></i>
                                            {% endif %}
                                        {% endfor %}
                                        ({{ campaign.priority }}/10)
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>{% trans "Start Date" %}:</strong></td>
                                    <td>{{ campaign.start_date|date:"F d, Y g:i A" }}</td>
                                </tr>
                                <tr>
                                    <td><strong>{% trans "End Date" %}:</strong></td>
                                    <td>{{ campaign.end_date|date:"F d, Y g:i A" }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td><strong>{% trans "Total Budget" %}:</strong></td>
                                    <td>${{ campaign.total_budget|floatformat:2 }}</td>
                                </tr>
                                <tr>
                                    <td><strong>{% trans "Daily Budget" %}:</strong></td>
                                    <td>
                                        {% if campaign.daily_budget %}
                                            ${{ campaign.daily_budget|floatformat:2 }}
                                        {% else %}
                                            {% trans "Auto-distributed" %}
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>{% trans "Cost per Spot" %}:</strong></td>
                                    <td>${{ campaign.cost_per_spot|floatformat:2 }}</td>
                                </tr>
                                <tr>
                                    <td><strong>{% trans "Total Spend" %}:</strong></td>
                                    <td>${{ campaign.total_spend|floatformat:2 }}</td>
                                </tr>
                                <tr>
                                    <td><strong>{% trans "Remaining Budget" %}:</strong></td>
                                    <td>${{ campaign.total_budget|sub:campaign.total_spend|floatformat:2 }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    
                    {% if campaign.target_audience %}
                        <div class="mt-3">
                            <strong>{% trans "Target Audience" %}:</strong>
                            <p class="mt-2">{{ campaign.target_audience }}</p>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Performance Chart -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{% trans "Performance Overview" %}</h6>
                </div>
                <div class="card-body">
                    {% if performance_summary.total_impressions %}
                        <canvas id="performanceChart" width="400" height="200"></canvas>
                    {% else %}
                        <div class="text-center py-5">
                            <i class="fas fa-chart-line fa-3x text-gray-300 mb-3"></i>
                            <h5 class="text-gray-600">{% trans "No performance data available" %}</h5>
                            <p class="text-muted">{% trans "Performance data will appear here once the campaign starts running." %}</p>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Channel Schedules -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{% trans "Channel Schedules" %}</h6>
                </div>
                <div class="card-body">
                    {% if channel_schedules %}
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>{% trans "Channel" %}</th>
                                        <th>{% trans "Time Slot" %}</th>
                                        <th>{% trans "Days" %}</th>
                                        <th>{% trans "Spots/Day" %}</th>
                                        <th>{% trans "Budget" %}</th>
                                        <th>{% trans "Delivered" %}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for schedule in channel_schedules %}
                                        <tr>
                                            <td>{{ schedule.channel.name }}</td>
                                            <td>{{ schedule.start_time }} - {{ schedule.end_time }}</td>
                                            <td>
                                                {% for day in schedule.days_of_week.split:"," %}
                                                    {% if day == "1" %}{% trans "Mon" %}
                                                    {% elif day == "2" %}{% trans "Tue" %}
                                                    {% elif day == "3" %}{% trans "Wed" %}
                                                    {% elif day == "4" %}{% trans "Thu" %}
                                                    {% elif day == "5" %}{% trans "Fri" %}
                                                    {% elif day == "6" %}{% trans "Sat" %}
                                                    {% elif day == "7" %}{% trans "Sun" %}
                                                    {% endif %}
                                                    {% if not forloop.last %}, {% endif %}
                                                {% endfor %}
                                            </td>
                                            <td>{{ schedule.spots_per_day }}</td>
                                            <td>${{ schedule.channel_budget|floatformat:2 }}</td>
                                            <td>
                                                {{ schedule.impressions_delivered|default:"0" }} {% trans "impressions" %}<br>
                                                <small class="text-muted">${{ schedule.amount_spent|floatformat:2 }} {% trans "spent" %}</small>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fas fa-calendar-times fa-2x text-gray-300 mb-3"></i>
                            <h6 class="text-gray-600">{% trans "No channel schedules configured" %}</h6>
                            <p class="text-muted">{% trans "Add channel schedules to start running this campaign." %}</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Performance Summary -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{% trans "Performance Summary" %}</h6>
                </div>
                <div class="card-body">
                    {% if performance_summary.total_impressions %}
                        <div class="row text-center">
                            <div class="col-6 border-right">
                                <div class="h5 font-weight-bold text-primary">
                                    {{ performance_summary.total_impressions|default:"0" }}
                                </div>
                                <div class="text-xs text-uppercase text-muted">{% trans "Total Impressions" %}</div>
                            </div>
                            <div class="col-6">
                                <div class="h5 font-weight-bold text-success">
                                    ${{ performance_summary.total_spend|floatformat:2 }}
                                </div>
                                <div class="text-xs text-uppercase text-muted">{% trans "Total Spend" %}</div>
                            </div>
                        </div>
                        <hr>
                        <div class="row text-center">
                            <div class="col-6 border-right">
                                <div class="h5 font-weight-bold text-info">
                                    ${{ performance_summary.avg_cpm|floatformat:2 }}
                                </div>
                                <div class="text-xs text-uppercase text-muted">{% trans "Average CPM" %}</div>
                            </div>
                            <div class="col-6">
                                <div class="h5 font-weight-bold text-warning">
                                    {{ performance_summary.total_spots|default:"0" }}
                                </div>
                                <div class="text-xs text-uppercase text-muted">{% trans "Spots Aired" %}</div>
                            </div>
                        </div>
                        
                        {% if daily_averages %}
                            <hr>
                            <h6 class="font-weight-bold text-gray-800 mb-3">{% trans "Daily Averages" %}</h6>
                            <div class="row text-center">
                                <div class="col-4">
                                    <div class="h6 font-weight-bold text-primary">
                                        {{ daily_averages.impressions|floatformat:0 }}
                                    </div>
                                    <div class="text-xs text-uppercase text-muted">{% trans "Impressions" %}</div>
                                </div>
                                <div class="col-4">
                                    <div class="h6 font-weight-bold text-success">
                                        ${{ daily_averages.spend|floatformat:2 }}
                                    </div>
                                    <div class="text-xs text-uppercase text-muted">{% trans "Spend" %}</div>
                                </div>
                                <div class="col-4">
                                    <div class="h6 font-weight-bold text-warning">
                                        {{ daily_averages.spots|floatformat:0 }}
                                    </div>
                                    <div class="text-xs text-uppercase text-muted">{% trans "Spots" %}</div>
                                </div>
                            </div>
                        {% endif %}
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fas fa-chart-bar fa-2x text-gray-300 mb-3"></i>
                            <h6 class="text-gray-600">{% trans "No performance data" %}</h6>
                            <p class="text-muted">{% trans "Data will appear once campaign starts." %}</p>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Geographic Zones -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{% trans "Geographic Zones" %}</h6>
                </div>
                <div class="card-body">
                    {% if campaign.geographic_zones.all %}
                        <ul class="list-unstyled mb-0">
                            {% for zone in campaign.geographic_zones.all %}
                                <li class="mb-2">
                                    <i class="fas fa-map-marker-alt text-primary me-2"></i>
                                    {{ zone.name }}
                                    {% if zone.population %}
                                        <br><small class="text-muted ms-3">{% trans "Population" %}: {{ zone.population|floatformat:0 }}</small>
                                    {% endif %}
                                </li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <p class="text-muted">{% trans "No geographic zones selected" %}</p>
                    {% endif %}
                </div>
            </div>

            <!-- Channels -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{% trans "Channels" %}</h6>
                </div>
                <div class="card-body">
                    {% if campaign.channels.all %}
                        <ul class="list-unstyled mb-0">
                            {% for channel in campaign.channels.all %}
                                <li class="mb-2">
                                    <i class="fas fa-tv text-primary me-2"></i>
                                    {{ channel.name }}
                                    {% if channel.short_name %}
                                        <small class="text-muted">({{ channel.short_name }})</small>
                                    {% endif %}
                                </li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <p class="text-muted">{% trans "No channels selected" %}</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // Load performance chart if data exists
    {% if performance_summary.total_impressions %}
        loadPerformanceChart();
    {% endif %}
});

function loadPerformanceChart() {
    $.ajax({
        url: '{% url "campaigns:performance_data" campaign.pk %}',
        type: 'GET',
        success: function(data) {
            const ctx = document.getElementById('performanceChart').getContext('2d');
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: data.dates,
                    datasets: [{
                        label: '{% trans "Impressions" %}',
                        data: data.impressions,
                        borderColor: 'rgb(75, 192, 192)',
                        backgroundColor: 'rgba(75, 192, 192, 0.1)',
                        tension: 0.1,
                        yAxisID: 'y'
                    }, {
                        label: '{% trans "Spend ($)" %}',
                        data: data.spend,
                        borderColor: 'rgb(255, 99, 132)',
                        backgroundColor: 'rgba(255, 99, 132, 0.1)',
                        tension: 0.1,
                        yAxisID: 'y1'
                    }]
                },
                options: {
                    responsive: true,
                    interaction: {
                        mode: 'index',
                        intersect: false,
                    },
                    scales: {
                        x: {
                            display: true,
                            title: {
                                display: true,
                                text: '{% trans "Date" %}'
                            }
                        },
                        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,
                            },
                        }
                    }
                }
            });
        },
        error: function() {
            console.log('Error loading performance data');
        }
    });
}
</script>
{% endblock %}