<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Enforce proper MIME types for JavaScript ES modules -->
    <meta http-equiv="X-Content-Type-Options" content="nosniff">
    <!-- Explicitly set JS module MIME type for assets paths -->
    <meta http-equiv="Link" content="</assets/>; rel=preload; as=script; type=application/javascript">
    <!-- Content Security Policy - More permissive for development -->
    <meta http-equiv="Content-Security-Policy" content="
      default-src * 'unsafe-inline' 'unsafe-eval';
      connect-src * 'unsafe-inline';
      script-src * 'unsafe-inline' 'unsafe-eval';
      style-src * 'unsafe-inline';
      img-src * data: blob:;
      font-src * data:;
      frame-src *;
      object-src *;
      worker-src * blob:;
    ">
    <!-- Google Maps script will be loaded dynamically in the MapComponent -->
    <script>
      // Create a global window variable to store environment variables
      // In development, the values will be replaced by Vite
      // In production, the placeholder %VITE_GOOGLE_MAPS_API_KEY% won't be replaced,
      // so the keys will be accessed via import.meta.env in the components
      window.ENV = {};
      
      // This empty initMap function prevents errors if the callback is called
      function initMap() {
        console.log("Default initMap called");
      }

      // Special script to handle ES module loading in case of MIME type issues
      (function() {
        // This script ensures ES modules are loaded correctly, even with MIME type issues
        window.__fixMimeTypeIssues = function(modulePath) {
          // Only run this fix in production (not needed in development)
          if (location.hostname === 'localhost' || 
              location.hostname.includes('replit') || 
              location.hostname.includes('127.0.0.1')) {
            // Skip the fix in development environments
            return;
          }

          console.log("Using MIME type workaround for module: " + modulePath);
          
          try {
            // Try the normal import first (this will likely fail with MIME type issues)
            const script = document.createElement('script');
            script.type = 'module';
            script.src = modulePath;
            script.onerror = function(e) {
              console.warn("Module failed to load normally, trying Blob method:", e);
              
              // If normal loading fails, try the Blob URL method to enforce correct MIME type
              fetch(modulePath)
                .then(response => response.text())
                .then(code => {
                  const blob = new Blob([code], { type: 'application/javascript' });
                  const url = URL.createObjectURL(blob);
                  const script2 = document.createElement('script');
                  script2.type = 'module';
                  script2.src = url;
                  document.head.appendChild(script2);
                })
                .catch(err => {
                  console.error("Failed to load module with Blob method:", err);
                });
            };
            document.head.appendChild(script);
          } catch (err) {
            console.error("Error in MIME type fix:", err);
          }
        };
      })();
    </script>
  </head>
  <body>
    <div id="root"></div>
    <div id="map"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>