{% extends "base.html" %}

{% block title %}Live Dashboard & Analytics{% endblock %}

{% block extra_css %}
<style>
    /* Combined styles from both dashboards */
    .stats-card {
        background: white;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        text-align: center;
        transition: transform 0.2s;
        height: 100%;
    }
    
    .stats-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    
    .stats-number {
        font-size: 2.5rem;
        font-weight: bold;
        margin: 10px 0;
    }
    
    .stats-label {
        color: #6c757d;
        font-size: 0.9rem;
        text-transform: uppercase;
    }
    
    .session-card {
        background: white;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 10px;
        border-left: 4px solid #28a745;
        transition: all 0.2s;
    }
    
    .session-card:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .activity-indicator {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 5px;
        animation: pulse 2s infinite;
    }
    
    .activity-active {
        background-color: #28a745;
    }
    
    .activity-recent {
        background-color: #ffc107;
    }
    
    .activity-inactive {
        background-color: #6c757d;
    }
    
    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
    }
    
    .geo-info {
        font-size: 0.85rem;
        color: #6c757d;
    }
    
    .device-info {
        background: #f8f9fa;
        padding: 5px 10px;
        border-radius: 15px;
        font-size: 0.85rem;
        display: inline-block;
        margin: 2px;
    }
    
    /* Analytics specific styles */
    .chart-container {
        position: relative;
        height: 300px;
        margin-top: 20px;
    }
    
    .live-indicator {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: var(--status-active);
        border-radius: 50%;
        animation: pulse 2s infinite;
        margin-right: 5px;
    }
    
    .anomaly-alert {
        padding: 1rem;
        border-left: 4px solid var(--status-danger);
        background: #fff5f5;
        margin-bottom: 0.5rem;
    }
    
    .device-badge {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        background: #e9ecef;
        border-radius: 4px;
        font-size: 0.85rem;
        margin-right: 0.5rem;
    }
    
    .nav-tabs .nav-link {
        color: #495057;
        border: none;
        border-bottom: 3px solid transparent;
        padding: 0.5rem 1rem;
    }
    
    .nav-tabs .nav-link.active {
        color: var(--bs-primary);
        background: none;
        border-bottom-color: var(--bs-primary);
    }
    
    .tab-content {
        padding-top: 1.5rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col">
        <h2><i class="bi bi-activity"></i> Live Dashboard & Analytics</h2>
        <p class="text-muted">Echtzeit-Übersicht und Analyse der Lizenznutzung</p>
    </div>
    <div class="col-auto">
        <span class="live-indicator"></span>
        <span class="text-muted">Live-Daten</span>
        <span class="text-muted ms-3">Auto-Refresh: <span id="refresh-countdown">30</span>s</span>
        <button class="btn btn-sm btn-outline-primary ms-2" onclick="refreshData()">
            <i class="bi bi-arrow-clockwise"></i> Jetzt aktualisieren
        </button>
    </div>
</div>

<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="stats-card">
            <i class="bi bi-people-fill text-primary" style="font-size: 2rem;"></i>
            <div class="stats-number text-primary" id="active-licenses">{{ live_stats[0] if live_stats else 0 }}</div>
            <div class="stats-label">Aktive Lizenzen</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card">
            <i class="bi bi-shield-check text-success" style="font-size: 2rem;"></i>
            <div class="stats-number text-success" id="total-validations">{{ live_stats[1] if live_stats else 0 }}</div>
            <div class="stats-label">Validierungen (5 Min)</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card">
            <i class="bi bi-laptop text-info" style="font-size: 2rem;"></i>
            <div class="stats-number text-info" id="unique-devices">{{ live_stats[2] if live_stats else 0 }}</div>
            <div class="stats-label">Aktive Geräte</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card">
            <i class="bi bi-globe text-warning" style="font-size: 2rem;"></i>
            <div class="stats-number text-warning" id="unique-ips">{{ live_stats[3] if live_stats else 0 }}</div>
            <div class="stats-label">Unique IPs</div>
        </div>
    </div>
</div>

<!-- Tabbed Interface -->
<ul class="nav nav-tabs" id="dashboardTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab">
            <i class="bi bi-speedometer2"></i> Übersicht
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="sessions-tab" data-bs-toggle="tab" data-bs-target="#sessions" type="button" role="tab">
            <i class="bi bi-people"></i> Aktive Sessions
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="analytics-tab" data-bs-toggle="tab" data-bs-target="#analytics" type="button" role="tab">
            <i class="bi bi-bar-chart-line"></i> Analytics
        </button>
    </li>
</ul>

<div class="tab-content" id="dashboardTabContent">
    <!-- Overview Tab -->
    <div class="tab-pane fade show active" id="overview" role="tabpanel">
        <div class="row">
            <!-- Activity Timeline Chart -->
            <div class="col-md-8 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bi bi-graph-up"></i> Aktivität (letzte 60 Minuten)</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="activityChart" height="80"></canvas>
                    </div>
                </div>
            </div>
            
            <!-- Recent Anomalies -->
            <div class="col-md-4 mb-4">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Aktuelle Anomalien</h5>
                        <a href="{{ url_for('admin.license_anomalies') }}" class="btn btn-sm btn-outline-primary">
                            Alle anzeigen
                        </a>
                    </div>
                    <div class="card-body" style="max-height: 400px; overflow-y: auto;">
                        {% if recent_anomalies %}
                            {% for anomaly in recent_anomalies %}
                            <div class="anomaly-alert">
                                <div class="d-flex justify-content-between">
                                    <span class="badge bg-{{ 'danger' if anomaly['severity'] == 'critical' else anomaly['severity'] }}">
                                        {{ anomaly['severity'].upper() }}
                                    </span>
                                    <small class="text-muted">{{ anomaly['detected_at'].strftime('%H:%M') }}</small>
                                </div>
                                <div class="mt-2">
                                    <strong>{{ anomaly['anomaly_type'].replace('_', ' ').title() }}</strong><br>
                                    <small>Lizenz: {{ anomaly['license_key'][:8] }}...</small>
                                </div>
                            </div>
                            {% endfor %}
                        {% else %}
                            <p class="text-muted text-center">Keine aktiven Anomalien</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Top Active Licenses -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Top Aktive Lizenzen (letzte 15 Min)</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Lizenzschlüssel</th>
                                <th>Kunde</th>
                                <th>Geräte</th>
                                <th>Validierungen</th>
                                <th>Zuletzt gesehen</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody id="top-licenses-tbody">
                            {% for license in top_licenses %}
                            <tr>
                                <td>
                                    <code>{{ license['license_key'][:12] }}...</code>
                                </td>
                                <td>{{ license['customer_name'] }}</td>
                                <td>
                                    <span class="device-badge">
                                        <i class="bi bi-laptop"></i> {{ license['device_count'] }}
                                    </span>
                                </td>
                                <td>{{ license['validation_count'] }}</td>
                                <td>{{ license['last_seen'].strftime('%H:%M:%S') }}</td>
                                <td>
                                    <span class="badge bg-success">Aktiv</span>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Active Sessions Tab -->
    <div class="tab-pane fade" id="sessions" role="tabpanel">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-people"></i> Aktive Kunden-Sessions (letzte 5 Minuten)</h5>
            </div>
            <div class="card-body">
                <div id="active-sessions-container">
                    {% for session in active_sessions %}
                    <div class="session-card">
                        <div class="row align-items-center">
                            <div class="col-md-4">
                                <h6 class="mb-1">
                                    <span class="activity-indicator activity-active"></span>
                                    {{ session.company_name }}
                                </h6>
                                <small class="text-muted">{{ session.contact_person }}</small>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-1">
                                    <i class="bi bi-key"></i> {{ session.license_key[:8] }}...
                                </div>
                                <div class="device-info">
                                    <i class="bi bi-laptop"></i> {{ session.active_devices }} Gerät(e)
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="geo-info">
                                    <i class="bi bi-geo-alt"></i> {{ session.ip_address }}
                                    <div><small>Hardware: {{ session.hardware_id[:12] }}...</small></div>
                                </div>
                            </div>
                            <div class="col-md-2 text-end">
                                <div class="text-muted">
                                    <i class="bi bi-clock"></i> 
                                    <span class="last-activity" data-timestamp="{{ session.last_activity }}">
                                        vor wenigen Sekunden
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% else %}
                    <div class="text-center text-muted py-5">
                        <i class="bi bi-inbox" style="font-size: 3rem;"></i>
                        <p>Keine aktiven Sessions in den letzten 5 Minuten</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        
        <!-- Latest Validations Stream -->
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="mb-0">Letzte Validierungen (Live-Stream)</h5>
            </div>
            <div class="card-body">
                <div id="validation-stream" style="max-height: 300px; overflow-y: auto;">
                    <!-- Will be populated by JavaScript -->
                </div>
            </div>
        </div>
    </div>
    
    <!-- Analytics Tab -->
    <div class="tab-pane fade" id="analytics" role="tabpanel">
        <div class="row">
            <div class="col-md-12 mb-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Validierungen pro Minute (30 Min)</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="validationChart" height="100"></canvas>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Export Options -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Berichte exportieren</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <label>Zeitraum auswählen:</label>
                        <select class="form-select" id="date-range" onchange="updateAnalytics()">
                            <option value="today">Heute</option>
                            <option value="week" selected>Letzte 7 Tage</option>
                            <option value="month">Letzte 30 Tage</option>
                            <option value="quarter">Letztes Quartal</option>
                            <option value="year">Letztes Jahr</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label>&nbsp;</label>
                        <div>
                            <button class="btn btn-outline-primary me-2" onclick="exportReport('pdf')">
                                <i class="bi bi-file-pdf"></i> PDF Export
                            </button>
                            <button class="btn btn-outline-success me-2" onclick="exportReport('excel')">
                                <i class="bi bi-file-excel"></i> Excel Export
                            </button>
                            <button class="btn btn-outline-info" onclick="exportReport('csv')">
                                <i class="bi bi-file-text"></i> CSV Export
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Hidden validation timeline data for chart -->
<script id="validation-timeline-data" type="application/json">
{{ validation_timeline|tojson }}
</script>
<script id="validation-rates-data" type="application/json">
{{ validation_rates|tojson }}
</script>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/date-fns@2.29.3/index.min.js"></script>
<script>
    let activityChart;
    let validationChart;
    let refreshInterval;
    let refreshCountdown = 30;
    
    // Initialize activity chart
    function initActivityChart() {
        const ctx = document.getElementById('activityChart').getContext('2d');
        const timelineData = JSON.parse(document.getElementById('validation-timeline-data').textContent);
        
        // Prepare data for chart
        const labels = timelineData.map(item => {
            const date = new Date(item.minute);
            return date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
        }).reverse();
        
        const data = timelineData.map(item => item.validations).reverse();
        
        activityChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Validierungen',
                    data: data,
                    borderColor: 'rgb(75, 192, 192)',
                    backgroundColor: 'rgba(75, 192, 192, 0.1)',
                    tension: 0.1,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    }
    
    // Initialize validation chart
    function initValidationChart() {
        const ctx = document.getElementById('validationChart').getContext('2d');
        const ratesData = JSON.parse(document.getElementById('validation-rates-data').textContent);
        
        validationChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ratesData.map(r => new Date(r[0]).toLocaleTimeString('de-DE', {hour: '2-digit', minute: '2-digit'})).reverse(),
                datasets: [{
                    label: 'Validierungen',
                    data: ratesData.map(r => r[1]).reverse(),
                    borderColor: 'rgb(40, 167, 69)',
                    backgroundColor: 'rgba(40, 167, 69, 0.1)',
                    tension: 0.1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    }
    
    // Update last activity times
    function updateActivityTimes() {
        document.querySelectorAll('.last-activity').forEach(el => {
            const timestamp = new Date(el.dataset.timestamp);
            const now = new Date();
            const seconds = Math.floor((now - timestamp) / 1000);
            
            if (seconds < 60) {
                el.textContent = 'vor wenigen Sekunden';
            } else if (seconds < 3600) {
                const minutes = Math.floor(seconds / 60);
                el.textContent = `vor ${minutes} Minute${minutes > 1 ? 'n' : ''}`;
            } else {
                const hours = Math.floor(seconds / 3600);
                el.textContent = `vor ${hours} Stunde${hours > 1 ? 'n' : ''}`;
            }
        });
    }
    
    // Refresh data via AJAX
    async function refreshData() {
        try {
            // Get live stats
            const statsResponse = await fetch('/monitoring/api/live-stats');
            const stats = await statsResponse.json();
            
            // Update stats cards
            document.getElementById('active-licenses').textContent = stats.active_licenses || 0;
            document.getElementById('unique-devices').textContent = stats.active_devices || 0;
            document.getElementById('total-validations').textContent = stats.validations_last_minute || 0;
            
            // Get active sessions
            const sessionsResponse = await fetch('/monitoring/api/active-sessions');
            const sessions = await sessionsResponse.json();
            
            // Update sessions display
            updateSessionsDisplay(sessions);
            
            // Fetch live stats for validation stream
            fetchLiveStats();
            
            // Reset countdown
            refreshCountdown = 30;
            
        } catch (error) {
            console.error('Error refreshing data:', error);
        }
    }
    
    // Update sessions display
    function updateSessionsDisplay(sessions) {
        const container = document.getElementById('active-sessions-container');
        
        if (sessions.length === 0) {
            container.innerHTML = `
                <div class="text-center text-muted py-5">
                    <i class="bi bi-inbox" style="font-size: 3rem;"></i>
                    <p>Keine aktiven Sessions in den letzten 5 Minuten</p>
                </div>
            `;
            return;
        }
        
        const sessionsHtml = sessions.map(session => {
            const secondsAgo = Math.floor(session.seconds_ago);
            let activityClass = 'activity-active';
            if (secondsAgo > 120) activityClass = 'activity-recent';
            if (secondsAgo > 240) activityClass = 'activity-inactive';
            
            return `
                <div class="session-card">
                    <div class="row align-items-center">
                        <div class="col-md-4">
                            <h6 class="mb-1">
                                <span class="activity-indicator ${activityClass}"></span>
                                ${session.company_name}
                            </h6>
                        </div>
                        <div class="col-md-3">
                            <div class="mb-1">
                                <i class="bi bi-key"></i> ${session.license_key.substring(0, 8)}...
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="geo-info">
                                <i class="bi bi-geo-alt"></i> ${session.ip_address}
                                <div><small>Hardware: ${session.hardware_id.substring(0, 12)}...</small></div>
                            </div>
                        </div>
                        <div class="col-md-2 text-end">
                            <div class="text-muted">
                                <i class="bi bi-clock"></i> 
                                vor ${formatSecondsAgo(secondsAgo)}
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }).join('');
        
        container.innerHTML = sessionsHtml;
    }
    
    // Fetch live statistics
    function fetchLiveStats() {
        fetch('{{ url_for("admin.license_live_stats") }}')
            .then(response => response.json())
            .then(data => {
                // Update validation stream
                const stream = document.getElementById('validation-stream');
                const newEntries = data.latest_validations.map(v => 
                    `<div class="d-flex justify-content-between border-bottom py-2">
                        <span>
                            <code>${v.license_key}</code> | 
                            <span class="text-muted">${v.hardware_id}</span>
                        </span>
                        <span>
                            <span class="badge bg-secondary">${v.ip_address}</span>
                            <span class="text-muted ms-2">${v.timestamp}</span>
                        </span>
                    </div>`
                ).join('');
                
                if (newEntries) {
                    stream.innerHTML = newEntries + stream.innerHTML;
                    // Keep only last 20 entries
                    const entries = stream.querySelectorAll('div');
                    if (entries.length > 20) {
                        for (let i = 20; i < entries.length; i++) {
                            entries[i].remove();
                        }
                    }
                }
            })
            .catch(error => console.error('Error fetching live stats:', error));
    }
    
    // Format seconds ago
    function formatSecondsAgo(seconds) {
        if (seconds < 60) return 'wenigen Sekunden';
        if (seconds < 3600) {
            const minutes = Math.floor(seconds / 60);
            return `${minutes} Minute${minutes > 1 ? 'n' : ''}`;
        }
        const hours = Math.floor(seconds / 3600);
        return `${hours} Stunde${hours > 1 ? 'n' : ''}`;
    }
    
    function updateAnalytics() {
        const range = document.getElementById('date-range').value;
        console.log('Updating analytics for range:', range);
        refreshData();
    }
    
    function exportReport(format) {
        // Redirect to export endpoint with format parameter
        const hours = 24; // Default to 24 hours
        window.location.href = `/export/monitoring?format=${format}&hours=${hours}`;
    }
    
    // Countdown timer
    function updateCountdown() {
        refreshCountdown--;
        document.getElementById('refresh-countdown').textContent = refreshCountdown;
        
        if (refreshCountdown <= 0) {
            refreshData();
        }
    }
    
    // Initialize on page load
    document.addEventListener('DOMContentLoaded', function() {
        initActivityChart();
        initValidationChart();
        updateActivityTimes();
        
        // Set up auto-refresh
        refreshInterval = setInterval(() => {
            updateCountdown();
            updateActivityTimes();
        }, 1000);
    });
    
    // Clean up on page leave
    window.addEventListener('beforeunload', function() {
        if (refreshInterval) {
            clearInterval(refreshInterval);
        }
    });
</script>
{% endblock %}