import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { ErrorBoundary } from './components/ErrorBoundary.tsx'
import './index.css'

// eslint-disable-next-line no-console
console.log('[SAP Sync] React mounting...')

try {
  const rootElement = document.getElementById('root')
  if (!rootElement) {
    throw new Error('Root element #root not found in DOM')
  }

  const root = ReactDOM.createRoot(rootElement)
  root.render(
    <React.StrictMode>
      <ErrorBoundary>
        <App />
      </ErrorBoundary>
    </React.StrictMode>,
  )
  // eslint-disable-next-line no-console
  console.log('[SAP Sync] React mounted successfully')
} catch (error) {
  console.error('[SAP Sync] Failed to mount React:', error)
  const errorMsg = error instanceof Error ? error.message : String(error)
  document.body.innerHTML = [
    '<div style="min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f8fafc;padding:20px;">',
    '<div style="max-width:600px;width:100%;background:white;padding:32px;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,0.1);">',
    '<h1 style="color:#ef4444;margin-bottom:16px;">Application Failed to Load</h1>',
    '<p style="color:#64748b;margin-bottom:16px;">There was a critical error starting the application.</p>',
    '<pre style="background:#f1f5f9;padding:16px;border-radius:8px;overflow:auto;max-height:300px;font-size:12px;">' + errorMsg + '</pre>',
    '<button onclick="window.location.reload()" style="margin-top:16px;padding:10px 20px;background:#6366f1;color:white;border:none;border-radius:8px;cursor:pointer;font-size:16px;">Reload Page</button>',
    '</div></div>'
  ].join('')
}