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

interface ErrorBoundaryProps {
  children?: ReactNode;
}

interface ErrorBoundaryState {
  hasError: boolean;
  error: Error | null;
  errorInfo: ErrorInfo | null;
}

// FIX: Changed `extends Component` to `extends React.Component` and updated the import to resolve TypeScript errors where `props` and `setState` were not found on the component instance. This ensures correct inheritance from React's base component class.
class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
  public state: ErrorBoundaryState = {
    hasError: false,
    error: null,
    errorInfo: null
  };

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

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error("Uncaught error:", error, errorInfo);
    // FIX: `setState` is inherited from `React.Component` and is now correctly recognized.
    this.setState({ errorInfo });
  }

  handleReload = () => {
    window.location.reload();
  };

  render() {
    if (this.state.hasError) {
      return (
        <div style={{ 
          minHeight: '100vh', 
          display: 'flex', 
          alignItems: 'center', 
          justifyContent: 'center', 
          backgroundColor: '#f9fafb', 
          padding: '1rem', 
          fontFamily: 'sans-serif', 
          color: '#1f2937' 
        }}>
          <div style={{ 
            maxWidth: '32rem', 
            width: '100%', 
            backgroundColor: 'white', 
            borderRadius: '0.5rem', 
            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
            padding: '2rem',
            textAlign: 'center'
          }}>
            <h1 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>
              Something went wrong
            </h1>
            <p style={{ marginBottom: '1.5rem', color: '#4b5563' }}>
              The application encountered an error.
            </p>
            <button 
              onClick={this.handleReload}
              style={{
                backgroundColor: '#0ea5e9',
                color: 'white',
                padding: '0.5rem 1rem',
                borderRadius: '0.25rem',
                border: 'none',
                cursor: 'pointer',
                fontWeight: 'bold'
              }}
            >
              Reload Page
            </button>
            <div style={{ marginTop: '2rem', textAlign: 'left', overflow: 'auto', maxHeight: '200px', fontSize: '0.75rem', color: '#ef4444' }}>
              <pre>{this.state.error?.toString()}</pre>
            </div>
          </div>
        </div>
      );
    }

    // FIX: `props` are inherited from `React.Component` and is now correctly recognized.
    return this.props.children;
  }
}

const rootElement = document.getElementById('root');

if (!rootElement) {
  document.body.innerHTML = '<div style="color:red;padding:20px;">Error: Root element not found.</div>';
  throw new Error("Could not find root element to mount to");
}

try {
  const root = createRoot(rootElement);
  root.render(
    <React.StrictMode>
      <ErrorBoundary>
        <App />
      </ErrorBoundary>
    </React.StrictMode>
  );
} catch (e) {
  console.error("Failed to mount application:", e);
  rootElement.innerHTML = `<div style="color:red;padding:20px;"><h1>Failed to mount application</h1><pre>${e instanceof Error ? e.message : String(e)}</pre></div>`;
}