import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom';
import './styles/fonts.css';
import './styles/tokens.css';
import './styles/app.css';
import { AuthProvider, RequireAuth } from './components/Auth';
import { ToastProvider } from './components/Toasts';
import { Layout } from './components/Layout';
import { Login } from './pages/Login';
import { Registro } from './pages/Registro';
import { EditorPage } from './editor/EditorPage';

const router = createBrowserRouter([
  { path: '/login', element: <Login /> },
  {
    element: <RequireAuth><Layout /></RequireAuth>,
    children: [
      { index: true, element: <Navigate to="/registro" replace /> },
      { path: 'registro', element: <Registro /> },
      { path: 'nueva', element: <EditorPage /> },
      { path: 'cotizacion/:id', element: <EditorPage /> },
      { path: '*', element: <Navigate to="/registro" replace /> },
    ],
  },
]);

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ToastProvider>
      <AuthProvider>
        <RouterProvider router={router} />
      </AuthProvider>
    </ToastProvider>
  </StrictMode>,
);