class SkyView {
    constructor() {
        this.map = null;
        this.aircraftMarkers = new Map();
        this.aircraftTrails = new Map();
        this.websocket = null;
        this.aircraftData = [];
        this.showTrails = false;
        this.currentView = 'map';
        this.charts = {};
        this.origin = { latitude: 37.7749, longitude: -122.4194, name: 'Default' };
        
        this.init();
    }

    init() {
        this.loadConfig().then(() => {
            this.initializeViews();
            this.initializeMap();
            this.initializeWebSocket();
            this.initializeEventListeners();
            this.initializeCharts();
            
            this.startPeriodicUpdates();
        });
    }

    async loadConfig() {
        try {
            const response = await fetch('/api/config');
            const config = await response.json();
            if (config.origin) {
                this.origin = config.origin;
            }
        } catch (error) {
            console.warn('Failed to load config, using defaults:', error);
        }
    }

    initializeViews() {
        const viewButtons = document.querySelectorAll('.view-btn');
        const views = document.querySelectorAll('.view');

        viewButtons.forEach(btn => {
            btn.addEventListener('click', () => {
                const viewId = btn.id.replace('-btn', '');
                this.switchView(viewId);
                
                viewButtons.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                
                views.forEach(v => v.classList.remove('active'));
                document.getElementById(viewId).classList.add('active');
            });
        });
    }

    switchView(view) {
        this.currentView = view;
        if (view === 'map' && this.map) {
            setTimeout(() => this.map.invalidateSize(), 100);
        }
    }

    initializeMap() {
        this.map = L.map('map', {
            center: [this.origin.latitude, this.origin.longitude],
            zoom: 8,
            zoomControl: true
        });

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

        L.marker([this.origin.latitude, this.origin.longitude], {
            icon: L.divIcon({
                html: '<div style="background: #e74c3c; width: 12px; height: 12px; border-radius: 50%; border: 2px solid white;"></div>',
                className: 'origin-marker',
                iconSize: [16, 16],
                iconAnchor: [8, 8]
            })
        }).addTo(this.map).bindPopup(`<b>Origin</b><br>${this.origin.name}`);

        L.circle([this.origin.latitude, this.origin.longitude], {
            radius: 185200,
            fillColor: 'transparent',
            color: '#404040',
            weight: 1,
            opacity: 0.5
        }).addTo(this.map);

        const centerBtn = document.getElementById('center-map');
        centerBtn.addEventListener('click', () => this.centerMapOnAircraft());

        const trailsBtn = document.getElementById('toggle-trails');
        trailsBtn.addEventListener('click', () => this.toggleTrails());
    }

    initializeWebSocket() {
        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
        const wsUrl = `${protocol}//${window.location.host}/ws`;
        
        this.websocket = new WebSocket(wsUrl);
        
        this.websocket.onopen = () => {
            document.getElementById('connection-status').textContent = 'Connected';
            document.getElementById('connection-status').className = 'connection-status connected';
        };
        
        this.websocket.onclose = () => {
            document.getElementById('connection-status').textContent = 'Disconnected';
            document.getElementById('connection-status').className = 'connection-status disconnected';
            setTimeout(() => this.initializeWebSocket(), 5000);
        };
        
        this.websocket.onmessage = (event) => {
            const message = JSON.parse(event.data);
            if (message.type === 'aircraft_update') {
                this.updateAircraftData(message.data);
            }
        };
    }

    initializeEventListeners() {
        const searchInput = document.getElementById('search-input');
        const sortSelect = document.getElementById('sort-select');
        
        searchInput.addEventListener('input', () => this.filterAircraftTable());
        sortSelect.addEventListener('change', () => this.sortAircraftTable());
    }

