/**
 * RF Mapper - Main Application JavaScript
 */

// Global state
let currentView = '3d';
let scanData = null;
let map = null;
let markers = [];
let filters = {
    wifi: false,
    bluetooth: true
};

// Device trails state - stores trail data per device
let deviceTrails = {}; // { deviceId: { type, name, points: [{ timestamp, distance, lat, lon }, ...] } }

// Device manual positions - loaded from database
let manualPositions = {}; // { deviceId: { lat_offset, lon_offset } }

// Auto-scan state
let autoScanEnabled = false;
let autoScanPollInterval = null;

// Real-time BT tracking state
let liveTrackingEnabled = false;
let liveTrackingInterval = null;
const LIVE_TRACKING_INTERVAL_MS = 4000; // 4 seconds

// Statistical movement detection
const SAMPLE_HISTORY_SIZE = 5;  // Number of samples to keep for averaging
const MOVEMENT_THRESHOLD = 1.5; // meters - movement must exceed this + stddev margin
const MIN_SAMPLES_FOR_MOVEMENT = 3; // Need at least this many samples before detecting movement

// Store distance history per device: { address: { samples: [], timestamps: [] } }
let deviceDistanceHistory = {};

// Track consecutive missed detections per device: { address: missCount }
let deviceMissCount = {};
const MAX_MISSED_SCANS = 5; // Remove device after this many consecutive misses (~20s with 4s interval)

// Calculate mean of array
function mean(arr) {
    if (arr.length === 0) return 0;
    return arr.reduce((a, b) => a + b, 0) / arr.length;
}

// Calculate standard deviation
function stddev(arr) {
    if (arr.length < 2) return 0;
    const avg = mean(arr);
    const squareDiffs = arr.map(x => Math.pow(x - avg, 2));
    return Math.sqrt(mean(squareDiffs));
}

// Check if device is moving based on statistical analysis
function isDeviceMoving(address, newDistance) {
    // Initialize history if needed
    if (!deviceDistanceHistory[address]) {
        deviceDistanceHistory[address] = { samples: [], timestamps: [] };
    }

    const history = deviceDistanceHistory[address];
    const now = Date.now();

    // Add new sample
    history.samples.push(newDistance);
    history.timestamps.push(now);

    // Remove old samples (keep last SAMPLE_HISTORY_SIZE)
    while (history.samples.length > SAMPLE_HISTORY_SIZE) {
        history.samples.shift();
        history.timestamps.shift();
    }

    // Need minimum samples to determine movement
    if (history.samples.length < MIN_SAMPLES_FOR_MOVEMENT) {
        return false;
    }

    // Calculate statistics from older samples (exclude the newest one)
    const olderSamples = history.samples.slice(0, -1);
    const avg = mean(olderSamples);
    const sd = stddev(olderSamples);

    // Movement threshold = base threshold + 2 standard deviations (95% confidence)
    const dynamicThreshold = MOVEMENT_THRESHOLD + (2 * sd);

    // Check if current reading deviates significantly from the average
    const deviation = Math.abs(newDistance - avg);
    const isMoving = deviation > dynamicThreshold;

    // Debug log for significant movements
    if (isMoving) {
        console.log(`[Movement] ${address}: dist=${newDistance.toFixed(2)}m, avg=${avg.toFixed(2)}m, sd=${sd.toFixed(2)}, threshold=${dynamicThreshold.toFixed(2)}m`);
    }

    return isMoving;
}

// Device positions for hit detection (radar view)
let devicePositions = [];

// Currently selected device
let selectedDevice = null;

// 3D Map state
let map3d = null;
let map3dMarkers = [];
let map3dDeviceData = {};  // Store device info for popup display
let currentFloor = 'all';  // Will be set to building.currentFloor on init
let map3dInitialized = false;
let map3dLoaded = false;
let openPopupDeviceId = null;  // Track which device popup is open

// Initialize on DOM ready
document.addEventListener('DOMContentLoaded', () => {
    initMap();
    initRadar();
    initFloorSelector();
    loadLatestScan();
    loadAutoScanStatus();
    loadDevicePositions();  // Load saved manual positions

    // Initialize 3D map as default view
    setTimeout(() => {
        init3DMap();
        map3dInitialized = true;
    }, 100);

    // Start BT live tracking by default after a short delay
    setTimeout(() => {
        startLiveTracking();
        console.log('BT live tracking auto-started');
    }, 2000);
});

// Toggle filter
function toggleFilter(type) {
    filters[type] = !filters[type];

    const btn = document.getElementById(`filter-${type === 'wifi' ? 'wifi' : 'bt'}`);
    btn.classList.toggle('inactive', !filters[type]);

    drawRadar();
    updateMapMarkers();
    update3DMarkers();
}

// Initialize Leaflet map
function initMap() {
    const lat = APP_CONFIG.defaultLat;
    const lon = APP_CONFIG.defaultLon;

    map = L.map('leaflet-map', {
        minZoom: 2,
        maxZoom: 19
    }).setView([lat, lon], 5);

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

// Initialize radar canvas
function initRadar() {
    const canvas = document.getElementById('radar-canvas');
    resizeRadar();
    window.addEventListener('resize', resizeRadar);

    // Add click handler for radar
    canvas.addEventListener('click', handleRadarClick);

    // Add mousemove handler for hover tooltips
    canvas.addEventListener('mousemove', handleRadarHover);
    canvas.addEventListener('mouseleave', hideRadarTooltip);

    // Create tooltip element
    const tooltip = document.createElement('div');
    tooltip.id = 'radar-tooltip';
    tooltip.className = 'radar-tooltip';
    canvas.parentElement.appendChild(tooltip);

    // Click outside to close detail panel
    document.addEventListener('click', (e) => {
        const panel = document.getElementById('device-detail-panel');
        if (!panel.contains(e.target) && !e.target.closest('.view-25d-device') && !e.target.closest('#radar-canvas')) {
            closeDetailPanel();
        }
    });
}

function resizeRadar() {
    const canvas = document.getElementById('radar-canvas');
    const container = canvas.parentElement;
    canvas.width = container.clientWidth;
    canvas.height = container.clientHeight;
    if (scanData) drawRadar();
}

// View toggle
function setView(view) {
    currentView = view;

    document.getElementById('btn-radar').classList.toggle('active', view === 'radar');
    document.getElementById('btn-map').classList.toggle('active', view === 'map');
    document.getElementById('btn-3d').classList.toggle('active', view === '3d');

    document.getElementById('radar-canvas').classList.toggle('active', view === 'radar');
    document.getElementById('leaflet-map').classList.toggle('hidden', view !== 'map');
    document.getElementById('map-3d').classList.toggle('hidden', view !== '3d');
    document.getElementById('map-3d').classList.toggle('active', view === '3d');

    // Close detail panel when switching views
    closeDetailPanel();

    if (view === 'map') {
        setTimeout(() => map.invalidateSize(), 100);
    } else if (view === '3d') {
        setTimeout(() => {
            if (!map3dInitialized) {
                init3DMap();
                map3dInitialized = true;
            } else if (map3d) {
                map3d.resize();
                update3DMarkers();
            }
        }, 100);
    } else {
        drawRadar();
    }
}

// Load latest scan
async function loadLatestScan() {
    try {
        const response = await fetch('/api/latest');
        if (response.ok) {
            scanData = await response.json();
            updateUI();
        } else {
            document.getElementById('wifi-list').innerHTML = '<div style="color:#888;padding:1rem;">No scans yet. Click "New Scan" to start.</div>';
            document.getElementById('bt-list').innerHTML = '';
        }
    } catch (error) {
        console.error('Error loading scan:', error);
    }
}

// Trigger new scan
async function triggerScan() {
    const btn = document.getElementById('scan-btn');
    const status = document.getElementById('scan-status');

    btn.disabled = true;
    status.textContent = 'Scanning...';

    try {
        const lat = parseFloat(document.getElementById('lat-input').value);
        const lon = parseFloat(document.getElementById('lon-input').value);

        const response = await fetch('/api/scan', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                location: 'web_scan',
                lat: lat,
                lon: lon,
                scan_wifi: filters.wifi,
                scan_bluetooth: filters.bluetooth
            })
        });

        if (response.ok) {
            scanData = await response.json();
            updateUI();
            status.textContent = `Scanned at ${new Date().toLocaleTimeString()}`;
        } else {
            status.textContent = 'Scan failed';
        }
    } catch (error) {
        console.error('Scan error:', error);
        status.textContent = 'Scan error';
    }

    btn.disabled = false;
}

