<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" id="favicon" />
    <link rel="alternate icon" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-title" content="OMNIVO" />
    <meta name="theme-color" content="#3174F1" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png" />
    <link rel="manifest" href="/manifest.json" />
    <title>Omnivo - Property Management</title>
    <script type="module" crossorigin src="/assets/index-BMExXHMm.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/large-libs-DHGHmilv.js">
    <link rel="modulepreload" crossorigin href="/assets/tanstack-BXJfVPUY.js">
    <link rel="modulepreload" crossorigin href="/assets/radix-ui-BA32w1ww.js">
    <link rel="stylesheet" crossorigin href="/assets/index-BQvHmvQ-.css">
  </head>
  <body>
    <div id="root">
      <div style="padding: 20px; text-align: center; font-family: sans-serif;">
        <p>Loading application...</p>
      </div>
    </div>
    <script>
      // Error handler to catch any loading errors
      window.addEventListener('error', function(e) {
        console.error('Global error:', e.error);
        console.error('Error details:', {
          message: e.message,
          filename: e.filename,
          lineno: e.lineno,
          colno: e.colno,
          error: e.error
        });
        
        const root = document.getElementById('root');
        if (root && root.innerHTML.includes('Loading application')) {
          // Extract error message from various possible sources
          let errorMessage = 'Unknown error';
          if (e.error && e.error.message) {
            errorMessage = e.error.message;
          } else if (e.message) {
            errorMessage = e.message;
          } else if (e.error && typeof e.error === 'string') {
            errorMessage = e.error;
          } else if (e.error && e.error.toString) {
            errorMessage = e.error.toString();
          }
          
          // Check for common configuration errors
          let helpfulMessage = '';
          if (errorMessage.includes('VITE_CONVEX_URL')) {
            helpfulMessage = '<p style="color: #dc2626; margin-top: 10px;"><strong>Missing Configuration:</strong> VITE_CONVEX_URL is not set. Please add it to your .env.local file.</p>';
          } else if (errorMessage.includes('VITE_WORKOS_CLIENT_ID')) {
            helpfulMessage = '<p style="color: #dc2626; margin-top: 10px;"><strong>Missing Configuration:</strong> VITE_WORKOS_CLIENT_ID is not set. Please add it to your .env.local file.</p>';
          }
          
          root.innerHTML = `
            <div style="padding: 20px; text-align: center; font-family: sans-serif; max-width: 800px; margin: 50px auto;">
              <h1 style="color: red; margin-bottom: 20px;">Failed to Load Application</h1>
              <div style="background: #f3f4f6; padding: 15px; border-radius: 8px; margin: 20px 0; text-align: left;">
                <p style="color: #1f2937; margin: 10px 0;"><strong>Error:</strong> ${errorMessage}</p>
                ${e.filename ? `<p style="color: #6b7280; font-size: 12px; margin: 5px 0;">File: ${e.filename}${e.lineno ? ` (Line ${e.lineno})` : ''}</p>` : ''}
              </div>
              ${helpfulMessage}
              <p style="color: #666; font-size: 12px; margin-top: 20px;">Check the browser console (F12) for more details.</p>
              <button onclick="window.location.reload()" style="padding: 10px 20px; margin-top: 10px; cursor: pointer; background: #3b82f6; color: white; border: none; border-radius: 4px;">
                Reload Page
              </button>
            </div>
          `;
        }
      }, true);
      
      // Also catch unhandled promise rejections
      window.addEventListener('unhandledrejection', function(e) {
        console.error('Unhandled promise rejection:', e.reason);
        const root = document.getElementById('root');
        if (root && root.innerHTML.includes('Loading application')) {
          const errorMessage = e.reason?.message || e.reason?.toString() || 'Unhandled promise rejection';
          
          // Check for Vite optimization errors
          let helpfulMessage = '';
          if (errorMessage.includes('504') || errorMessage.includes('Outdated Optimize Dep') || errorMessage.includes('.vite/')) {
            helpfulMessage = `
              <div style="background: #fef3c7; border: 1px solid #fbbf24; padding: 15px; border-radius: 8px; margin: 20px 0; text-align: left;">
                <p style="color: #92400e; margin: 10px 0;"><strong>Vite Cache Issue Detected</strong></p>
                <p style="color: #78350f; font-size: 14px; margin-top: 10px;">
                  This error is usually caused by a stale Vite dependency cache. Try:
                </p>
                <ol style="color: #78350f; font-size: 14px; margin: 10px 0; padding-left: 20px;">
                  <li>Stop the dev server (Ctrl+C)</li>
                  <li>Delete the cache: <code style="background: #fde68a; padding: 2px 6px; border-radius: 4px;">rm -rf node_modules/.vite</code></li>
                  <li>Restart the dev server: <code style="background: #fde68a; padding: 2px 6px; border-radius: 4px;">npm run dev</code></li>
                </ol>
              </div>
            `;
          }
          
          root.innerHTML = `
            <div style="padding: 20px; text-align: center; font-family: sans-serif; max-width: 800px; margin: 50px auto;">
              <h1 style="color: red; margin-bottom: 20px;">Failed to Load Application</h1>
              <div style="background: #f3f4f6; padding: 15px; border-radius: 8px; margin: 20px 0; text-align: left;">
                <p style="color: #1f2937; margin: 10px 0;"><strong>Error:</strong> ${errorMessage}</p>
              </div>
              ${helpfulMessage}
              <p style="color: #666; font-size: 12px; margin-top: 20px;">Check the browser console (F12) for more details.</p>
              <button onclick="window.location.reload()" style="padding: 10px 20px; margin-top: 10px; cursor: pointer; background: #3b82f6; color: white; border: none; border-radius: 4px;">
                Reload Page
              </button>
            </div>
          `;
        }
      });
      
      // Also catch resource loading errors (like 504 errors)
      window.addEventListener('error', function(e) {
        // Check if it's a resource loading error (not a script error)
        var target = e.target;
        if (target && target !== window && target.tagName) {
          if (target.tagName === 'SCRIPT' || target.tagName === 'LINK') {
            var src = target.src || target.href;
            if (src && src.includes('.vite/')) {
              console.error('[Vite Cache Error] Failed to load optimized dependency:', src);
              const root = document.getElementById('root');
              if (root && root.innerHTML.includes('Loading application')) {
                root.innerHTML = `
                  <div style="padding: 20px; text-align: center; font-family: sans-serif; max-width: 800px; margin: 50px auto;">
                    <h1 style="color: red; margin-bottom: 20px;">Failed to Load Application</h1>
                    <div style="background: #fef3c7; border: 1px solid #fbbf24; padding: 15px; border-radius: 8px; margin: 20px 0; text-align: left;">
                      <p style="color: #92400e; margin: 10px 0;"><strong>Vite Dependency Cache Issue</strong></p>
                      <p style="color: #78350f; font-size: 14px; margin-top: 10px;">
                        The development server's dependency cache is outdated. Please:
                      </p>
                      <ol style="color: #78350f; font-size: 14px; margin: 10px 0; padding-left: 20px;">
                        <li>Stop the dev server (Ctrl+C in terminal)</li>
                        <li>Run: <code style="background: #fde68a; padding: 2px 6px; border-radius: 4px;">rm -rf node_modules/.vite</code></li>
                        <li>Restart: <code style="background: #fde68a; padding: 2px 6px; border-radius: 4px;">npm run dev</code></li>
                      </ol>
                    </div>
                    <button onclick="window.location.reload()" style="padding: 10px 20px; margin-top: 10px; cursor: pointer; background: #3b82f6; color: white; border: none; border-radius: 4px;">
                      Reload Page
                    </button>
                  </div>
                `;
              }
            }
          }
        }
      }, true);
    </script>
    <noscript>
      <div style="padding: 20px; text-align: center;">
        <h1>JavaScript Required</h1>
        <p>This application requires JavaScript to run. Please enable JavaScript in your browser.</p>
      </div>
    </noscript>
  </body>
</html>
