import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { QueryClient } from '@tanstack/react-query'
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
import './index.css'
import App from './App.tsx'
import ErrorBoundary from './components/shared/ErrorBoundary'
import { loadFavicon } from './utils/favicon'

loadFavicon()

if (window.matchMedia('(pointer: coarse)').matches || window.matchMedia('(hover: none)').matches) {
  document.addEventListener('contextmenu', (e) => {
    const el = e.target as HTMLElement;
    if (el.closest('input, textarea, [contenteditable="true"]')) return;
    e.preventDefault();
  }, { passive: false });
}

const observer = new MutationObserver((mutations) => {
  for (const m of mutations) {
    Array.from(m.addedNodes).forEach((node) => {
      if (node instanceof HTMLImageElement && !node.loading) {
        node.loading = 'lazy';
      }
      if (node instanceof HTMLElement) {
        node.querySelectorAll('img:not([loading])').forEach((img) => {
          (img as HTMLImageElement).loading = 'lazy';
        });
      }
    });
  }
});
observer.observe(document.getElementById('root')!, { childList: true, subtree: true });

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 2,
      gcTime: 1000 * 60 * 60 * 24,
      retry: 2,
      refetchOnWindowFocus: false,
      refetchOnReconnect: true,
    },
    mutations: {
      retry: 0,
    },
  },
})

const localStoragePersister = createSyncStoragePersister({
  storage: window.localStorage,
  key: 'vouchup-query-cache',
})

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{
        persister: localStoragePersister,
        maxAge: 1000 * 60 * 60 * 24,
        dehydrateOptions: {
          shouldDehydrateQuery: (query) => {
            const key = query.queryKey[0] as string
            return [
              'experts', 'agencies', 'hirings', 'workspaces',
              'messages', 'reports', 'notes', 'assets',
              'notifications', 'service-categories',
            ].includes(key)
          },
        },
      }}
    >
      <ErrorBoundary>
        <App />
      </ErrorBoundary>
    </PersistQueryClientProvider>
  </StrictMode>,
)