import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { HashRouter } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';
import { Toaster } from './components/ui/Toaster';
import { useThemeStore } from './store/themeStore';
import './index.css';

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

// Apply the persisted theme before first render.
const stored = localStorage.getItem('ph-theme');
if (stored) {
  const parsed = JSON.parse(stored) as { state?: { theme?: 'dark' | 'light' } };
  useThemeStore.setState({ theme: parsed.state?.theme ?? 'dark' });
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <HashRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
        <App />
        <Toaster />
      </HashRouter>
    </QueryClientProvider>
  </StrictMode>,
);