// Update UI with scan data
function updateUI() {
    if (!scanData) return;

    const wifi = scanData.wifi_networks || [];
    const bt = scanData.bluetooth_devices || [];

    // Update counts
    document.getElementById('wifi-count').textContent = wifi.length;
    document.getElementById('bt-count').textContent = bt.length;
    document.getElementById('wifi-list-count').textContent = wifi.length;
    document.getElementById('bt-list-count').textContent = bt.length;

    // Calculate stats
    if (wifi.length > 0) {
        const avgSignal = Math.round(wifi.reduce((a, b) => a + b.rssi, 0) / wifi.length);
        document.getElementById('avg-signal').textContent = avgSignal + ' dB';

        const allDevices = [...wifi, ...bt];
        const nearest = Math.min(...allDevices.map(d => d.estimated_distance_m));
        document.getElementById('nearest').textContent = nearest.toFixed(1);
    }

    // Update WiFi list
    const wifiList = document.getElementById('wifi-list');
    wifiList.innerHTML = wifi
        .sort((a, b) => b.rssi - a.rssi)
        .slice(0, 15)
        .map(net => `
            <div class="device-card wifi" data-bssid="${net.bssid}">
                <div class="device-name">${escapeHtml(net.ssid)}</div>
                <div class="manufacturer">${escapeHtml(net.manufacturer)}</div>
                <div class="device-info">
                    <span>${net.rssi} dBm</span>
                    <span class="distance-badge">~${net.estimated_distance_m}m</span>
                    ${signalBar(net.rssi)}
                </div>
            </div>
        `).join('');

    // Update Bluetooth list
    const btList = document.getElementById('bt-list');
    btList.innerHTML = bt
        .sort((a, b) => b.rssi - a.rssi)
        .slice(0, 15)
        .map(dev => `
            <div class="device-card bluetooth" data-addr="${dev.address}">
                <div class="device-header">
                    <div class="device-name">${escapeHtml(dev.name)}</div>
                    <button class="identify-btn" onclick="identifyDevice('${dev.address}', this)" title="Identify device">🔍</button>
                </div>
                <div class="manufacturer">${escapeHtml(dev.manufacturer)} - ${escapeHtml(dev.device_type)}</div>
                <div class="device-services" id="services-${dev.address.replace(/:/g, '')}"></div>
                <div class="device-info">
                    <span>${dev.rssi} dBm</span>
                    <span class="distance-badge">~${dev.estimated_distance_m}m</span>
                    ${signalBar(dev.rssi)}
                </div>
            </div>
        `).join('');

    // Update visualizations
    drawRadar();
    updateMapMarkers();
    update3DMarkers();
    updateFloorSelector();
}

// Signal strength bar
function signalBar(rssi) {
    const bars = 5;
    const strength = Math.max(0, Math.min(bars, Math.floor((rssi + 100) / 15)));
    let cls = '';
    if (rssi < -80) cls = 'weak';
    else if (rssi < -65) cls = 'fair';

    let html = `<div class="signal-bar ${cls}">`;
    for (let i = 0; i < bars; i++) {
        const h = 4 + i * 2;
        html += `<span style="height:${h}px" class="${i < strength ? 'active' : ''}"></span>`;
    }
    html += '</div>';
    return html;
}

// Draw radar visualization
function drawRadar() {
    const canvas = document.getElementById('radar-canvas');
    const ctx = canvas.getContext('2d');
    const w = canvas.width;
    const h = canvas.height;
    const cx = w / 2;
    const cy = h / 2;
    const maxRadius = Math.min(w, h) / 2 - 40;
    const maxDist = APP_CONFIG.radar.maxDistance;

    // Clear device positions for hit detection
    devicePositions = [];

    // Clear
    ctx.fillStyle = '#0a0a1a';
    ctx.fillRect(0, 0, w, h);

    // Draw grid circles (distance rings)
    ctx.strokeStyle = '#1a3a1a';
    ctx.lineWidth = 1;

    APP_CONFIG.radar.distances.forEach((dist) => {
        const r = (dist / maxDist) * maxRadius;
        ctx.beginPath();
        ctx.arc(cx, cy, r, 0, Math.PI * 2);
        ctx.stroke();

        ctx.fillStyle = '#336633';
        ctx.font = '10px sans-serif';
        ctx.fillText(dist + 'm', cx + r + 5, cy);
    });

    // Draw crosshairs
    ctx.strokeStyle = '#1a3a1a';
    ctx.beginPath();
    ctx.moveTo(cx, 20);
    ctx.lineTo(cx, h - 20);
    ctx.moveTo(20, cy);
    ctx.lineTo(w - 20, cy);
    ctx.stroke();

    // Draw center point (scanner) - magenta star-like
    ctx.fillStyle = '#ff0080';
    ctx.beginPath();
    // Draw a star shape
    const starRadius = 10;
    for (let i = 0; i < 5; i++) {
        const angle = (i * 144 - 90) * Math.PI / 180;
        const x = cx + starRadius * Math.cos(angle);
        const y = cy + starRadius * Math.sin(angle);
        if (i === 0) ctx.moveTo(x, y);
        else ctx.lineTo(x, y);
    }
    ctx.closePath();
    ctx.fill();
    ctx.strokeStyle = 'white';
    ctx.lineWidth = 1.5;
    ctx.stroke();

    if (!scanData) return;

    const wifi = filters.wifi ? (scanData.wifi_networks || []) : [];
    const bt = filters.bluetooth ? (scanData.bluetooth_devices || []) : [];

    // Draw WiFi devices
    wifi.forEach((net) => {
        const effectiveDist = getEffectiveDistance(net);
        const dist = Math.min(effectiveDist, maxDist);
        const r = (dist / maxDist) * maxRadius;
        const angle = hashString(net.bssid) % 360 * Math.PI / 180;

        const x = cx + r * Math.cos(angle);
        const y = cy + r * Math.sin(angle);

        const size = Math.max(4, 12 + (net.rssi + 90) / 5);

        // Store position for hit detection
        devicePositions.push({
            type: 'wifi',
            data: net,
            x: x,
            y: y,
            radius: Math.max(size / 2, 8) // Minimum clickable area
        });

        // Draw glow
        const gradient = ctx.createRadialGradient(x, y, 0, x, y, size * 2);
        gradient.addColorStop(0, 'rgba(0, 255, 136, 0.3)');
        gradient.addColorStop(1, 'rgba(0, 255, 136, 0)');
        ctx.fillStyle = gradient;
        ctx.beginPath();
        ctx.arc(x, y, size * 2, 0, Math.PI * 2);
        ctx.fill();

        // Draw dot (with selection highlight)
        const isSelected = selectedDevice && selectedDevice.type === 'wifi' && selectedDevice.data.bssid === net.bssid;
        if (isSelected) {
            ctx.strokeStyle = '#ffffff';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.arc(x, y, size / 2 + 4, 0, Math.PI * 2);
            ctx.stroke();
        }

        ctx.fillStyle = APP_CONFIG.colors.wifi;
        ctx.beginPath();
        ctx.arc(x, y, size / 2, 0, Math.PI * 2);
        ctx.fill();

        // Label for strong signals
        if (net.rssi > -70) {
            ctx.fillStyle = APP_CONFIG.colors.wifi;
            ctx.font = '10px sans-serif';
            ctx.textAlign = 'center';
            ctx.fillText(net.ssid.substring(0, 12), x, y - size);
        }
    });

    // Draw Bluetooth devices
    bt.forEach((dev) => {
        const effectiveDist = getEffectiveDistance(dev);
        const dist = Math.min(effectiveDist, maxDist);
        const r = (dist / maxDist) * maxRadius;
        const angle = hashString(dev.address) % 360 * Math.PI / 180;

        const x = cx + r * Math.cos(angle);
        const y = cy + r * Math.sin(angle);

        const size = Math.max(3, 10 + (dev.rssi + 90) / 5);
        const isMoving = dev.is_moving === true;
        const missCount = dev.miss_count || 0;
        // Calculate opacity: 1.0 -> 0.6 -> 0.3 based on miss count
        const opacity = missCount === 0 ? 1.0 : (missCount === 1 ? 0.6 : 0.3);
        const color = isMoving ? '#9b59b6' : APP_CONFIG.colors.bluetooth;

        // Store position for hit detection
        devicePositions.push({
            type: 'bluetooth',
            data: dev,
            x: x,
            y: y,
            radius: Math.max(size / 2, 8) // Minimum clickable area
        });

        // Save context for opacity
        ctx.save();
        ctx.globalAlpha = opacity;

        // Draw glow
        const gradient = ctx.createRadialGradient(x, y, 0, x, y, size * 2);
        if (isMoving) {
            gradient.addColorStop(0, 'rgba(155, 89, 182, 0.5)');
            gradient.addColorStop(1, 'rgba(155, 89, 182, 0)');
        } else {
            gradient.addColorStop(0, 'rgba(77, 171, 247, 0.3)');
            gradient.addColorStop(1, 'rgba(77, 171, 247, 0)');
        }
        ctx.fillStyle = gradient;
        ctx.beginPath();
        ctx.arc(x, y, size * 2, 0, Math.PI * 2);
        ctx.fill();

        // Draw dot (with selection highlight)
        const isSelected = selectedDevice && selectedDevice.type === 'bluetooth' && selectedDevice.data.address === dev.address;
        if (isSelected) {
            ctx.strokeStyle = '#ffffff';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.arc(x, y, size / 2 + 4, 0, Math.PI * 2);
            ctx.stroke();
        }

        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.arc(x, y, size / 2, 0, Math.PI * 2);
        ctx.fill();

        // Restore context (for opacity)
        ctx.restore();
    });

    // Legend
    ctx.font = '11px sans-serif';
    ctx.textAlign = 'left';

    ctx.fillStyle = filters.wifi ? '#666' : '#333';
    ctx.fillText('● WiFi', 20, h - 30);
    ctx.fillStyle = filters.wifi ? APP_CONFIG.colors.wifi : '#333';
    ctx.fillText('●', 20, h - 30);
    if (!filters.wifi) {
        ctx.fillStyle = '#333';
        ctx.fillText(' (hidden)', 55, h - 30);
    }

    ctx.fillStyle = filters.bluetooth ? '#666' : '#333';
    ctx.fillText('● Bluetooth', 120, h - 30);
    ctx.fillStyle = filters.bluetooth ? APP_CONFIG.colors.bluetooth : '#333';
    ctx.fillText('●', 120, h - 30);
    if (!filters.bluetooth) {
        ctx.fillStyle = '#333';
        ctx.fillText(' (hidden)', 185, h - 30);
    }
}

