{% extends "base.html" %}

{% block title %}Dashboard - ADS-B Anomaly Detection{% endblock %}

{% block content %}
<h1 class="text-3xl font-bold text-aircraft-blue mb-8">ADS-B Anomaly Detection Dashboard</h1>

<!-- Statistics Cards -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
    <div class="bg-white rounded-lg shadow-lg p-6 text-center">
        <div class="text-3xl font-bold text-aircraft-accent">{{ aircraft_count }}</div>
        <div class="text-gray-600 text-sm">Active Aircraft</div>
    </div>
    <div class="bg-white rounded-lg shadow-lg p-6 text-center">
        <div class="text-3xl font-bold text-aircraft-accent">{{ alerts_count }}</div>
        <div class="text-gray-600 text-sm">Recent Alerts</div>
    </div>
    <div class="bg-white rounded-lg shadow-lg p-6 text-center">
        <div class="text-3xl font-bold text-aircraft-accent">{{ total_aircraft_tracked }}</div>
        <div class="text-gray-600 text-sm">Total Aircraft Tracked</div>
    </div>
    <div class="bg-white rounded-lg shadow-lg p-6 text-center">
        <div class="text-3xl font-bold text-aircraft-accent">{{ aircraft_tracked_24h }}</div>
        <div class="text-gray-600 text-sm">Aircraft Tracked (24h)</div>
    </div>
</div>

