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

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

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/components.css' %}">
<style>
    .analytics-header {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: white;
        padding: 2rem;
        border-radius: var(--border-radius-lg);
        margin-bottom: 2rem;
    }
    
    .analytics-title {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    
    .analytics-subtitle {
        opacity: 0.9;
        font-size: 1.2rem;
    }
    
    .date-range-picker {
        background: rgba(255, 255, 255, 0.1);
        padding: 1rem;
        border-radius: var(--border-radius);
        margin-top: 1rem;
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .date-range-picker input {
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: white;
        padding: 0.5rem;
        border-radius: var(--border-radius-sm);
    }
    
    .date-range-picker input::placeholder {
        color: rgba(255, 255, 255, 0.7);
    }
    
    .metrics-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .metric-card {
        background: var(--card-bg);
        padding: 2rem;
        border-radius: var(--border-radius-lg);
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .metric-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
    
    .metric-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--primary-color);
    }
    
    .metric-card.success::before {
        background: var(--success-color);
    }
    
    .metric-card.warning::before {
        background: var(--warning-color);
    }
    
    .metric-card.danger::before {
        background: var(--danger-color);
    }
    
    .metric-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1rem;
    }
    
    .metric-title {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .metric-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-light);
        color: var(--primary-color);
    }
    
    .metric-value {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }
    
    .metric-change {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
    }
    
    .metric-change.positive {
        color: var(--success-color);
    }
    
    .metric-change.negative {
        color: var(--danger-color);
    }
    
    .metric-change.neutral {
        color: var(--text-muted);
    }
    
    .chart-container {
        background: var(--card-bg);
        padding: 2rem;
        border-radius: var(--border-radius-lg);
        box-shadow: var(--shadow-sm);
        margin-bottom: 2rem;
    }
    
    .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--border-color);
    }
    
    .chart-title {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--text-primary);
    }
    
    .chart-controls {
        display: flex;
        gap: 0.5rem;
    }
    
    .chart-control {
        padding: 0.5rem 1rem;
        border: 1px solid var(--border-color);
        background: transparent;
        border-radius: var(--border-radius-sm);
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.875rem;
    }
    
    .chart-control:hover {
        border-color: var(--primary-color);
        color: var(--primary-color);
    }
    
    .chart-control.active {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
    }
    
    .chart-placeholder {
        height: 400px;
        background: var(--gray-50);
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        font-size: 1.1rem;
    }
    
    .analytics-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
        margin-bottom: 2rem;
    }
    
    .performance-table {
        background: var(--card-bg);
        border-radius: var(--border-radius-lg);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }
    
    .table-header {
        background: var(--gray-50);
        padding: 1.5rem;
        border-bottom: 1px solid var(--border-color);
    }
    
    .table-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    
    .table-subtitle {
        color: var(--text-muted);
        font-size: 0.875rem;
    }
    
    .performance-stats {
        background: var(--card-bg);
        border-radius: var(--border-radius-lg);
        box-shadow: var(--shadow-sm);
        padding: 2rem;
    }
    
    .stats-header {
        margin-bottom: 2rem;
    }
    
    .stats-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    
    .stat-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 0;
        border-bottom: 1px solid var(--border-color);
    }
    
    .stat-item:last-child {
        border-bottom: none;
    }
    
    .stat-label {
        font-weight: 500;
        color: var(--text-primary);
    }
    
    .stat-value {
        font-weight: 600;
        color: var(--primary-color);
    }
    
    .progress-ring {
        width: 120px;
        height: 120px;
        margin: 1rem auto;
    }
    
    .progress-ring circle {
        fill: none;
        stroke-width: 8;
        stroke-linecap: round;
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
    }
    
    .progress-ring .background {
        stroke: var(--gray-200);
    }
    
    .progress-ring .progress {
        stroke: var(--primary-color);
        stroke-dasharray: 0 251.2;
        transition: stroke-dasharray 0.5s ease;
    }
    
    .progress-text {
        text-align: center;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-top: -80px;
        position: relative;
        z-index: 1;
    }
    
    .heatmap-container {
        background: var(--card-bg);
        padding: 2rem;
        border-radius: var(--border-radius-lg);
        box-shadow: var(--shadow-sm);
        margin-bottom: 2rem;
    }
    
    .heatmap-grid {
        display: grid;
        grid-template-columns: repeat(24, 1fr);
        gap: 2px;
        margin-top: 1rem;
    }
    
    .heatmap-cell {
        aspect-ratio: 1;
        border-radius: 2px;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
    }
    
    .heatmap-cell:hover {
        transform: scale(1.1);
        z-index: 10;
    }
    
    .heatmap-cell.level-0 {
        background: var(--gray-100);
    }
    
    .heatmap-cell.level-1 {
        background: rgba(var(--primary-rgb), 0.2);
    }
    
    .heatmap-cell.level-2 {
        background: rgba(var(--primary-rgb), 0.4);
    }
    
    .heatmap-cell.level-3 {
        background: rgba(var(--primary-rgb), 0.6);
    }
    
    .heatmap-cell.level-4 {
        background: rgba(var(--primary-rgb), 0.8);
    }
    
    .heatmap-cell.level-5 {
        background: var(--primary-color);
    }
    
    .heatmap-legend {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 1rem;
        font-size: 0.875rem;
        color: var(--text-muted);
    }
    
    .legend-item {
        width: 12px;
        height: 12px;
        border-radius: 2px;
    }
    
    .funnel-chart {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 2rem;
    }
    
    .funnel-stage {
        position: relative;
        background: var(--gray-50);
        border-radius: var(--border-radius);
        overflow: hidden;
    }
    
    .funnel-stage-fill {
        height: 60px;
        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 2rem;
        color: white;
        font-weight: 600;
        transition: width 0.5s ease;
    }
    
    .funnel-stage-label {
        font-size: 1rem;
    }
    
    .funnel-stage-value {
        font-size: 1.1rem;
    }
    
    .export-controls {
        display: flex;
        gap: 1rem;
        margin-bottom: 2rem;
    }
    
    .export-btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        border: 1px solid var(--border-color);
        background: white;
        border-radius: var(--border-radius);
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        color: var(--text-primary);
    }
    
    .export-btn:hover {
        border-color: var(--primary-color);
        color: var(--primary-color);
        text-decoration: none;
    }
    
    @media (max-width: 1024px) {
        .analytics-grid {
            grid-template-columns: 1fr;
        }
        
        .metrics-grid {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        }
    }
    
    @media (max-width: 768px) {
        .analytics-title {
            font-size: 2rem;
        }
        
        .date-range-picker {
            flex-direction: column;
            align-items: stretch;
        }
        
        .chart-header {
            flex-direction: column;
            align-items: stretch;
            gap: 1rem;
        }
        
        .chart-controls {
            justify-content: center;
        }
        
        .export-controls {
            flex-direction: column;
        }
        
        .heatmap-grid {
            grid-template-columns: repeat(12, 1fr);
        }
    }