// Update map markers
function updateMapMarkers() {
    markers.forEach(m => map.removeLayer(m));
    markers = [];

    if (!scanData) return;

    const lat = parseFloat(document.getElementById('lat-input').value);
    const lon = parseFloat(document.getElementById('lon-input').value);

    // Add center marker (this scanner) - distinct star shape
    const scannerIcon = `
        <div style="position:relative;width:24px;height:24px;">
            <svg viewBox="0 0 24 24" style="width:24px;height:24px;filter:drop-shadow(0 0 4px rgba(255,0,128,0.8));">
                <polygon points="12,2 15,9 22,9 17,14 19,22 12,17 5,22 7,14 2,9 9,9" fill="#ff0080" stroke="white" stroke-width="1.5"/>
            </svg>
        </div>`;
    const centerMarker = L.marker([lat, lon], {
        icon: L.divIcon({
            className: 'center-marker scanner-marker',
            html: scannerIcon,
            iconSize: [24, 24],
            iconAnchor: [12, 12]
        })
    }).addTo(map).bindPopup('📍 This Scanner');
    markers.push(centerMarker);

    // Add peer scanner markers (async, won't block)
    fetch('/api/peers')
        .then(r => r.json())
        .then(data => {
            (data.peers || []).forEach(peer => {
                if (peer.latitude && peer.longitude) {
                    const peerIcon = `
                        <div style="position:relative;width:20px;height:20px;">
                            <svg viewBox="0 0 24 24" style="width:20px;height:20px;filter:drop-shadow(0 0 3px rgba(0,200,255,0.8));">
                                <polygon points="12,2 15,9 22,9 17,14 19,22 12,17 5,22 7,14 2,9 9,9" fill="#00c8ff" stroke="white" stroke-width="1.5"/>
                            </svg>
                        </div>`;
                    const peerMarker = L.marker([peer.latitude, peer.longitude], {
                        icon: L.divIcon({
                            className: 'peer-marker scanner-marker',
                            html: peerIcon,
                            iconSize: [20, 20],
                            iconAnchor: [10, 10]
                        })
                    }).addTo(map).bindPopup(`📡 ${peer.name || peer.scanner_id}<br>Floor: ${peer.floor ?? '?'}`);
                    markers.push(peerMarker);
                }
            });
        })
        .catch(() => {});  // Ignore errors

    const wifi = filters.wifi ? (scanData.wifi_networks || []) : [];
    const bt = filters.bluetooth ? (scanData.bluetooth_devices || []) : [];

    // Add WiFi markers
    wifi.forEach(net => {
        const dist = getEffectiveDistance(net);
        const angle = hashString(net.bssid) % 360;

        const latOffset = (dist * Math.cos(angle * Math.PI / 180)) / 111000;
        const lonOffset = (dist * Math.sin(angle * Math.PI / 180)) / (111000 * Math.cos(lat * Math.PI / 180));

        const hasCustomDist = net.custom_distance_m !== null && net.custom_distance_m !== undefined;
        const distLabel = hasCustomDist ? `${dist}m (custom)` : `~${net.estimated_distance_m}m`;

        const marker = L.circleMarker([lat + latOffset, lon + lonOffset], {
            radius: Math.max(5, 10 + (net.rssi + 90) / 10),
            color: APP_CONFIG.colors.wifi,
            fillColor: APP_CONFIG.colors.wifi,
            fillOpacity: 0.6,
            weight: 2
        }).addTo(map).bindPopup(`
            <strong>📶 ${escapeHtml(net.ssid)}</strong><br>
            Signal: ${net.rssi} dBm<br>
            Distance: ${distLabel}<br>
            Channel: ${net.channel}<br>
            ${escapeHtml(net.manufacturer)}
        `);
        markers.push(marker);
    });

    // Add Bluetooth markers
    bt.forEach(dev => {
        const dist = getEffectiveDistance(dev);
        const angle = hashString(dev.address) % 360;

        const latOffset = (dist * Math.cos(angle * Math.PI / 180)) / 111000;
        const lonOffset = (dist * Math.sin(angle * Math.PI / 180)) / (111000 * Math.cos(lat * Math.PI / 180));

        const hasCustomDist = dev.custom_distance_m !== null && dev.custom_distance_m !== undefined;
        const distLabel = hasCustomDist ? `${dist}m (custom)` : `~${dev.estimated_distance_m}m`;

        // Calculate opacity based on miss count
        const missCount = dev.miss_count || 0;
        const opacity = missCount === 0 ? 0.6 : (missCount === 1 ? 0.4 : 0.2);

        const marker = L.circleMarker([lat + latOffset, lon + lonOffset], {
            radius: Math.max(4, 8 + (dev.rssi + 90) / 10),
            color: APP_CONFIG.colors.bluetooth,
            fillColor: APP_CONFIG.colors.bluetooth,
            fillOpacity: opacity,
            opacity: opacity + 0.2,
            weight: 2
        }).addTo(map).bindPopup(`
            <strong>🔵 ${escapeHtml(dev.name)}</strong><br>
            Signal: ${dev.rssi} dBm<br>
            Distance: ${distLabel}<br>
            Type: ${escapeHtml(dev.device_type)}<br>
            ${escapeHtml(dev.manufacturer)}
        `);
        markers.push(marker);
    });

    // Fit bounds if we have markers
    if (markers.length > 1) {
        const group = L.featureGroup(markers);
        map.fitBounds(group.getBounds().pad(0.1));
    }
}

// Identify Bluetooth device
async function identifyDevice(address, btn) {
    btn.classList.add('loading');
    btn.disabled = true;
    btn.textContent = '⏳';

    const servicesDiv = document.getElementById('services-' + address.replace(/:/g, ''));

    try {
        const response = await fetch(`/api/bluetooth/identify/${encodeURIComponent(address)}`);
        const data = await response.json();

        if (response.ok && !data.error) {
            const card = btn.closest('.device-card');

            if (data.name && data.name !== '<unknown>') {
                const nameEl = card.querySelector('.device-name');
                nameEl.textContent = data.name;
            }

            if (data.device_type && data.device_type !== 'Unknown') {
                const mfrEl = card.querySelector('.manufacturer');
                mfrEl.innerHTML = `<span class="device-type-badge">${escapeHtml(data.device_type)}</span>`;
            }

            if (data.services && data.services.length > 0) {
                servicesDiv.innerHTML = data.services
                    .slice(0, 6)
                    .map(s => `<span class="service-tag">${escapeHtml(s)}</span>`)
                    .join('');
                servicesDiv.classList.add('visible');
            }

            btn.textContent = '✓';
            btn.title = data.icon ? `Identified as: ${data.icon}` : 'Device identified';
        } else {
            btn.textContent = '❌';
            btn.title = data.error || 'Could not identify device';
        }
    } catch (error) {
        console.error('Identify error:', error);
        btn.textContent = '❌';
        btn.title = 'Error identifying device';
    }

    btn.classList.remove('loading');
    btn.disabled = false;
}

// Utility: hash string to number
function hashString(str) {
    let hash = 0;
    for (let i = 0; i < str.length; i++) {
        hash = ((hash << 5) - hash) + str.charCodeAt(i);
        hash = hash & hash;
    }
    return Math.abs(hash);
}

// Utility: escape HTML
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text || '';
    return div.innerHTML;
}

// ========== Radar Click & Hover Handling ==========

// Handle radar canvas click
function handleRadarClick(e) {
    const canvas = document.getElementById('radar-canvas');
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    // Check if click hits any device
    const hitDevice = findDeviceAtPosition(x, y);

    if (hitDevice) {
        selectedDevice = hitDevice;
        showDetailPanel(hitDevice, e.clientX, e.clientY);
        drawRadar(); // Redraw to show selection highlight
    } else {
        closeDetailPanel();
    }
}

// Handle radar canvas hover
function handleRadarHover(e) {
    const canvas = document.getElementById('radar-canvas');
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    const hitDevice = findDeviceAtPosition(x, y);
    const tooltip = document.getElementById('radar-tooltip');

    if (hitDevice) {
        canvas.style.cursor = 'pointer';
        const name = hitDevice.type === 'wifi' ? hitDevice.data.ssid : hitDevice.data.name;
        tooltip.textContent = name || 'Unknown';
        tooltip.style.left = (e.clientX - rect.left + 10) + 'px';
        tooltip.style.top = (e.clientY - rect.top - 25) + 'px';
        tooltip.classList.add('visible');
    } else {
        canvas.style.cursor = 'default';
        tooltip.classList.remove('visible');
    }
}

