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

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

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/components.css' %}">
<style>
    .dashboard-header {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: white;
        padding: 2rem;
        border-radius: var(--border-radius-lg);
        margin-bottom: 2rem;
    }
    
    .dashboard-title {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    
    .dashboard-subtitle {
        opacity: 0.9;
        font-size: 1.1rem;
    }
    
    .quick-actions {
        display: flex;
        gap: 1rem;
        margin-top: 1.5rem;
    }
    
    .quick-action-btn {
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: var(--border-radius);
        text-decoration: none;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
    }
    
    .quick-action-btn:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
        color: white;
    }
    
    .stats-overview {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .chart-section {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
        margin-bottom: 2rem;
    }
    
    .recent-activity {
        background: var(--card-bg);
        border-radius: var(--border-radius-lg);
        padding: 1.5rem;
        box-shadow: var(--shadow-sm);
    }
    
    .activity-item {
        display: flex;
        align-items: center;
        padding: 1rem 0;
        border-bottom: 1px solid var(--border-color);
    }
    
    .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: 1.2rem;
    }
    
    .activity-icon.success {
        background: var(--success-light);
        color: var(--success-color);
    }
    
    .activity-icon.warning {
        background: var(--warning-light);
        color: var(--warning-color);
    }
    
    .activity-icon.info {
        background: var(--info-light);
        color: var(--info-color);
    }
    
    .activity-content {
        flex: 1;
    }
    
    .activity-title {
        font-weight: 600;
        margin-bottom: 0.25rem;
    }
    
    .activity-time {
        color: var(--text-muted);
        font-size: 0.875rem;
    }
    
    .performance-metrics {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }
    
    .metric-card {
        background: var(--card-bg);
        padding: 1.5rem;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
        text-align: center;
        transition: transform 0.3s ease;
    }
    
    .metric-card:hover {
        transform: translateY(-2px);
    }
    
    .metric-value {
        font-size: 2rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 0.5rem;
    }
    
    .metric-label {
        color: var(--text-muted);
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .metric-change {
        margin-top: 0.5rem;
        font-size: 0.875rem;
    }
    
    .metric-change.positive {
        color: var(--success-color);
    }
    
    .metric-change.negative {
        color: var(--danger-color);
    }
    
    @media (max-width: 768px) {
        .chart-section {
            grid-template-columns: 1fr;
        }
        
        .quick-actions {
            flex-direction: column;
        }
        
        .dashboard-title {
            font-size: 2rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="dashboard-container">
    <!-- Dashboard Header -->
    <div class="dashboard-header">
        <h1 class="dashboard-title">Welcome back, {{ user.first_name|default:user.username }}!</h1>
        <p class="dashboard-subtitle">Here's what's happening with your campaigns today.</p>
        <div class="quick-actions">
            <a href="{% url 'campaigns:create' %}" class="quick-action-btn">
                <i class="fas fa-plus me-2"></i>New Campaign
            </a>
            <a href="{% url 'analytics:reports' %}" class="quick-action-btn">
                <i class="fas fa-chart-line me-2"></i>View Reports
            </a>
            <a href="{% url 'creatives:upload' %}" class="quick-action-btn">
                <i class="fas fa-upload me-2"></i>Upload Creative
            </a>
        </div>
    </div>

    <!-- Stats Overview -->
    <div class="stats-overview">
        <div class="stat-card">
            <div class="stat-card-icon primary">
                <i class="fas fa-bullhorn"></i>
            </div>
            <div class="stat-card-content">
                <h3 class="stat-card-value" data-counter="{{ total_campaigns }}">0</h3>
                <p class="stat-card-label">Active Campaigns</p>
                <div class="stat-card-change positive">
                    <i class="fas fa-arrow-up"></i> +12% from last month
                </div>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-card-icon success">
                <i class="fas fa-eye"></i>
            </div>
            <div class="stat-card-content">
                <h3 class="stat-card-value" data-counter="{{ total_impressions }}">0</h3>
                <p class="stat-card-label">Total Impressions</p>
                <div class="stat-card-change positive">
                    <i class="fas fa-arrow-up"></i> +8.5% from yesterday
                </div>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-card-icon warning">
                <i class="fas fa-mouse-pointer"></i>
            </div>
            <div class="stat-card-content">
                <h3 class="stat-card-value" data-counter="{{ total_clicks }}">0</h3>
                <p class="stat-card-label">Total Clicks</p>
                <div class="stat-card-change positive">
                    <i class="fas fa-arrow-up"></i> +15.2% from yesterday
                </div>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-card-icon info">
                <i class="fas fa-dollar-sign"></i>
            </div>
            <div class="stat-card-content">
                <h3 class="stat-card-value">$<span data-counter="{{ total_revenue }}">0</span></h3>
                <p class="stat-card-label">Revenue Today</p>
                <div class="stat-card-change negative">
                    <i class="fas fa-arrow-down"></i> -2.1% from yesterday
                </div>
            </div>
        </div>
    </div>

    <!-- Performance Metrics -->
    <div class="performance-metrics">
        <div class="metric-card">
            <div class="metric-value">{{ ctr|floatformat:2 }}%</div>
            <div class="metric-label">Click-Through Rate</div>
            <div class="metric-change positive">
                <i class="fas fa-arrow-up"></i> +0.3%
            </div>
        </div>
        
        <div class="metric-card">
            <div class="metric-value">${{ cpc|floatformat:2 }}</div>
            <div class="metric-label">Cost Per Click</div>
            <div class="metric-change negative">
                <i class="fas fa-arrow-down"></i> -$0.05
            </div>
        </div>
        
        <div class="metric-card">
            <div class="metric-value">{{ conversion_rate|floatformat:2 }}%</div>
            <div class="metric-label">Conversion Rate</div>
            <div class="metric-change positive">
                <i class="fas fa-arrow-up"></i> +1.2%
            </div>
        </div>
        
        <div class="metric-card">
            <div class="metric-value">${{ roas|floatformat:2 }}</div>
            <div class="metric-label">Return on Ad Spend</div>
            <div class="metric-change positive">
                <i class="fas fa-arrow-up"></i> +$0.15
            </div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="chart-section">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Performance Overview</h3>
                <div class="card-actions">
                    <select class="form-select form-select-sm" id="chartPeriod">
                        <option value="7d">Last 7 days</option>
                        <option value="30d" selected>Last 30 days</option>
                        <option value="90d">Last 90 days</option>
                    </select>
                </div>
            </div>
            <div class="card-body">
                <div class="chart-container">
                    <canvas id="performanceChart" width="400" height="200"></canvas>
                </div>
            </div>
        </div>
        
        <div class="recent-activity">
            <h3 class="mb-3">Recent Activity</h3>
            <div class="activity-list">
                <div class="activity-item">
                    <div class="activity-icon success">
                        <i class="fas fa-check"></i>
                    </div>
                    <div class="activity-content">
                        <div class="activity-title">Campaign "Summer Sale" approved</div>
                        <div class="activity-time">2 minutes ago</div>
                    </div>
                </div>
                
                <div class="activity-item">
                    <div class="activity-icon info">
                        <i class="fas fa-upload"></i>
                    </div>
                    <div class="activity-content">
                        <div class="activity-title">New creative uploaded</div>
                        <div class="activity-time">15 minutes ago</div>
                    </div>
                </div>
                
                <div class="activity-item">
                    <div class="activity-icon warning">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                    <div class="activity-content">
                        <div class="activity-title">Budget alert: Campaign reaching limit</div>
                        <div class="activity-time">1 hour ago</div>
                    </div>
                </div>
                
                <div class="activity-item">
                    <div class="activity-icon success">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                    <div class="activity-content">
                        <div class="activity-title">Payment received: $2,450.00</div>
                        <div class="activity-time">3 hours ago</div>
                    </div>
                </div>
                
                <div class="activity-item">
                    <div class="activity-icon info">
                        <i class="fas fa-user-plus"></i>
                    </div>
                    <div class="activity-content">
                        <div class="activity-title">New advertiser registered</div>
                        <div class="activity-time">5 hours ago</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Data Tables Section -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Top Performing Campaigns</h3>
                    <div class="card-actions">
                        <button class="btn btn-sm btn-outline-primary" data-export-csv="campaignsTable">
                            <i class="fas fa-download me-1"></i>Export
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="data-table-container">
                        <div class="table-controls">
                            <div class="table-search">
                                <input type="text" class="form-control" placeholder="Search campaigns..." id="campaignSearch">
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover" id="campaignsTable">
                                <thead>
                                    <tr>
                                        <th data-sortable>Campaign Name</th>
                                        <th data-sortable>Status</th>
                                        <th data-sortable>Impressions</th>
                                        <th data-sortable>Clicks</th>
                                        <th data-sortable>CTR</th>
                                        <th data-sortable>Spend</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Summer Sale 2024</td>
                                        <td><span class="badge badge-success">Active</span></td>
                                        <td>125,430</td>
                                        <td>3,210</td>
                                        <td>2.56%</td>
                                        <td>$1,245.30</td>
                                        <td>
                                            <button class="btn btn-sm btn-outline-primary" data-tooltip="Edit Campaign">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-info" data-tooltip="View Analytics">
                                                <i class="fas fa-chart-line"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Back to School</td>
                                        <td><span class="badge badge-warning">Paused</span></td>
                                        <td>89,120</td>
                                        <td>2,145</td>
                                        <td>2.41%</td>
                                        <td>$892.15</td>
                                        <td>
                                            <button class="btn btn-sm btn-outline-primary" data-tooltip="Edit Campaign">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-info" data-tooltip="View Analytics">
                                                <i class="fas fa-chart-line"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Holiday Special</td>
                                        <td><span class="badge badge-success">Active</span></td>
                                        <td>156,890</td>
                                        <td>4,567</td>
                                        <td>2.91%</td>
                                        <td>$2,134.50</td>
                                        <td>
                                            <button class="btn btn-sm btn-outline-primary" data-tooltip="Edit Campaign">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-info" data-tooltip="View Analytics">
                                                <i class="fas fa-chart-line"></i>
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Campaign Distribution</h3>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="distributionChart" width="300" height="300"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Progress Indicators -->
    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Monthly Goals</h3>
                </div>
                <div class="card-body">
                    <div class="progress-item mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span>Revenue Goal</span>
                            <span>75%</span>
                        </div>
                        <div class="progress-bar-container">
                            <div class="progress-bar" data-progress="75"></div>
                        </div>
                    </div>
                    
                    <div class="progress-item mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span>Impression Goal</span>
                            <span>92%</span>
                        </div>
                        <div class="progress-bar-container">
                            <div class="progress-bar" data-progress="92"></div>
                        </div>
                    </div>
                    
                    <div class="progress-item">
                        <div class="d-flex justify-content-between mb-1">
                            <span>Conversion Goal</span>
                            <span>68%</span>
                        </div>
                        <div class="progress-bar-container">
                            <div class="progress-bar" data-progress="68"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">System Status</h3>
                </div>
                <div class="card-body">
                    <div class="status-item d-flex justify-content-between align-items-center mb-3">
                        <span>API Status</span>
                        <span class="badge badge-success">Online</span>
                    </div>
                    
                    <div class="status-item d-flex justify-content-between align-items-center mb-3">
                        <span>Database</span>
                        <span class="badge badge-success">Connected</span>
                    </div>
                    
                    <div class="status-item d-flex justify-content-between align-items-center mb-3">
                        <span>Cache</span>
                        <span class="badge badge-warning">Degraded</span>
                    </div>
                    
                    <div class="status-item d-flex justify-content-between align-items-center">
                        <span>External APIs</span>
                        <span class="badge badge-success">All Online</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Notification Container -->
<div class="notification-container"></div>

<!-- Sample Modal -->
<div class="modal-overlay" id="sampleModal">
    <div class="modal-dialog">
        <div class="modal-header">
            <h3 class="modal-title">Sample Modal</h3>
            <button class="modal-close">&times;</button>
        </div>
        <div class="modal-body">
            <p>This is a sample modal to demonstrate the modal functionality.</p>
            <form class="form-grid">
                <div class="form-group">
                    <label for="sampleInput">Sample Input</label>
                    <input type="text" id="sampleInput" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="sampleSelect">Sample Select</label>
                    <select id="sampleSelect" class="form-control">
                        <option value="">Choose an option</option>
                        <option value="option1">Option 1</option>
                        <option value="option2">Option 2</option>
                    </select>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="ADTLAS.closeModal(document.getElementById('sampleModal'))">Cancel</button>
            <button class="btn btn-primary">Save Changes</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/advanced.js' %}"></script>
<script>
// Dashboard-specific JavaScript
document.addEventListener('DOMContentLoaded', function() {
    // Initialize dashboard features
    ADTLAS.initCounters();
    ADTLAS.initProgressBars();
    
    // Create sample charts
    const performanceChart = document.getElementById('performanceChart');
    if (performanceChart) {
        ADTLAS.createChart(performanceChart, 'line', {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
            datasets: [{
                label: 'Impressions',
                data: [12000, 19000, 15000, 25000, 22000, 30000]
            }]
        });
    }
    
    const distributionChart = document.getElementById('distributionChart');
    if (distributionChart) {
        ADTLAS.createChart(distributionChart, 'pie', {
            labels: ['Display', 'Video', 'Native', 'Audio'],
            datasets: [{
                data: [45, 25, 20, 10]
            }]
        });
    }
    
    // Initialize table search
    const campaignSearch = document.getElementById('campaignSearch');
    if (campaignSearch) {
        campaignSearch.addEventListener('input', function() {
            ADTLAS.performTableSearch(this);
        });
    }
    
    // Chart period change handler
    const chartPeriod = document.getElementById('chartPeriod');
    if (chartPeriod) {
        chartPeriod.addEventListener('change', function() {
            // In a real application, this would update the chart data
            ADTLAS.showNotification('Chart updated for ' + this.options[this.selectedIndex].text, 'info');
        });
    }
    
    // Demo notifications
    setTimeout(() => {
        ADTLAS.showNotification('Welcome to your dashboard!', 'success');
    }, 1000);
    
    // Demo WebSocket simulation
    if (ADTLAS.config.enableWebSocket) {
        setInterval(() => {
            // Simulate real-time updates
            const randomUpdate = Math.random();
            if (randomUpdate > 0.95) {
                ADTLAS.showNotification('New campaign activity detected', 'info');
            }
        }, 10000);
    }
});

// Sample button click handlers
document.addEventListener('click', function(e) {
    if (e.target.matches('[data-demo-modal]')) {
        ADTLAS.showModal('sampleModal');
    }
    
    if (e.target.matches('[data-demo-notification]')) {
        const type = e.target.getAttribute('data-demo-notification');
        ADTLAS.showNotification('This is a ' + type + ' notification!', type);
    }
});
</script>
{% endblock %}