import { StrictMode, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import { App } from './App.tsx';

// PWA Initialization Component
const PWAInitializer = () => {
  useEffect(() => {
    // Register service worker for PWA
    if ('serviceWorker' in navigator && process.env.NODE_ENV === 'production') {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
          .then(registration => {
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
          })
          .catch(error => {
            console.log('ServiceWorker registration failed: ', error);
          });
      });
    }

    // Add iOS specific meta tags
    const metaThemeColor = document.createElement('meta');
    metaThemeColor.name = 'theme-color';
    metaThemeColor.content = '#00A4DC';
    document.head.appendChild(metaThemeColor);

    const appleMobileWebAppCapable = document.createElement('meta');
    appleMobileWebAppCapable.name = 'apple-mobile-web-app-capable';
    appleMobileWebAppCapable.content = 'yes';
    document.head.appendChild(appleMobileWebAppCapable);

    const appleMobileWebAppStatusBarStyle = document.createElement('meta');
    appleMobileWebAppStatusBarStyle.name = 'apple-mobile-web-app-status-bar-style';
    appleMobileWebAppStatusBarStyle.content = 'black-translucent';
    document.head.appendChild(appleMobileWebAppStatusBarStyle);

    const appleMobileWebAppTitle = document.createElement('meta');
    appleMobileWebAppTitle.name = 'apple-mobile-web-app-title';
    appleMobileWebAppTitle.content = 'SamCloud';
    document.head.appendChild(appleMobileWebAppTitle);

    // Clean up function
    return () => {
      document.head.removeChild(metaThemeColor);
      document.head.removeChild(appleMobileWebAppCapable);
      document.head.removeChild(appleMobileWebAppStatusBarStyle);
      document.head.removeChild(appleMobileWebAppTitle);
    };
  }, []);

  return null; // This component doesn't render anything
};

const savedTheme = localStorage.getItem('theme') || 'light'
const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches
const themeClass = savedTheme === 'system' ? (isSystemDark ? 'dark' : 'light') : savedTheme
document.documentElement.classList.add(themeClass)

createRoot(document.getElementById('root')!).render(
    <StrictMode>
        <PWAInitializer />
        <App />
    </StrictMode>
)