// Hide radar tooltip
function hideRadarTooltip() {
    const tooltip = document.getElementById('radar-tooltip');
    if (tooltip) {
        tooltip.classList.remove('visible');
    }
}

// Find device at given position using distance formula
function findDeviceAtPosition(x, y) {
    for (const device of devicePositions) {
        const dx = x - device.x;
        const dy = y - device.y;
        const distance = Math.sqrt(dx * dx + dy * dy);

        if (distance <= device.radius) {
            return device;
        }
    }
    return null;
}

// ========== Detail Panel ==========

// Show device detail panel
function showDetailPanel(device, clientX, clientY) {
    const panel = document.getElementById('device-detail-panel');
    const container = document.querySelector('.map-container');
    const containerRect = container.getBoundingClientRect();

    // Position panel near click, but keep within bounds
    let left = clientX - containerRect.left + 15;
    let top = clientY - containerRect.top - 50;

    // Keep panel within container
    const panelWidth = 250;
    const panelHeight = 200;

    if (left + panelWidth > containerRect.width) {
        left = clientX - containerRect.left - panelWidth - 15;
    }
    if (top + panelHeight > containerRect.height) {
        top = containerRect.height - panelHeight - 10;
    }
    if (top < 10) {
        top = 10;
    }

    panel.style.left = left + 'px';
    panel.style.top = top + 'px';

    // Populate panel
    const isWifi = device.type === 'wifi';
    const data = device.data;

    panel.className = 'device-detail-panel ' + device.type;

    document.getElementById('detail-icon').textContent = isWifi ? '📶' : '🔵';
    document.getElementById('detail-name').textContent = isWifi ? data.ssid : data.name;
    document.getElementById('detail-signal').textContent = data.rssi + ' dBm';
    document.getElementById('detail-distance').textContent = '~' + data.estimated_distance_m + 'm';
    document.getElementById('detail-manufacturer').textContent = data.manufacturer || 'Unknown';

    // Show/hide type-specific fields
    const channelRow = document.getElementById('detail-channel-row');
    const typeRow = document.getElementById('detail-type-row');
    const addressRow = document.getElementById('detail-address-row');

    if (isWifi) {
        channelRow.style.display = 'flex';
        document.getElementById('detail-channel').textContent = data.channel || 'N/A';
        typeRow.style.display = 'none';
        addressRow.style.display = 'flex';
        document.getElementById('detail-address').textContent = data.bssid || 'N/A';
    } else {
        channelRow.style.display = 'none';
        typeRow.style.display = 'flex';
        document.getElementById('detail-type').textContent = data.device_type || 'Unknown';
        addressRow.style.display = 'flex';
        document.getElementById('detail-address').textContent = data.address || 'N/A';
    }

    // Show panel with animation
    panel.classList.remove('hidden');
    requestAnimationFrame(() => {
        panel.classList.add('visible');
    });
}

// Close device detail panel
function closeDetailPanel() {
    const panel = document.getElementById('device-detail-panel');
    panel.classList.remove('visible');
    setTimeout(() => {
        panel.classList.add('hidden');
    }, 200);

    selectedDevice = null;

    // Redraw to remove selection highlight
    if (currentView === 'radar') {
        drawRadar();
    }
}

// ========== Auto-Scan Functions ==========

// Load auto-scan status
async function loadAutoScanStatus() {
    try {
        const response = await fetch('/api/autoscan');
        if (response.ok) {
            const data = await response.json();
            updateAutoScanUI(data);
        }
    } catch (error) {
        console.error('Error loading auto-scan status:', error);
    }
}

// Update auto-scan UI elements
function updateAutoScanUI(status) {
    autoScanEnabled = status.enabled || status.running;

    // Update header button
    const btn = document.getElementById('autoscan-btn');
    if (btn) {
        btn.textContent = autoScanEnabled ? '⏱️ Auto: On' : '⏱️ Auto: Off';
        btn.classList.toggle('active', autoScanEnabled);
    }

    // Update sidebar status
    const statusEl = document.getElementById('autoscan-status');
    if (statusEl) {
        statusEl.textContent = autoScanEnabled ? 'Running' : 'Off';
        statusEl.classList.toggle('running', autoScanEnabled);
    }

    // Update settings inputs
    const intervalInput = document.getElementById('autoscan-interval');
    if (intervalInput && status.interval_minutes) {
        intervalInput.value = status.interval_minutes;
    }

    const labelInput = document.getElementById('autoscan-label');
    if (labelInput && status.location_label) {
        labelInput.value = status.location_label;
    }

    // Update info
    const infoEl = document.getElementById('autoscan-info');
    if (infoEl) {
        if (status.last_scan_time) {
            const time = new Date(status.last_scan_time).toLocaleTimeString();
            const result = status.last_scan_result;
            infoEl.textContent = `Last: ${time} (WiFi: ${result?.wifi_count || 0}, BT: ${result?.bt_count || 0})`;
        } else if (autoScanEnabled) {
            infoEl.textContent = 'Waiting for first scan...';
        } else {
            infoEl.textContent = 'Last scan: --';
        }
    }

    // Start/stop polling for updates when enabled
    if (autoScanEnabled && !autoScanPollInterval) {
        autoScanPollInterval = setInterval(pollAutoScanStatus, 30000);
    } else if (!autoScanEnabled && autoScanPollInterval) {
        clearInterval(autoScanPollInterval);
        autoScanPollInterval = null;
    }
}

// Poll for auto-scan status updates
async function pollAutoScanStatus() {
    try {
        const response = await fetch('/api/autoscan');
        if (response.ok) {
            const data = await response.json();
            updateAutoScanUI(data);

            // Reload scan data if there's a new scan
            if (data.last_scan_result) {
                loadLatestScan();
            }
        }
    } catch (error) {
        console.error('Error polling auto-scan status:', error);
    }
}

// Toggle auto-scan from header button
function toggleAutoScan() {
    if (autoScanEnabled) {
        stopAutoScan();
    } else {
        startAutoScan();
    }
}

// Start auto-scanning
async function startAutoScan() {
    const interval = parseInt(document.getElementById('autoscan-interval')?.value) || 5;
    const label = document.getElementById('autoscan-label')?.value || 'auto_scan';

    try {
        const response = await fetch('/api/autoscan/start', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                interval_minutes: interval,
                location_label: label,
                scan_wifi: filters.wifi,
                scan_bluetooth: filters.bluetooth,
                save: false
            })
        });

        if (response.ok) {
            const data = await response.json();
            updateAutoScanUI(data);
            const services = [];
            if (filters.wifi) services.push('WiFi');
            if (filters.bluetooth) services.push('BT');
            document.getElementById('scan-status').textContent = `Auto-scan: ${services.join('+')} every ${interval} min`;
        }
    } catch (error) {
        console.error('Error starting auto-scan:', error);
    }
}

// Stop auto-scanning
async function stopAutoScan() {
    try {
        const response = await fetch('/api/autoscan/stop', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ save: false })
        });

        if (response.ok) {
            const data = await response.json();
            updateAutoScanUI(data);
            document.getElementById('scan-status').textContent = 'Auto-scan stopped';
        }
    } catch (error) {
        console.error('Error stopping auto-scan:', error);
    }
}

// ========== Device Position Functions ==========

// Load saved device positions from database
async function loadDevicePositions() {
    try {
        const response = await fetch('/api/device/floors');
        if (response.ok) {
            const data = await response.json();
            // Handle both old format (just floors) and new format (floors + positions)
            if (data.positions) {
                manualPositions = data.positions;
                console.log('[Positions] Loaded', Object.keys(manualPositions).length, 'manual positions');
            }
        }
    } catch (error) {
        console.error('Error loading device positions:', error);
    }
}

// Get device position (manual or RSSI-based)
function getDevicePosition(device, scannerLat, scannerLon, minDistanceM) {
    const deviceId = device.bssid || device.address;
    const customPos = manualPositions[deviceId];

    // If device has manual position, use it
    if (customPos && customPos.lat_offset != null && customPos.lon_offset != null) {
        return {
            lat: scannerLat + customPos.lat_offset,
            lon: scannerLon + customPos.lon_offset,
            isManual: true
        };
    }

    // Otherwise calculate from RSSI/distance
    const effectiveDist = getEffectiveDistance(device);
    const dist = Math.max(effectiveDist, minDistanceM);
    const angle = hashString(deviceId) % 360;

    const latOffset = (dist * Math.cos(angle * Math.PI / 180)) / 111000;
    const lonOffset = (dist * Math.sin(angle * Math.PI / 180)) / (111000 * Math.cos(scannerLat * Math.PI / 180));

    return {
        lat: scannerLat + latOffset,
        lon: scannerLon + lonOffset,
        isManual: false
    };
}

// Update device position via API (called after drag)
async function updateDevicePosition(deviceId, latOffset, lonOffset) {
    try {
        const response = await fetch(`/api/device/${encodeURIComponent(deviceId)}/position`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                lat_offset: latOffset,
                lon_offset: lonOffset
            })
        });

        if (response.ok) {
            const data = await response.json();
            console.log('[Position] Updated', deviceId, 'to offset', latOffset.toFixed(6), lonOffset.toFixed(6));
            // Update local cache
            manualPositions[deviceId] = { lat_offset: latOffset, lon_offset: lonOffset };
            return true;
        } else {
            const error = await response.json();
            console.error('[Position] Failed to update:', error.error);
            return false;
        }
    } catch (error) {
        console.error('[Position] Error updating position:', error);
        return false;
    }
}

