{% load static %}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}ThrillWiki{% endblock %}</title>
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Prevent flash of wrong theme -->
    <script>
        // Immediately remove 'no-js' class and add initial theme class
        document.documentElement.classList.remove('no-js');
        if (localStorage.theme === 'dark' || (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        }
    </script>
    
    <!-- HTMX -->
    <script src="https://unpkg.com/htmx.org@1.9.6"></script>
    
    <!-- Tailwind CSS -->
    <link href="{% static 'css/tailwind.css' %}" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    
    {% block extra_head %}{% endblock %}

    <!-- Theme Management -->
    <script>
        // Theme management
        const themeManager = {
            init() {
                // Set up toggle button when DOM is loaded
                document.addEventListener('DOMContentLoaded', () => {
                    const toggleBtn = document.getElementById('theme-toggle');
                    if (toggleBtn) {
                        toggleBtn.addEventListener('click', () => {
                            this.toggleTheme();
                        });
                    }

                    // Watch for system theme changes
                    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
                        if (!localStorage.theme) {
                            this.setTheme(e.matches ? 'dark' : 'light');
                        }
                    });
                });
            },

            setTheme(theme) {
                // Force a repaint by temporarily adding a class
                document.documentElement.classList.add('theme-transitioning');
                
                if (theme === 'dark') {
                    document.documentElement.classList.add('dark');
                } else {
                    document.documentElement.classList.remove('dark');
                }
                
                localStorage.theme = theme;
                
                // Remove the transition class after a short delay
                setTimeout(() => {
                    document.documentElement.classList.remove('theme-transitioning');
                }, 100);
            },

            toggleTheme() {
                const isDark = document.documentElement.classList.contains('dark');
                this.setTheme(isDark ? 'light' : 'dark');
            }
        };

        // Initialize theme management
        themeManager.init();
    </script>

    <style>
        /* Prevent flash of wrong theme */
        .no-js {
            visibility: hidden;
        }
        
        /* Smooth theme transitions */
        :root {
            --theme-transition-duration: 200ms;
        }
        
        .theme-transitioning * {
            transition: none !important;
        }
        
        body {
            transition: background-color var(--theme-transition-duration) ease-in-out,
                      color var(--theme-transition-duration) ease-in-out;
        }
    </style>
