<!doctype html>
<html lang="en">
  <head>
    <script>
      // Run theme detection before anything else loads
      try {
        // Get stored theme - match same key used in useTheme hook
        const savedTheme = localStorage.getItem('dark-mode');
        
        // Check if user has explicitly chosen a theme
        if (savedTheme === 'false' || savedTheme === null) {
          document.documentElement.classList.remove('dark');
        } 
        else if (savedTheme === 'true') {
          document.documentElement.classList.add('dark');
        }
        // Only use system preference if no explicit choice
        else {
          const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
          if (prefersDark) {
            document.documentElement.classList.add('dark');
          } else {
            document.documentElement.classList.remove('dark');
          }
        }
      } catch (e) {
        console.error('Theme initialization error:', e);
      }
    </script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <meta name="theme-color" content="#0284c7" />
    <meta name="description" content="NestTask - A modern task management application for teams and individuals" />
    <base href="/" />
    
    <!-- Resource hints for faster loading -->
    <!-- Preconnect to Supabase API for critical data fetching -->
    <link rel="preconnect" href="https://nglfbbdoyyfslzyjarqs.supabase.co" crossorigin />
    <link rel="dns-prefetch" href="https://nglfbbdoyyfslzyjarqs.supabase.co" />
    
    <!-- Preconnect to Google Fonts for faster font loading -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
    
    <!-- Note: don't modulepreload JSON; browsers enforce JS module MIME types -->
    
    <!-- PWA assets -->
    <link rel="icon" type="image/svg+xml" href="/icons/icon-192x192.png" />
    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
    <link rel="apple-touch-icon" href="/icons/icon-192x192.png" />
    
    <!-- Critical CSS inline for faster paint -->
    <style>
      /* Critical path CSS */
      :root {
        --primary-color: #0284c7;
        --primary-light: rgba(2, 132, 199, 0.3);
        --bg-color: #ffffff;
        --text-color: #1e293b;
      }
      
      html, body {
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        background-color: var(--bg-color);
        color: var(--text-color);
        -webkit-font-smoothing: antialiased;
        height: 100%;
      }
      
      /* Modern loading screen styles */
      .loading {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--bg-color);
        z-index: 9999;
        opacity: 1;
        transition: opacity 0.2s ease-out;
      }
      
      .loading-content {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      
      .loading-title {
        font-size: 1.1rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        margin-top: 1rem;
        color: var(--text-color);
        opacity: 0.9;
      }
      
      /* Modern pulse loader */
      .loader {
        position: relative;
        width: 30px;
        height: 30px;
      }
      
      .loader::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background-color: var(--primary-color);
        opacity: 0.15;
        transform: scale(1);
        animation: pulse 1.5s ease-out infinite;
      }
      
      .loader::after {
        content: "";
        position: absolute;
        inset: 8px;
        border-radius: 50%;
        background-color: var(--primary-color);
        transform: scale(1);
        opacity: 1;
      }
      
      @keyframes pulse {
        0% { transform: scale(0.8); opacity: 0.3; }
        50% { transform: scale(1.15); opacity: 0.1; }
        100% { transform: scale(0.8); opacity: 0.3; }
      }
      
      /* Dark mode support */
      .dark {
        --bg-color: #0f172a;
        --text-color: #e2e8f0;
        --primary-color: #38bdf8;
        --primary-light: rgba(56, 189, 248, 0.3);
      }
    </style>
    
    <!-- Fonts - Non-render blocking with preload -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'" />
    <noscript><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" /></noscript>
    
    <!-- Theme controller script -->
    <script>
      // Create global theme controller
      window.themeController = {
        isDark: function() {
          return document.documentElement.classList.contains('dark');
        },
        setDark: function() {
          document.documentElement.classList.add('dark');
          localStorage.setItem('dark-mode', 'true');
        },
        setLight: function() {
          document.documentElement.classList.remove('dark');
          localStorage.setItem('dark-mode', 'false');
        },
        toggle: function() {
          if (this.isDark()) {
            this.setLight();
            return 'light';
          } else {
            this.setDark();
            return 'dark';
          }
        },
        // Match system preference
        resetToSystem: function() {
          localStorage.removeItem('dark-mode');
          const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
          if (prefersDark) {
            document.documentElement.classList.add('dark');
          } else {
            document.documentElement.classList.remove('dark');
          }
          return prefersDark ? 'dark' : 'light';
        }
      };
      
      // Backwards compatibility
      window.toggleTheme = window.themeController.toggle.bind(window.themeController);
    </script>
    <script type="module" crossorigin src="/assets/js/index.Cu63jwIv.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/css/index.KrsTFQ0K.css">
  </head>
  <body>
    <div id="root"></div>
    <div class="loading">
      <div class="loading-content">
        <div class="loader"></div>
        <div class="loading-title">NestTask</div>
      </div>
    </div>
    
    <!-- Use direct path with type="module" for proper handling by Vite -->
    
    <script>
      // Watch for dark mode changes in the system
      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
        // Only apply system preference if no user choice is stored
        if (!localStorage.getItem('dark-mode')) {
          if (event.matches) {
            document.documentElement.classList.add('dark');
          } else {
            document.documentElement.classList.remove('dark');
          }
        }
      });
    
      // Register service worker (PWA only). Do NOT register inside Capacitor,
      // because SW caching can serve stale index/assets and cause a white screen.
      const isCapacitor = typeof window !== 'undefined' && (!!window.Capacitor || /\bCapacitor\b/i.test(navigator.userAgent));
      if (!isCapacitor && 'serviceWorker' in navigator) {
        window.addEventListener('load', () => {
          navigator.serviceWorker.register('/service-worker.js')
            .catch(err => {
              console.error('ServiceWorker registration failed: ', err);
            });
        });
      }
      
      // Improved loading screen removal with MutationObserver and timeout fallback
      document.addEventListener('DOMContentLoaded', () => {
        // Get the root element where React will mount
        const rootEl = document.getElementById('root');
        
        // Keep track of whether the app is mounted
        let appMounted = false;
        
        // Fallback timeout to remove loading screen
        const fallbackTimeout = setTimeout(() => {
          if (!appMounted) {
            const loadingEl = document.querySelector('.loading');
            if (loadingEl) {
              loadingEl.style.opacity = '0';
              setTimeout(() => loadingEl.remove(), 250);
            }
          }
        }, 5000); // 5 second fallback
        
        // Observe the root element for changes to detect when React has mounted
        if (rootEl) {
          const observer = new MutationObserver((mutations, observer) => {
            // Check if the app is mounted and has real content
            if (rootEl.childNodes.length > 0 && rootEl.innerHTML.trim().length > 50) {
              appMounted = true;
              clearTimeout(fallbackTimeout);
              
              // Delay the removal of loading screen slightly to ensure smooth transition
              setTimeout(() => {
                const loadingEl = document.querySelector('.loading');
                if (loadingEl) {
                  loadingEl.style.opacity = '0';
                  setTimeout(() => {
                    loadingEl.remove();
                    observer.disconnect();
                  }, 250);
                }
              }, 100); // Small delay to ensure React has rendered completely
            }
          });
          
          // Configure the observer to check for childList and subtree changes
          observer.observe(rootEl, { 
            childList: true, 
            subtree: true,
            characterData: true,
            attributes: true 
          });
        }
      });
    </script>
  </body>
</html>