{% extends 'base.html' %}
{% load static %}

{% block title %}Dashboard - Adtlas DAI Management{% endblock %}

{% block extra_css %}
<style>
/* Dashboard-specific styles */
.dashboard-stats {
    margin-bottom: 2rem;
}

.stat-card {
    background: linear-gradient(135deg, var(--white) 0%, #f8f9fa 100%);
    border: none;
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    height: 100%;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-lg);
}

.stat-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.stat-card-icon.primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--white);
}

.stat-card-icon.success {
    background: linear-gradient(135deg, var(--success-color), #34ce57);
    color: var(--white);
}

.stat-card-icon.warning {
    background: linear-gradient(135deg, var(--warning-color), #ffcd39);
    color: var(--dark);
}

.stat-card-icon.info {
    background: linear-gradient(135deg, var(--info-color), #20c9e7);
    color: var(--white);
}

.stat-card-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.stat-card-label {
    color: var(--gray);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.stat-card-change {
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.stat-card-change.positive {
    color: var(--success-color);
}

.stat-card-change.negative {
    color: var(--danger-color);
}

.chart-container {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--box-shadow);
    height: 400px;
}

.recent-activity-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--light-gray);
    transition: background-color var(--transition-fast);
}

.recent-activity-item:hover {
    background: var(--light);
}

.recent-activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 0.875rem;
}

.activity-icon.campaign {
    background: var(--primary-light);
    color: var(--primary-color);
}

.activity-icon.advertiser {
    background: var(--success-light);
    color: var(--success-color);
}

.activity-icon.analytics {
    background: var(--info-light);
    color: var(--info-color);
}

.activity-icon.system {
    background: var(--warning-light);
    color: #856404;
}

.activity-content {
    flex: 1;
}

.activity-title {
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 0.25rem;
}

.activity-description {
    color: var(--gray);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.activity-time {
    color: var(--gray);
    font-size: 0.75rem;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.quick-action-card {
    background: var(--white);
    border: 2px solid var(--light-gray);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    text-align: center;
    text-decoration: none;
    color: var(--dark);
    transition: all var(--transition-base);
}

.quick-action-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: var(--box-shadow-lg);
    color: var(--primary-color);
    text-decoration: none;
}

.quick-action-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    color: var(--gray);
    transition: all var(--transition-base);
}

.quick-action-card:hover .quick-action-icon {
    background: var(--primary-color);
    color: var(--white);
}

.quick-action-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.quick-action-description {
    color: var(--gray);
    font-size: 0.875rem;
}

.system-status {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--box-shadow);
}

.status-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--light-gray);
}

.status-item:last-child {
    border-bottom: none;
}