</style>
{% endblock %}

{% block content %}
<!-- Analytics Header -->
<div class="analytics-header">
    <h1 class="analytics-title">Analytics Dashboard</h1>
    <p class="analytics-subtitle">Comprehensive insights into your campaign performance</p>
    
    <div class="date-range-picker">
        <label for="startDate" style="color: white;">From:</label>
        <input type="date" id="startDate" name="start_date">
        <label for="endDate" style="color: white;">To:</label>
        <input type="date" id="endDate" name="end_date">
        <button class="btn btn-light btn-sm" onclick="updateAnalytics()">
            <i class="fas fa-sync-alt me-2"></i>Update
        </button>
    </div>
</div>

<!-- Export Controls -->
<div class="export-controls">
    <a href="#" class="export-btn" onclick="exportData('pdf')">
        <i class="fas fa-file-pdf"></i>
        Export PDF
    </a>
    <a href="#" class="export-btn" onclick="exportData('excel')">
        <i class="fas fa-file-excel"></i>
        Export Excel
    </a>
    <a href="#" class="export-btn" onclick="exportData('csv')">
        <i class="fas fa-file-csv"></i>
        Export CSV
    </a>
    <a href="#" class="export-btn" onclick="scheduleReport()">
        <i class="fas fa-clock"></i>
        Schedule Report
    </a>
</div>

