import React, { Component, ErrorInfo, ReactNode } from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// Polyfills for browser resilience
if (typeof window !== 'undefined') {
  if (!(window as any).IntersectionObserver) {
    (window as any).IntersectionObserver = class {
      private callback: any;
      constructor(callback: any) { this.callback = callback; }
      observe(element: any) {
        if (this.callback) {
          try { this.callback([{ isIntersecting: true, target: element }]); } catch (_) {}
        }
      }
      unobserve() {}
      disconnect() {}
    };
  }

  if (!(window as any).ResizeObserver) {
    (window as any).ResizeObserver = class {
      private callback: any;
      constructor(callback: any) { this.callback = callback; }
      observe(element: any) {
        if (this.callback) {
          try { this.callback([{ target: element, contentRect: element.getBoundingClientRect() }]); } catch (_) {}
        }
      }
      unobserve() {}
      disconnect() {}
    };
  }
}

interface ErrorBoundaryProps {
  children: ReactNode;
}

interface ErrorBoundaryState {
  hasError: boolean;
}

class RootErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false };
  }

  public static getDerivedStateFromError(): ErrorBoundaryState {
    return { hasError: true };
  }

  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error("Lys d'Orient Spa - Uncaught error:", error, errorInfo);
  }

  public render() {
    if (this.state.hasError) {
      return (
        <div style={{
          minHeight: '100vh',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#0b0b0b',
          color: '#ffffff',
          fontFamily: 'system-ui, -apple-system, sans-serif',
          padding: '24px',
          textAlign: 'center'
        }}>
          <img 
            src="https://i.postimg.cc/VkW39ML2/Lys-Spa-d-Orient-Bien-etre-et-durabilite-Lys-Spa-d-Orient-09-10-2026-06-31-PM-removebg-preview.png" 
            alt="Lys d'Orient Spa" 
            style={{ width: '88px', height: '88px', marginBottom: '20px', objectFit: 'contain' }}
          />
          <h1 style={{ fontSize: '24px', fontWeight: 600, color: '#E5C266', marginBottom: '8px' }}>
            Lys d'Orient Spa
          </h1>
          <p style={{ color: '#cccccc', maxWidth: '420px', fontSize: '15px', lineHeight: 1.6, marginBottom: '24px' }}>
            Une légère interruption est survenue lors de l'affichage. Veuillez actualiser la page pour retrouver votre expérience.
          </p>
          <button 
            type="button"
            onClick={() => window.location.reload()}
            style={{
              padding: '12px 28px',
              backgroundColor: '#C0D62D',
              color: '#000000',
              border: 'none',
              borderRadius: '12px',
              fontWeight: 700,
              fontSize: '14px',
              cursor: 'pointer'
            }}
          >
            Actualiser la page
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

// Resilient mounting with immediate attempt + event listeners + polling
function startApp(): boolean {
  if (typeof window === 'undefined') return false;
  if ((window as any).__lys_spa_mounted) return true;

  const rootElement = document.getElementById('root');
  if (!rootElement) {
    return false;
  }

  try {
    (window as any).__lys_spa_mounted = true;
    const root = ReactDOM.createRoot(rootElement);
    root.render(
      <RootErrorBoundary>
        <App />
      </RootErrorBoundary>
    );
    return true;
  } catch (err) {
    console.error("Mount error in Lys d'Orient:", err);
    return false;
  }
}

// 1. Immediate mount attempt
if (!startApp()) {
  // 2. If DOM not ready yet, wait for events
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => startApp());
  }
  window.addEventListener('load', () => startApp());

  // 3. Fallback interval in case of delayed execution or iframe delay
  let attempts = 0;
  const timer = setInterval(() => {
    attempts++;
    if (startApp() || attempts > 50) {
      clearInterval(timer);
    }
  }, 40);
}