// Reset device position to auto (RSSI-based)
async function resetDevicePosition(deviceId) {
    try {
        const response = await fetch(`/api/device/${encodeURIComponent(deviceId)}/position`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                lat_offset: null,
                lon_offset: null
            })
        });

        if (response.ok) {
            console.log('[Position] Reset', deviceId, 'to auto');
            // Remove from local cache
            delete manualPositions[deviceId];
            // Refresh markers to show new position
            update3DMarkers();
            return true;
        } else {
            console.error('[Position] Failed to reset position');
            return false;
        }
    } catch (error) {
        console.error('[Position] Error resetting position:', error);
        return false;
    }
}

// Handle scanner (primary source) drag end
async function onScannerDragEnd(marker) {
    const lngLat = marker.getLngLat();
    const newLat = lngLat.lat;
    const newLon = lngLat.lng;

    console.log('[Scanner] Repositioned to', newLat.toFixed(6), newLon.toFixed(6));

    // Update the input fields
    document.getElementById('lat-input').value = newLat.toFixed(6);
    document.getElementById('lon-input').value = newLon.toFixed(6);

    // Persist to config file (survives restarts)
    try {
        const response = await fetch('/api/config', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                gps: { latitude: newLat, longitude: newLon },
                save: true
            })
        });

        if (response.ok) {
            console.log('[Scanner] Position saved to config');
        }
    } catch (error) {
        console.error('[Scanner] Error saving position:', error);
    }

    // Refresh all markers (device positions are relative to scanner)
    update3DMarkers();
}

// Handle marker drag end
async function onMarkerDragEnd(marker, deviceId, scannerLat, scannerLon) {
    const lngLat = marker.getLngLat();
    const latOffset = lngLat.lat - scannerLat;
    const lonOffset = lngLat.lng - scannerLon;

    const success = await updateDevicePosition(deviceId, latOffset, lonOffset);

    if (success) {
        // Update marker element to show manual position indicator
        const el = marker.getElement();
        if (el) {
            el.classList.add('has-manual-position');
        }
        // Refresh markers to update popup content
        update3DMarkers();
    } else {
        // Revert marker to original position on failure
        update3DMarkers();
    }
}

// ========== 3D Map Functions ==========

// Initialize 3D map with MapLibre GL
function init3DMap() {
    const container = document.getElementById('map-3d');
    if (!container || typeof maplibregl === 'undefined') {
        console.warn('MapLibre GL not available or container not found');
        return;
    }

    const lat = APP_CONFIG.defaultLat;
    const lon = APP_CONFIG.defaultLon;

    try {
        map3d = new maplibregl.Map({
            container: 'map-3d',
            style: APP_CONFIG.maplibre?.style || 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
            center: [lon, lat],
            zoom: 18,
            pitch: 45,
            bearing: -17.6,
            antialias: true
        });

        // Add navigation controls
        map3d.addControl(new maplibregl.NavigationControl({
            visualizePitch: true
        }), 'top-left');

        // Add 3D buildings when style loads
        map3d.on('load', () => {
            console.log('3D map loaded at', map3d.getCenter());
            map3dLoaded = true;
            add3DBuildingLayer();
            setup3DDeviceLayers();
            update3DMarkers();
        });

        map3d.on('error', (e) => {
            console.error('3D map error:', e);
        });

        // DOM markers handle their own click events via popups

    } catch (e) {
        console.error('Failed to initialize 3D map:', e);
    }
}

// Add 3D building extrusion layer
function add3DBuildingLayer() {
    if (!map3d) return;

    const style = map3d.getStyle();

    if (style && style.sources) {
        const existingSources = Object.keys(style.sources);

        for (const sourceName of existingSources) {
            const source = style.sources[sourceName];
            if (source.type === 'vector') {
                try {
                    if (map3d.getLayer('3d-buildings')) {
                        return;
                    }

                    map3d.addLayer({
                        'id': '3d-buildings',
                        'source': sourceName,
                        'source-layer': 'building',
                        'type': 'fill-extrusion',
                        'minzoom': 14,
                        'paint': {
                            'fill-extrusion-color': '#1a3a5c',
                            'fill-extrusion-height': [
                                'interpolate', ['linear'], ['zoom'],
                                14, 0,
                                15, ['coalesce', ['get', 'height'], ['get', 'render_height'], 10]
                            ],
                            'fill-extrusion-base': [
                                'interpolate', ['linear'], ['zoom'],
                                14, 0,
                                15, ['coalesce', ['get', 'min_height'], 0]
                            ],
                            'fill-extrusion-opacity': 0.3  // More transparent to see markers
                        }
                    });
                    console.log('Added 3D buildings from source:', sourceName);
                    break;
                } catch (e) {
                    console.log('Could not add 3D buildings from source:', sourceName);
                }
            }
        }
    }
}

// Setup for 3D device visualization - using DOM markers instead of fill-extrusion
function setup3DDeviceLayers() {
    // No GeoJSON layers needed - we use DOM markers
    console.log('3D device layers ready (using DOM markers)');
}

// Create a small polygon (square) around a point for fill-extrusion
function createDevicePolygon(lon, lat, sizeMeters) {
    // Convert meters to degrees (approximate)
    const latOffset = sizeMeters / 111000;
    const lonOffset = sizeMeters / (111000 * Math.cos(lat * Math.PI / 180));

    return [
        [
            [lon - lonOffset, lat - latOffset],
            [lon + lonOffset, lat - latOffset],
            [lon + lonOffset, lat + latOffset],
            [lon - lonOffset, lat + latOffset],
            [lon - lonOffset, lat - latOffset]
        ]
    ];
}

// Calculate height in meters for a given floor
function getFloorHeightMeters(floor) {
    const buildingConfig = APP_CONFIG.building || {};
    const floorHeightM = buildingConfig.floorHeightM || 3.0;
    const groundFloor = buildingConfig.groundFloorNumber || 0;

    // Height = (floor - groundFloor) * floorHeight
    return (floor - groundFloor) * floorHeightM;
}

