{% extends "layouts/base.html" %}

{% load static %}

{% block title %}Brand Statistics{% endblock %}

{% block extra_css %}
<link href="{% static 'plugins/chartjs/chart.min.css' %}" rel="stylesheet" />
<style>
    .stats-overview {
        margin-bottom: 30px;
    }
    
    .chart-card {
        border: none;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        border-radius: 8px;
        margin-bottom: 20px;
    }
    
    .chart-header {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
        border-radius: 8px 8px 0 0;
        padding: 20px;
    }
    
    .chart-body {
        padding: 25px;
    }
    
    .metric-card {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        margin-bottom: 20px;
        transition: transform 0.2s;
    }
    
    .metric-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .metric-value {
        font-size: 2.5rem;
        font-weight: bold;
        color: #28a745;
        margin-bottom: 10px;
    }
    
    .metric-label {
        color: #6c757d;
        font-size: 1rem;
        font-weight: 500;
    }
    
    .metric-icon {
        font-size: 2rem;
        color: #28a745;
        margin-bottom: 15px;
    }
    
    .chart-container {
        position: relative;
        height: 400px;
        margin: 20px 0;
    }
    
    .trend-indicator {
        display: inline-flex;
        align-items: center;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.875rem;
        font-weight: 500;
    }
    
    .trend-up {
        background-color: #d4edda;
        color: #155724;
    }
    
    .trend-down {
        background-color: #f8d7da;
        color: #721c24;
    }
    
    .trend-neutral {
        background-color: #e2e3e5;
        color: #383d41;
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">Brand Statistics</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{% url 'agencies:agency_list' %}">Agencies</a></li>
            <li class="breadcrumb-item"><a href="{% url 'agencies:brand_list' %}">Brands</a></li>
            <li class="breadcrumb-item active" aria-current="page">Statistics</li>
        </ol>
    </div>
</div>
{% endblock breadcrumb %}

{% block content %}
<!-- Statistics Overview -->
<div class="row stats-overview">
    <div class="col-lg-3 col-md-6">
        <div class="metric-card">
            <div class="metric-icon">
                <i class="fe fe-tag"></i>
            </div>
            <div class="metric-value">{{ stats.total_brands|default:0 }}</div>
            <div class="metric-label">Total Brands</div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6">
        <div class="metric-card">
            <div class="metric-icon">
                <i class="fe fe-check-circle"></i>
            </div>
            <div class="metric-value">{{ stats.active_brands|default:0 }}</div>
            <div class="metric-label">Active Brands</div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6">
        <div class="metric-card">
            <div class="metric-icon">
                <i class="fe fe-star"></i>
            </div>
            <div class="metric-value">{{ stats.featured_brands|default:0 }}</div>
            <div class="metric-label">Featured Brands</div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6">
        <div class="metric-card">
            <div class="metric-icon">
                <i class="fe fe-trending-up"></i>
            </div>
            <div class="metric-value">{{ stats.growth_rate|default:0 }}%</div>
            <div class="metric-label">Growth Rate</div>
        </div>
    </div>
</div>

<!-- Charts Row -->
<div class="row">
    <!-- Brand Performance Chart -->
    <div class="col-lg-8">
        <div class="card chart-card">
            <div class="chart-header">
                <h3 class="card-title mb-0">
                    <i class="fe fe-bar-chart-2 me-2"></i>Brand Performance Overview
                </h3>
            </div>
            <div class="chart-body">
                <div class="chart-container">
                    <canvas id="brand-performance-chart" width="400" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Category Distribution -->
    <div class="col-lg-4">
        <div class="card chart-card">
            <div class="chart-header">
                <h3 class="card-title mb-0">
                    <i class="fe fe-pie-chart me-2"></i>Category Distribution
                </h3>
            </div>
            <div class="chart-body">
                <div class="chart-container">
                    <canvas id="category-distribution-chart" width="200" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Additional Metrics Row -->
<div class="row">
    <div class="col-lg-6">
        <div class="card chart-card">
            <div class="chart-header">
                <h3 class="card-title mb-0">
                    <i class="fe fe-trending-up me-2"></i>Monthly Trends
                </h3>
            </div>
            <div class="chart-body">
                <div class="chart-container">
                    <canvas id="monthly-trends-chart" width="400" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-6">
        <div class="card chart-card">
            <div class="chart-header">
                <h3 class="card-title mb-0">
                    <i class="fe fe-users me-2"></i>Agency Performance
                </h3>
            </div>
            <div class="chart-body">
                <div class="chart-container">
                    <canvas id="agency-performance-chart" width="400" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Brand Performance Chart
    const performanceCtx = document.getElementById('brand-performance-chart').getContext('2d');
    new Chart(performanceCtx, {
        type: 'line',
        data: {
            labels: {{ brands.labels|default:"['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"|safe }},
            datasets: [{
                label: 'Brand Performance',
                data: {{ brands.data|default:"[12, 19, 3, 5, 2, 3]"|safe }},
                borderColor: '#28a745',
                backgroundColor: 'rgba(40, 167, 69, 0.1)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0,0,0,0.1)'
                    }
                },
                x: {
                    grid: {
                        color: 'rgba(0,0,0,0.1)'
                    }
                }
            }
        }
    });

    // Category Distribution Chart
    const categoryCtx = document.getElementById('category-distribution-chart').getContext('2d');
    new Chart(categoryCtx, {
        type: 'doughnut',
        data: {
            labels: {{ brands.categories|default:"['Fashion', 'Technology', 'Food', 'Automotive']"|safe }},
            datasets: [{
                data: {{ brands.category_data|default:"[30, 25, 20, 25]"|safe }},
                backgroundColor: [
                    '#28a745',
                    '#007bff',
                    '#ffc107',
                    '#dc3545'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });

    // Monthly Trends Chart
    const trendsCtx = document.getElementById('monthly-trends-chart').getContext('2d');
    new Chart(trendsCtx, {
        type: 'bar',
        data: {
            labels: {{ brands.months|default:"['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']"|safe }},
            datasets: [{
                label: 'New Brands',
                data: {{ brands.trend_data|default:"[5, 8, 12, 7, 9, 15]"|safe }},
                backgroundColor: '#17a2b8'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0,0,0,0.1)'
                    }
                }
            }
        }
    });

    // Agency Performance Chart
    const agencyCtx = document.getElementById('agency-performance-chart').getContext('2d');
    new Chart(agencyCtx, {
        type: 'radar',
        data: {
            labels: {{ brands.agency_metrics|default:"['Efficiency', 'Quality', 'Speed', 'Innovation', 'Support']"|safe }},
            datasets: [{
                label: 'Performance Score',
                data: {{ brands.agency_data|default:"[85, 90, 75, 80, 88]"|safe }},
                borderColor: '#ffc107',
                backgroundColor: 'rgba(255, 193, 7, 0.2)',
                pointBackgroundColor: '#ffc107'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                r: {
                    beginAtZero: true,
                    max: 100,
                    grid: {
                        color: 'rgba(0,0,0,0.1)'
                    }
                }
            }
        }
    });
});
</script>
{% endblock extra_js %}