{% extends "base.html" %}
{% from "macros/icons.html" import icon_dashboard, icon_map, icon_nodes, icon_advertisements, icon_messages, icon_page, icon_info, icon_chart, icon_globe, icon_github %}

{% block title %}{{ network_name }}{% endblock %}

{% block content %}
<!-- Hero Section with Stats -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 bg-base-100 rounded-box p-6">
    <!-- Hero Content (2 columns) -->
    <div class="lg:col-span-2 flex flex-col items-center text-center">
        <!-- Header: Logo and Title side by side -->
        <div class="flex items-center gap-8 mb-4">
            <img src="{{ logo_url }}" alt="{{ network_name }}" class="h-36 w-36" />
            <div class="flex flex-col justify-center">
                <h1 class="text-6xl font-black tracking-tight">{{ network_name }}</h1>
                {% if network_city and network_country %}
                <p class="text-2xl opacity-70 mt-2">{{ network_city }}, {{ network_country }}</p>
                {% endif %}
            </div>
        </div>
        {% if network_welcome_text %}
        <p class="py-4 max-w-[70%]">{{ network_welcome_text }}</p>
        {% else %}
        <p class="py-4 max-w-[70%]">
            Welcome to the {{ network_name }} mesh network dashboard.
            Monitor network activity, view connected nodes, and explore message history.
        </p>
        {% endif %}
        <div class="flex-1"></div>
        <div class="flex flex-wrap justify-center gap-3 mt-auto">
            <a href="/dashboard" class="btn btn-outline btn-info">
                {{ icon_dashboard("h-5 w-5 mr-2") }}
                Dashboard
            </a>
            <a href="/nodes" class="btn btn-outline btn-primary">
                {{ icon_nodes("h-5 w-5 mr-2") }}
                Nodes
            </a>
            <a href="/advertisements" class="btn btn-outline btn-secondary">
                {{ icon_advertisements("h-5 w-5 mr-2") }}
                Adverts
            </a>
            <a href="/messages" class="btn btn-outline btn-accent">
                {{ icon_messages("h-5 w-5 mr-2") }}
                Messages
            </a>
            <a href="/map" class="btn btn-outline btn-warning">
                {{ icon_map("h-5 w-5 mr-2") }}
                Map
            </a>
            {% for page in custom_pages[:3] %}
            <a href="{{ page.url }}" class="btn btn-outline btn-neutral">
                {{ icon_page("h-5 w-5 mr-2") }}
                {{ page.title }}
            </a>
            {% endfor %}
        </div>
    </div>

    <!-- Stats Column (stacked vertically) -->
    <div class="flex flex-col gap-4 animate-stagger">
        <!-- Total Nodes -->
        <div class="stat bg-base-200 rounded-box">
            <div class="stat-figure text-primary">
                {{ icon_nodes("h-8 w-8") }}
            </div>
            <div class="stat-title">Total Nodes</div>
            <div class="stat-value text-primary">{{ stats.total_nodes }}</div>
            <div class="stat-desc">All discovered nodes</div>
        </div>

        <!-- Advertisements (7 days) -->
        <div class="stat bg-base-200 rounded-box">
            <div class="stat-figure text-secondary">
                {{ icon_advertisements("h-8 w-8") }}
            </div>
            <div class="stat-title">Advertisements</div>
            <div class="stat-value text-secondary">{{ stats.advertisements_7d }}</div>
            <div class="stat-desc">Last 7 days</div>
        </div>

        <!-- Messages (7 days) -->
        <div class="stat bg-base-200 rounded-box">
            <div class="stat-figure text-accent">
                {{ icon_messages("h-8 w-8") }}
            </div>
            <div class="stat-title">Messages</div>
            <div class="stat-value text-accent">{{ stats.messages_7d }}</div>
            <div class="stat-desc">Last 7 days</div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6 animate-stagger">
    <!-- Network Info Card -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
            <h2 class="card-title">
                {{ icon_info("h-6 w-6") }}
                Network Info
            </h2>
            <div class="space-y-2">
                {% if network_radio_config %}
                {% if network_radio_config.profile %}
                <div class="flex justify-between">
                    <span class="opacity-70">Profile:</span>
                    <span class="font-mono">{{ network_radio_config.profile }}</span>
                </div>
                {% endif %}
                {% if network_radio_config.frequency %}
                <div class="flex justify-between">
                    <span class="opacity-70">Frequency:</span>
                    <span class="font-mono">{{ network_radio_config.frequency }}</span>
                </div>
                {% endif %}
                {% if network_radio_config.bandwidth %}
                <div class="flex justify-between">
                    <span class="opacity-70">Bandwidth:</span>
                    <span class="font-mono">{{ network_radio_config.bandwidth }}</span>
                </div>
                {% endif %}
                {% if network_radio_config.spreading_factor %}
                <div class="flex justify-between">
                    <span class="opacity-70">Spreading Factor:</span>
                    <span class="font-mono">{{ network_radio_config.spreading_factor }}</span>
                </div>
                {% endif %}
                {% if network_radio_config.coding_rate %}
                <div class="flex justify-between">
                    <span class="opacity-70">Coding Rate:</span>
                    <span class="font-mono">{{ network_radio_config.coding_rate }}</span>
                </div>
                {% endif %}
                {% if network_radio_config.tx_power %}
                <div class="flex justify-between">
                    <span class="opacity-70">TX Power:</span>
                    <span class="font-mono">{{ network_radio_config.tx_power }}</span>
                </div>
                {% endif %}
                {% endif %}
                {% if network_location and network_location != (0.0, 0.0) %}
                <div class="flex justify-between">
                    <span class="opacity-70">Location:</span>
                    <span class="font-mono">{{ "%.4f"|format(network_location[0]) }}, {{ "%.4f"|format(network_location[1]) }}</span>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Powered by MeshCore -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body flex flex-col items-center justify-center">
            <p class="text-sm opacity-70 mb-4 text-center">Our local off-grid mesh network is made possible by</p>
            <a href="https://meshcore.co.uk/" target="_blank" rel="noopener noreferrer" class="hover:opacity-80 transition-opacity">
                <img src="/static/img/meshcore.svg" alt="MeshCore" class="h-8" />
            </a>
            <p class="text-xs opacity-50 mt-4 text-center">Connecting people and things, without using the internet</p>
            <div class="flex gap-2 mt-4">
                <a href="https://meshcore.co.uk/" target="_blank" rel="noopener noreferrer" class="btn btn-outline btn-sm">
                    {{ icon_globe("h-4 w-4 mr-1") }}
                    Website
                </a>
                <a href="https://github.com/meshcore-dev/MeshCore" target="_blank" rel="noopener noreferrer" class="btn btn-outline btn-sm">
                    {{ icon_github("h-4 w-4 mr-1") }}
                    GitHub
                </a>
            </div>
        </div>
    </div>

    <!-- Network Activity Chart -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
            <h2 class="card-title">
                {{ icon_chart("h-6 w-6") }}
                Network Activity
            </h2>
            <p class="text-sm opacity-70 mb-2">Activity per day (last 7 days)</p>
            <div class="h-48">
                <canvas id="activityChart"></canvas>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="{{ url_for('static', path='js/charts.js') }}"></script>
<script>
(function() {
    var advertData = {{ advert_activity_json | safe }};
    var messageData = {{ message_activity_json | safe }};
    createActivityChart('activityChart', advertData, messageData);
})();
</script>
{% endblock %}