// Update 3D map markers using DOM markers
function update3DMarkers() {
    if (!map3d || !map3dLoaded) {
        console.log('update3DMarkers: map3d not ready');
        return;
    }

    // Save currently open popup before removing markers
    let savedPopupDeviceId = openPopupDeviceId;
    map3dMarkers.forEach(m => {
        if (m.getPopup() && m.getPopup().isOpen()) {
            savedPopupDeviceId = m._deviceId || savedPopupDeviceId;
        }
    });

    // Remove existing markers
    map3dMarkers.forEach(m => m.remove());
    map3dMarkers = [];

    const lat = parseFloat(document.getElementById('lat-input').value) || APP_CONFIG.defaultLat;
    const lon = parseFloat(document.getElementById('lon-input').value) || APP_CONFIG.defaultLon;
    const buildingConfig = APP_CONFIG.building || {};
    const scannerFloor = buildingConfig.currentFloor || 0;

    // Minimum distance from center to place markers (meters) - outside building
    const minDistanceM = 15;

    // Calculate pixel offset based on floor (to simulate elevation)
    // Higher floors = larger negative offset (moves marker up on screen)
    const pixelsPerFloor = 18;
    const groundFloor = buildingConfig.groundFloorNumber || 0;

    // Add scanner position marker at center (draggable for fine-grained positioning)
    const scannerEl = document.createElement('div');
    scannerEl.className = 'marker-3d center draggable';
    scannerEl.innerHTML = `<div class="marker-icon">📍</div><div class="marker-floor">F${scannerFloor}</div>`;
    scannerEl.title = `Your Position - Floor ${scannerFloor} (drag to reposition)`;

    const scannerOffset = (scannerFloor - groundFloor) * pixelsPerFloor;
    const scannerMarker = new maplibregl.Marker({
        element: scannerEl,
        offset: [0, -scannerOffset],
        draggable: true
    })
        .setLngLat([lon, lat])
        .setPopup(new maplibregl.Popup().setHTML(`
            <strong>📍 Your Position</strong><br>
            Floor: ${scannerFloor}<br>
            Lat: ${lat.toFixed(6)}<br>
            Lon: ${lon.toFixed(6)}<br>
            <div style="font-size:0.7rem;color:#888;margin-top:4px;">Drag marker to reposition</div>
        `))
        .addTo(map3d);

    // Handle scanner marker drag
    scannerMarker.on('dragend', () => onScannerDragEnd(scannerMarker));
    scannerMarker._deviceId = '__scanner__';
    map3dMarkers.push(scannerMarker);

    if (!scanData) return;

    const wifi = filters.wifi ? (scanData.wifi_networks || []) : [];
    const bt = filters.bluetooth ? (scanData.bluetooth_devices || []) : [];

    // Filter by floor if not 'all'
    const filteredWifi = currentFloor === 'all' ? wifi : wifi.filter(n => n.floor === parseInt(currentFloor) || n.floor === null);
    const filteredBt = currentFloor === 'all' ? bt : bt.filter(d => d.floor === parseInt(currentFloor) || d.floor === null);

    console.log('Floor filter:', currentFloor, '| WiFi:', wifi.length, '->', filteredWifi.length, '| BT:', bt.length, '->', filteredBt.length);

    // Add WiFi markers
    filteredWifi.forEach((net) => {
        const wifiDeviceId = net.bssid;
        const deviceFloor = net.floor !== null && net.floor !== undefined ? net.floor : null;
        const hasCustomDist = net.custom_distance_m !== null && net.custom_distance_m !== undefined;
        const effectiveDist = getEffectiveDistance(net);

        // Get position (manual or RSSI-based)
        const pos = getDevicePosition(net, lat, lon, minDistanceM);
        const hasManualPosition = pos.isManual;

        // Determine if marker should be draggable (only floor-assigned devices)
        const isDraggable = deviceFloor !== null;

        const floorLabel = deviceFloor !== null ? `F${deviceFloor}` : 'F?';
        const el = document.createElement('div');
        el.className = 'marker-3d wifi';
        if (isDraggable) el.classList.add('draggable');
        if (hasManualPosition) el.classList.add('has-manual-position');
        el.innerHTML = `<div class="marker-icon">📶</div><div class="marker-floor">${floorLabel}</div>`;
        el.title = `${net.ssid} - ${deviceFloor !== null ? 'Floor ' + deviceFloor : 'Unknown floor'}${hasManualPosition ? ' (Manual position)' : ''}`;

        const distLabel = hasCustomDist ? `${effectiveDist}m (custom)` : `~${net.estimated_distance_m}m`;
        const positionStatus = hasManualPosition ? 'Manual' : 'Auto';
        const positionClass = hasManualPosition ? 'manual' : 'auto';
        const resetBtn = hasManualPosition ? `<button class="popup-reset-btn" onclick="resetDevicePosition('${wifiDeviceId}')">Reset to Auto</button>` : '';
        const dragHint = isDraggable && !hasManualPosition ? '<div style="font-size:0.7rem;color:#888;margin-top:4px;">Drag marker to set position</div>' : '';

        const popup = new maplibregl.Popup({ offset: 25 }).setHTML(`
            <strong>📶 ${escapeHtml(net.ssid)}</strong><br>
            Signal: ${net.rssi} dBm<br>
            Distance: ${distLabel}<br>
            Channel: ${net.channel}<br>
            ${escapeHtml(net.manufacturer)}<br>
            <div class="popup-floor-control">
                <label>Floor:</label>
                <select onchange="updateDeviceFloor('${wifiDeviceId}', this.value)">
                    <option value="">Unknown</option>
                    ${generateFloorOptions(deviceFloor)}
                </select>
            </div>
            <div class="popup-floor-control">
                <label>Dist (m):</label>
                <input type="number" step="0.1" min="0" value="${hasCustomDist ? effectiveDist : ''}"
                       placeholder="${net.estimated_distance_m}"
                       onchange="updateDeviceDistance('${wifiDeviceId}', this.value)">
            </div>
            <div class="popup-position-status">
                <span class="status-label">Position:</span>
                <span class="status-value ${positionClass}">${positionStatus}</span>
            </div>
            ${resetBtn}
            ${dragHint}
        `);

        // Offset marker up based on floor (unknown floors at ground level)
        const wifiOffset = deviceFloor !== null ? (deviceFloor - groundFloor) * pixelsPerFloor : 0;
        const marker = new maplibregl.Marker({
            element: el,
            offset: [0, -wifiOffset],
            draggable: isDraggable
        })
            .setLngLat([pos.lon, pos.lat])
            .setPopup(popup)
            .addTo(map3d);

        // Handle drag end for floor-assigned devices
        if (isDraggable) {
            marker.on('dragend', () => onMarkerDragEnd(marker, wifiDeviceId, lat, lon));
        }

        marker._deviceId = wifiDeviceId;
        popup.on('open', () => { openPopupDeviceId = wifiDeviceId; });
        popup.on('close', () => { if (openPopupDeviceId === wifiDeviceId) openPopupDeviceId = null; });
        map3dMarkers.push(marker);
    });

    // Add Bluetooth markers
    filteredBt.forEach((dev) => {
        const btDeviceId = dev.address;
        const deviceFloor = dev.floor !== null && dev.floor !== undefined ? dev.floor : null;
        const hasCustomDist = dev.custom_distance_m !== null && dev.custom_distance_m !== undefined;
        const effectiveDist = getEffectiveDistance(dev);

        // Get position (manual or RSSI-based)
        const pos = getDevicePosition(dev, lat, lon, minDistanceM);
        const hasManualPosition = pos.isManual;

        // Determine if marker should be draggable (only floor-assigned devices)
        const isDraggable = deviceFloor !== null;

        const btFloorLabel = deviceFloor !== null ? `F${deviceFloor}` : 'F?';
        const isMoving = dev.is_moving === true;
        const missCount = dev.miss_count || 0;
        // Calculate opacity: 1.0 -> 0.6 -> 0.3 based on miss count
        const opacity = missCount === 0 ? 1.0 : (missCount === 1 ? 0.6 : 0.3);
        const el = document.createElement('div');
        el.className = `marker-3d bluetooth${isMoving ? ' moving' : ''}`;
        if (isDraggable) el.classList.add('draggable');
        if (hasManualPosition) el.classList.add('has-manual-position');
        el.style.opacity = opacity;
        el.style.transition = 'opacity 0.5s ease';
        el.innerHTML = `<div class="marker-icon">${isMoving ? '🟣' : '🔵'}</div><div class="marker-floor">${btFloorLabel}</div>`;
        el.title = `${dev.name} - ${deviceFloor !== null ? 'Floor ' + deviceFloor : 'Unknown floor'}${isMoving ? ' (MOVING)' : ''}${hasManualPosition ? ' (Manual position)' : ''}${missCount > 0 ? ` (fading: ${missCount}/${MAX_MISSED_SCANS})` : ''}`;

        const btDistLabel = hasCustomDist ? `${effectiveDist}m (custom)` : `~${dev.estimated_distance_m}m`;
        const positionStatus = hasManualPosition ? 'Manual' : 'Auto';
        const positionClass = hasManualPosition ? 'manual' : 'auto';
        const resetBtn = hasManualPosition ? `<button class="popup-reset-btn" onclick="resetDevicePosition('${btDeviceId}')">Reset to Auto</button>` : '';
        const dragHint = isDraggable && !hasManualPosition ? '<div style="font-size:0.7rem;color:#888;margin-top:4px;">Drag marker to set position</div>' : '';
        const trailBtnHtml = isMoving ? `
            <button class="popup-trail-btn" id="trail-btn-${btDeviceId.replace(/:/g, '')}"
                    onclick="toggleDeviceTrail('${btDeviceId}', '${escapeHtml(dev.name)}', 'bluetooth')">
                Show Trail
            </button>` : '';

        const popup = new maplibregl.Popup({ offset: 25 }).setHTML(`
            <strong>${isMoving ? '🟣' : '🔵'} ${escapeHtml(dev.name)}</strong>${isMoving ? ' <span style="color:#9b59b6;font-size:0.8em;">(Moving)</span>' : ''}<br>
            Signal: ${dev.rssi} dBm<br>
            Distance: ${btDistLabel}<br>
            Type: ${escapeHtml(dev.device_type)}<br>
            ${escapeHtml(dev.manufacturer)}<br>
            <div class="popup-floor-control">
                <label>Floor:</label>
                <select onchange="updateDeviceFloor('${btDeviceId}', this.value)">
                    <option value="">Unknown</option>
                    ${generateFloorOptions(deviceFloor)}
                </select>
            </div>
            <div class="popup-floor-control">
                <label>Dist (m):</label>
                <input type="number" step="0.1" min="0" value="${hasCustomDist ? effectiveDist : ''}"
                       placeholder="${dev.estimated_distance_m}"
                       onchange="updateDeviceDistance('${btDeviceId}', this.value)">
            </div>
            <div class="popup-position-status">
                <span class="status-label">Position:</span>
                <span class="status-value ${positionClass}">${positionStatus}</span>
            </div>
            ${resetBtn}
            ${dragHint}
            ${trailBtnHtml}
        `);

        // Offset marker up based on floor (unknown floors at ground level)
        const btOffset = deviceFloor !== null ? (deviceFloor - groundFloor) * pixelsPerFloor : 0;
        const marker = new maplibregl.Marker({
            element: el,
            offset: [0, -btOffset],
            draggable: isDraggable
        })
            .setLngLat([pos.lon, pos.lat])
            .setPopup(popup)
            .addTo(map3d);

        // Handle drag end for floor-assigned devices
        if (isDraggable) {
            marker.on('dragend', () => onMarkerDragEnd(marker, btDeviceId, lat, lon));
        }

        marker._deviceId = btDeviceId;
        popup.on('open', () => { openPopupDeviceId = btDeviceId; });
        popup.on('close', () => { if (openPopupDeviceId === btDeviceId) openPopupDeviceId = null; });
        map3dMarkers.push(marker);
    });

    // Reopen saved popup if device still exists
    if (savedPopupDeviceId) {
        const markerToOpen = map3dMarkers.find(m => m._deviceId === savedPopupDeviceId);
        if (markerToOpen && markerToOpen.getPopup()) {
            markerToOpen.togglePopup();
        }
    }

    console.log('update3DMarkers:', map3dMarkers.length, 'DOM markers at floor', scannerFloor);

    // Update floor device count
    updateFloorDeviceCount();
}

