import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { App } from './App';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ColorModeProvider } from '@/components/ui/ThemeProvider';
import { I18nBridge } from '@/lib/I18nBridge';
import { Toaster } from '@/components/ui/toaster';
import { Toaster as Sonner } from 'sonner';
import { TooltipProvider } from '@/components/ui/tooltip';
import './styles/index.css';

const headLinks = [
  { rel: 'icon', type: 'image/svg+xml', href: '/static/favicon.svg' },
  { rel: 'icon', type: 'image/png', sizes: '96x96', href: '/static/favicon-96x96.png' },
  { rel: 'apple-touch-icon', href: '/static/apple-touch-icon.png' },
  { rel: 'manifest', href: '/static/site.webmanifest' },
];

for (const attrs of headLinks) {
  const link = document.createElement('link');
  for (const [key, value] of Object.entries(attrs)) link.setAttribute(key, value);
  document.head.appendChild(link);
}

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
    },
  },
});

const elem = document.getElementById('root')!;
const app = (
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <ColorModeProvider>
        <I18nBridge>
          <TooltipProvider>
            <Toaster />
            <Sonner position="top-center" toastOptions={{ style: { padding: '16px 20px', fontSize: '16px' } }} />
            <App />
          </TooltipProvider>
        </I18nBridge>
      </ColorModeProvider>
    </QueryClientProvider>
  </StrictMode>
);

if (import.meta.hot) {
  const root = (import.meta.hot.data.root ??= createRoot(elem));
  root.render(app);
} else {
  createRoot(elem).render(app);
}