.status-label {
    font-weight: 500;
    color: var(--dark);
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.online {
    background: var(--success-color);
}

.status-dot.warning {
    background: var(--warning-color);
}

.status-dot.offline {
    background: var(--danger-color);
}

@media (max-width: 768px) {
    .dashboard-stats {
        margin-bottom: 1rem;
    }
    
    .stat-card {
        padding: 1rem;
        text-align: center;
    }
    
    .stat-card-icon {
        margin: 0 auto 1rem;
    }
    
    .chart-container {
        height: 300px;
        padding: 1rem;
    }
    
    .quick-actions {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.75rem;
    }
    
    .quick-action-card {
        padding: 1rem;
    }
    
    .quick-action-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
}
</style>
{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item active" aria-current="page">
            <i class="fas fa-tachometer-alt me-1"></i>Dashboard
        </li>
    </ol>
</nav>
{% 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-1">Dashboard</h1>
            <p class="text-muted mb-0">Welcome back! Here's what's happening with your DAI campaigns.</p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#refreshModal">
                <i class="fas fa-sync-alt me-1"></i>Refresh Data
            </button>
            <div class="dropdown">
                <button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    <i class="fas fa-download me-1"></i>Export
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#"><i class="fas fa-file-pdf me-2"></i>PDF Report</a></li>
                    <li><a class="dropdown-item" href="#"><i class="fas fa-file-excel me-2"></i>Excel Export</a></li>
                    <li><a class="dropdown-item" href="#"><i class="fas fa-file-csv me-2"></i>CSV Data</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row dashboard-stats">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stat-card">
                <div class="stat-card-icon primary">
                    <i class="fas fa-bullhorn"></i>
                </div>
                <div class="stat-card-value">{{ total_campaigns|default:"24" }}</div>
                <div class="stat-card-label">Active Campaigns</div>
                <div class="stat-card-change positive">
                    <i class="fas fa-arrow-up"></i>
                    <span>+12% from last month</span>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stat-card">
                <div class="stat-card-icon success">
                    <i class="fas fa-eye"></i>
                </div>
                <div class="stat-card-value">{{ total_impressions|default:"2.4M" }}</div>
                <div class="stat-card-label">Total Impressions</div>
                <div class="stat-card-change positive">
                    <i class="fas fa-arrow-up"></i>
                    <span>+8.5% from last week</span>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stat-card">
                <div class="stat-card-icon warning">
                    <i class="fas fa-mouse-pointer"></i>
                </div>
                <div class="stat-card-value">{{ click_through_rate|default:"3.2%" }}</div>
                <div class="stat-card-label">Click-Through Rate</div>
                <div class="stat-card-change negative">
                    <i class="fas fa-arrow-down"></i>
                    <span>-0.3% from last week</span>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stat-card">
                <div class="stat-card-icon info">
                    <i class="fas fa-dollar-sign"></i>
                </div>
                <div class="stat-card-value">${{ total_revenue|default:"45.2K" }}</div>
                <div class="stat-card-label">Total Revenue</div>
                <div class="stat-card-change positive">
                    <i class="fas fa-arrow-up"></i>
                    <span>+15.3% from last month</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="quick-actions">
        <a href="{% url 'campaigns:create' %}" class="quick-action-card">
            <div class="quick-action-icon">
                <i class="fas fa-plus"></i>
            </div>
            <div class="quick-action-title">New Campaign</div>
            <div class="quick-action-description">Create a new advertising campaign</div>
        </a>
        <a href="{% url 'advertisers:create' %}" class="quick-action-card">
            <div class="quick-action-icon">
                <i class="fas fa-building"></i>
            </div>
            <div class="quick-action-title">Add Advertiser</div>
            <div class="quick-action-description">Register a new advertiser</div>
        </a>
        <a href="{% url 'analytics:dashboard' %}" class="quick-action-card">
            <div class="quick-action-icon">
                <i class="fas fa-chart-line"></i>
            </div>
            <div class="quick-action-title">View Analytics</div>
            <div class="quick-action-description">Detailed performance reports</div>
        </a>
        <a href="{% url 'channels:list' %}" class="quick-action-card">
            <div class="quick-action-icon">
                <i class="fas fa-broadcast-tower"></i>
            </div>
            <div class="quick-action-title">Manage Channels</div>
            <div class="quick-action-description">Configure broadcast channels</div>
        </a>
    </div>

    <!-- Charts and Analytics -->
    <div class="row mb-4">
        <div class="col-xl-8 mb-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-chart-area me-2 text-primary"></i>
                        Campaign Performance
                    </h5>
                    <div class="btn-group btn-group-sm" role="group">
                        <input type="radio" class="btn-check" name="chartPeriod" id="chart7d" checked>
                        <label class="btn btn-outline-primary" for="chart7d">7D</label>
                        <input type="radio" class="btn-check" name="chartPeriod" id="chart30d">
                        <label class="btn btn-outline-primary" for="chart30d">30D</label>
                        <input type="radio" class="btn-check" name="chartPeriod" id="chart90d">
                        <label class="btn btn-outline-primary" for="chart90d">90D</label>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="performanceChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 mb-4">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-server me-2 text-success"></i>
                        System Status
                    </h5>
                </div>
                <div class="card-body">
                    <div class="system-status">
                        <div class="status-item">
                            <span class="status-label">DAI Server</span>
                            <div class="status-indicator">
                                <span class="status-dot online"></span>
                                <span class="text-success">Online</span>
                            </div>
                        </div>
                        <div class="status-item">
                            <span class="status-label">Database</span>
                            <div class="status-indicator">
                                <span class="status-dot online"></span>
                                <span class="text-success">Connected</span>
                            </div>
                        </div>
                        <div class="status-item">
                            <span class="status-label">Redis Cache</span>
                            <div class="status-indicator">
                                <span class="status-dot warning"></span>
                                <span class="text-warning">High Load</span>
                            </div>
                        </div>
                        <div class="status-item">
                            <span class="status-label">Celery Workers</span>
                            <div class="status-indicator">
                                <span class="status-dot online"></span>
                                <span class="text-success">4/4 Active</span>
                            </div>
                        </div>
                        <div class="status-item">
                            <span class="status-label">VAST Endpoint</span>
                            <div class="status-indicator">
                                <span class="status-dot online"></span>
                                <span class="text-success">Responding</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activity and Top Campaigns -->
    <div class="row">
        <div class="col-xl-6 mb-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-clock me-2 text-info"></i>
                        Recent Activity
                    </h5>
                    <a href="{% url 'core:activity_log' %}" class="btn btn-sm btn-outline-primary">
                        View All
                    </a>
                </div>
                <div class="card-body p-0">
                    <div class="recent-activity-item">
                        <div class="activity-icon campaign">
                            <i class="fas fa-bullhorn"></i>
                        </div>
                        <div class="activity-content">
                            <div class="activity-title">New campaign "Summer Sale 2024" created</div>
                            <div class="activity-description">Campaign created by John Doe for Advertiser ABC Corp</div>
                            <div class="activity-time">2 minutes ago</div>
                        </div>
                    </div>
                    <div class="recent-activity-item">
                        <div class="activity-icon advertiser">
                            <i class="fas fa-building"></i>
                        </div>
                        <div class="activity-content">
                            <div class="activity-title">Advertiser "TechStart Inc" approved</div>
                            <div class="activity-description">New advertiser registration approved by Admin</div>
                            <div class="activity-time">15 minutes ago</div>
                        </div>
                    </div>
                    <div class="recent-activity-item">
                        <div class="activity-icon analytics">
                            <i class="fas fa-chart-bar"></i>
                        </div>
                        <div class="activity-content">
                            <div class="activity-title">Weekly analytics report generated</div>
                            <div class="activity-description">Performance report for week ending March 15, 2024</div>
                            <div class="activity-time">1 hour ago</div>
                        </div>
                    </div>
                    <div class="recent-activity-item">
                        <div class="activity-icon system">
                            <i class="fas fa-cog"></i>
                        </div>
                        <div class="activity-content">
                            <div class="activity-title">System maintenance completed</div>
                            <div class="activity-description">Scheduled maintenance window completed successfully</div>
                            <div class="activity-time">3 hours ago</div>
                        </div>
                    </div>
                    <div class="recent-activity-item">
                        <div class="activity-icon campaign">
                            <i class="fas fa-pause"></i>
                        </div>
                        <div class="activity-content">
                            <div class="activity-title">Campaign "Spring Collection" paused</div>
                            <div class="activity-description">Campaign paused due to budget limit reached</div>
                            <div class="activity-time">5 hours ago</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6 mb-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-trophy me-2 text-warning"></i>
                        Top Performing Campaigns
                    </h5>
                    <a href="{% url 'campaigns:list' %}" class="btn btn-sm btn-outline-primary">
                        View All
                    </a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Campaign</th>
                                    <th>Impressions</th>
                                    <th>CTR</th>
                                    <th>Revenue</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="badge bg-success me-2">Active</div>
                                            <div>
                                                <div class="fw-semibold">Summer Sale 2024</div>
                                                <small class="text-muted">ABC Corp</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>1.2M</td>
                                    <td><span class="badge bg-success">4.2%</span></td>
                                    <td>$12,450</td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="badge bg-primary me-2">Active</div>
                                            <div>
                                                <div class="fw-semibold">Tech Launch</div>
                                                <small class="text-muted">TechStart Inc</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>890K</td>
                                    <td><span class="badge bg-warning">3.8%</span></td>
                                    <td>$8,920</td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="badge bg-warning me-2">Paused</div>
                                            <div>
                                                <div class="fw-semibold">Spring Collection</div>
                                                <small class="text-muted">Fashion Plus</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>654K</td>
                                    <td><span class="badge bg-success">5.1%</span></td>
                                    <td>$7,230</td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="badge bg-success me-2">Active</div>
                                            <div>
                                                <div class="fw-semibold">Holiday Special</div>
                                                <small class="text-muted">Retail Giant</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>432K</td>
                                    <td><span class="badge bg-warning">2.9%</span></td>
                                    <td>$5,180</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Refresh Modal -->
<div class="modal fade" id="refreshModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-sync-alt me-2"></i>
                    Refresh Dashboard Data
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>This will refresh all dashboard data including statistics, charts, and recent activity.</p>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="clearCache">
                    <label class="form-check-label" for="clearCache">
                        Clear cache and force refresh
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="refreshDashboard()">
                    <i class="fas fa-sync-alt me-1"></i>
                    Refresh Now
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Dashboard JavaScript functionality
document.addEventListener('DOMContentLoaded', function() {
    // Initialize performance chart
    initPerformanceChart();
    
    // Auto-refresh data every 5 minutes
    setInterval(function() {
        refreshDashboardData();
    }, 300000);
    
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});

function initPerformanceChart() {
    const ctx = document.getElementById('performanceChart').getContext('2d');
    
    const chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            datasets: [{
                label: 'Impressions',
                data: [120000, 190000, 300000, 500000, 200000, 300000, 450000],
                borderColor: 'rgb(102, 126, 234)',
                backgroundColor: 'rgba(102, 126, 234, 0.1)',
                tension: 0.4,
                fill: true
            }, {
                label: 'Clicks',
                data: [3600, 5700, 9000, 15000, 6000, 9000, 13500],
                borderColor: 'rgb(40, 167, 69)',
                backgroundColor: 'rgba(40, 167, 69, 0.1)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)'
                    }
                },
                x: {
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)'
                    }
                }
            },
            interaction: {
                intersect: false,
                mode: 'index'
            }
        }
    });
    
    // Handle period change
    document.querySelectorAll('input[name="chartPeriod"]').forEach(radio => {
        radio.addEventListener('change', function() {
            updateChartData(chart, this.id);
        });
    });
}