<!-- Main Dashboard Grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Map Panel (spans 2 columns on large screens) -->
    <div class="lg:col-span-2 bg-white rounded-lg shadow-lg p-6">
        <h2 class="text-xl font-bold text-aircraft-blue border-b-2 border-aircraft-accent pb-2 mb-4">Live Aircraft Map</h2>
        <div id="map" class="h-96 bg-gray-50 rounded-lg"></div>
    </div>

    <!-- Side Panel -->
    <div class="space-y-6">
        <!-- Active Sessions Table -->
        <div class="bg-white rounded-lg shadow p-4">
            <div class="flex justify-between items-center mb-2">
                <h3 class="text-lg font-medium">
                    Active Sessions (<span id="active-count">{{ aircraft_count }}</span>)
                </h3>
                <a href="/sessions" class="text-blue-600 hover:text-blue-800 text-sm">
                    View All Sessions
                </a>
            </div>
            <div id="aircraft-list" class="max-h-80 overflow-y-auto">
                {% if aircraft.len() > 0 %}
                <table class="w-full table-fixed">
                    <thead>
                        <tr>
                            <th class="w-20 px-2 py-1 text-left text-xs text-gray-500">Aircraft</th>
                            <th class="px-2 py-1 text-left text-xs text-gray-500">Flight</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for aircraft in aircraft %}
                        <tr class="hover:bg-gray-50 cursor-pointer" onclick="window.location.href='/aircraft/{{ aircraft.hex }}'">
                            <td class="px-2 py-1 truncate">
                                <div class="font-mono text-xs">{{ aircraft.hex }}</div>
                            </td>
                            <td class="px-2 py-1 text-sm truncate">
                                {% match aircraft.flight %}
                                {% when Some with (flight) %}{{ flight }}
                                {% when None %}<span class="text-gray-400">—</span>
                                {% endmatch %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <div class="text-center text-gray-500 py-12">
                    <div class="text-4xl mb-2">✈️</div>
                    <div class="text-lg font-medium">No active sessions</div>
                    <div class="text-sm">Aircraft will appear here when they start transmitting</div>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Recent Alerts Panel -->
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h2 class="text-xl font-bold text-aircraft-blue border-b-2 border-aircraft-accent pb-2 mb-4">
                Recent Alerts ({{ alerts_count }})
            </h2>
            <div class="max-h-80 overflow-y-auto space-y-2">
                {% for alert in alerts %}
                <div class="bg-yellow-50 border-l-4 border-yellow-400 p-3 rounded">
                    <div class="font-bold font-mono text-yellow-800">{{ alert.hex }}</div>
                    <div class="text-yellow-700 text-sm capitalize">{{ alert.anomaly_type }}</div>
                </div>
                {% else %}
                <div class="text-center text-gray-500 py-8">
                    <div class="text-4xl mb-2">✅</div>
                    <div>No recent alerts</div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- Include Leaflet for the map -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script>
    // Initialize map centered on Chicago area
    var map = L.map('map').setView([{{ map_center_lat }}, {{ map_center_lon }}], 8);
    var aircraftMarkers = [];
    var aircraftMarkersMap = new Map(); // Track markers by hex for incremental updates

    // Add OpenStreetMap tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    // Create custom airplane icon
    var airplaneIcon = L.divIcon({
        html: '✈️',
        iconSize: [24, 24],
        iconAnchor: [12, 12],
        popupAnchor: [0, -12],
        className: 'airplane-icon'
    });

    // Create red center point icon
    var centerIcon = L.divIcon({
        html: '🔴',
        iconSize: [20, 20],
        iconAnchor: [10, 10],
        popupAnchor: [0, -10],
        className: 'center-icon'
    });

    // Add CSS for custom icons
    var style = document.createElement('style');
    style.textContent = `
        .airplane-icon, .center-icon {
            background: none !important;
            border: none !important;
            font-size: 18px;
            text-align: center;
            line-height: 24px;
            filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
        }
        .center-icon {
            font-size: 16px;
            line-height: 20px;
        }
    `;
    document.head.appendChild(style);

    // Add individual aircraft markers from real database data
    var aircraftData = [
        {% for aircraft in aircraft %}
        {% if aircraft.has_position %}
        {% match aircraft.lat %}
        {% when Some with (lat) %}
        {% match aircraft.lon %}
        {% when Some with (lon) %}
        {
            hex: "{{ aircraft.hex }}",
            flight: "{% match aircraft.flight %}{% when Some with (flight) %}{{ flight }}{% when None %}Unknown{% endmatch %}",
            lat: {{ lat }},
            lon: {{ lon }},
            alt: {% match aircraft.altitude %}{% when Some with (alt) %}{{ alt }}{% when None %}null{% endmatch %},
            speed: {% match aircraft.speed %}{% when Some with (speed) %}{{ speed }}{% when None %}null{% endmatch %},
            hasPosition: true
        }{% if !loop.last %},{% endif %}
        {% when None %}{% endmatch %}
        {% when None %}{% endmatch %}
        {% endif %}
        {% endfor %}
    ];

    // Fall back to sample aircraft if no real position data is available
    var sampleAircraft = [
        {hex: "SAMPLE1", flight: "UAL123", lat: 41.9742, lon: -87.9073, alt: 25000, speed: 450},
        {hex: "SAMPLE2", flight: "AAL456", lat: 41.7868, lon: -87.7522, alt: 32000, speed: 380},
        {hex: "SAMPLE3", flight: "DAL789", lat: 41.8500, lon: -87.6500, alt: 28000, speed: 420}
    ];

    // Use real aircraft data if available, otherwise fall back to samples
    var displayAircraft = aircraftData.length > 0 ? aircraftData : sampleAircraft;

    displayAircraft.forEach(function(aircraft) {
        var marker = L.marker([aircraft.lat, aircraft.lon], {icon: airplaneIcon}).addTo(map);

        var popupContent = `
            <div class="p-3 min-w-48">
                <div class="font-bold font-mono text-lg text-blue-900">${aircraft.hex}</div>
                <div class="text-gray-600 text-sm mb-2">Flight: ${aircraft.flight}</div>
                <div class="text-xs text-gray-500 space-y-1">
                    <div>Lat: ${aircraft.lat.toFixed(4)}</div>
                    <div>Lon: ${aircraft.lon.toFixed(4)}</div>
                    <div>Alt: ${aircraft.alt ? aircraft.alt + ' ft' : '—'}</div>
                    <div>Speed: ${aircraft.speed ? aircraft.speed + ' kt' : '—'}</div>
                </div>
                <div class="mt-2">
                    <a href="/aircraft/${aircraft.hex}" class="inline-block px-3 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 transition-colors">
                        View Details
                    </a>
                </div>
            </div>
        `;

        marker.bindPopup(popupContent);
        aircraftMarkers.push(marker);
        aircraftMarkersMap.set(aircraft.hex, marker);
    });

    // If we have aircraft markers, fit the map to show all of them
    if (aircraftMarkers.length > 0) {
        var group = new L.featureGroup(aircraftMarkers);
        map.fitBounds(group.getBounds().pad(0.1));
    }

    // Add red center point marker to show calculated center
    if ({{ aircraft_count }} > 0) {
        var centerMarker = L.marker([{{ map_center_lat }}, {{ map_center_lon }}], {
            icon: centerIcon
        }).addTo(map);

        centerMarker.bindPopup(`
            <div class="p-3 text-center">
                <div class="font-bold text-red-900 text-lg">📡 ADS-B Antenna</div>
                <div class="text-gray-600">Receiver Location</div>
                <div class="text-gray-600">{{ aircraft_count }} aircraft tracked</div>
                <div class="text-gray-600">${aircraftMarkers.length} with position</div>
                <div class="text-xs text-gray-500 mt-2">
                    <div>{{ map_center_lat }}, {{ map_center_lon }}</div>
                </div>
            </div>
        `);
    }

    // Real-time WebSocket connection for aircraft data
    function initializeWebSocket() {
        const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
        const wsUrl = `${wsProtocol}//${window.location.host}/ws/aircraft`;

        console.log('Connecting to WebSocket:', wsUrl);

        const ws = new WebSocket(wsUrl);

        ws.onopen = function() {
            console.log('WebSocket connected for aircraft data');
        };

        ws.onmessage = function(event) {
            console.log('WebSocket received data (first 200 chars):', event.data.substring(0, 200));

            // Create a temporary container to parse the HTML
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = event.data;

            console.log('Parsed tempDiv children count:', tempDiv.children.length);

            // Process out-of-band swaps manually to avoid DOM pollution
            const oobElements = tempDiv.querySelectorAll('[hx-swap-oob]');
            console.log('Found out-of-band elements:', oobElements.length);

            oobElements.forEach((element, index) => {
                const swapSpec = element.getAttribute('hx-swap-oob');
                console.log(`OOB ${index}: swap spec="${swapSpec}", tag="${element.tagName}"`);
                const [swapType, targetSelector] = swapSpec.split(':');

                if (swapType === 'innerHTML' && targetSelector) {
                    const targetElement = document.querySelector(targetSelector);
                    if (targetElement) {
                        console.log(`Updating ${targetSelector} with ${element.innerHTML.length} chars`);
                        targetElement.innerHTML = element.innerHTML;
                    } else {
                        console.error(`Target element not found: ${targetSelector}`);
                    }
                }
            });

            // Execute any script elements
            const scripts = tempDiv.querySelectorAll('script');
            console.log('Found script elements:', scripts.length);
            scripts.forEach((script, index) => {
                console.log(`Executing script ${index}:`, script.textContent.substring(0, 100));
                eval(script.textContent);
            });

            // Check for truly problematic leftover elements (direct children only, excluding whitespace)
            const directChildren = Array.from(tempDiv.children);
            const unprocessedElements = directChildren.filter(el =>
                !el.hasAttribute('hx-swap-oob') &&
                el.tagName.toLowerCase() !== 'script'
            );

            if (unprocessedElements.length > 0) {
                console.warn('Found unprocessed direct children that might cause DOM pollution:', unprocessedElements);
                // These elements would normally be ignored, but let's see what they are
                unprocessedElements.forEach((el, idx) => {
                    console.warn(`Unprocessed element ${idx}:`, el.tagName, el.className, el.textContent?.substring(0, 50));
                });
            } else {
                console.log('All elements processed correctly, no DOM pollution');
            }
        };

        ws.onclose = function() {
            console.log('WebSocket disconnected, attempting to reconnect in 5 seconds...');
            setTimeout(initializeWebSocket, 5000);
        };

        ws.onerror = function(error) {
            console.error('WebSocket error:', error);
        };
    }

    // Function to update the map with new aircraft data (called by WebSocket updates)
    function updateAircraftMap(aircraftData, centerLat, centerLon) {
        // Get current hex codes for comparison
        var currentHexes = new Set(aircraftData.map(a => a.hex));

        // Remove markers for aircraft that are no longer active (expired sessions)
        for (let [hex, marker] of aircraftMarkersMap) {
            if (!currentHexes.has(hex)) {
                console.log('Removing expired aircraft:', hex);
                map.removeLayer(marker);
                aircraftMarkersMap.delete(hex);
                // Remove from array too
                const index = aircraftMarkers.indexOf(marker);
                if (index > -1) {
                    aircraftMarkers.splice(index, 1);
                }
            }
        }

        // Update or add markers for current aircraft
        aircraftData.forEach(function(aircraft) {
            if (aircraft.hasPosition && aircraft.lat && aircraft.lon) {
                var existingMarker = aircraftMarkersMap.get(aircraft.hex);

                if (existingMarker) {
                    // Update existing marker position
                    existingMarker.setLatLng([aircraft.lat, aircraft.lon]);

                    // Update popup content
                    var popupContent = `
                        <div class="p-3 min-w-48">
                            <div class="font-bold font-mono text-lg text-blue-900">${aircraft.hex}</div>
                            <div class="text-gray-600 text-sm mb-2">Flight: ${aircraft.flight}</div>
                            <div class="text-xs text-gray-500 space-y-1">
                                <div>Lat: ${aircraft.lat.toFixed(4)}</div>
                                <div>Lon: ${aircraft.lon.toFixed(4)}</div>
                                <div>Alt: ${aircraft.alt ? aircraft.alt + ' ft' : '—'}</div>
                                <div>Speed: ${aircraft.speed ? aircraft.speed + ' kt' : '—'}</div>
                            </div>
                            <div class="mt-2">
                                <a href="/aircraft/${aircraft.hex}" class="inline-block px-3 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 transition-colors">
                                    View Details
                                </a>
                            </div>
                        </div>
                    `;
                    existingMarker.setPopupContent(popupContent);
                } else {
                    // Create new marker for new aircraft
                    console.log('Adding new aircraft:', aircraft.hex);
                    var marker = L.marker([aircraft.lat, aircraft.lon], {icon: airplaneIcon}).addTo(map);

                    var popupContent = `
                        <div class="p-3 min-w-48">
                            <div class="font-bold font-mono text-lg text-blue-900">${aircraft.hex}</div>
                            <div class="text-gray-600 text-sm mb-2">Flight: ${aircraft.flight}</div>
                            <div class="text-xs text-gray-500 space-y-1">
                                <div>Lat: ${aircraft.lat.toFixed(4)}</div>
                                <div>Lon: ${aircraft.lon.toFixed(4)}</div>
                                <div>Alt: ${aircraft.alt ? aircraft.alt + ' ft' : '—'}</div>
                                <div>Speed: ${aircraft.speed ? aircraft.speed + ' kt' : '—'}</div>
                            </div>
                            <div class="mt-2">
                                <a href="/aircraft/${aircraft.hex}" class="inline-block px-3 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 transition-colors">
                                    View Details
                                </a>
                            </div>
                        </div>
                    `;

                    marker.bindPopup(popupContent);
                    aircraftMarkers.push(marker);
                    aircraftMarkersMap.set(aircraft.hex, marker);
                }
            }
        });

        // Only adjust map bounds for significant changes (new aircraft or major position shifts)
        // Use a more stable approach to prevent constant map jumping
        if (aircraftMarkers.length > 0) {
            var group = new L.featureGroup(aircraftMarkers);
            if (group.getBounds().isValid()) {
                var currentBounds = map.getBounds();
                var newBounds = group.getBounds().pad(0.15);

                // Only adjust if there are aircraft significantly outside the current view
                var aircraftOutsideView = aircraftMarkers.filter(marker =>
                    !currentBounds.contains(marker.getLatLng())
                ).length;

                // Only refit if more than 25% of aircraft are outside view AND
                // we haven't adjusted recently (prevent rapid successive adjustments)
                var shouldAdjust = aircraftOutsideView > aircraftMarkers.length * 0.25;

                if (shouldAdjust && (!window.lastMapAdjustment ||
                    Date.now() - window.lastMapAdjustment > 10000)) { // 10 second cooldown
                    map.fitBounds(newBounds);
                    window.lastMapAdjustment = Date.now();
                    console.log('Adjusted map bounds: ' + aircraftOutsideView + ' aircraft were outside view');
                }
            }
        }
    }

    // Initialize WebSocket connection on page load
    initializeWebSocket();
</script>
{% endblock %}