import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Toaster } from 'sonner';
import {
  BellIcon,
  CheckCircleIcon,
  XCircleIcon,
  ExclamationTriangleIcon,
} from '@heroicons/react/24/outline';
import App from './App';
import './styles.css';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: { retry: 1, staleTime: 30_000 },
  },
});

const toastStyle: React.CSSProperties = {
  fontFamily: 'inherit',
  fontSize: 14,
  fontWeight: 600,
  direction: 'rtl',
  borderRadius: 14,
  border: '1px solid var(--border, #e5e7eb)',
  background: 'var(--surface, #fff)',
  color: 'var(--text, #111)',
  boxShadow: '0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04)',
  padding: '14px 16px',
  gap: 12,
  minWidth: 260,
};

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js').catch(() => {});
  });
}

const root = document.getElementById('admin-root')!;
createRoot(root).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <BrowserRouter>
        <App />
        <Toaster
          position="top-left"
          dir="rtl"
          toastOptions={{ style: toastStyle }}
          icons={{
            success: <CheckCircleIcon style={{ width: 18, height: 18, color: 'oklch(0.62 0.18 150)', flexShrink: 0 }} />,
            error:   <XCircleIcon style={{ width: 18, height: 18, color: 'oklch(0.62 0.22 25)', flexShrink: 0 }} />,
            warning: <ExclamationTriangleIcon style={{ width: 18, height: 18, color: 'oklch(0.75 0.18 85)', flexShrink: 0 }} />,
            info:    <BellIcon style={{ width: 18, height: 18, color: 'var(--primary, oklch(0.55 0.2 256))', flexShrink: 0 }} />,
          }}
        />
      </BrowserRouter>
    </QueryClientProvider>
  </React.StrictMode>
);