{% 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));
    }
    /* Map label visibility */
    .map-label {
        opacity: 0;
        transition: opacity 0.15s ease-in-out;
    }
    .map-marker:hover .map-label {
        opacity: 1;
    }
    .show-labels .map-label {
        opacity: 1;
    }
    /* Bring hovered marker to front */
    .leaflet-marker-icon:hover {
        z-index: 10000 !important;
    }
</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">Show</span>
                </label>
                <select id="filter-category" class="select select-bordered select-sm">
                    <option value="">All Nodes</option>
                    <option value="infra">Infrastructure Only</option>
                </select>
            </div>
            <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">Member</span>
                </label>
                <select id="filter-member" class="select select-bordered select-sm">
                    <option value="">All Members</option>
                    <!-- Populated dynamically -->
                </select>
            </div>
            <div class="form-control">
                <label class="label cursor-pointer gap-2 py-1">
                    <span class="label-text">Show Labels</span>
                    <input type="checkbox" id="show-labels" class="checkbox checkbox-sm">
                </label>
            </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">
        <img src="{{ logo_url }}" alt="Infrastructure" class="h-5 w-5">
        <span>Infrastructure</span>
    </div>
    <div class="flex items-center gap-1">
        <div style="width: 10px; height: 10px; background: #3b82f6; border: 2px solid #1e40af; border-radius: 50%;"></div>
        <span>Node</span>
    </div>
</div>

