import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import './i18n';
import { startDeploymentFreshnessMonitor } from './services/deploymentFreshnessService';
import { initGlobalErrorInterceptor } from './services/globalErrorInterceptor';

initGlobalErrorInterceptor();
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

startDeploymentFreshnessMonitor();

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    const buildId = import.meta.env.VITE_HIIOMNI_BUILD_ID || 'dev';
    navigator.serviceWorker.register(`/sw.js?v=${buildId}`).catch(err => {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

const rootElement = document.getElementById('root');
if (!rootElement) {
  throw new Error("Could not find root element to mount to");
}

// Fallback minimal em caso de erro de renderização - SEMPRE mostra algo para evitar tela preta
const MinimalFallback: React.FC<{ onRetry?: () => void }> = ({ onRetry }) => (
  <div style={{
    minHeight: '100vh',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#0a0a0a',
    color: '#fff',
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
    gap: '16px',
    padding: '20px',
    textAlign: 'center'
  }}>
    <div style={{
      width: '64px',
      height: '64px',
      border: '3px solid #333',
      borderTopColor: '#8b5cf6',
      borderRadius: '50%',
      animation: 'spin 1s linear infinite'
    }} />
    <p style={{ color: '#888', fontSize: '16px', fontWeight: 500 }}>Carregando HIIOMNI...</p>
    <p style={{ color: '#555', fontSize: '12px', maxWidth: '300px' }}>
      Se o carregamento demorar, tente recarregar a página.
    </p>
    {onRetry && (
      <button
        onClick={onRetry}
        style={{
          marginTop: '16px',
          padding: '12px 24px',
          backgroundColor: '#8b5cf6',
          color: '#fff',
          border: 'none',
          borderRadius: '8px',
          fontSize: '14px',
          fontWeight: 600,
          cursor: 'pointer'
        }}
      >
        Recarregar
      </button>
    )}
    <style>{`
      @keyframes spin {
        to { transform: rotate(360deg); }
      }
    `}</style>
  </div>
);

// Error boundary wrapper para evitar tela preta total
class ErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { hasError: boolean; error: Error | null; retryKey: number }
> {
  constructor(props: { children: React.ReactNode }) {
    super(props);
    this.state = { hasError: false, error: null, retryKey: 0 };
  }

  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error('[HIIOMNI Critical Error]', error, errorInfo);
  }

  handleRetry = () => {
    this.setState({ hasError: false, error: null, retryKey: this.state.retryKey + 1 });
    window.location.reload();
  };

  render() {
    if (this.state.hasError) {
      return <MinimalFallback onRetry={this.handleRetry} />;
    }
    return this.props.children;
  }
}

const root = ReactDOM.createRoot(rootElement);
root.render(
  <React.StrictMode>
    <ErrorBoundary>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </ErrorBoundary>
  </React.StrictMode>
);