{% extends "base.html" %}

{% block title %}{{ network_name }} - Home{% endblock %}

{% block content %}
<div class="hero py-8 bg-base-100 rounded-box">
    <div class="hero-content text-center">
        <div class="max-w-2xl">
            <h1 class="text-4xl font-bold">{{ network_name }}</h1>
            {% if network_city and network_country %}
            <p class="py-1 text-lg opacity-70">{{ network_city }}, {{ network_country }}</p>
            {% endif %}
            {% if network_welcome_text %}
            <p class="py-4">{{ network_welcome_text }}</p>
            {% else %}
            <p class="py-4">
                Welcome to the {{ network_name }} mesh network dashboard.
                Monitor network activity, view connected nodes, and explore message history.
            </p>
            {% endif %}
            <div class="flex gap-4 justify-center flex-wrap">
                <a href="/network" class="btn btn-neutral">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                    </svg>
                    Dashboard
                </a>
                <a href="/nodes" class="btn btn-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                    </svg>
                    Nodes
                </a>
                <a href="/advertisements" class="btn btn-secondary">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
                    </svg>
                    Advertisements
                </a>
                <a href="/messages" class="btn btn-accent">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                    </svg>
                    Messages
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
    <!-- Total Nodes -->
    <div class="stat bg-base-100 rounded-box shadow">
        <div class="stat-figure text-primary">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
            </svg>
        </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-100 rounded-box shadow">
        <div class="stat-figure text-secondary">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
            </svg>
        </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-100 rounded-box shadow">
        <div class="stat-figure text-accent">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
            </svg>
        </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 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 %}