{% extends "base.html" %}
{% from "macros/icons.html" import icon_alert, icon_error %}

{% block title %}{% if node %}{{ node.name or ('Node ' ~ public_key[:8] ~ '...') }} - {{ network_name }}{% else %}Node Not Found - {{ network_name }}{% endif %}{% endblock %}

{% block extra_head %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
{% 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">
    {{ icon_alert("stroke-current shrink-0 h-6 w-6") }}
    <span>Could not fetch data from API: {{ api_error }}</span>
</div>
{% endif %}

{% if node %}
{# Get display name from tag or node.name #}
{% set ns = namespace(tag_name=none) %}
{% for tag in node.tags or [] %}
    {% if tag.key == 'name' %}
        {% set ns.tag_name = tag.value %}
    {% endif %}
{% endfor %}
{% set display_name = ns.tag_name or node.name or 'Unnamed Node' %}

{# Get coordinates from node model first, then fall back to tags (bug fix) #}
{% set ns_coords = namespace(lat=node.lat, lon=node.lon) %}
{% if not ns_coords.lat or not ns_coords.lon %}
    {% for tag in node.tags or [] %}
        {% if tag.key == 'lat' and not ns_coords.lat %}
            {% set ns_coords.lat = tag.value|float %}
        {% elif tag.key == 'lon' and not ns_coords.lon %}
            {% set ns_coords.lon = tag.value|float %}
        {% endif %}
    {% endfor %}
{% endif %}
{% set has_coords = ns_coords.lat is not none and ns_coords.lon is not none %}

{# Node type emoji #}
{% set type_emoji = '📍' %}
{% if node.adv_type %}
    {% if node.adv_type|lower == 'chat' %}
        {% set type_emoji = '💬' %}
    {% elif node.adv_type|lower == 'repeater' %}
        {% set type_emoji = '📡' %}
    {% elif node.adv_type|lower == 'room' %}
        {% set type_emoji = '🪧' %}
    {% endif %}
{% endif %}

<!-- Page Header -->
<h1 class="text-3xl font-bold mb-6">
    <span title="{{ node.adv_type or 'Unknown' }}">{{ type_emoji }}</span>
    {{ display_name }}
</h1>

<!-- Node Hero Panel -->
{% if has_coords %}
<div class="relative rounded-box overflow-hidden mb-6 shadow-xl" style="height: 180px;">
    <!-- Map container (non-interactive background) -->
    <div id="header-map" class="absolute inset-0 z-0"></div>

    <!-- QR code overlay (right side, fills height) -->
    <div class="relative z-20 h-full p-3 flex items-center justify-end">
        <div id="qr-code" class="bg-white p-2 rounded shadow-lg"></div>
    </div>
</div>
{% else %}
<!-- QR Code Card (no map) -->
<div class="card bg-base-100 shadow-xl mb-6">
    <div class="card-body flex-row items-center gap-4">
        <div id="qr-code" class="bg-white p-1 rounded"></div>
        <p class="text-sm opacity-70">Scan to add as contact</p>
    </div>
</div>
{% endif %}

<!-- Node Details Card -->
<div class="card bg-base-100 shadow-xl mb-6">
    <div class="card-body">
        <!-- Public Key -->
        <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>

        <!-- First/Last Seen and Location -->
        <div class="flex flex-wrap gap-x-8 gap-y-2 mt-4 text-sm">
            <div>
                <span class="opacity-70">First seen:</span>
                {{ node.first_seen[:19].replace('T', ' ') if node.first_seen else '-' }}
            </div>
            <div>
                <span class="opacity-70">Last seen:</span>
                {{ node.last_seen[:19].replace('T', ' ') if node.last_seen else '-' }}
            </div>
            {% if has_coords %}
            <div>
                <span class="opacity-70">Location:</span>
                {{ ns_coords.lat }}, {{ ns_coords.lon }}
            </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>

    <!-- Tags -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
            <h2 class="card-title">Tags</h2>
            {% if node.tags %}
            <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>
            {% else %}
            <p class="opacity-70">No tags defined.</p>
            {% endif %}
            {% if admin_enabled and is_authenticated %}
            <div class="mt-3">
                <a href="/a/node-tags?public_key={{ node.public_key }}" class="btn btn-sm btn-outline">{% if node.tags %}Edit Tags{% else %}Add Tags{% endif %}</a>
            </div>
            {% endif %}
        </div>
    </div>
</div>

{% else %}
<div class="alert alert-error">
    {{ icon_error("stroke-current shrink-0 h-6 w-6") }}
    <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_qr = namespace(tag_name=none) %}
{% for tag in node.tags or [] %}
    {% if tag.key == 'name' %}
        {% set ns_qr.tag_name = tag.value %}
    {% endif %}
{% endfor %}
<script>
    window.qrCodeConfig = {
        name: {{ (ns_qr.tag_name or node.name or 'Node') | tojson }},
        publicKey: {{ node.public_key | tojson }},
        advType: {{ (node.adv_type or '') | tojson }},
        size: 140
    };
</script>
<script src="{{ url_for('static', path='js/qrcode-init.js') }}"></script>

{# Get coordinates from node model first, then fall back to tags #}
{% set ns_map = namespace(lat=node.lat, lon=node.lon, name=none) %}
{% if not ns_map.lat or not ns_map.lon %}
    {% for tag in node.tags or [] %}
        {% if tag.key == 'lat' and not ns_map.lat %}
            {% set ns_map.lat = tag.value|float %}
        {% elif tag.key == 'lon' and not ns_map.lon %}
            {% set ns_map.lon = tag.value|float %}
        {% endif %}
    {% endfor %}
{% endif %}
{% for tag in node.tags or [] %}
    {% if tag.key == 'name' %}
        {% set ns_map.name = tag.value %}
    {% endif %}
{% endfor %}
{% if ns_map.lat and ns_map.lon %}
<script>
    window.nodeMapConfig = {
        elementId: 'header-map',
        lat: {{ ns_map.lat }},
        lon: {{ ns_map.lon }},
        name: {{ (ns_map.name or node.name or 'Unnamed Node') | tojson }},
        type: {{ (node.adv_type or '') | tojson }},
        interactive: false,
        zoom: 14,
        offsetX: 0.33
    };
</script>
<script src="{{ url_for('static', path='js/map-node.js') }}"></script>
{% endif %}
{% endif %}
{% endblock %}