{% extends "base.html" %}

{% block title %}RF Mapper - WiFi & Bluetooth Signal Map{% endblock %}

{% block header_controls %}
    <div id="node-selector-container" class="hidden">
        <select id="node-select" onchange="switchNode(this.value)">
            <option value="local" selected>📍 This Scanner</option>
        </select>
        <span id="node-status" class="node-status">●</span>
    </div>
    <span id="scan-status" class="scan-info">Ready</span>
    <button class="btn" id="scan-btn" onclick="triggerScan()">
        🔍 New Scan
    </button>
    <button class="btn" id="live-track-btn" onclick="toggleLiveTracking()">
        ▶ Live Track
    </button>
    <button class="btn" id="autoscan-btn" onclick="toggleAutoScan()">
        ⏱️ Auto: Off
    </button>
{% endblock %}

{% block content %}
    <div class="main-container">
        <div class="map-container">
            <div class="view-toggle">
                <button id="btn-radar" onclick="setView('radar')">Radar</button>
                <button id="btn-map" onclick="setView('map')">World Map</button>
                <button id="btn-3d" class="active" onclick="setView('3d')">3D Map</button>
            </div>

            <div class="filter-controls">
                <button id="filter-wifi" class="filter-btn wifi inactive" onclick="toggleFilter('wifi')">
                    <span class="filter-indicator"></span>
                    <span>WiFi</span>
                </button>
                <button id="filter-bt" class="filter-btn bluetooth" onclick="toggleFilter('bluetooth')">
                    <span class="filter-indicator"></span>
                    <span>Bluetooth</span>
                </button>
                <button id="btn-heatmap" class="filter-btn heatmap" onclick="toggleHeatMap()">
                    <span>🌡️ Heat Map</span>
                </button>
            </div>

            <canvas id="radar-canvas" class="radar-canvas"></canvas>
            <div id="leaflet-map" class="hidden"></div>
            <div id="map-3d" class="map-3d active"></div>

            <!-- Device Detail Panel -->
            <div id="device-detail-panel" class="device-detail-panel hidden">
                <button class="detail-close" onclick="closeDetailPanel()">&times;</button>
                <div class="detail-header">
                    <span class="detail-icon" id="detail-icon"></span>
                    <span class="detail-name" id="detail-name"></span>
                </div>
                <div class="detail-content">
                    <div class="detail-row">
                        <span class="detail-label">Signal:</span>
                        <span class="detail-value" id="detail-signal"></span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Distance:</span>
                        <span class="detail-value" id="detail-distance"></span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Manufacturer:</span>
                        <span class="detail-value" id="detail-manufacturer"></span>
                    </div>
                    <div class="detail-row" id="detail-channel-row">
                        <span class="detail-label">Channel:</span>
                        <span class="detail-value" id="detail-channel"></span>
                    </div>
                    <div class="detail-row" id="detail-type-row">
                        <span class="detail-label">Type:</span>
                        <span class="detail-value" id="detail-type"></span>
                    </div>
                    <div class="detail-row" id="detail-address-row">
                        <span class="detail-label">Address:</span>
                        <span class="detail-value" id="detail-address"></span>
                    </div>
                </div>
            </div>
        </div>

        <aside class="sidebar">
            <!-- Hidden inputs to preserve GPS values for JS -->
            <input type="hidden" id="lat-input" value="{{ lat }}">
            <input type="hidden" id="lon-input" value="{{ lon }}">

            <div class="section floor-section" id="floor-section">
                <div class="section-header">
                    <span class="section-title">🏢 Floor Filter</span>
                </div>
                <div class="floor-controls">
                    <select id="floor-select" onchange="setFloorFilter(this.value)">
                        <option value="all" selected>All Floors</option>
                    </select>
                    <div class="floor-info" id="floor-info">
                        <span id="floor-device-count">--</span> devices on selected floor
                    </div>
                </div>
            </div>

            <div class="section">
                <div class="section-header">
                    <span class="section-title">⏱️ Auto-Scan</span>
                    <span class="autoscan-status" id="autoscan-status">Off</span>
                </div>
                <div class="autoscan-controls">
                    <div class="autoscan-row">
                        <label for="autoscan-interval">Interval (min):</label>
                        <input type="number" id="autoscan-interval" min="1" max="60" value="5">
                    </div>
                    <div class="autoscan-row">
                        <label for="autoscan-label">Location label:</label>
                        <input type="text" id="autoscan-label" value="auto_scan" placeholder="auto_scan">
                    </div>
                    <div class="autoscan-row">
                        <span id="autoscan-info">Last scan: --</span>
                    </div>
                    <div class="autoscan-buttons">
                        <button class="btn btn-small" onclick="startAutoScan()">Start</button>
                        <button class="btn btn-small btn-secondary" onclick="stopAutoScan()">Stop</button>
                    </div>
                </div>
            </div>

            <div class="section">
                <div class="section-header">
                    <span class="section-title">📥 Import Data</span>
                </div>
                <div class="import-controls">
                    <div class="import-row">
                        <label>BLE Radar Database:</label>
                        <input type="file" id="ble-radar-file" accept=".sqlite,.db">
                    </div>
                    <div class="import-row">
                        <button class="btn btn-small" onclick="importBleRadar()">Import</button>
                        <span id="import-status"></span>
                    </div>
                </div>
            </div>

            <div class="section">
                <div class="section-header">
                    <span class="section-title">📊 Statistics</span>
                </div>
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-value" id="wifi-count">0</div>
                        <div class="stat-label">WiFi Networks</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" id="bt-count">0</div>
                        <div class="stat-label">Bluetooth</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" id="avg-signal">--</div>
                        <div class="stat-label">Avg Signal</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" id="nearest">--</div>
                        <div class="stat-label">Nearest (m)</div>
                    </div>
                </div>
            </div>

            <div class="section">
                <div class="section-header">
                    <span class="section-title">📶 WiFi Networks</span>
                    <span class="device-count" id="wifi-list-count">0</span>
                </div>
                <div class="device-list" id="wifi-list">
                    <div class="loading">Loading...</div>
                </div>
            </div>

            <div class="section">
                <div class="section-header">
                    <span class="section-title">🔵 Bluetooth Devices</span>
                    <span class="device-count" id="bt-list-count">0</span>
                </div>
                <div class="device-list" id="bt-list">
                    <div class="loading">Loading...</div>
                </div>
            </div>
        </aside>
    </div>
{% endblock %}

{% block extra_js %}
    <!-- Socket.IO client -->
    <script src="{{ url_for('static', filename='js/vendor/socket.io.min.js') }}"></script>
    <!-- WebSocket client module -->
    <script src="{{ url_for('static', filename='js/websocket.js') }}"></script>
    <!-- Main application -->
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
{% endblock %}