import { MsalProvider } from '@azure/msal-react';
import React from 'react';
import ReactDOM from 'react-dom/client';
import { IntlProvider } from 'react-intl';
import { BrowserRouter } from 'react-router-dom';

import { App } from './App';
import messagesEn from './i18n/en-US.json';
import { msalInstance } from './services/auth';
import './styles/index.css';

const locale = navigator.language || 'en-US';
const messages = locale.startsWith('es') ? {} : messagesEn; // TODO: Load es-AR dynamically

msalInstance.initialize().then(() => {
  ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
      <MsalProvider instance={msalInstance}>
        <IntlProvider locale={locale} messages={messages} defaultLocale="en-US">
          <BrowserRouter>
            <App />
          </BrowserRouter>
        </IntlProvider>
      </MsalProvider>
    </React.StrictMode>,
  );
}).catch((err: unknown) => {
  const msg = err instanceof Error ? err.message : String(err);
  document.getElementById('root')!.innerHTML =
    `<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;font-family:sans-serif;gap:12px">` +
    `<p style="font-size:16px;color:#333">Failed to start application</p>` +
    `<pre style="font-size:12px;color:#888;max-width:480px;white-space:pre-wrap">${msg}</pre>` +
    `</div>`;
});