</head>
<body class="flex flex-col min-h-screen text-gray-900 bg-gradient-to-br from-white via-blue-50 to-indigo-50 dark:from-gray-950 dark:via-indigo-950 dark:to-purple-950 dark:text-white">
    <!-- Header -->
    <header class="border-b shadow-lg bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50">
        <nav class="container px-6 py-4 mx-auto">
            <div class="flex items-center justify-between">
                <!-- Logo -->
                <div class="flex items-center">
                    <a href="{% url 'home' %}" class="px-3 text-2xl font-bold text-transparent transition-transform bg-gradient-to-r from-primary to-secondary bg-clip-text hover:scale-105">
                        ThrillWiki
                    </a>
                </div>

                <!-- Desktop Navigation -->
                <div class="items-center hidden space-x-8 md:flex">
                    <a href="{% url 'parks:park_list' %}" class="nav-link group">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>Parks</span>
                    </a>
                    <a href="{% url 'rides:ride_list' %}" class="nav-link group">
                        <i class="fas fa-rocket"></i>
                        <span>Rides</span>
                    </a>
                </div>

                <!-- Search Bar -->
                <div class="flex-1 hidden max-w-md mx-8 md:flex">
                    <form action="{% url 'search' %}" method="get" class="w-full">
                        <div class="relative">
                            <input type="text" name="q" placeholder="Search parks and rides..." 
                                   class="w-full px-4 py-2 text-gray-900 transition-all border border-gray-200 rounded-full dark:border-gray-700 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm dark:text-white focus:ring-2 focus:ring-primary/50 focus:border-primary">
                            <button type="submit" class="absolute right-3 top-2.5">
                                <i class="text-gray-400 transition-colors fas fa-search hover:text-primary"></i>
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Right Side Menu -->
                <div class="flex items-center space-x-6">
                    <!-- Theme Toggle -->
                    <button id="theme-toggle" class="p-2.5 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-primary/10 dark:hover:bg-primary/20 transition-all shadow-sm border border-gray-200/50 dark:border-gray-600/50">
                        <i class="hidden text-lg fas fa-sun dark:inline"></i>
                        <i class="text-lg fas fa-moon dark:hidden"></i>
                    </button>

                    <!-- User Menu -->
                    {% if user.is_authenticated %}
                        <div class="relative">
                            <button id="userMenuBtn" class="flex items-center space-x-2 transition-transform hover:scale-105">
                                {% if user.profile.avatar %}
                                    <img src="{{ user.profile.avatar.url }}" alt="{{ user.username }}" 
                                         class="w-8 h-8 rounded-full ring-2 ring-primary/20">
                                {% else %}
                                    <div class="flex items-center justify-center w-8 h-8 text-white rounded-full bg-gradient-to-br from-primary to-secondary">
                                        {{ user.username.0|upper }}
                                    </div>
                                {% endif %}
                            </button>
                            
                            <!-- Dropdown Menu -->
                            <div id="userDropdown" class="dropdown-menu">
                                <div class="py-1">
                                    <a href="{% url 'user_profile' user.username %}" class="menu-item">
                                        <i class="w-5 fas fa-user"></i>
                                        <span>Profile</span>
                                    </a>
                                    <a href="{% url 'settings' %}" class="menu-item">
                                        <i class="w-5 fas fa-cog"></i>
                                        <span>Settings</span>
                                    </a>
                                    {% if user.is_staff or user.is_superuser %}
                                        <a href="{% url 'admin:index' %}" class="menu-item">
                                            <i class="w-5 fas fa-shield-alt"></i>
                                            <span>Admin</span>
                                        </a>
                                    {% endif %}
                                    <form method="post" action="{% url 'account_logout' %}">
                                        {% csrf_token %}
                                        <button type="submit" class="w-full menu-item">
                                            <i class="w-5 fas fa-sign-out-alt"></i>
                                            <span>Logout</span>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    {% else %}
                        <div class="flex space-x-3">
                            <a href="{% url 'account_login' %}" class="btn-secondary">
                                <i class="mr-2 fas fa-sign-in-alt"></i>
                                Login
                            </a>
                            <a href="{% url 'account_signup' %}" class="btn-primary">
                                <i class="mr-2 fas fa-user-plus"></i>
                                Register
                            </a>
                        </div>
                    {% endif %}

                    <!-- Mobile Menu Button -->
                    <button id="mobileMenuBtn" class="p-2 text-gray-500 rounded-lg md:hidden hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400">
                        <i class="fas fa-bars"></i>
                    </button>
                </div>
            </div>

            <!-- Mobile Menu -->
            <div id="mobileMenu" class="hidden py-2 mt-4 md:hidden bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg rounded-xl">
                <a href="{% url 'parks:park_list' %}" class="mobile-nav-link">
                    <i class="w-5 fas fa-map-marker-alt"></i>
                    <span>Parks</span>
                </a>
                <a href="{% url 'rides:ride_list' %}" class="mobile-nav-link">
                    <i class="w-5 fas fa-rocket"></i>
                    <span>Rides</span>
                </a>
                <form action="{% url 'search' %}" method="get" class="px-4 py-2">
                    <input type="text" name="q" placeholder="Search parks and rides..." 
                           class="w-full px-4 py-2 text-gray-900 border border-gray-200 rounded-full dark:border-gray-700 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm dark:text-white">
                </form>
            </div>
        </nav>
    </header>

    <!-- Flash Messages -->
    {% if messages %}
        <div class="container px-6 mx-auto mt-4">
            {% for message in messages %}
                <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">
                    {{ message }}
                </div>
            {% endfor %}
        </div>
    {% endif %}

    <!-- Main Content -->
    <main class="container flex-grow px-6 py-8 mx-auto">
        {% block content %}{% endblock %}
    </main>

    <!-- Footer -->
    <footer class="mt-auto border-t bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50">
        <div class="container px-6 py-6 mx-auto">
            <div class="flex items-center justify-between">
                <div class="text-gray-600 dark:text-gray-400">
                    <p>&copy; {% now "Y" %} ThrillWiki. All rights reserved.</p>
                </div>
                <div class="space-x-4">
                    <a href="{% url 'terms' %}" class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary">Terms</a>
                    <a href="{% url 'privacy' %}" class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary">Privacy</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Custom JavaScript -->
    <script src="{% static 'js/main.js' %}"></script>
    <script>
        // Mobile menu toggle
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const mobileMenu = document.getElementById('mobileMenu');
        
        if (mobileMenuBtn && mobileMenu) {
            mobileMenuBtn.addEventListener('click', () => {
                mobileMenu.classList.toggle('hidden');
            });
        }

        // User dropdown toggle
        const userMenuBtn = document.getElementById('userMenuBtn');
        const userDropdown = document.getElementById('userDropdown');
        
        if (userMenuBtn && userDropdown) {
            userMenuBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                userDropdown.classList.toggle('active');
            });

            // Close dropdown when clicking outside
            document.addEventListener('click', (e) => {
                if (!userMenuBtn.contains(e.target) && !userDropdown.contains(e.target)) {
                    userDropdown.classList.remove('active');
                }
            });

            // Close dropdown when pressing escape
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape') {
                    userDropdown.classList.remove('active');
                }
            });
        }
    </script>
    {% block extra_scripts %}{% endblock %}
</body>
</html>
