import { createBrowserRouter, createRoutesFromElements, RouterProvider, Route } from 'react-router-dom';
import { AuthProvider } from '../context/auth-context.jsx';
import { UiProvider } from '../context/ui-context.jsx';
import { BrandingProvider } from '../context/branding-context.jsx';
import { ContentDialogHost } from '../components/ContentDialog.jsx';
import { ToastHost } from '../components/ToastHost.jsx';
import { ErrorBoundary } from '../components/ErrorBoundary.jsx';
import { ProtectedRoute, ModuleRoute } from './ProtectedRoute.jsx';
import AppShell from './AppShell.jsx';
import LoginPage from '../pages/Login/LoginPage.jsx';
import RegisterPage from '../pages/Login/RegisterPage.jsx';
import VerifyEmailPage from '../pages/Login/VerifyEmailPage.jsx';
import ForgotPasswordPage from '../pages/Login/ForgotPasswordPage.jsx';
import ResetPasswordPage from '../pages/Login/ResetPasswordPage.jsx';
import AcceptInvitePage from '../pages/Login/AcceptInvitePage.jsx';
import DashboardPage from '../pages/Dashboard/DashboardPage.jsx';
import OrganizacionPage from '../pages/Organizacion/OrganizacionPage.jsx';
import ProyectosPage from '../pages/Proyectos/ProyectosPage.jsx';
import ProyectoDetallePage from '../pages/Proyectos/ProyectoDetallePage.jsx';
import ConfiguracionPage from '../pages/Configuracion/ConfiguracionPage.jsx';
import RecurringTasksPage from '../pages/RecurringTasks/RecurringTasksPage.jsx';
import NotasPage from '../pages/Notas/NotasPage.jsx';
import ContrasenasPage from '../pages/Contrasenas/ContrasenasPage.jsx';
import EquiposPage from '../pages/Equipos/EquiposPage.jsx';
import ResetVaultPinPage from '../pages/Login/ResetVaultPinPage.jsx';

// Router de datos (createBrowserRouter): necesario para useBlocker, que avisa al salir de una
// seccion con cambios sin guardar (ver components/NavigationGuard.jsx). Mismas rutas de antes.
const router = createBrowserRouter(createRoutesFromElements(
  <>
    <Route path="/login" element={<LoginPage />} />
    <Route path="/registro" element={<RegisterPage />} />
    <Route path="/verificar-correo" element={<VerifyEmailPage />} />
    <Route path="/olvide-clave" element={<ForgotPasswordPage />} />
    <Route path="/restablecer-clave" element={<ResetPasswordPage />} />
    <Route path="/restablecer-pin" element={<ResetVaultPinPage />} />
    <Route path="/aceptar-invitacion" element={<AcceptInvitePage />} />
    <Route path="/" element={<ProtectedRoute><AppShell /></ProtectedRoute>}>
      <Route index element={<DashboardPage />} />
      <Route path="proyectos" element={<ModuleRoute module="projects"><ProyectosPage /></ModuleRoute>} />
      <Route path="proyectos/:id" element={<ModuleRoute module="projects"><ProyectoDetallePage /></ModuleRoute>} />
      <Route path="tareas-recurrentes" element={<ModuleRoute module="recurring_tasks"><RecurringTasksPage /></ModuleRoute>} />
      <Route path="notas" element={<ModuleRoute module="notes"><NotasPage /></ModuleRoute>} />
      <Route path="contrasenas" element={<ModuleRoute module="vault"><ContrasenasPage /></ModuleRoute>} />
      <Route path="equipos" element={<ModuleRoute module="devices"><EquiposPage /></ModuleRoute>} />
      <Route path="organizacion" element={<ModuleRoute module="organization"><OrganizacionPage /></ModuleRoute>} />
      <Route path="configuracion" element={<ConfiguracionPage />} />
    </Route>
  </>
));

export default function App() {
  return (
    <ErrorBoundary>
      <BrandingProvider>
        <UiProvider>
          <AuthProvider>
            <RouterProvider router={router} />
            <ContentDialogHost />
            <ToastHost />
          </AuthProvider>
        </UiProvider>
      </BrandingProvider>
    </ErrorBoundary>
  );
}