import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { initSentry, Sentry } from './lib/sentry'
import { startDrainLoop } from './repositories/drain'
import './styles/global.css'

initSentry()
startDrainLoop()

const Fallback = () => (
  <div style={{
    minHeight: '100dvh', display: 'grid', placeItems: 'center',
    padding: '2rem', textAlign: 'center', fontFamily: 'system-ui, sans-serif',
  }}>
    <div>
      <h1 style={{ marginBottom: '0.75rem' }}>Maaf, ada masalah.</h1>
      <p style={{ color: '#64748B', marginBottom: '1.5rem' }}>
        Cuba muat semula halaman. Jika masalah berterusan, hubungi kami.
      </p>
      <button onClick={() => window.location.reload()}
        style={{
          padding: '0.75rem 1.5rem', borderRadius: 12, background: '#0D9488',
          color: 'white', border: 'none', fontWeight: 600, cursor: 'pointer',
        }}>
        Muat semula
      </button>
    </div>
  </div>
)

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Sentry.ErrorBoundary fallback={Fallback}>
      <App />
    </Sentry.ErrorBoundary>
  </React.StrictMode>
)