{% extends "base.html" %}

{% block title %}{{ network_name }} - Node Map{% endblock %}

{% block extra_head %}
<style>
    #map {
        height: calc(100vh - 350px);
        min-height: 400px;
        border-radius: var(--rounded-box);
    }
    .leaflet-popup-content-wrapper {
        background: oklch(var(--b1));
        color: oklch(var(--bc));
    }
    .leaflet-popup-tip {
        background: oklch(var(--b1));
    }
</style>
{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
    <h1 class="text-3xl font-bold">Node Map</h1>
    <div class="flex items-center gap-2">
        <span id="node-count" class="badge badge-lg">Loading...</span>
        <span id="filtered-count" class="badge badge-lg badge-ghost hidden"></span>
    </div>
</div>

<!-- Filters -->
<div class="card bg-base-100 shadow mb-6">
    <div class="card-body py-4">
        <div class="flex gap-4 flex-wrap items-end">
            <div class="form-control">
                <label class="label py-1">
                    <span class="label-text">Node Type</span>
                </label>
                <select id="filter-type" class="select select-bordered select-sm">
                    <option value="">All Types</option>
                    <option value="chat">Chat</option>
                    <option value="repeater">Repeater</option>
                    <option value="room">Room</option>
                </select>
            </div>
            <div class="form-control">
                <label class="label py-1">
                    <span class="label-text">Owner</span>
                </label>
                <select id="filter-owner" class="select select-bordered select-sm">
                    <option value="">All Owners</option>
                    <!-- Populated dynamically -->
                </select>
            </div>
            <button id="clear-filters" class="btn btn-ghost btn-sm">Clear Filters</button>
        </div>
    </div>
</div>

<div class="card bg-base-100 shadow-xl">
    <div class="card-body p-2">
        <div id="map"></div>
    </div>
</div>

<!-- Legend -->
<div class="mt-4 flex flex-wrap gap-4 items-center text-sm">
    <span class="opacity-70">Legend:</span>
    <div class="flex items-center gap-1">
        <span class="text-lg">💬</span>
        <span>Chat</span>
    </div>
    <div class="flex items-center gap-1">
        <span class="text-lg">📡</span>
        <span>Repeater</span>
    </div>
    <div class="flex items-center gap-1">
        <span class="text-lg">🪧</span>
        <span>Room</span>
    </div>
    <div class="flex items-center gap-1">
        <span class="text-lg">📍</span>
        <span>Other</span>
    </div>
</div>

<div class="mt-2 text-sm opacity-70">
    <p>Nodes are placed on the map based on their <code>lat</code> and <code>lon</code> tags.</p>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    // Initialize map with world view (will be centered on nodes once loaded)
    const map = L.map('map').setView([0, 0], 2);

    // Add tile layer
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // Store all nodes and markers
    let allNodes = [];
    let allMembers = [];
    let markers = [];
    let mapCenter = { lat: 0, lon: 0 };

    // Normalize adv_type to lowercase for consistent comparison
    function normalizeType(type) {
        return type ? type.toLowerCase() : null;
    }

    // formatRelativeTime is provided by /static/js/utils.js

    // Get emoji marker based on node type
    function getNodeEmoji(node) {
        const type = normalizeType(node.adv_type);
        if (type === 'chat') return '💬';
        if (type === 'repeater') return '📡';
        if (type === 'room') return '🪧';
        return '📍';
    }

    // Get display name for node type
    function getTypeDisplay(node) {
        const type = normalizeType(node.adv_type);
        if (type === 'chat') return 'Chat';
        if (type === 'repeater') return 'Repeater';
        if (type === 'room') return 'Room';
        return type ? type.charAt(0).toUpperCase() + type.slice(1) : 'Unknown';
    }

    // Create marker icon for a node
    function createNodeIcon(node) {
        const emoji = getNodeEmoji(node);
        const displayName = node.name || '';
        const relativeTime = formatRelativeTime(node.last_seen);
        const timeDisplay = relativeTime ? ` (${relativeTime})` : '';
        return L.divIcon({
            className: 'custom-div-icon',
            html: `<div style="display: flex; align-items: center; gap: 2px;">
                <span style="font-size: 24px; text-shadow: 0 0 3px #1a237e, 0 0 6px #1a237e, 0 1px 2px rgba(0,0,0,0.7);">${emoji}</span>
                <span style="font-size: 10px; font-weight: bold; color: #000; background: rgba(255,255,255,0.9); padding: 1px 4px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.3);">${displayName}${timeDisplay}</span>
            </div>`,
            iconSize: [82, 28],
            iconAnchor: [14, 14]
        });
    }

    // Create popup content for a node
    function createPopupContent(node) {
        let ownerHtml = '';
        if (node.owner) {
            const ownerDisplay = node.owner.callsign
                ? `${node.owner.name} (${node.owner.callsign})`
                : node.owner.name;
            ownerHtml = `<p><span class="opacity-70">Owner:</span> ${ownerDisplay}</p>`;
        }

        let roleHtml = '';
        if (node.role) {
            roleHtml = `<p><span class="opacity-70">Role:</span> <span class="badge badge-xs badge-ghost">${node.role}</span></p>`;
        }

        const emoji = getNodeEmoji(node);
        const typeDisplay = getTypeDisplay(node);

        return `
            <div class="p-2">
                <h3 class="font-bold text-lg mb-2">${emoji} ${node.name}</h3>
                <div class="space-y-1 text-sm">
                    <p><span class="opacity-70">Type:</span> ${typeDisplay}</p>
                    ${roleHtml}
                    ${ownerHtml}
                    <p><span class="opacity-70">Key:</span> <code class="text-xs">${node.public_key.substring(0, 16)}...</code></p>
                    <p><span class="opacity-70">Location:</span> ${node.lat.toFixed(4)}, ${node.lon.toFixed(4)}</p>
                    ${node.last_seen ? `<p><span class="opacity-70">Last seen:</span> ${node.last_seen.substring(0, 19).replace('T', ' ')}</p>` : ''}
                </div>
                <a href="/nodes/${node.public_key}" class="btn btn-primary btn-xs mt-3">View Details</a>
            </div>
        `;
    }

    // Clear all markers from map
    function clearMarkers() {
        markers.forEach(marker => map.removeLayer(marker));
        markers = [];
    }

    // Core filter logic - returns filtered nodes and updates markers
    function applyFiltersCore() {
        const typeFilter = document.getElementById('filter-type').value;
        const ownerFilter = document.getElementById('filter-owner').value;

        // Filter nodes
        const filteredNodes = allNodes.filter(node => {
            // Type filter (case-insensitive)
            if (typeFilter && normalizeType(node.adv_type) !== typeFilter) return false;

            // Owner filter
            if (ownerFilter) {
                if (!node.owner || node.owner.public_key !== ownerFilter) return false;
            }

            return true;
        });

        // Clear existing markers
        clearMarkers();

        // Add filtered markers
        filteredNodes.forEach(node => {
            const marker = L.marker([node.lat, node.lon], { icon: createNodeIcon(node) }).addTo(map);
            marker.bindPopup(createPopupContent(node));
            markers.push(marker);
        });

        // Update counts
        const countEl = document.getElementById('node-count');
        const filteredEl = document.getElementById('filtered-count');

        if (filteredNodes.length === allNodes.length) {
            countEl.textContent = `${allNodes.length} nodes on map`;
            filteredEl.classList.add('hidden');
        } else {
            countEl.textContent = `${allNodes.length} total`;
            filteredEl.textContent = `${filteredNodes.length} shown`;
            filteredEl.classList.remove('hidden');
        }

        return filteredNodes;
    }

    // Apply filters and recenter map on filtered nodes
    function applyFilters() {
        const filteredNodes = applyFiltersCore();

        // Fit bounds if we have filtered nodes
        if (filteredNodes.length > 0) {
            const bounds = L.latLngBounds(filteredNodes.map(n => [n.lat, n.lon]));
            map.fitBounds(bounds, { padding: [50, 50] });
        } else if (mapCenter.lat !== 0 || mapCenter.lon !== 0) {
            map.setView([mapCenter.lat, mapCenter.lon], 10);
        }
    }

    // Apply filters without recentering (for initial load after manual center)
    function applyFiltersNoRecenter() {
        applyFiltersCore();
    }

    // Populate owner filter dropdown
    function populateOwnerFilter() {
        const select = document.getElementById('filter-owner');

        // Get unique owners from nodes that have locations
        const ownersWithNodes = new Set();
        allNodes.forEach(node => {
            if (node.owner) {
                ownersWithNodes.add(node.owner.public_key);
            }
        });

        // Filter members to only those who own nodes on the map
        const relevantMembers = allMembers.filter(m => ownersWithNodes.has(m.public_key));

        // Sort by name
        relevantMembers.sort((a, b) => a.name.localeCompare(b.name));

        // Add options
        relevantMembers.forEach(member => {
            const option = document.createElement('option');
            option.value = member.public_key;
            option.textContent = member.callsign
                ? `${member.name} (${member.callsign})`
                : member.name;
            select.appendChild(option);
        });
    }

    // Clear all filters
    function clearFilters() {
        document.getElementById('filter-type').value = '';
        document.getElementById('filter-owner').value = '';
        applyFilters();
    }

    // Event listeners for filters
    document.getElementById('filter-type').addEventListener('change', applyFilters);
    document.getElementById('filter-owner').addEventListener('change', applyFilters);
    document.getElementById('clear-filters').addEventListener('click', clearFilters);

    // Fetch and display nodes
    fetch('/map/data')
        .then(response => response.json())
        .then(data => {
            allNodes = data.nodes;
            allMembers = data.members || [];
            mapCenter = data.center;

            // Log debug info
            const debug = data.debug || {};
            console.log('Map data loaded:', debug);
            console.log('Sample node data:', allNodes.length > 0 ? allNodes[0] : 'No nodes');

            if (debug.error) {
                document.getElementById('node-count').textContent = `Error: ${debug.error}`;
                return;
            }

            if (debug.total_nodes === 0) {
                document.getElementById('node-count').textContent = 'No nodes in database';
                return;
            }

            if (debug.nodes_with_coords === 0) {
                document.getElementById('node-count').textContent = `${debug.total_nodes} nodes (none have coordinates)`;
                return;
            }

            // Populate owner filter
            populateOwnerFilter();

            // Initial display - center map on nodes if available
            if (allNodes.length > 0) {
                const bounds = L.latLngBounds(allNodes.map(n => [n.lat, n.lon]));
                map.fitBounds(bounds, { padding: [50, 50] });
            }

            // Apply filters (won't re-center since we just did above)
            applyFiltersNoRecenter();
        })
        .catch(error => {
            console.error('Error loading map data:', error);
            document.getElementById('node-count').textContent = 'Error loading data';
        });
</script>
{% endblock %}