<!-- Key Metrics -->
<div class="metrics-grid">
    <div class="metric-card">
        <div class="metric-header">
            <div class="metric-title">Total Impressions</div>
            <div class="metric-icon">
                <i class="fas fa-eye"></i>
            </div>
        </div>
        <div class="metric-value" data-counter="2847593">0</div>
        <div class="metric-change positive">
            <i class="fas fa-arrow-up"></i>
            <span>12.5% vs last period</span>
        </div>
    </div>
    
    <div class="metric-card success">
        <div class="metric-header">
            <div class="metric-title">Total Clicks</div>
            <div class="metric-icon" style="background: var(--success-light); color: var(--success-color);">
                <i class="fas fa-mouse-pointer"></i>
            </div>
        </div>
        <div class="metric-value" data-counter="45672">0</div>
        <div class="metric-change positive">
            <i class="fas fa-arrow-up"></i>
            <span>8.3% vs last period</span>
        </div>
    </div>
    
    <div class="metric-card warning">
        <div class="metric-header">
            <div class="metric-title">Click-Through Rate</div>
            <div class="metric-icon" style="background: var(--warning-light); color: var(--warning-color);">
                <i class="fas fa-percentage"></i>
            </div>
        </div>
        <div class="metric-value">1.61%</div>
        <div class="metric-change negative">
            <i class="fas fa-arrow-down"></i>
            <span>2.1% vs last period</span>
        </div>
    </div>
    
    <div class="metric-card danger">
        <div class="metric-header">
            <div class="metric-title">Total Spend</div>
            <div class="metric-icon" style="background: var(--danger-light); color: var(--danger-color);">
                <i class="fas fa-dollar-sign"></i>
            </div>
        </div>
        <div class="metric-value">$<span data-counter="18945">0</span></div>
        <div class="metric-change positive">
            <i class="fas fa-arrow-up"></i>
            <span>5.7% vs last period</span>
        </div>
    </div>
    
    <div class="metric-card">
        <div class="metric-header">
            <div class="metric-title">Cost Per Click</div>
            <div class="metric-icon">
                <i class="fas fa-coins"></i>
            </div>
        </div>
        <div class="metric-value">$0.41</div>
        <div class="metric-change neutral">
            <i class="fas fa-minus"></i>
            <span>0.2% vs last period</span>
        </div>
    </div>
    
    <div class="metric-card">
        <div class="metric-header">
            <div class="metric-title">Conversions</div>
            <div class="metric-icon">
                <i class="fas fa-bullseye"></i>
            </div>
        </div>
        <div class="metric-value" data-counter="1247">0</div>
        <div class="metric-change positive">
            <i class="fas fa-arrow-up"></i>
            <span>15.2% vs last period</span>
        </div>
    </div>
</div>

<!-- Performance Chart -->
<div class="chart-container">
    <div class="chart-header">
        <h3 class="chart-title">Performance Overview</h3>
        <div class="chart-controls">
            <button class="chart-control active" data-period="7d">7 Days</button>
            <button class="chart-control" data-period="30d">30 Days</button>
            <button class="chart-control" data-period="90d">90 Days</button>
            <button class="chart-control" data-period="1y">1 Year</button>
        </div>
    </div>
    <div class="chart-placeholder" id="performanceChart">
        <div>
            <i class="fas fa-chart-line fa-3x mb-3"></i>
            <div>Performance chart will be rendered here</div>
        </div>
    </div>
</div>

