<!DOCTYPE html>
<html lang="en" class="">
<head>
    <script>
        // Dark mode initialization - runs before page renders to prevent flash
        (function() {
            const stored = localStorage.getItem('theme');
            if (stored === 'dark' || (!stored && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                document.documentElement.classList.add('dark');
            }
        })();
    </script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{% block title %}MySQL to Sheets Sync{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/tailwind.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}">
    {% block head %}{% endblock %}
</head>
<body class="has-sidebar" id="appBody">
    {% from "macros/nav.html" import main_nav, minimal_nav, sidebar_nav, tier_badge, breadcrumb %}
    {% from "macros/onboarding.html" import onboarding_checklist %}

    {# Mobile hamburger menu button #}
    <button class="mobile-nav-toggle" id="mobileNavToggle" aria-label="Toggle navigation">
        <svg viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
        </svg>
    </button>

    {# Sidebar overlay for mobile #}
    <div class="sidebar-overlay" id="sidebarOverlay"></div>

    {# Sidebar navigation #}
    {% block nav %}
    <aside class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <a href="/" class="sidebar-brand">
                <span class="sidebar-logo-icon">M</span>
                <span class="sidebar-text sidebar-logo-full">MySQL to Sheets</span>
            </a>
            <button class="sidebar-toggle" id="sidebarToggle" aria-label="Toggle sidebar">
                <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
            </button>
        </div>
        <div class="sidebar-content">
            {{ sidebar_nav(request.path, current_user, super_admin_enabled) }}
        </div>
        <div class="sidebar-footer">
            {# Dark mode toggle #}
            <button id="darkModeToggle" type="button" class="dark-mode-toggle" onclick="toggleDarkMode()" title="Toggle dark mode">
                {# Sun icon (shown in dark mode) #}
                <svg class="dark-mode-icon sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="5"></circle>
                    <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"></path>
                </svg>
                {# Moon icon (shown in light mode) #}
                <svg class="dark-mode-icon moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                </svg>
                <span class="sidebar-text">Dark Mode</span>
            </button>

            {% if current_user %}
            <div class="sidebar-user">
                <div class="sidebar-user-avatar">
                    {{ current_user.email[0]|upper if current_user.email else 'U' }}
                </div>
                <div class="sidebar-user-info">
                    <div class="sidebar-user-name">{{ current_user.email }}</div>
                    <div class="sidebar-user-role">{{ current_user.tier|default('Free') }}</div>
                </div>
            </div>
            <a href="{{ url_for('auth.logout') }}" class="btn btn-sm" style="width: 100%; margin-top: 0.75rem;">Logout</a>
            {% endif %}
        </div>
    </aside>
    {% endblock %}

    <div class="main-content">
        <div class="container">
            {% block breadcrumbs %}
            {# Auto-render breadcrumbs if available and not on dashboard #}
            {% if auto_breadcrumbs and request.path != '/' %}
            {{ breadcrumb(auto_breadcrumbs) }}
            {% endif %}
            {% endblock %}
            {% block header %}
            <header>
                <div>
                    <h1>{% block page_title %}MySQL to Sheets Sync{% endblock %}</h1>
                    {% block page_subtitle %}{% endblock %}
                </div>
                <span class="version">v{{ version }}</span>
            </header>
            {% endblock %}

            {% block alerts %}
            {% if tier_alerts %}
            {% for alert in tier_alerts %}
            <div class="tier-alert tier-alert-{{ alert.type }}" data-dismissible="true">
                <div class="tier-alert-content">
                    <strong>{{ alert.title }}</strong>
                    <span>{{ alert.message }}</span>
                </div>
                <div class="tier-alert-actions">
                    {% if alert.cta_url %}
                    <a href="{{ alert.cta_url }}" class="tier-alert-cta">{{ alert.cta_text }}</a>
                    {% endif %}
                    <button type="button" class="tier-alert-dismiss" onclick="this.parentElement.parentElement.remove()" aria-label="Dismiss">&times;</button>
                </div>
            </div>
            {% endfor %}
            {% endif %}
            <div id="alertContainer"></div>
            {% endblock %}

            {# Onboarding checklist - shown when setup is incomplete and not on setup page #}
            {% block onboarding %}
            {% set setup_status = get_setup_status() %}
            {% if setup_status.percent < 100 and not request.path.startswith('/setup') %}
            <div class="onboarding-wrapper">
                {{ onboarding_checklist(setup_status) }}
            </div>
            {% endif %}
            {% endblock %}

            {% block content %}{% endblock %}
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/utils.js') }}"></script>
    <script src="{{ url_for('static', filename='js/shortcuts.js') }}"></script>

    {# Dark mode toggle functionality #}
    <script>
    function toggleDarkMode() {
        const isDark = document.documentElement.classList.toggle('dark');
        localStorage.setItem('theme', isDark ? 'dark' : 'light');
        updateDarkModeIcon();
    }

    function updateDarkModeIcon() {
        const isDark = document.documentElement.classList.contains('dark');
        const sunIcon = document.querySelector('.sun-icon');
        const moonIcon = document.querySelector('.moon-icon');
        if (sunIcon && moonIcon) {
            sunIcon.style.display = isDark ? 'block' : 'none';
            moonIcon.style.display = isDark ? 'none' : 'block';
        }
    }

    // Listen for system preference changes
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
        if (!localStorage.getItem('theme')) {
            if (e.matches) {
                document.documentElement.classList.add('dark');
            } else {
                document.documentElement.classList.remove('dark');
            }
            updateDarkModeIcon();
        }
    });

    // Initial icon state
    document.addEventListener('DOMContentLoaded', updateDarkModeIcon);
    </script>

    {% block scripts %}{% endblock %}

    {# Keyboard shortcuts help modal #}
    {% include "partials/shortcuts_modal.html" %}

    {# Browser heartbeat for desktop app - signals browser is still open #}
    <script>
    (function() {
        // Send heartbeat every 5 seconds to let desktop app know browser is open
        function sendHeartbeat() {
            fetch('/api/heartbeat', { method: 'POST' }).catch(function() {});
        }
        // Send immediately on page load
        sendHeartbeat();
        // Then every 5 seconds
        setInterval(sendHeartbeat, 5000);
    })();
    </script>
</body>
</html>
