{% extends "base.html" %}

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

{% block extra_head %}
<style>
    #node-map {
        height: 300px;
        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="breadcrumbs text-sm mb-4">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/nodes">Nodes</a></li>
        {% if node %}
        {% set ns = namespace(tag_name=none) %}
        {% for tag in node.tags or [] %}
            {% if tag.key == 'name' %}
                {% set ns.tag_name = tag.value %}
            {% endif %}
        {% endfor %}
        <li>{{ ns.tag_name or node.name or public_key[:12] + '...' }}</li>
        {% else %}
        <li>Not Found</li>
        {% endif %}
    </ul>
</div>

{% if api_error %}
<div class="alert alert-warning mb-6">
    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
    </svg>
    <span>Could not fetch data from API: {{ api_error }}</span>
</div>
{% endif %}

{% if node %}
{% set ns = namespace(tag_name=none) %}
{% for tag in node.tags or [] %}
    {% if tag.key == 'name' %}
        {% set ns.tag_name = tag.value %}
    {% endif %}
{% endfor %}
<!-- Node Info Card -->
<div class="card bg-base-100 shadow-xl mb-6">
    <div class="card-body">
        <h1 class="card-title text-2xl">
            {% if node.adv_type %}
                {% if node.adv_type|lower == 'chat' %}
                <span title="Chat">💬</span>
                {% elif node.adv_type|lower == 'repeater' %}
                <span title="Repeater">📡</span>
                {% elif node.adv_type|lower == 'room' %}
                <span title="Room">🪧</span>
                {% else %}
                <span title="{{ node.adv_type }}">📍</span>
                {% endif %}
            {% endif %}
            {{ ns.tag_name or node.name or 'Unnamed Node' }}
        </h1>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div>
                <h3 class="font-semibold opacity-70 mb-2">Public Key</h3>
                <code class="text-sm bg-base-200 p-2 rounded block break-all">{{ node.public_key }}</code>
            </div>
            <div>
                <h3 class="font-semibold opacity-70 mb-2">Activity</h3>
                <div class="space-y-1 text-sm">
                    <p><span class="opacity-70">First seen:</span> {{ node.first_seen[:19].replace('T', ' ') if node.first_seen else '-' }}</p>
                    <p><span class="opacity-70">Last seen:</span> {{ node.last_seen[:19].replace('T', ' ') if node.last_seen else '-' }}</p>
                </div>
            </div>
        </div>

        <!-- Tags and Map Grid -->
        {% set ns_map = namespace(lat=none, lon=none) %}
        {% for tag in node.tags or [] %}
            {% if tag.key == 'lat' %}
                {% set ns_map.lat = tag.value %}
            {% elif tag.key == 'lon' %}
                {% set ns_map.lon = tag.value %}
            {% endif %}
        {% endfor %}

        <div class="grid grid-cols-1 {% if ns_map.lat and ns_map.lon %}lg:grid-cols-2{% endif %} gap-6 mt-6">
            <!-- Tags -->
            {% if node.tags %}
            <div>
                <h3 class="font-semibold opacity-70 mb-2">Tags</h3>
                <div class="overflow-x-auto">
                    <table class="table table-compact w-full">
                        <thead>
                            <tr>
                                <th>Key</th>
                                <th>Value</th>
                                <th>Type</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for tag in node.tags %}
                            <tr>
                                <td class="font-mono">{{ tag.key }}</td>
                                <td>{{ tag.value }}</td>
                                <td class="opacity-70">{{ tag.value_type or 'string' }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% endif %}

            <!-- Location Map -->
            {% if ns_map.lat and ns_map.lon %}
            <div>
                <h3 class="font-semibold opacity-70 mb-2">Location</h3>
                <div id="node-map" class="mb-2"></div>
                <div class="text-sm opacity-70">
                    <p>Coordinates: {{ ns_map.lat }}, {{ ns_map.lon }}</p>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Recent Advertisements -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
            <h2 class="card-title">Recent Advertisements</h2>
            {% if advertisements %}
            <div class="overflow-x-auto">
                <table class="table table-compact w-full">
                    <thead>
                        <tr>
                            <th>Time</th>
                            <th>Type</th>
                            <th>Received By</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for adv in advertisements %}
                        <tr>
                            <td class="text-xs whitespace-nowrap">{{ adv.received_at[:19].replace('T', ' ') if adv.received_at else '-' }}</td>
                            <td>
                                {% if adv.adv_type and adv.adv_type|lower == 'chat' %}
                                <span title="Chat">💬</span>
                                {% elif adv.adv_type and adv.adv_type|lower == 'repeater' %}
                                <span title="Repeater">📡</span>
                                {% elif adv.adv_type and adv.adv_type|lower == 'room' %}
                                <span title="Room">🪧</span>
                                {% elif adv.adv_type %}
                                <span title="{{ adv.adv_type }}">📍</span>
                                {% else %}
                                <span class="opacity-50">-</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if adv.received_by %}
                                <a href="/nodes/{{ adv.received_by }}" class="link link-hover">
                                    {% if adv.receiver_tag_name or adv.receiver_name %}
                                    <div class="font-medium text-sm">{{ adv.receiver_tag_name or adv.receiver_name }}</div>
                                    <div class="text-xs font-mono opacity-70">{{ adv.received_by[:16] }}...</div>
                                    {% else %}
                                    <span class="font-mono text-xs">{{ adv.received_by[:16] }}...</span>
                                    {% endif %}
                                </a>
                                {% else %}
                                <span class="opacity-50">-</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <p class="opacity-70">No advertisements recorded.</p>
            {% endif %}
        </div>
    </div>

    <!-- Recent Telemetry -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
            <h2 class="card-title">Recent Telemetry</h2>
            {% if telemetry %}
            <div class="overflow-x-auto">
                <table class="table table-compact w-full">
                    <thead>
                        <tr>
                            <th>Time</th>
                            <th>Data</th>
                            <th>Received By</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for tel in telemetry %}
                        <tr>
                            <td class="text-xs whitespace-nowrap">{{ tel.received_at[:19].replace('T', ' ') if tel.received_at else '-' }}</td>
                            <td class="text-xs font-mono">
                                {% if tel.parsed_data %}
                                {{ tel.parsed_data | tojson }}
                                {% else %}
                                -
                                {% endif %}
                            </td>
                            <td>
                                {% if tel.received_by %}
                                <a href="/nodes/{{ tel.received_by }}" class="link link-hover">
                                    {% if tel.receiver_tag_name or tel.receiver_name %}
                                    <div class="font-medium text-sm">{{ tel.receiver_tag_name or tel.receiver_name }}</div>
                                    <div class="text-xs font-mono opacity-70">{{ tel.received_by[:16] }}...</div>
                                    {% else %}
                                    <span class="font-mono text-xs">{{ tel.received_by[:16] }}...</span>
                                    {% endif %}
                                </a>
                                {% else %}
                                <span class="opacity-50">-</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <p class="opacity-70">No telemetry recorded.</p>
            {% endif %}
        </div>
    </div>