    initializeCharts() {
        const aircraftCtx = document.getElementById('aircraft-chart').getContext('2d');
        const messageCtx = document.getElementById('message-chart').getContext('2d');

        this.charts.aircraft = new Chart(aircraftCtx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: 'Aircraft Count',
                    data: [],
                    borderColor: '#00a8ff',
                    backgroundColor: 'rgba(0, 168, 255, 0.1)',
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    y: { beginAtZero: true }
                }
            }
        });

        this.charts.messages = new Chart(messageCtx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: 'Messages/sec',
                    data: [],
                    borderColor: '#2ecc71',
                    backgroundColor: 'rgba(46, 204, 113, 0.1)',
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    y: { beginAtZero: true }
                }
            }
        });
    }

    updateAircraftData(data) {
        this.aircraftData = data.aircraft || [];
        this.updateMapMarkers();
        this.updateAircraftTable();
        this.updateStats();
        
        document.getElementById('aircraft-count').textContent = `${this.aircraftData.length} aircraft`;
    }

    updateMapMarkers() {
        const currentHexCodes = new Set(this.aircraftData.map(a => a.hex));
        
        this.aircraftMarkers.forEach((marker, hex) => {
            if (!currentHexCodes.has(hex)) {
                this.map.removeLayer(marker);
                this.aircraftMarkers.delete(hex);
            }
        });

        this.aircraftData.forEach(aircraft => {
            if (!aircraft.lat || !aircraft.lon) return;

            const pos = [aircraft.lat, aircraft.lon];
            
            if (this.aircraftMarkers.has(aircraft.hex)) {
                const marker = this.aircraftMarkers.get(aircraft.hex);
                marker.setLatLng(pos);
                this.updateMarkerRotation(marker, aircraft.track);
                this.updatePopupContent(marker, aircraft);
            } else {
                const marker = this.createAircraftMarker(aircraft, pos);
                this.aircraftMarkers.set(aircraft.hex, marker);
            }

            if (this.showTrails) {
                this.updateTrail(aircraft.hex, pos);
            }
        });
    }

    createAircraftMarker(aircraft, pos) {
        const icon = L.divIcon({
            html: this.getAircraftIcon(aircraft),
            className: 'aircraft-marker',
            iconSize: [20, 20],
            iconAnchor: [10, 10]
        });

        const marker = L.marker(pos, { icon }).addTo(this.map);
        
        marker.bindPopup(this.createPopupContent(aircraft), {
            className: 'aircraft-popup'
        });

        return marker;
    }

    getAircraftIcon(aircraft) {
        const rotation = aircraft.track || 0;
        return `<svg width="20" height="20" viewBox="0 0 20 20" style="transform: rotate(${rotation}deg);">
            <polygon points="10,2 8,18 10,16 12,18" fill="#00a8ff" stroke="#ffffff" stroke-width="1"/>
        </svg>`;
    }

    updateMarkerRotation(marker, track) {
        if (track !== undefined) {
            const icon = L.divIcon({
                html: `<svg width="20" height="20" viewBox="0 0 20 20" style="transform: rotate(${track}deg);">
                    <polygon points="10,2 8,18 10,16 12,18" fill="#00a8ff" stroke="#ffffff" stroke-width="1"/>
                </svg>`,
                className: 'aircraft-marker',
                iconSize: [20, 20],
                iconAnchor: [10, 10]
            });
            marker.setIcon(icon);
        }
    }

    createPopupContent(aircraft) {
        return `
            <div class="aircraft-popup">
                <div class="flight">${aircraft.flight || aircraft.hex}</div>
                <div class="details">
                    <div>Altitude:</div><div>${aircraft.alt_baro || 'N/A'} ft</div>
                    <div>Speed:</div><div>${aircraft.gs || 'N/A'} kts</div>
                    <div>Track:</div><div>${aircraft.track || 'N/A'}°</div>
                    <div>Squawk:</div><div>${aircraft.squawk || 'N/A'}</div>
                </div>
            </div>
        `;
    }

    updatePopupContent(marker, aircraft) {
        marker.setPopupContent(this.createPopupContent(aircraft));
    }

    updateTrail(hex, pos) {
        if (!this.aircraftTrails.has(hex)) {
            this.aircraftTrails.set(hex, []);
        }
        
        const trail = this.aircraftTrails.get(hex);
        trail.push(pos);
        
        if (trail.length > 50) {
            trail.shift();
        }
        
        const polyline = L.polyline(trail, {
            color: '#00a8ff',
            weight: 2,
            opacity: 0.6
        }).addTo(this.map);
    }

    toggleTrails() {
        this.showTrails = !this.showTrails;
        
        if (!this.showTrails) {
            this.aircraftTrails.clear();
            this.map.eachLayer(layer => {
                if (layer instanceof L.Polyline) {
                    this.map.removeLayer(layer);
                }
            });
        }
        
        document.getElementById('toggle-trails').textContent = 
            this.showTrails ? 'Hide Trails' : 'Show Trails';
    }

    centerMapOnAircraft() {
        if (this.aircraftData.length === 0) return;
        
        const validAircraft = this.aircraftData.filter(a => a.lat && a.lon);
        if (validAircraft.length === 0) return;
        
        const group = new L.featureGroup(
            validAircraft.map(a => L.marker([a.lat, a.lon]))
        );
        
        this.map.fitBounds(group.getBounds().pad(0.1));
    }

    updateAircraftTable() {
        const tbody = document.getElementById('aircraft-tbody');
        tbody.innerHTML = '';
        
        let filteredData = [...this.aircraftData];
        
        const searchTerm = document.getElementById('search-input').value.toLowerCase();
        if (searchTerm) {
            filteredData = filteredData.filter(aircraft => 
                (aircraft.flight && aircraft.flight.toLowerCase().includes(searchTerm)) ||
                aircraft.hex.toLowerCase().includes(searchTerm)
            );
        }
        
        const sortBy = document.getElementById('sort-select').value;
        this.sortAircraft(filteredData, sortBy);
        
        filteredData.forEach(aircraft => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${aircraft.flight || '-'}</td>
                <td>${aircraft.hex}</td>
                <td>${aircraft.alt_baro || '-'}</td>
                <td>${aircraft.gs || '-'}</td>
                <td>${aircraft.track || '-'}</td>
                <td>${this.calculateDistance(aircraft) || '-'}</td>
                <td>${aircraft.messages || '-'}</td>
                <td>${aircraft.seen ? aircraft.seen.toFixed(1) : '-'}s</td>
            `;
            
            row.addEventListener('click', () => {
                if (aircraft.lat && aircraft.lon) {
                    this.switchView('map');
                    document.getElementById('map-view-btn').classList.add('active');
                    document.querySelectorAll('.view-btn:not(#map-view-btn)').forEach(btn => 
                        btn.classList.remove('active'));
                    document.querySelectorAll('.view:not(#map-view)').forEach(view => 
                        view.classList.remove('active'));
                    document.getElementById('map-view').classList.add('active');
                    
                    this.map.setView([aircraft.lat, aircraft.lon], 12);
                    
                    const marker = this.aircraftMarkers.get(aircraft.hex);
                    if (marker) {
                        marker.openPopup();
                    }
                }
            });
            
            tbody.appendChild(row);
        });
    }

    filterAircraftTable() {
        this.updateAircraftTable();
    }

    sortAircraftTable() {
        this.updateAircraftTable();
    }

    sortAircraft(aircraft, sortBy) {
        aircraft.sort((a, b) => {
            switch (sortBy) {
                case 'distance':
                    return (this.calculateDistance(a) || Infinity) - (this.calculateDistance(b) || Infinity);
                case 'altitude':
                    return (b.alt_baro || 0) - (a.alt_baro || 0);
                case 'speed':
                    return (b.gs || 0) - (a.gs || 0);
                case 'flight':
                    return (a.flight || a.hex).localeCompare(b.flight || b.hex);
                default:
                    return 0;
            }
        });
    }

    calculateDistance(aircraft) {
        if (!aircraft.lat || !aircraft.lon) return null;
        
        const centerLat = this.origin.latitude;
        const centerLng = this.origin.longitude;
        
        const R = 3440.065;
        const dLat = (aircraft.lat - centerLat) * Math.PI / 180;
        const dLon = (aircraft.lon - centerLng) * Math.PI / 180;
        const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                Math.cos(centerLat * Math.PI / 180) * Math.cos(aircraft.lat * Math.PI / 180) *
                Math.sin(dLon/2) * Math.sin(dLon/2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
        return (R * c).toFixed(1);
    }

    updateStats() {
        document.getElementById('total-aircraft').textContent = this.aircraftData.length;
        
        const withPosition = this.aircraftData.filter(a => a.lat && a.lon).length;
        const avgAltitude = this.aircraftData
            .filter(a => a.alt_baro)
            .reduce((sum, a) => sum + a.alt_baro, 0) / this.aircraftData.length || 0;
        
        const maxDistance = Math.max(...this.aircraftData
            .map(a => this.calculateDistance(a))
            .filter(d => d !== null)) || 0;
        
        document.getElementById('max-range').textContent = `${maxDistance} nm`;
        
        this.updateChartData();
    }

    updateChartData() {
        const now = new Date();
        const timeLabel = now.toLocaleTimeString();
        
        if (this.charts.aircraft) {
            const chart = this.charts.aircraft;
            chart.data.labels.push(timeLabel);
            chart.data.datasets[0].data.push(this.aircraftData.length);
            
            if (chart.data.labels.length > 20) {
                chart.data.labels.shift();
                chart.data.datasets[0].data.shift();
            }
            
            chart.update('none');
        }
        
        if (this.charts.messages) {
            const chart = this.charts.messages;
            const totalMessages = this.aircraftData.reduce((sum, a) => sum + (a.messages || 0), 0);
            const messagesPerSec = totalMessages / 60;
            
            chart.data.labels.push(timeLabel);
            chart.data.datasets[0].data.push(messagesPerSec);
            
            if (chart.data.labels.length > 20) {
                chart.data.labels.shift();
                chart.data.datasets[0].data.shift();
            }
            
            chart.update('none');
            
            document.getElementById('messages-sec').textContent = Math.round(messagesPerSec);
        }
    }

    startPeriodicUpdates() {
        setInterval(() => {
            if (this.websocket.readyState !== WebSocket.OPEN) {
                this.fetchAircraftData();
            }
        }, 5000);
        
        setInterval(() => {
            this.fetchStatsData();
        }, 10000);
    }

    async fetchAircraftData() {
        try {
            const response = await fetch('/api/aircraft');
            const data = await response.json();
            this.updateAircraftData(data);
        } catch (error) {
            console.error('Failed to fetch aircraft data:', error);
        }
    }

    async fetchStatsData() {
        try {
            const response = await fetch('/api/stats');
            const stats = await response.json();
            
            if (stats.total && stats.total.messages) {
                const messagesPerSec = stats.total.messages.last1min / 60;
                document.getElementById('messages-sec').textContent = Math.round(messagesPerSec);
            }
            
            if (stats.total && stats.total.signal_power) {
                document.getElementById('signal-strength').textContent = 
                    `${stats.total.signal_power.toFixed(1)} dB`;
            }
        } catch (error) {
            console.error('Failed to fetch stats:', error);
        }
    }
}

document.addEventListener('DOMContentLoaded', () => {
    new SkyView();
});