import React, { Component } from 'react'
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

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

  componentDidCatch(error, errorInfo) {
    console.error("ErrorBoundary caught an error", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          height: '100vh',
          backgroundColor: '#0b0b0f',
          color: '#fff',
          fontFamily: 'sans-serif',
          textAlign: 'center',
          padding: '20px'
        }}>
          <span style={{ fontSize: '3rem' }}>⚠️</span>
          <h1 style={{ color: '#FF4949', fontSize: '1.5rem', marginTop: '10px' }}>Критическая ошибка интерфейса</h1>
          <p style={{ color: '#ADADB8', maxWidth: '500px', margin: '15px 0', fontSize: '0.9rem', lineHeight: '1.5' }}>
            Произошла критическая ошибка при отрисовке фронтенда. Пожалуйста, попробуйте обновить страницу.
          </p>
          <pre style={{
            backgroundColor: '#16161c',
            padding: '12px',
            borderRadius: '6px',
            maxWidth: '100%',
            width: '450px',
            overflowX: 'auto',
            textAlign: 'left',
            color: '#FF6B6B',
            fontSize: '0.8rem',
            border: '1px solid #2F2F35'
          }}>
            {this.state.error && this.state.error.toString()}
          </pre>
          <button
            onClick={() => window.location.reload()}
            style={{
              padding: '10px 20px',
              backgroundColor: '#9146FF',
              color: '#white',
              border: 'none',
              borderRadius: '5px',
              cursor: 'pointer',
              fontWeight: 'bold',
              marginTop: '15px',
              color: '#fff'
            }}
          >
            Обновить страницу
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <ErrorBoundary>
      <App />
    </ErrorBoundary>
  </StrictMode>,
)