import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';
import TenantProvider from './context/TenantContext.jsx';
import TelemetryProvider from './context/TelemetryContext.jsx';
import { ThemeProvider } from './context/ThemeContext';

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

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

  componentDidCatch(error, errorInfo) {
    fetch('http://localhost:9999/log', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ error: error.toString(), errorInfo: errorInfo.componentStack })
    }).catch(console.error);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div style={{color:'red', padding: '20px', background: 'black', height: '100vh'}}>
          <h1>Something went wrong.</h1>
          <pre>{this.state.error.toString()}</pre>
        </div>
      );
    }
    return this.props.children;
  }
}

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