<!-- Analytics Grid -->
<div class="analytics-grid">
    <!-- Performance Table -->
    <div class="performance-table">
        <div class="table-header">
            <h3 class="table-title">Top Performing Campaigns</h3>
            <p class="table-subtitle">Ranked by click-through rate</p>
        </div>
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Campaign</th>
                        <th>Impressions</th>
                        <th>Clicks</th>
                        <th>CTR</th>
                        <th>Spend</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div class="fw-bold">Summer Sale 2024</div>
                            <div class="text-muted small">Retail Campaign</div>
                        </td>
                        <td>485,293</td>
                        <td>12,847</td>
                        <td><span class="badge bg-success">2.65%</span></td>
                        <td>$3,247</td>
                        <td><span class="status-badge status-active">Active</span></td>
                    </tr>
                    <tr>
                        <td>
                            <div class="fw-bold">Tech Product Launch</div>
                            <div class="text-muted small">Technology Campaign</div>
                        </td>
                        <td>392,847</td>
                        <td>9,573</td>
                        <td><span class="badge bg-success">2.44%</span></td>
                        <td>$2,891</td>
                        <td><span class="status-badge status-active">Active</span></td>
                    </tr>
                    <tr>
                        <td>
                            <div class="fw-bold">Holiday Promotion</div>
                            <div class="text-muted small">Seasonal Campaign</div>
                        </td>
                        <td>567,129</td>
                        <td>13,284</td>
                        <td><span class="badge bg-warning">2.34%</span></td>
                        <td>$4,156</td>
                        <td><span class="status-badge status-paused">Paused</span></td>
                    </tr>
                    <tr>
                        <td>
                            <div class="fw-bold">Brand Awareness</div>
                            <div class="text-muted small">Branding Campaign</div>
                        </td>
                        <td>729,456</td>
                        <td>15,672</td>
                        <td><span class="badge bg-warning">2.15%</span></td>
                        <td>$5,234</td>
                        <td><span class="status-badge status-active">Active</span></td>
                    </tr>
                    <tr>
                        <td>
                            <div class="fw-bold">Mobile App Install</div>
                            <div class="text-muted small">App Campaign</div>
                        </td>
                        <td>234,891</td>
                        <td>4,672</td>
                        <td><span class="badge bg-danger">1.99%</span></td>
                        <td>$1,847</td>
                        <td><span class="status-badge status-active">Active</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
    <!-- Performance Stats -->
    <div class="performance-stats">
        <div class="stats-header">
            <h3 class="stats-title">Performance Goals</h3>
        </div>
        
        <!-- Goal Progress Ring -->
        <div class="text-center mb-4">
            <svg class="progress-ring" width="120" height="120">
                <circle class="background" cx="60" cy="60" r="40"></circle>
                <circle class="progress" cx="60" cy="60" r="40" id="goalProgress"></circle>
            </svg>
            <div class="progress-text" id="goalPercentage">0%</div>
            <div class="text-muted">Monthly Goal Achievement</div>
        </div>
        
        <div class="stat-item">
            <span class="stat-label">Target CTR</span>
            <span class="stat-value">2.5%</span>
        </div>
        <div class="stat-item">
            <span class="stat-label">Current CTR</span>
            <span class="stat-value">1.61%</span>
        </div>
        <div class="stat-item">
            <span class="stat-label">Target CPC</span>
            <span class="stat-value">$0.35</span>
        </div>
        <div class="stat-item">
            <span class="stat-label">Current CPC</span>
            <span class="stat-value">$0.41</span>
        </div>
        <div class="stat-item">
            <span class="stat-label">Monthly Budget</span>
            <span class="stat-value">$25,000</span>
        </div>
        <div class="stat-item">
            <span class="stat-label">Spent This Month</span>
            <span class="stat-value">$18,945</span>
        </div>
    </div>
</div>

<!-- Hourly Performance Heatmap -->
<div class="heatmap-container">
    <div class="chart-header">
        <h3 class="chart-title">Hourly Performance Heatmap</h3>
        <div class="chart-controls">
            <button class="chart-control active" data-metric="ctr">CTR</button>
            <button class="chart-control" data-metric="impressions">Impressions</button>
            <button class="chart-control" data-metric="clicks">Clicks</button>
        </div>
    </div>
    
    <div class="heatmap-grid" id="heatmapGrid">
        <!-- Heatmap cells will be generated by JavaScript -->
    </div>
    
    <div class="heatmap-legend">
        <span>Less</span>
        <div class="legend-item level-0"></div>
        <div class="legend-item level-1"></div>
        <div class="legend-item level-2"></div>
        <div class="legend-item level-3"></div>
        <div class="legend-item level-4"></div>
        <div class="legend-item level-5"></div>
        <span>More</span>
    </div>
</div>

<!-- Conversion Funnel -->
<div class="chart-container">
    <div class="chart-header">
        <h3 class="chart-title">Conversion Funnel</h3>
    </div>
    
    <div class="funnel-chart">
        <div class="funnel-stage">
            <div class="funnel-stage-fill" style="width: 100%;">
                <span class="funnel-stage-label">Impressions</span>
                <span class="funnel-stage-value">2,847,593</span>
            </div>
        </div>
        <div class="funnel-stage">
            <div class="funnel-stage-fill" style="width: 75%;">
                <span class="funnel-stage-label">Clicks</span>
                <span class="funnel-stage-value">45,672</span>
            </div>
        </div>
        <div class="funnel-stage">
            <div class="funnel-stage-fill" style="width: 45%;">
                <span class="funnel-stage-label">Landing Page Views</span>
                <span class="funnel-stage-value">38,294</span>
            </div>
        </div>
        <div class="funnel-stage">
            <div class="funnel-stage-fill" style="width: 25%;">
                <span class="funnel-stage-label">Add to Cart</span>
                <span class="funnel-stage-value">9,573</span>
            </div>
        </div>
        <div class="funnel-stage">
            <div class="funnel-stage-fill" style="width: 15%;">
                <span class="funnel-stage-label">Purchases</span>
                <span class="funnel-stage-value">1,247</span>
            </div>
        </div>
    </div>
