import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from './App';

console.log("APP LOADED SUCCESSFULLY");

declare global {
  interface Window {
    __PM_MOUNTED?: boolean;
  }
}
window.__PM_MOUNTED = true;

class RootErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { error: Error | null }
> {
  state = { error: null as Error | null };

  static getDerivedStateFromError(error: Error) {
    return { error };
  }

  render() {
    if (this.state.error) {
      return (
        <div
          style={{
            padding: 24,
            maxWidth: 560,
            margin: '48px auto',
            fontFamily: 'system-ui, sans-serif',
            color: '#fecaca',
            background: '#1e293b',
            borderRadius: 8,
          }}
        >
          <h1 style={{ fontSize: 18, marginBottom: 12 }}>Something went wrong</h1>
          <p style={{ fontSize: 14, opacity: 0.9, marginBottom: 16 }}>
            The app hit a runtime error. Try clearing site data for this domain or use a private window.
          </p>
          <pre
            style={{
              fontSize: 12,
              overflow: 'auto',
              padding: 12,
              background: '#0f172a',
              borderRadius: 6,
              color: '#e2e8f0',
            }}
          >
            {this.state.error.message}
          </pre>
        </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>
    <RootErrorBoundary>
      <App />
    </RootErrorBoundary>
  </React.StrictMode>
);