import '@olly/modern-sk/styles.css';
import '@olly/modern-sk/fonts.css';
import './styles/global.css';
import './styles/shell.css';
import './i18n';
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router';
import { ThemeProvider, TooltipProvider } from '@olly/modern-sk';
import { store } from './store';
import { AppRoutes } from './routes';
import { registerServiceWorker } from './lib/sw';

// Import all endpoint injections to ensure they are registered
import './api/endpoints/auth';
import './api/endpoints/library';
import './api/endpoints/playlists';
import './api/endpoints/downloads';
import './api/endpoints/likes';
import './api/endpoints/storage';
import './api/endpoints/admin';
import './api/endpoints/upload';

// Tier 3 offline: register the audio-caching service worker (no-op if the
// browser/origin doesn't support it).
registerServiceWorker();

const rootEl = document.getElementById('root');
if (rootEl) {
  // grained black-ish background + base text color from modern-sk
  rootEl.classList.add('modern-sk-felt');
  ReactDOM.createRoot(rootEl).render(
    <React.StrictMode>
      <Provider store={store}>
        <BrowserRouter>
          <ThemeProvider>
            <TooltipProvider delayDuration={200}>
              <AppRoutes />
            </TooltipProvider>
          </ThemeProvider>
        </BrowserRouter>
      </Provider>
    </React.StrictMode>,
  );
}