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

interface ErrorBoundaryProps {
  children?: ReactNode;
}

interface ErrorBoundaryState {
  hasError: boolean;
  error: any;
}

// Error Boundary to catch crashes and show a UI instead of white screen
class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  // FIX: Initialize state as a class property to resolve context issues.
  // state: ErrorBoundaryState = {
  //   hasError: false,
  //   error: null,
  // };

  // FIX: Added a constructor to explicitly call super(props) and initialize state, resolving a potential context issue flagged by the type checker.
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
    };
  }

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

  componentDidCatch(error: any, errorInfo: any) {
    console.error("Uncaught error:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div style={{ padding: 40, fontFamily: 'sans-serif', textAlign: 'center', backgroundColor: '#FEF2F2', height: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
          <h1 style={{ color: '#991B1B', fontSize: '24px', marginBottom: '16px' }}>Algo deu errado :(</h1>
          <p style={{ color: '#7F1D1D', marginBottom: '24px' }}>Ocorreu um erro ao carregar a aplicação.</p>
          <pre style={{ backgroundColor: 'white', padding: '20px', borderRadius: '8px', border: '1px solid #FECACA', color: '#EF4444', maxWidth: '800px', overflow: 'auto', textAlign: 'left' }}>
            {this.state.error?.toString()}
          </pre>
          <button 
            onClick={() => window.location.reload()}
            style={{ marginTop: '32px', padding: '12px 24px', backgroundColor: '#DC2626', color: 'white', border: 'none', borderRadius: '99px', cursor: 'pointer', fontWeight: 'bold' }}
          >
            Tentar novamente
          </button>
        </div>
      );
    }

    return this.props.children;
  }
}

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

const root = ReactDOM.createRoot(rootElement);
root.render(
  <React.StrictMode>
    <ErrorBoundary>
      <App />
    </ErrorBoundary>
  </React.StrictMode>
);