import React from 'react';
import { createHashRouter, RouterProvider, createRoutesFromElements, Route } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Toaster } from 'sonner';
import { useTheme } from '@/components/ThemeProvider';
import { initializeWindowAPI } from '@/lib/windowAPI';
import { Login } from './routes/Login';
import { AuthWrapper } from './components/layout/AuthWrapper';

function ToasterWithTheme() {
  const { actualTheme } = useTheme();
  return (
    <Toaster
      richColors
      theme={actualTheme as 'light' | 'dark' | 'system'}
      position="bottom-right"
      closeButton
      visibleToasts={3}
      duration={4000}
      offset="20px"
    />
  );
}

const qc = new QueryClient();

const router = createHashRouter(
  createRoutesFromElements(
    <>
      {window.WNW_CONFIG?.standaloneMode && (
        <Route path="/login" element={<Login />} />
      )}
      <Route path="/*" element={<AuthWrapper />} />
    </>
  )
);

export default function App() {
  // Initialize Window API for addon developers
  React.useEffect(() => {
    initializeWindowAPI();
  }, []);

  return (
    <QueryClientProvider client={qc}>
      <RouterProvider router={router} />
      <ToasterWithTheme />
    </QueryClientProvider>
  );
}