// ========== Floor Selector Functions ==========

// Initialize floor selector
function initFloorSelector() {
    // Set initial floor from building config
    if (APP_CONFIG.building && APP_CONFIG.building.enabled) {
        currentFloor = APP_CONFIG.building.currentFloor.toString();
    }
    updateFloorSelector();
}

// Update floor selector options based on building config and device data
function updateFloorSelector() {
    const select = document.getElementById('floor-select');
    if (!select) return;

    // Get current selection
    const currentSelection = select.value;

    // Clear options except "All Floors"
    select.innerHTML = '<option value="all">All Floors</option>';

    // Get floors from config or scan data
    const buildingConfig = APP_CONFIG.building || {};
    const floors = buildingConfig.floors || 1;
    const groundFloor = buildingConfig.groundFloorNumber || 0;

    // Collect unique floors from scan data
    const deviceFloors = new Set();
    if (scanData) {
        (scanData.wifi_networks || []).forEach(n => {
            if (n.floor !== null && n.floor !== undefined) {
                deviceFloors.add(n.floor);
            }
        });
        (scanData.bluetooth_devices || []).forEach(d => {
            if (d.floor !== null && d.floor !== undefined) {
                deviceFloors.add(d.floor);
            }
        });
    }

    // Add floor options
    // Use building config floors or detected floors, whichever is more
    const maxFloor = Math.max(floors - 1 + groundFloor, ...Array.from(deviceFloors));
    const minFloor = Math.min(groundFloor, ...Array.from(deviceFloors));

    for (let i = minFloor; i <= maxFloor; i++) {
        const option = document.createElement('option');
        option.value = i;

        // Label floor appropriately
        if (i === 0) {
            option.textContent = 'Ground Floor (0)';
        } else if (i < 0) {
            option.textContent = `Basement ${Math.abs(i)} (${i})`;
        } else {
            option.textContent = `Floor ${i}`;
        }

        // Mark floors that have devices
        if (deviceFloors.has(i)) {
            option.textContent += ' ●';
        }

        select.appendChild(option);
    }

    // Restore selection if still valid, or use currentFloor
    if (currentSelection && (currentSelection === 'all' || select.querySelector(`option[value="${currentSelection}"]`))) {
        select.value = currentSelection;
    } else if (currentFloor && select.querySelector(`option[value="${currentFloor}"]`)) {
        select.value = currentFloor;
    }

    updateFloorDeviceCount();
}

// Generate floor options HTML for dropdown
function generateFloorOptions(selectedFloor) {
    const buildingConfig = APP_CONFIG.building || {};
    const floors = buildingConfig.floors || 12;
    const groundFloor = buildingConfig.groundFloorNumber || 0;

    let options = '';
    for (let i = groundFloor; i < groundFloor + floors; i++) {
        const selected = selectedFloor === i ? 'selected' : '';
        const label = i === 0 ? 'Ground (0)' : `Floor ${i}`;
        options += `<option value="${i}" ${selected}>${label}</option>`;
    }
    return options;
}

// Update device floor via API
async function updateDeviceFloor(deviceId, floorValue) {
    const floor = floorValue === '' ? null : parseInt(floorValue);

    try {
        const response = await fetch(`/api/device/${encodeURIComponent(deviceId)}/floor`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ floor: floor })
        });

        if (response.ok) {
            console.log('Updated floor for', deviceId, 'to', floor);
            // Update local scan data
            if (scanData) {
                const wifiDevice = scanData.wifi_networks?.find(n => n.bssid === deviceId);
                if (wifiDevice) wifiDevice.floor = floor;

                const btDevice = scanData.bluetooth_devices?.find(d => d.address === deviceId);
                if (btDevice) btDevice.floor = floor;
            }
            // Refresh markers
            update3DMarkers();
            updateFloorSelector();
        } else {
            console.error('Failed to update floor:', await response.text());
        }
    } catch (error) {
        console.error('Error updating floor:', error);
    }
}

// Update device custom distance via API
async function updateDeviceDistance(deviceId, distanceValue) {
    const distance = distanceValue === '' ? null : parseFloat(distanceValue);

    try {
        const response = await fetch(`/api/device/${encodeURIComponent(deviceId)}/distance`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ distance: distance })
        });

        if (response.ok) {
            console.log('Updated distance for', deviceId, 'to', distance);
            // Update local scan data
            if (scanData) {
                const wifiDevice = scanData.wifi_networks?.find(n => n.bssid === deviceId);
                if (wifiDevice) wifiDevice.custom_distance_m = distance;

                const btDevice = scanData.bluetooth_devices?.find(d => d.address === deviceId);
                if (btDevice) btDevice.custom_distance_m = distance;
            }
            // Refresh markers
            update3DMarkers();
            drawRadar();
            updateMapMarkers();
        } else {
            console.error('Failed to update distance:', await response.text());
        }
    } catch (error) {
        console.error('Error updating distance:', error);
    }
}

// Get effective distance (custom or estimated)
function getEffectiveDistance(device) {
    if (device.custom_distance_m !== null && device.custom_distance_m !== undefined) {
        return device.custom_distance_m;
    }
    return device.estimated_distance_m;
}

// Set floor filter
function setFloorFilter(floor) {
    console.log('setFloorFilter:', floor);
    currentFloor = floor;
    update3DMarkers();
    updateFloorDeviceCount();
}

// Update the floor device count display
function updateFloorDeviceCount() {
    const countEl = document.getElementById('floor-device-count');
    if (!countEl || !scanData) {
        if (countEl) countEl.textContent = '--';
        return;
    }

    const wifi = scanData.wifi_networks || [];
    const bt = scanData.bluetooth_devices || [];

    let count;
    if (currentFloor === 'all') {
        count = wifi.length + bt.length;
    } else {
        const floorNum = parseInt(currentFloor);
        count = wifi.filter(n => n.floor === floorNum || n.floor === null).length +
                bt.filter(d => d.floor === floorNum || d.floor === null).length;
    }

    countEl.textContent = count;
}

// ========== Live BT Tracking Functions ==========

// Toggle live BT tracking mode
function toggleLiveTracking() {
    if (liveTrackingEnabled) {
        stopLiveTracking();
    } else {
        startLiveTracking();
    }
}

// Start live BT tracking
function startLiveTracking() {
    if (liveTrackingInterval) {
        clearInterval(liveTrackingInterval);
    }

    liveTrackingEnabled = true;
    updateLiveTrackingUI();
    console.log('Live BT tracking started');

    // Do initial scan
    performLiveBTScan();

    // Set up interval
    liveTrackingInterval = setInterval(performLiveBTScan, LIVE_TRACKING_INTERVAL_MS);
}

// Stop live BT tracking
function stopLiveTracking() {
    liveTrackingEnabled = false;
    if (liveTrackingInterval) {
        clearInterval(liveTrackingInterval);
        liveTrackingInterval = null;
    }
    updateLiveTrackingUI();
    console.log('Live BT tracking stopped');
}

// Update live tracking UI
function updateLiveTrackingUI() {
    const btn = document.getElementById('live-track-btn');
    if (btn) {
        btn.textContent = liveTrackingEnabled ? '⏹ Stop Live' : '▶ Live Track';
        btn.classList.toggle('active', liveTrackingEnabled);
    }

    const status = document.getElementById('scan-status');
    if (status && liveTrackingEnabled) {
        status.textContent = 'Live tracking active...';
    }
}