function updateChartData(chart, period) {
    // Simulate different data for different periods
    let newData, newLabels;
    
    switch(period) {
        case 'chart7d':
            newLabels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
            newData = {
                impressions: [120000, 190000, 300000, 500000, 200000, 300000, 450000],
                clicks: [3600, 5700, 9000, 15000, 6000, 9000, 13500]
            };
            break;
        case 'chart30d':
            newLabels = ['Week 1', 'Week 2', 'Week 3', 'Week 4'];
            newData = {
                impressions: [1200000, 1900000, 1500000, 1800000],
                clicks: [36000, 57000, 45000, 54000]
            };
            break;
        case 'chart90d':
            newLabels = ['Month 1', 'Month 2', 'Month 3'];
            newData = {
                impressions: [4500000, 5200000, 4800000],
                clicks: [135000, 156000, 144000]
            };
            break;
    }
    
    chart.data.labels = newLabels;
    chart.data.datasets[0].data = newData.impressions;
    chart.data.datasets[1].data = newData.clicks;
    chart.update();
}

function refreshDashboard() {
    const modal = bootstrap.Modal.getInstance(document.getElementById('refreshModal'));
    const clearCache = document.getElementById('clearCache').checked;
    
    // Show loading state
    AdtlasApp.showNotification('Refreshing dashboard data...', 'info', 0);
    
    // Simulate API call
    setTimeout(function() {
        // Hide loading notification
        document.querySelector('.notification')?.remove();
        
        // Show success message
        AdtlasApp.showNotification('Dashboard data refreshed successfully!', 'success');
        
        // Close modal
        modal.hide();
        
        // Optionally reload the page or update data
        if (clearCache) {
            window.location.reload();
        } else {
            refreshDashboardData();
        }
    }, 2000);
}

function refreshDashboardData() {
    // This function would typically make AJAX calls to refresh data
    // For demo purposes, we'll just update some random values
    
    const statValues = document.querySelectorAll('.stat-card-value');
    statValues.forEach(element => {
        // Add a subtle animation to indicate refresh
        element.style.opacity = '0.5';
        setTimeout(() => {
            element.style.opacity = '1';
        }, 500);
    });
}

// Export functions
function exportData(format) {
    AdtlasApp.showNotification(`Exporting data as ${format.toUpperCase()}...`, 'info');
    
    // Simulate export process
    setTimeout(() => {
        AdtlasApp.showNotification(`${format.toUpperCase()} export completed!`, 'success');
    }, 2000);
}
</script>
{% endblock %}