---
// Layout.astro
import '../styles/styles.css';
import Header from './Header.astro';
import Sidebar from './Sidebar.astro';

interface Props {
  title: string;
}

const { title } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{title} - juchatz.com</title>
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
  <meta name="theme-color" content="#f8f9fa" id="theme-color-meta" />
  
  <!-- Theme initialization script (runs before page renders to prevent flash) -->
  <script is:inline>
    (function() {
      function getInitialTheme() {
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme) {
          return savedTheme;
        }
        
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
          return 'dark';
        }
        
        return 'light';
      }
      
      const theme = getInitialTheme();
      document.documentElement.setAttribute('data-theme', theme);
      
      // Update theme-color meta tag
      const metaThemeColor = document.getElementById('theme-color-meta');
      if (metaThemeColor) {
        metaThemeColor.content = theme === 'dark' ? '#1a202c' : '#f8f9fa';
      }
    })();
  </script>
</head>
<body>
  <div class="container">
    <Header />
    <Sidebar />
    <main>
      <section class="main-content">
        <slot />
      </section>
    </main>
  </div>
  
  <!-- Theme manager script -->
  <script>
    class ThemeManager {
      constructor() {
        this.themeToggle = document.getElementById('themeToggle');
        this.themeIcon = document.getElementById('themeIcon');
        this.themeText = document.getElementById('themeText');
        this.currentTheme = this.getCurrentTheme();
        
        this.init();
      }
      
      getCurrentTheme() {
        return document.documentElement.getAttribute('data-theme') || 'light';
      }
      
      init() {
        // Update button display
        this.updateToggleButton();
        
        // Listen for toggle clicks
        if (this.themeToggle) {
          this.themeToggle.addEventListener('click', () => this.toggleTheme());
        }
        
        // Listen for system theme changes
        if (window.matchMedia) {
          window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
            // Only auto-switch if user hasn't manually set a preference
            if (!localStorage.getItem('theme')) {
              this.currentTheme = e.matches ? 'dark' : 'light';
              this.applyTheme(this.currentTheme, false);
            }
          });
        }
      }
      
      toggleTheme() {
        this.currentTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
        this.applyTheme(this.currentTheme, true);
      }
      
      applyTheme(theme, saveToStorage = false) {
        document.documentElement.setAttribute('data-theme', theme);
        
        if (saveToStorage) {
          localStorage.setItem('theme', theme);
        }
        
        this.updateToggleButton();
        this.updateMetaThemeColor(theme);
      }
      
      updateToggleButton() {
        if (this.themeIcon && this.themeText) {
          if (this.currentTheme === 'dark') {
            this.themeIcon.textContent = '☀️';
            this.themeText.textContent = 'Light';
          } else {
            this.themeIcon.textContent = '🌙';
            this.themeText.textContent = 'Dark';
          }
        }
      }
      
      updateMetaThemeColor(theme) {
        const metaThemeColor = document.getElementById('theme-color-meta');
        if (metaThemeColor) {
          metaThemeColor.content = theme === 'dark' ? '#1a202c' : '#f8f9fa';
        }
      }
    }
    
    // Initialize theme manager when DOM is loaded
    document.addEventListener('DOMContentLoaded', () => {
      new ThemeManager();
    });
  </script>
</body>
</html>
