{% extends "base.html" %}
{% from "macros/icons.html" import icon_dashboard, icon_map, icon_nodes, icon_advertisements, icon_messages %}

{% block title %}{{ network_name }} - Home{% 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>
        </div>
    </div>

    <!-- Stats Column (stacked vertically) -->
    <div class="flex flex-col gap-4">
        <!-- 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">
    <!-- Network Info Card -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
            <h2 class="card-title">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                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">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                    </svg>
                    Website
                </a>
                <a href="https://github.com/meshcore-dev/MeshCore" target="_blank" rel="noopener noreferrer" class="btn btn-outline btn-sm">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                    </svg>
                    GitHub
                </a>
            </div>
        </div>
    </div>

    <!-- Network Activity Chart -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
            <h2 class="card-title">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
                </svg>
                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>
(function() {
    const advertData = {{ advert_activity_json | safe }};
    const messageData = {{ message_activity_json | safe }};
    const ctx = document.getElementById('activityChart');

    if (ctx && advertData.data && advertData.data.length > 0) {
        // Format dates for display (show only day/month)
        const labels = advertData.data.map(d => {
            const date = new Date(d.date);
            return date.toLocaleDateString('en-GB', { day: 'numeric', month: 'short' });
        });
        const advertCounts = advertData.data.map(d => d.count);
        const messageCounts = messageData.data ? messageData.data.map(d => d.count) : [];

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Advertisements',
                    data: advertCounts,
                    borderColor: 'oklch(0.7 0.17 330)',
                    backgroundColor: 'oklch(0.7 0.17 330 / 0.1)',
                    fill: false,
                    tension: 0.3,
                    pointRadius: 2,
                    pointHoverRadius: 5
                }, {
                    label: 'Messages',
                    data: messageCounts,
                    borderColor: 'oklch(0.7 0.15 200)',
                    backgroundColor: 'oklch(0.7 0.15 200 / 0.1)',
                    fill: false,
                    tension: 0.3,
                    pointRadius: 2,
                    pointHoverRadius: 5
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'bottom',
                        labels: {
                            color: 'oklch(0.7 0 0)',
                            boxWidth: 12,
                            padding: 8
                        }
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        backgroundColor: 'oklch(0.25 0 0)',
                        titleColor: 'oklch(0.9 0 0)',
                        bodyColor: 'oklch(0.9 0 0)',
                        borderColor: 'oklch(0.4 0 0)',
                        borderWidth: 1
                    }
                },
                scales: {
                    x: {
                        grid: {
                            color: 'oklch(0.4 0 0 / 0.2)'
                        },
                        ticks: {
                            color: 'oklch(0.7 0 0)',
                            maxRotation: 45,
                            minRotation: 45,
                            maxTicksLimit: 10
                        }
                    },
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'oklch(0.4 0 0 / 0.2)'
                        },
                        ticks: {
                            color: 'oklch(0.7 0 0)',
                            precision: 0
                        }
                    }
                },
                interaction: {
                    mode: 'nearest',
                    axis: 'x',
                    intersect: false
                }
            }
        });
    }
})();
</script>
{% endblock %}