</div>

<!-- Device Performance Chart -->
<div class="chart-container">
    <div class="chart-header">
        <h3 class="chart-title">Performance by Device</h3>
    </div>
    <div class="chart-placeholder" id="deviceChart">
        <div>
            <i class="fas fa-mobile-alt fa-3x mb-3"></i>
            <div>Device performance chart will be rendered here</div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/advanced.js' %}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize analytics dashboard
    initializeAnalytics();
    
    // Set default date range (last 30 days)
    const endDate = new Date();
    const startDate = new Date();
    startDate.setDate(startDate.getDate() - 30);
    
    document.getElementById('startDate').value = startDate.toISOString().split('T')[0];
    document.getElementById('endDate').value = endDate.toISOString().split('T')[0];
    
    // Initialize counters
    ADTLAS.initCounters();
    
    // Initialize progress ring
    updateGoalProgress(75.8); // 75.8% goal achievement
    
    // Initialize heatmap
    generateHeatmap();
    
    // Chart control handlers
    document.querySelectorAll('.chart-control').forEach(control => {
        control.addEventListener('click', function() {
            const parent = this.closest('.chart-header');
            parent.querySelectorAll('.chart-control').forEach(c => c.classList.remove('active'));
            this.classList.add('active');
            
            // Update chart based on selection
            const period = this.dataset.period;
            const metric = this.dataset.metric;
            
            if (period) {
                updatePerformanceChart(period);
            }
            
            if (metric) {
                updateHeatmap(metric);
            }
        });
    });
});

function initializeAnalytics() {
    // Simulate real-time data updates
    setInterval(updateRealTimeMetrics, 30000); // Update every 30 seconds
    
    // Initialize charts (placeholder for actual chart library integration)
    console.log('Analytics dashboard initialized');
}

function updateAnalytics() {
    const startDate = document.getElementById('startDate').value;
    const endDate = document.getElementById('endDate').value;
    
    if (!startDate || !endDate) {
        ADTLAS.showNotification('Please select both start and end dates', 'warning');
        return;
    }
    
    ADTLAS.showNotification('Updating analytics data...', 'info');
    
    // Simulate API call
    setTimeout(() => {
        ADTLAS.showNotification('Analytics data updated successfully', 'success');
        // Refresh all charts and metrics
        refreshAnalyticsData();
    }, 2000);
}

function refreshAnalyticsData() {
    // Simulate data refresh
    const metrics = document.querySelectorAll('[data-counter]');
    metrics.forEach(metric => {
        const currentValue = parseInt(metric.dataset.counter);
        const newValue = Math.floor(currentValue * (0.95 + Math.random() * 0.1));
        metric.dataset.counter = newValue;
        
        // Re-animate counter
        ADTLAS.animateCounter(metric, 0, newValue, 1000);
    });
    
    // Update goal progress
    const newProgress = 70 + Math.random() * 20;
    updateGoalProgress(newProgress);
    
    // Regenerate heatmap
    generateHeatmap();
}

function updateRealTimeMetrics() {
    // Simulate small real-time updates
    const impressionsElement = document.querySelector('[data-counter="2847593"]');
    if (impressionsElement) {
        const currentValue = parseInt(impressionsElement.dataset.counter);
        const increment = Math.floor(Math.random() * 100) + 50;
        const newValue = currentValue + increment;
        
        impressionsElement.dataset.counter = newValue;
        ADTLAS.animateCounter(impressionsElement, currentValue, newValue, 500);
    }
}

function updateGoalProgress(percentage) {
    const progressRing = document.getElementById('goalProgress');
    const progressText = document.getElementById('goalPercentage');
    
    if (progressRing && progressText) {
        const circumference = 2 * Math.PI * 40; // radius = 40
        const offset = circumference - (percentage / 100) * circumference;
        
        progressRing.style.strokeDasharray = `${circumference} ${circumference}`;
        progressRing.style.strokeDashoffset = offset;
        
        // Animate percentage text
        ADTLAS.animateCounter(progressText, 0, percentage, 1000, 1, '%');
    }
}

