import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { GoogleOAuthProvider } from '@react-oauth/google'
import './index.css'
import App from './App.jsx'
import ErrorBoundary from './components/ErrorBoundary.jsx'

const clientId = import.meta.env.VITE_GOOGLE_CLIENT_ID

const RootFallback = (error) => (
  <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '2rem', fontFamily: 'sans-serif' }}>
    <div style={{ maxWidth: 480, textAlign: 'center' }}>
      <p style={{ fontSize: '1rem', fontWeight: 700, color: '#b91c1c', marginBottom: '0.5rem' }}>Ứng dụng gặp lỗi nghiêm trọng</p>
      <p style={{ fontSize: '0.75rem', color: '#6b7280', fontFamily: 'monospace', marginBottom: '1rem', wordBreak: 'break-all' }}>{error.message}</p>
      <button onClick={() => window.location.reload()}
        style={{ fontSize: '0.75rem', padding: '0.5rem 1rem', background: '#fee2e2', color: '#b91c1c', border: 'none', borderRadius: '0.5rem', cursor: 'pointer' }}>
        Tải lại trang
      </button>
    </div>
  </div>
)

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <ErrorBoundary fallback={RootFallback}>
      <GoogleOAuthProvider clientId={clientId}>
        <App />
      </GoogleOAuthProvider>
    </ErrorBoundary>
  </StrictMode>,
)