{% extends "base.html" %}

{% block title %}Dashboard - Seismo Fleet Manager{% endblock %}

{% block content %}
<div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Dashboard</h1>
    <p class="text-gray-600 dark:text-gray-400 mt-1">Fleet overview and recent activity</p>
</div>

<!-- Dashboard cards with auto-refresh -->
<div hx-get="/api/status-snapshot"
     hx-trigger="load, every 10s"
     hx-swap="none"
     hx-on::after-request="updateDashboard(event)">

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">

        <!-- Fleet Summary Card -->
        <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Fleet Summary</h2>
                <svg class="w-6 h-6 text-seismo-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <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">
                    </path>
                </svg>
            </div>
            <div class="space-y-3">
                <div class="flex justify-between items-center">
                    <span class="text-gray-600 dark:text-gray-400">Total Units</span>
                    <span id="total-units" class="text-2xl font-bold text-gray-900 dark:text-white">--</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-600 dark:text-gray-400">Deployed</span>
                    <span id="deployed-units" class="text-2xl font-bold text-blue-600 dark:text-blue-400">--</span>
                </div>
                <div class="border-t border-gray-200 dark:border-gray-700 pt-3 mt-3">
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center">
                            <span class="w-3 h-3 rounded-full bg-green-500 mr-2"></span>
                            <span class="text-sm text-gray-600 dark:text-gray-400">OK</span>
                        </div>
                        <span id="status-ok" class="font-semibold text-green-600 dark:text-green-400">--</span>
                    </div>
                    <div class="flex justify-between items-center mb-2">
                        <div class="flex items-center">
                            <span class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></span>
                            <span class="text-sm text-gray-600 dark:text-gray-400">Pending</span>
                        </div>
                        <span id="status-pending" class="font-semibold text-yellow-600 dark:text-yellow-400">--</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <div class="flex items-center">
                            <span class="w-3 h-3 rounded-full bg-red-500 mr-2"></span>
                            <span class="text-sm text-gray-600 dark:text-gray-400">Missing</span>
                        </div>
                        <span id="status-missing" class="font-semibold text-red-600 dark:text-red-400">--</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Alerts Card -->
        <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Alerts</h2>
                <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" 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">
                    </path>
                </svg>
            </div>
            <div id="alerts-list" class="space-y-3">
                <p class="text-sm text-gray-500 dark:text-gray-400">Loading alerts...</p>
            </div>
        </div>

        <!-- Recent Photos Card -->
        <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Photos</h2>
                <svg class="w-6 h-6 text-seismo-burgundy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z">
                    </path>
                </svg>
            </div>
            <div class="text-center text-gray-500 dark:text-gray-400">
                <svg class="w-16 h-16 mx-auto mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z">
                    </path>
                </svg>
                <p class="text-sm">No recent photos</p>
            </div>
        </div>

    </div>

    <!-- Fleet Status Section with Tabs -->
    <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">

        <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Fleet Status</h2>

            <a href="/roster" class="text-seismo-orange hover:text-seismo-burgundy font-medium flex items-center">
                Full Roster
                <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </a>
        </div>

        <!-- Tab Bar -->
        <div class="flex border-b border-gray-200 dark:border-gray-700 mb-4">
            <button 
                class="px-4 py-2 text-sm font-medium tab-button active-tab"
                hx-get="/dashboard/active"
                hx-target="#fleet-table"
                hx-swap="innerHTML">
                Active
            </button>

            <button 
                class="px-4 py-2 text-sm font-medium tab-button"
                hx-get="/dashboard/benched"
                hx-target="#fleet-table"
                hx-swap="innerHTML">
                Benched
            </button>
        </div>

        <!-- Tab Content Target -->
        <div id="fleet-table" class="space-y-2">
            <p class="text-gray-500 dark:text-gray-400">Loading fleet data...</p>
        </div>

    </div>
</div>


<!-- TAB STYLE -->
<style>
.tab-button {
    color: #6b7280; /* gray-500 */
    border-bottom: 2px solid transparent;
}
.tab-button:hover {
    color: #374151; /* gray-700 */
}
.active-tab {
    color: #b84a12 !important; /* seismo orange */
    border-bottom: 2px solid #b84a12 !important;
}
</style>


<script>
function updateDashboard(event) {
    try {
        const data = JSON.parse(event.detail.xhr.response);

        // ===== Fleet summary numbers =====
        document.getElementById('total-units').textContent = data.summary?.total ?? 0;
        document.getElementById('deployed-units').textContent = data.summary?.active ?? 0;
        document.getElementById('status-ok').textContent = data.summary?.ok ?? 0;
        document.getElementById('status-pending').textContent = data.summary?.pending ?? 0;
        document.getElementById('status-missing').textContent = data.summary?.missing ?? 0;

        // ===== Alerts =====
        const alertsList = document.getElementById('alerts-list');
        const missingUnits = Object.entries(data.units).filter(([_, u]) => u.status === 'Missing');
        const pendingUnits = Object.entries(data.units).filter(([_, u]) => u.status === 'Pending');

        if (!missingUnits.length && !pendingUnits.length) {
            alertsList.innerHTML =
                '<p class="text-sm text-green-600 dark:text-green-400">✓ All units reporting normally</p>';
        } else {
            let alertsHtml = '';

            missingUnits.slice(0, 3).forEach(([id, unit]) => {
                alertsHtml += `
                <div class="flex items-start space-x-2 text-sm">
                    <span class="w-2 h-2 rounded-full bg-red-500 mt-1.5"></span>
                    <div>
                        <a href="/unit/${id}" class="font-medium text-red-600 dark:text-red-400 hover:underline">${id}</a>
                        <p class="text-gray-600 dark:text-gray-400">Missing for ${unit.age}</p>
                    </div>
                </div>`;
            });

            pendingUnits.slice(0, 2).forEach(([id, unit]) => {
                alertsHtml += `
                <div class="flex items-start space-x-2 text-sm">
                    <span class="w-2 h-2 rounded-full bg-yellow-500 mt-1.5"></span>
                    <div>
                        <a href="/unit/${id}" class="font-medium text-yellow-600 dark:text-yellow-400 hover:underline">${id}</a>
                        <p class="text-gray-600 dark:text-gray-400">Pending for ${unit.age}</p>
                    </div>
                </div>`;
            });

            alertsList.innerHTML = alertsHtml;
        }

    } catch (err) {
        console.error("Dashboard update error:", err);
    }
}
</script>

{% endblock %}