<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% if environment == 'development' %}[DEV] {% endif %}{% block title %}Seismo Fleet Manager{% endblock %}</title>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- HTMX -->
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>

    <!-- Leaflet for maps -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

    <!-- Mobile CSS -->
    <link rel="stylesheet" href="/static/mobile.css">

    <!-- PWA Manifest -->
    <link rel="manifest" href="/static/manifest.json">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon-32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/static/icons/favicon-16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/static/icons/icon-192.png">
    <meta name="theme-color" content="#f48b1c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="SFM">

    <!-- Custom Tailwind Config -->
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        seismo: {
                            orange: '#f48b1c',
                            navy: '#142a66',
                            burgundy: '#7d234d',
                        }
                    }
                }
            }
        }
    </script>

    <style>
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* Smooth transitions */
        * {
            transition: background-color 0.2s ease, color 0.2s ease;
        }
    </style>

    {% block extra_head %}{% endblock %}
</head>
<body class="bg-gray-100 dark:bg-slate-800 text-gray-900 dark:text-gray-100">

    <!-- Offline Indicator -->
    <div id="offlineIndicator" class="offline-indicator">
        📡 Offline - Changes will sync when connected
    </div>

    <!-- Sync Toast -->
    <div id="syncToast" class="sync-toast">
        ✓ Synced successfully
    </div>

    <div class="flex h-screen overflow-hidden">
        <!-- Sidebar (Responsive) -->
        <aside id="sidebar" class="sidebar w-64 bg-white dark:bg-slate-800 shadow-lg flex flex-col{% if request.query_params.get('embed') == '1' %} hidden{% endif %}">
            <!-- Logo -->
            <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                <a href="/" class="block">
                    <img src="/static/terra-view-logo-light.png" srcset="/static/terra-view-logo-light.png 1x, /static/terra-view-logo-light@2x.png 2x" alt="Terra-View" class="block dark:hidden w-44 h-auto">
                    <img src="/static/terra-view-logo-dark.png" srcset="/static/terra-view-logo-dark.png 1x, /static/terra-view-logo-dark@2x.png 2x" alt="Terra-View" class="hidden dark:block w-44 h-auto">
                </a>
                <div class="flex items-center justify-between mt-2">
                    <p class="text-xs text-gray-500 dark:text-gray-400">v {{ version }}</p>
                    {% if environment == 'development' %}
                    <span class="px-2 py-1 text-xs font-bold text-white bg-yellow-500 rounded">DEV</span>
                    {% endif %}
                </div>
            </div>

            <!-- Navigation -->
            <nav class="flex-1 p-4 space-y-2">
                <a href="/" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 {% if request.url.path == '/' %}bg-gray-100 dark:bg-gray-700{% endif %}">
                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                    </svg>
                    Dashboard
                </a>

                {# Devices — single sidebar entry covering all device-type
                   pages.  Lands on /roster (the unified all-devices view);
                   the tab strip on each underlying page lets the operator
                   drill into seismograph / SLM / modem specifics.
                   Active when on any /seismographs, /sound-level-meters,
                   /modems, /roster, /pair-devices, /unit/* page. #}
                {% set _is_devices = (
                    request.url.path in ('/seismographs', '/sound-level-meters', '/modems', '/roster', '/pair-devices')
                    or request.url.path.startswith('/unit/')
                    or request.url.path.startswith('/slm/')
                ) %}
                <a href="/roster" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 {% if _is_devices %}bg-gray-100 dark:bg-gray-700{% endif %}">
                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                    </svg>
                    Devices
                </a>

                <a href="/projects" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 {% if request.url.path.startswith('/projects') %}bg-gray-100 dark:bg-gray-700{% endif %}">
                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <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"></path>
                    </svg>
                    Projects
                </a>

                {# Events — fleet-wide event database (SFM).  Cross-project
                   sortable/filterable event list.  Day-to-day event browsing
                   for a specific location or unit lives on those detail
                   pages; this is the firehose for cross-cutting queries. #}
                <a href="/sfm" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 {% if request.url.path == '/sfm' %}bg-gray-100 dark:bg-gray-700{% endif %}">
                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                    </svg>
                    Events
                </a>

                {# Tools — operator workflow hub.  Active when on /tools
                   itself or any of the workflow pages it links into
                   (project tidy, metadata backfill, pair devices). #}
                {% set _is_tools = (
                    request.url.path == '/tools'
                    or request.url.path.startswith('/tools/')
                    or request.url.path == '/pair-devices'
                    or request.url.path == '/settings/developer/project-tidy'
                    or request.url.path == '/settings/developer/metadata-backfill'
                ) %}
                <a href="/tools" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 {% if _is_tools %}bg-gray-100 dark:bg-gray-700{% endif %}">
                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                    Tools
                </a>

                <a href="/fleet-calendar" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 {% if request.url.path.startswith('/fleet-calendar') %}bg-gray-100 dark:bg-gray-700{% endif %}">
                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                    Job Planner
                </a>

                <a href="/settings" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 {% if request.url.path == '/settings' %}bg-gray-100 dark:bg-gray-700{% endif %}">
                    <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                    Settings
                </a>
            </nav>

            <!-- Dark mode toggle and utilities -->
            <div class="p-4 border-t border-gray-200 dark:border-gray-700 space-y-2">
                <button onclick="toggleDarkMode()" class="w-full flex items-center justify-center px-4 py-3 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600">
                    <svg id="theme-toggle-dark-icon" class="w-5 h-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
                    </svg>
                    <svg id="theme-toggle-light-icon" class="w-5 h-5 block dark:hidden" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
                    </svg>
                    <span class="ml-3">Toggle theme</span>
                </button>

                <button onclick="hardReload()" class="w-full flex items-center justify-center px-4 py-3 rounded-lg bg-red-100 dark:bg-red-900/30 hover:bg-red-200 dark:hover:bg-red-900/50 text-red-700 dark:text-red-400">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                    </svg>
                    <span class="ml-3">Clear Cache & Reload</span>
                </button>
            </div>
        </aside>

        <!-- Backdrop (Mobile Only) -->
        <div id="backdrop" class="backdrop" onclick="closeMenuFromBackdrop()"></div>

        <!-- Main content -->
        <main class="main-content flex-1 overflow-y-auto">
            <div class="{% if request.query_params.get('embed') == '1' %}p-4{% else %}p-8{% endif %}">
                {% block content %}{% endblock %}
            </div>
        </main>
    </div>

    <!-- Bottom Navigation (Mobile Only) — primary field-work shortcuts.
         Deploy is here because the whole point of the workflow is "I'm
         on site, capture this install in 90s before I leave."  Devices,
         Settings, Projects, Job Planner reachable via the hamburger
         Menu (slot 1) which opens the full sidebar drawer. -->
    <nav class="bottom-nav{% if request.query_params.get('embed') == '1' %} hidden{% endif %}">
        <div class="grid grid-cols-4 h-16">
            <button id="hamburgerBtn" class="bottom-nav-btn" onclick="toggleMenu()" aria-label="Menu">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
                <span>Menu</span>
            </button>
            <button class="bottom-nav-btn" data-href="/" onclick="window.location.href='/'">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                </svg>
                <span>Dashboard</span>
            </button>
            <button class="bottom-nav-btn" data-href="/deploy" onclick="window.location.href='/deploy'">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
                <span>Deploy</span>
            </button>
            <button class="bottom-nav-btn" data-href="/sfm" onclick="window.location.href='/sfm'">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                </svg>
                <span>Events</span>
            </button>
        </div>
    </nav>

    <script>
        // Dark mode toggle
        function toggleDarkMode() {
            const html = document.documentElement;
            if (html.classList.contains('dark')) {
                html.classList.remove('dark');
                localStorage.setItem('theme', 'light');
            } else {
                html.classList.add('dark');
                localStorage.setItem('theme', 'dark');
            }
        }

        // Hard reload function - clears all caches and reloads
        async function hardReload() {
            try {
                // Clear service worker caches
                if ('caches' in window) {
                    const cacheNames = await caches.keys();
                    await Promise.all(cacheNames.map(name => caches.delete(name)));
                    console.log('Cleared all service worker caches');
                }

                // Unregister service workers
                if ('serviceWorker' in navigator) {
                    const registrations = await navigator.serviceWorker.getRegistrations();
                    await Promise.all(registrations.map(reg => reg.unregister()));
                    console.log('Unregistered all service workers');
                }

                // Clear IndexedDB
                if ('indexedDB' in window) {
                    try {
                        indexedDB.deleteDatabase('sfm-offline-db');
                        console.log('Cleared IndexedDB');
                    } catch (e) {
                        console.log('Could not clear IndexedDB:', e);
                    }
                }

                // Force reload with cache bypass
                window.location.reload(true);
            } catch (error) {
                console.error('Error during hard reload:', error);
                // Fallback to regular reload
                window.location.reload(true);
            }
        }

        // Load saved theme preference
        if (localStorage.getItem('theme') === 'light') {
            document.documentElement.classList.remove('dark');
        } else if (localStorage.getItem('theme') === 'dark') {
            document.documentElement.classList.add('dark');
        }

        // Helper function: Convert timestamp to relative time
        function timeAgo(dateString) {
            if (!dateString) return 'Never';

            const date = new Date(dateString);
            const now = new Date();
            const seconds = Math.floor((now - date) / 1000);

            if (seconds < 60) return `${seconds}s ago`;

            const minutes = Math.floor(seconds / 60);
            if (minutes < 60) return `${minutes}m ago`;

            const hours = Math.floor(minutes / 60);
            if (hours < 24) {
                const remainingMins = minutes % 60;
                return remainingMins > 0 ? `${hours}h ${remainingMins}m ago` : `${hours}h ago`;
            }

            const days = Math.floor(hours / 24);
            if (days < 7) {
                const remainingHours = hours % 24;
                return remainingHours > 0 ? `${days}d ${remainingHours}h ago` : `${days}d ago`;
            }

            const weeks = Math.floor(days / 7);
            if (weeks < 4) {
                const remainingDays = days % 7;
                return remainingDays > 0 ? `${weeks}w ${remainingDays}d ago` : `${weeks}w ago`;
            }

            const months = Math.floor(days / 30);
            return `${months}mo ago`;
        }

        // Helper function: Get user's selected timezone
        function getTimezone() {
            return localStorage.getItem('timezone') || 'America/New_York';
        }

        // Helper function: Format timestamp with tooltip (timezone-aware)
        function formatTimestamp(dateString) {
            if (!dateString) return '<span class="text-gray-400">Never</span>';

            const date = new Date(dateString);
            const timezone = getTimezone();

            const fullDate = date.toLocaleString('en-US', {
                weekday: 'short',
                year: 'numeric',
                month: 'short',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                timeZone: timezone,
                timeZoneName: 'short'
            });

            return `<span title="${fullDate}" class="cursor-help">${timeAgo(dateString)}</span>`;
        }

        // Helper function: Format timestamp as full date/time (no relative time)
        // Format: "9/10/2020 8:00 AM EST"
        function formatFullTimestamp(dateString) {
            if (!dateString) return 'Never';

            const date = new Date(dateString);
            const timezone = getTimezone();

            return date.toLocaleString('en-US', {
                month: 'numeric',
                day: 'numeric',
                year: 'numeric',
                hour: 'numeric',
                minute: '2-digit',
                timeZone: timezone,
                timeZoneName: 'short'
            });
        }

        // Update all timestamps on page load and periodically
        function updateAllTimestamps() {
            document.querySelectorAll('[data-timestamp]').forEach(el => {
                const timestamp = el.getAttribute('data-timestamp');
                el.innerHTML = formatTimestamp(timestamp);
            });
        }

        // Run on load and every minute
        updateAllTimestamps();
        setInterval(updateAllTimestamps, 60000);

        // Copy to clipboard helper
        function copyToClipboard(text, button) {
            navigator.clipboard.writeText(text).then(() => {
                // Visual feedback
                const originalHTML = button.innerHTML;
                button.innerHTML = '<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>';
                button.classList.add('text-green-500');

                setTimeout(() => {
                    button.innerHTML = originalHTML;
                    button.classList.remove('text-green-500');
                }, 1500);
            }).catch(err => {
                console.error('Failed to copy:', err);
            });
        }
    </script>

    <!-- Offline Database -->
    <script src="/static/offline-db.js?v=0.6.1"></script>

    <!-- Mobile JavaScript -->
    <script src="/static/mobile.js?v=0.6.1"></script>

    {% block extra_scripts %}{% endblock %}
</body>
</html>