<div class="mt-2 text-sm opacity-70">
    <p>Nodes are placed on the map based on GPS coordinates from node reports or manual tags.</p>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    // Logo URL for infrastructure nodes
    const logoUrl = "{{ logo_url }}";

    // 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 };
    let infraCenter = null;

    // Maximum radius (km) from anchor point for bounds calculation
    const MAX_BOUNDS_RADIUS_KM = 20;

    // Padding for fitBounds - more padding on mobile for tighter zoom
    const isMobilePortrait = window.innerWidth < 480;
    const isMobile = window.innerWidth < 768;
    const BOUNDS_PADDING = isMobilePortrait ? [50, 50] : (isMobile ? [75, 75] : [100, 100]);

    // Calculate distance between two points in km (Haversine formula)
    function getDistanceKm(lat1, lon1, lat2, lon2) {
        const R = 6371; // Earth's radius in km
        const dLat = (lat2 - lat1) * Math.PI / 180;
        const dLon = (lon2 - lon1) * Math.PI / 180;
        const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                  Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
                  Math.sin(dLon/2) * Math.sin(dLon/2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
        return R * c;
    }

    // Filter nodes within radius of anchor point for bounds calculation
    function getNodesWithinRadius(nodes, anchorLat, anchorLon, radiusKm) {
        return nodes.filter(n =>
            getDistanceKm(anchorLat, anchorLon, n.lat, n.lon) <= radiusKm
        );
    }

    // Get anchor point for bounds calculation (infra center or nodes center)
    function getAnchorPoint(nodes) {
        if (infraCenter) {
            return infraCenter;
        }
        // Fall back to center of provided nodes
        if (nodes.length === 0) return { lat: 0, lon: 0 };
        return {
            lat: nodes.reduce((sum, n) => sum + n.lat, 0) / nodes.length,
            lon: nodes.reduce((sum, n) => sum + n.lon, 0) / nodes.length
        };
    }

    // 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 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 displayName = node.name || '';
        const relativeTime = formatRelativeTime(node.last_seen);
        const timeDisplay = relativeTime ? ` (${relativeTime})` : '';

        // Use logo for infrastructure nodes, blue circle for others
        let iconHtml;
        if (node.is_infra) {
            iconHtml = `<img src="${logoUrl}" alt="Infra" style="width: 24px; height: 24px; filter: drop-shadow(0 0 2px #1a237e) drop-shadow(0 0 4px #1a237e) drop-shadow(0 1px 2px rgba(0,0,0,0.7));">`;
        } else {
            iconHtml = `<div style="width: 12px; height: 12px; background: #3b82f6; border: 2px solid #1e40af; border-radius: 50%; box-shadow: 0 0 4px rgba(59,130,246,0.6), 0 1px 2px rgba(0,0,0,0.5);"></div>`;
        }

        return L.divIcon({
            className: 'custom-div-icon',
            html: `<div class="map-marker" style="display: flex; flex-direction: column; align-items: center; gap: 2px;">
                ${iconHtml}
                <span class="map-label" style="font-size: 10px; font-weight: bold; color: #fff; background: rgba(0,0,0,0.5); padding: 1px 4px; border-radius: 3px; white-space: nowrap; text-align: center;">${displayName}${timeDisplay}</span>
            </div>`,
            iconSize: [120, 50],
            iconAnchor: [60, 12]
        });
    }

    // 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 typeDisplay = getTypeDisplay(node);

        // Use logo for infrastructure nodes, blue circle for others
        const iconHtml = node.is_infra
            ? `<img src="${logoUrl}" alt="Infra" style="width: 20px; height: 20px; display: inline-block; vertical-align: middle;">`
            : `<span style="display: inline-block; width: 12px; height: 12px; background: #3b82f6; border: 2px solid #1e40af; border-radius: 50%; vertical-align: middle;"></span>`;

        return `
            <div class="p-2">
                <h3 class="font-bold text-lg mb-2">${iconHtml} ${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-outline 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 categoryFilter = document.getElementById('filter-category').value;
        const typeFilter = document.getElementById('filter-type').value;
        const memberFilter = document.getElementById('filter-member').value;

        // Filter nodes
        const filteredNodes = allNodes.filter(node => {
            // Category filter (infrastructure only)
            if (categoryFilter === 'infra' && !node.is_infra) return false;

            // Type filter (case-insensitive)
            const nodeType = normalizeType(node.adv_type);
            if (typeFilter && nodeType !== typeFilter) return false;

            // Member filter - match node's member_id tag to selected member_id
            if (memberFilter) {
                if (node.member_id !== memberFilter) 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();
        const categoryFilter = document.getElementById('filter-category').value;

        // Fit bounds if we have filtered nodes
        if (filteredNodes.length > 0) {
            let nodesToFit = filteredNodes;

            // Apply radius filter when showing all nodes (not infra-only)
            if (categoryFilter !== 'infra') {
                const anchor = getAnchorPoint(filteredNodes);
                const nearbyNodes = getNodesWithinRadius(filteredNodes, anchor.lat, anchor.lon, MAX_BOUNDS_RADIUS_KM);
                if (nearbyNodes.length > 0) {
                    nodesToFit = nearbyNodes;
                }
            }

            const bounds = L.latLngBounds(nodesToFit.map(n => [n.lat, n.lon]));
            map.fitBounds(bounds, { padding: BOUNDS_PADDING });
        } 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 member filter dropdown
    function populateMemberFilter() {
        const select = document.getElementById('filter-member');

        // Sort members by name
        const sortedMembers = [...allMembers].sort((a, b) => a.name.localeCompare(b.name));

        // Add options for all members
        sortedMembers.forEach(member => {
            if (member.member_id) {
                const option = document.createElement('option');
                option.value = member.member_id;
                option.textContent = member.callsign
                    ? `${member.name} (${member.callsign})`
                    : member.name;
                select.appendChild(option);
            }
        });
    }

    // Clear all filters
    function clearFilters() {
        document.getElementById('filter-category').value = '';
        document.getElementById('filter-type').value = '';
        document.getElementById('filter-member').value = '';
        document.getElementById('show-labels').checked = false;
        updateLabelVisibility();
        applyFilters();
    }

    // Toggle label visibility
    function updateLabelVisibility() {
        const showLabels = document.getElementById('show-labels').checked;
        const mapEl = document.getElementById('map');
        if (showLabels) {
            mapEl.classList.add('show-labels');
        } else {
            mapEl.classList.remove('show-labels');
        }
    }

    // Event listeners for filters
    document.getElementById('filter-category').addEventListener('change', applyFilters);
    document.getElementById('filter-type').addEventListener('change', applyFilters);
    document.getElementById('filter-member').addEventListener('change', applyFilters);
    document.getElementById('show-labels').addEventListener('change', updateLabelVisibility);
    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;
            infraCenter = data.infra_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 member filter
            populateMemberFilter();

            // Initial display - center map on infrastructure nodes if available, else nodes within radius
            const infraNodes = allNodes.filter(n => n.is_infra);
            if (infraNodes.length > 0) {
                const bounds = L.latLngBounds(infraNodes.map(n => [n.lat, n.lon]));
                map.fitBounds(bounds, { padding: BOUNDS_PADDING });
            } else if (allNodes.length > 0) {
                // Use radius filter to exclude outliers
                const anchor = getAnchorPoint(allNodes);
                const nearbyNodes = getNodesWithinRadius(allNodes, anchor.lat, anchor.lon, MAX_BOUNDS_RADIUS_KM);
                const nodesToFit = nearbyNodes.length > 0 ? nearbyNodes : allNodes;
                const bounds = L.latLngBounds(nodesToFit.map(n => [n.lat, n.lon]));
                map.fitBounds(bounds, { padding: BOUNDS_PADDING });
            }

            // 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 %}