function generateHeatmap() {
    const heatmapGrid = document.getElementById('heatmapGrid');
    if (!heatmapGrid) return;
    
    heatmapGrid.innerHTML = '';
    
    // Generate 24 hours of data
    for (let hour = 0; hour < 24; hour++) {
        const cell = document.createElement('div');
        cell.className = 'heatmap-cell';
        
        // Simulate performance data (higher during business hours)
        let level = 0;
        if (hour >= 9 && hour <= 17) {
            level = Math.floor(Math.random() * 4) + 2; // 2-5
        } else if (hour >= 6 && hour <= 22) {
            level = Math.floor(Math.random() * 3) + 1; // 1-3
        } else {
            level = Math.floor(Math.random() * 2); // 0-1
        }
        
        cell.classList.add(`level-${level}`);
        cell.title = `${hour}:00 - Performance Level ${level}`;
        
        heatmapGrid.appendChild(cell);
    }
}

function updateHeatmap(metric) {
    ADTLAS.showNotification(`Updating heatmap for ${metric.toUpperCase()}`, 'info');
    
    setTimeout(() => {
        generateHeatmap();
        ADTLAS.showNotification('Heatmap updated successfully', 'success');
    }, 1000);
}

function updatePerformanceChart(period) {
    ADTLAS.showNotification(`Loading ${period} performance data`, 'info');
    
    setTimeout(() => {
        ADTLAS.showNotification('Performance chart updated', 'success');
    }, 1500);
}

function exportData(format) {
    ADTLAS.showNotification(`Preparing ${format.toUpperCase()} export...`, 'info');
    
    setTimeout(() => {
        ADTLAS.showNotification(`${format.toUpperCase()} export ready for download`, 'success');
        
        // Simulate file download
        const link = document.createElement('a');
        link.href = '#';
        link.download = `analytics_report.${format}`;
        link.click();
    }, 2000);
}

function scheduleReport() {
    // Show modal for scheduling options
    const modal = ADTLAS.createModal({
        title: 'Schedule Report',
        body: `
            <div class="form-group mb-3">
                <label for="reportFrequency">Frequency</label>
                <select id="reportFrequency" class="form-control">
                    <option value="daily">Daily</option>
                    <option value="weekly">Weekly</option>
                    <option value="monthly">Monthly</option>
                </select>
            </div>
            <div class="form-group mb-3">
                <label for="reportEmail">Email Address</label>
                <input type="email" id="reportEmail" class="form-control" placeholder="Enter email address">
            </div>
            <div class="form-group mb-3">
                <label for="reportFormat">Format</label>
                <select id="reportFormat" class="form-control">
                    <option value="pdf">PDF</option>
                    <option value="excel">Excel</option>
                    <option value="csv">CSV</option>
                </select>
            </div>
        `,
        actions: [
            {
                text: 'Cancel',
                class: 'btn-outline-secondary',
                action: () => ADTLAS.closeModal()
            },
            {
                text: 'Schedule Report',
                class: 'btn-primary',
                action: () => {
                    const frequency = document.getElementById('reportFrequency').value;
                    const email = document.getElementById('reportEmail').value;
                    const format = document.getElementById('reportFormat').value;
                    
                    if (!email) {
                        ADTLAS.showNotification('Please enter an email address', 'error');
                        return;
                    }
                    
                    ADTLAS.closeModal();
                    ADTLAS.showNotification(`${frequency} ${format.toUpperCase()} report scheduled for ${email}`, 'success');
                }
            }
        ]
    });
    
    ADTLAS.showModal(modal);
}

// Real-time WebSocket updates (if available)
if (typeof ADTLAS.websocket !== 'undefined' && ADTLAS.websocket) {
    ADTLAS.websocket.addEventListener('message', function(event) {
        const data = JSON.parse(event.data);
        
        if (data.type === 'analytics_update') {
            // Update specific metrics
            if (data.metric && data.value) {
                const element = document.querySelector(`[data-metric="${data.metric}"]`);
                if (element) {
                    ADTLAS.animateCounter(element, parseInt(element.textContent), data.value, 500);
                }
            }
        }
    });
}
</script>
{% endblock %}