SKEEN-Proyecto/frontend/src/App.tsx

import type { FC, ReactNode } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { ToastProvider } from './components/ui';
import { AuthProvider, useAuth } from './lib/auth';
import { QuickLinksProvider } from './lib/quicklinks';
import Dashboard from './pages/Dashboard';
import Agenda from './pages/Agenda';
import Pacientes from './pages/Pacientes';
import Pos from './pages/Pos';
import Visitas from './pages/Visitas';
import Consultas from './pages/Consultas';
import UltimasVisitas from './pages/UltimasVisitas';
import Servicios from './pages/Servicios';
import Medicos from './pages/Medicos';
import Monedero from './pages/Monedero';
import Pagos from './pages/Pagos';
import Ventas from './pages/Ventas';
import Cortes from './pages/Cortes';
import Reportes from './pages/Reportes';
import Configuracion from './pages/Configuracion';
import Cumpleanos from './pages/Cumpleanos';
import Inventario from './pages/Inventario';
import WacrmMessages from './pages/WacrmMessages';
import WacrmLeads from './pages/WacrmLeads';
import Login from './pages/Login';
import './App.css';

const FullScreenLoader: FC = () => (
  <div className="min-h-screen bg-[#f8f6f4] flex items-center justify-center">
    <div className="w-8 h-8 border-2 border-[#E5E0DC] border-t-[#1A1A1A] rounded-full animate-spin" />
  </div>
);

const RequireAuth: FC<{ children: ReactNode; href: string }> = ({ children, href }) => {
  const { user, loading, canSee } = useAuth();
  if (loading) return <FullScreenLoader />;
  if (!user) return <Navigate to="/login" replace />;
  if (!canSee(href)) return <Navigate to="/" replace />;
  return <>{children}</>;
};

const LoginRoute: FC = () => {
  const { user, loading } = useAuth();
  if (loading) return <FullScreenLoader />;
  if (user) return <Navigate to="/" replace />;
  return <Login />;
};

const App: FC = () => {
  return (
    <AuthProvider>
      <QuickLinksProvider>
        <Router>
        <ToastProvider />
        <Routes>
          <Route path="/login" element={<LoginRoute />} />
          <Route path="/" element={<RequireAuth href="/"><Dashboard /></RequireAuth>} />
          <Route path="/agenda" element={<RequireAuth href="/agenda"><Agenda /></RequireAuth>} />
          <Route path="/pacientes" element={<RequireAuth href="/pacientes"><Pacientes /></RequireAuth>} />
          <Route path="/pos" element={<RequireAuth href="/pos"><Pos /></RequireAuth>} />
          <Route path="/visitas" element={<RequireAuth href="/visitas"><Visitas /></RequireAuth>} />
          <Route path="/consultas" element={<RequireAuth href="/consultas"><Consultas /></RequireAuth>} />
          <Route path="/expedientes" element={<RequireAuth href="/expedientes"><UltimasVisitas /></RequireAuth>} />
          <Route path="/ultimas-visitas" element={<Navigate to="/expedientes" replace />} />
          <Route path="/servicios" element={<RequireAuth href="/servicios"><Servicios /></RequireAuth>} />
          <Route path="/medicos" element={<RequireAuth href="/medicos"><Medicos /></RequireAuth>} />
          <Route path="/productos" element={<Navigate to="/inventario" replace />} />
          <Route path="/monedero" element={<RequireAuth href="/monedero"><Monedero /></RequireAuth>} />
          <Route path="/pagos" element={<RequireAuth href="/pagos"><Pagos /></RequireAuth>} />
          <Route path="/ventas" element={<RequireAuth href="/ventas"><Ventas /></RequireAuth>} />
          <Route path="/cortes" element={<RequireAuth href="/cortes"><Cortes /></RequireAuth>} />
          <Route path="/reportes" element={<RequireAuth href="/reportes"><Reportes /></RequireAuth>} />
          <Route path="/configuracion" element={<RequireAuth href="/configuracion"><Configuracion /></RequireAuth>} />
          <Route path="/usuarios" element={<Navigate to="/configuracion?tab=usuarios" replace />} />
          <Route path="/cumpleanos" element={<RequireAuth href="/cumpleanos"><Cumpleanos /></RequireAuth>} />
          <Route path="/inventario" element={<RequireAuth href="/inventario"><Inventario /></RequireAuth>} />
          <Route path="/wacrm/messages" element={<RequireAuth href="/wacrm/messages"><WacrmMessages /></RequireAuth>} />
          <Route path="/wacrm/leads" element={<RequireAuth href="/wacrm/leads"><WacrmLeads /></RequireAuth>} />
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
        </Router>
      </QuickLinksProvider>
    </AuthProvider>
  );
};

export default App;