</div>

{% else %}
<div class="alert alert-error">
    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <span>Node not found: {{ public_key }}</span>
</div>
<a href="/nodes" class="btn btn-primary mt-4">Back to Nodes</a>
{% endif %}
{% endblock %}

{% block extra_scripts %}
{% if node %}
{% set ns_map = namespace(lat=none, lon=none, name=none) %}
{% for tag in node.tags or [] %}
    {% if tag.key == 'lat' %}
        {% set ns_map.lat = tag.value %}
    {% elif tag.key == 'lon' %}
        {% set ns_map.lon = tag.value %}
    {% elif tag.key == 'name' %}
        {% set ns_map.name = tag.value %}
    {% endif %}
{% endfor %}
{% if ns_map.lat and ns_map.lon %}
<script>
    // Initialize map centered on the node's location
    const nodeLat = {{ ns_map.lat }};
    const nodeLon = {{ ns_map.lon }};
    const nodeName = {{ (ns_map.name or node.name or 'Unnamed Node') | tojson }};
    const nodeType = {{ (node.adv_type or '') | tojson }};
    const publicKey = {{ node.public_key | tojson }};

    const map = L.map('node-map').setView([nodeLat, nodeLon], 15);

    // 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);

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

    // Create marker icon (just the emoji, no label)
    const emoji = getNodeEmoji(nodeType);
    const icon = L.divIcon({
        className: 'custom-div-icon',
        html: `<span style="font-size: 32px; text-shadow: 0 0 3px #1a237e, 0 0 6px #1a237e, 0 1px 2px rgba(0,0,0,0.7);">${emoji}</span>`,
        iconSize: [32, 32],
        iconAnchor: [16, 16]
    });

    // Add marker
    const marker = L.marker([nodeLat, nodeLon], { icon: icon }).addTo(map);

    // Add popup (shown on click, not by default)
    marker.bindPopup(`
        <div class="p-2">
            <h3 class="font-bold text-lg mb-2">${emoji} ${nodeName}</h3>
            <div class="space-y-1 text-sm">
                ${nodeType ? `<p><span class="opacity-70">Type:</span> ${nodeType}</p>` : ''}
                <p><span class="opacity-70">Coordinates:</span> ${nodeLat.toFixed(4)}, ${nodeLon.toFixed(4)}</p>
            </div>
        </div>
    `);
</script>
{% endif %}
{% endif %}
{% endblock %}