// Perform a quick BT-only scan for live tracking
async function performLiveBTScan() {
    if (!liveTrackingEnabled) return;

    try {
        const response = await fetch('/api/scan/bt', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' }
        });

        if (response.ok) {
            const data = await response.json();
            const newBt = data.bluetooth_devices || [];

            // Track which devices were detected in this scan
            const detectedAddresses = new Set(newBt.map(d => d.address));

            // Merge BT data with existing scan data, preserving custom distances and floors
            if (scanData) {
                const existingBt = scanData.bluetooth_devices || [];

                // Update existing devices with new RSSI, add new devices
                newBt.forEach(newDev => {
                    const existing = existingBt.find(d => d.address === newDev.address);
                    const newDist = newDev.estimated_distance_m;

                    // Check for movement using statistical analysis
                    const moving = isDeviceMoving(newDev.address, newDist);

                    // Reset miss count - device was detected
                    deviceMissCount[newDev.address] = 0;

                    if (existing) {
                        // Update RSSI and estimated distance, preserve custom values
                        existing.rssi = newDev.rssi;
                        existing.estimated_distance_m = newDev.estimated_distance_m;
                        existing.signal_quality = newDev.signal_quality;
                        existing.is_moving = moving;
                        existing.miss_count = 0;
                        // Preserve floor and custom_distance_m if set
                    } else {
                        // New device, add it
                        newDev.is_moving = moving;
                        existingBt.push(newDev);
                    }
                });

                // Increment miss count for devices not detected in this scan
                existingBt.forEach(dev => {
                    if (!detectedAddresses.has(dev.address)) {
                        deviceMissCount[dev.address] = (deviceMissCount[dev.address] || 0) + 1;
                        dev.miss_count = deviceMissCount[dev.address];
                    }
                });

                // Filter out devices that have been missed too many times
                const filteredBt = existingBt.filter(dev => {
                    const missCount = deviceMissCount[dev.address] || 0;
                    if (missCount >= MAX_MISSED_SCANS) {
                        // Clean up tracking data for removed device
                        delete deviceMissCount[dev.address];
                        delete deviceDistanceHistory[dev.address];
                        // Clear trail if showing
                        if (deviceTrails[dev.address]) {
                            clearDeviceTrail(dev.address);
                        }
                        console.log(`[Live] Removed ${dev.name} (missed ${missCount} scans)`);
                        return false;
                    }
                    return true;
                });

                scanData.bluetooth_devices = filteredBt;
            } else {
                // No existing scan data, use BT-only data
                data.bluetooth_devices.forEach(dev => {
                    // Initialize history with first sample, not moving yet
                    isDeviceMoving(dev.address, dev.estimated_distance_m);
                    dev.is_moving = false;
                    deviceMissCount[dev.address] = 0;
                });
                scanData = {
                    wifi_networks: [],
                    bluetooth_devices: data.bluetooth_devices,
                    timestamp: data.timestamp
                };
            }

            // Update visualizations
            const status = document.getElementById('scan-status');
            if (status) {
                const movingCount = scanData.bluetooth_devices.filter(d => d.is_moving).length;
                status.textContent = `Live: ${scanData.bluetooth_devices.length} BT (${movingCount} moving) @ ${new Date().toLocaleTimeString()}`;
            }

            // Update BT count
            document.getElementById('bt-count').textContent = scanData.bluetooth_devices.length;
            document.getElementById('bt-list-count').textContent = scanData.bluetooth_devices.length;

            // Refresh views
            drawRadar();
            update3DMarkers();
            updateMapMarkers();
        }
    } catch (error) {
        console.error('Live BT scan error:', error);
    }
}

// ========== Device Trails Functions ==========

// Toggle trail for a specific device (called from popup button)
async function toggleDeviceTrail(deviceId, deviceName, deviceType) {
    const btnId = `trail-btn-${deviceId.replace(/:/g, '')}`;
    const btn = document.getElementById(btnId);

    // Check if trail already exists for this device
    if (deviceTrails[deviceId]) {
        // Hide trail
        clearDeviceTrail(deviceId);
        if (btn) {
            btn.textContent = 'Show Trail';
            btn.classList.remove('active');
        }
        console.log(`[Trails] Hidden trail for ${deviceName}`);
    } else {
        // Show trail - fetch and render
        if (btn) {
            btn.textContent = 'Loading...';
            btn.classList.add('loading');
        }

        await fetchDeviceTrail(deviceId, deviceName, deviceType);
        renderDeviceTrail(deviceId);

        if (btn) {
            btn.textContent = 'Hide Trail';
            btn.classList.remove('loading');
            btn.classList.add('active');
        }
        console.log(`[Trails] Showing trail for ${deviceName}`);
    }
}

// Fetch trail data for a single device
async function fetchDeviceTrail(deviceId, deviceName, deviceType) {
    try {
        // Get last 100 observations for trail
        const response = await fetch(`/api/history/devices/${encodeURIComponent(deviceId)}/rssi?limit=100`);

        if (!response.ok) {
            console.error(`[Trails] Failed to fetch trail for ${deviceId}`);
            return;
        }

        const data = await response.json();
        const observations = data.observations || [];

        if (observations.length < 2) {
            console.log(`[Trails] Not enough data points for ${deviceId} (${observations.length})`);
            return;
        }

        // Convert observations to trail points with positions
        const lat = parseFloat(document.getElementById('lat-input').value) || APP_CONFIG.defaultLat;
        const lon = parseFloat(document.getElementById('lon-input').value) || APP_CONFIG.defaultLon;
        const angle = hashString(deviceId) % 360;

        const trailPoints = observations.map(obs => {
            const dist = obs.distance_m || 5;
            const latOffset = (dist * Math.cos(angle * Math.PI / 180)) / 111000;
            const lonOffset = (dist * Math.sin(angle * Math.PI / 180)) / (111000 * Math.cos(lat * Math.PI / 180));

            return {
                timestamp: obs.timestamp,
                distance: dist,
                lat: lat + latOffset,
                lon: lon + lonOffset,
                rssi: obs.rssi,
                floor: obs.floor
            };
        });

        // Store trail data
        deviceTrails[deviceId] = {
            type: deviceType,
            name: deviceName,
            points: trailPoints.reverse() // Oldest first for line drawing
        };

        console.log(`[Trails] Fetched ${trailPoints.length} points for ${deviceName}`);

    } catch (error) {
        console.error(`[Trails] Error fetching trail for ${deviceId}:`, error);
    }
}

// Render trail for a single device on the 3D map
function renderDeviceTrail(deviceId) {
    if (!map3d || !map3dLoaded) return;

    const trail = deviceTrails[deviceId];
    if (!trail || trail.points.length < 2) return;

    const safeId = deviceId.replace(/:/g, '-');
    const sourceId = `trail-source-${safeId}`;
    const layerId = `trail-layer-${safeId}`;
    const pointsLayerId = `trail-points-${safeId}`;

    // Remove existing trail for this device if any
    clearDeviceTrailLayers(safeId);

    // Create GeoJSON line coordinates
    const coordinates = trail.points.map(p => [p.lon, p.lat]);

    // Purple color for moving devices
    const color = '#9b59b6';

    // Add source for trail line
    map3d.addSource(sourceId, {
        type: 'geojson',
        data: {
            type: 'Feature',
            properties: {
                deviceId: deviceId,
                name: trail.name,
                type: trail.type
            },
            geometry: {
                type: 'LineString',
                coordinates: coordinates
            }
        }
    });

    // Add trail line layer
    map3d.addLayer({
        id: layerId,
        type: 'line',
        source: sourceId,
        layout: {
            'line-join': 'round',
            'line-cap': 'round'
        },
        paint: {
            'line-color': color,
            'line-width': 3,
            'line-opacity': 0.8,
            'line-dasharray': [2, 1]
        }
    });

    // Add trail points (circles at each observation)
    const pointFeatures = trail.points.map((p, i) => ({
        type: 'Feature',
        properties: {
            index: i,
            timestamp: p.timestamp,
            rssi: p.rssi,
            distance: p.distance
        },
        geometry: {
            type: 'Point',
            coordinates: [p.lon, p.lat]
        }
    }));

    map3d.addSource(`${sourceId}-points`, {
        type: 'geojson',
        data: {
            type: 'FeatureCollection',
            features: pointFeatures
        }
    });

    map3d.addLayer({
        id: pointsLayerId,
        type: 'circle',
        source: `${sourceId}-points`,
        paint: {
            'circle-radius': 4,
            'circle-color': color,
            'circle-opacity': 0.6,
            'circle-stroke-width': 1,
            'circle-stroke-color': '#ffffff',
            'circle-stroke-opacity': 0.5
        }
    });

    console.log(`[Trails] Rendered trail for ${trail.name} with ${trail.points.length} points`);
}

// Clear trail for a specific device
function clearDeviceTrail(deviceId) {
    const safeId = deviceId.replace(/:/g, '-');
    clearDeviceTrailLayers(safeId);
    delete deviceTrails[deviceId];
}

// Clear trail layers for a device (by safe ID)
function clearDeviceTrailLayers(safeId) {
    if (!map3d || !map3dLoaded) return;

    const sourceId = `trail-source-${safeId}`;
    const layerId = `trail-layer-${safeId}`;
    const pointsLayerId = `trail-points-${safeId}`;

    // Remove layers first
    if (map3d.getLayer(layerId)) {
        map3d.removeLayer(layerId);
    }
    if (map3d.getLayer(pointsLayerId)) {
        map3d.removeLayer(pointsLayerId);
    }

    // Remove sources
    if (map3d.getSource(sourceId)) {
        map3d.removeSource(sourceId);
    }
    if (map3d.getSource(`${sourceId}-points`)) {
        map3d.removeSource(`${sourceId}-points`);
    }
}

// Clear all trails from the 3D map
function clearAllTrails() {
    if (!map3d || !map3dLoaded) return;

    // Remove all trail layers and sources
    const style = map3d.getStyle();
    if (!style || !style.layers) return;

    // Find and remove trail layers
    const layersToRemove = style.layers
        .filter(layer => layer.id.startsWith('trail-'))
        .map(layer => layer.id);

    layersToRemove.forEach(layerId => {
        if (map3d.getLayer(layerId)) {
            map3d.removeLayer(layerId);
        }
    });

    // Find and remove trail sources
    const sources = Object.keys(style.sources || {});
    sources.forEach(sourceId => {
        if (sourceId.startsWith('trail-')) {
            if (map3d.getSource(sourceId)) {
                map3d.removeSource(sourceId);
            }
        }
    });

    deviceTrails = {};
}