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, Button } from './components/ui';
import ErrorBoundary from './components/ErrorBoundary';
import { AuthProvider, useAuth } from './lib/auth';
import { QuickLinksProvider } from './lib/quicklinks';
import { PatientDrawerProvider } from './components/PatientDrawer';
import ChatNotifications from './lib/chat-notifications';
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 Servicios from './pages/Servicios';
import Paquetes from './pages/Paquetes';
import Medicos from './pages/Medicos';
import Monedero from './pages/Monedero';
import Pagos from './pages/Pagos';
import Ventas from './pages/Ventas';
import Tickets from './pages/Tickets';
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 Chat from './pages/Chat';
import MisVentas from './pages/MisVentas';
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>
);

// Pantalla cuando el servidor no responde al arrancar (red lenta o caída):
// en lugar de quedarse cargando para siempre, ofrece reintentar.
const BootErrorScreen: FC<{ onRetry: () => void }> = ({ onRetry }) => (
  <div className="min-h-screen flex items-center justify-center p-6 bg-theme-bg">
    <div className="max-w-md w-full space-y-4 rounded-2xl border border-theme-border bg-theme-surface p-8 shadow-soft text-center">
      <h1 className="font-heading text-xl text-theme-heading">No se pudo conectar</h1>
      <p className="text-sm text-theme-muted">
        El servidor no responde en este momento. Revisa tu conexión a internet e intenta de nuevo.
      </p>
      <Button onClick={onRetry}>Reintentar</Button>
    </div>
  </div>
);

const RequireAuth: FC<{ children: ReactNode; href: string }> = ({ children, href }) => {
  const { user, loading, bootError, retryBoot, canSee } = useAuth();
  if (loading) return <FullScreenLoader />;
  if (bootError) return <BootErrorScreen onRetry={retryBoot} />;
  if (!user) return <Navigate to="/login" replace />;
  // La ruta "/" se maneja en HomeRoute (calcula landing por rol) para evitar
  // el bucle de redirecciones cuando el rol no tiene '/' en la matriz.
  if (!canSee(href) && href !== '/') return <Navigate to="/" replace />;
  return <>{children}</>;
};

const LoginRoute: FC = () => {
  const { user, loading } = useAuth();
  if (loading) return <FullScreenLoader />;
  if (user) return <Navigate to={user.role === 'medico' ? '/agenda' : '/'} replace />;
  return <Login />;
};

// Pantalla inicial por rol: el médico aterriza directo en su Agenda.
// Si el rol no tiene acceso al Dashboard (matriz por rol), aterriza en la
// primera sección visible; si no tiene ninguna, muestra "Sin acceso" en
// lugar de redirigir a "/" en bucle (pantalla en blanco).
const LANDING_CANDIDATOS = [
  '/agenda', '/mis-ventas', '/pacientes', '/pos', '/visitas', '/consultas',
  '/medicos', '/servicios', '/paquetes', '/ventas', '/pagos', '/monedero',
  '/inventario', '/cortes', '/reportes', '/cumpleanos', '/wacrm/messages',
  '/wacrm/leads', '/configuracion',
];

const HomeRoute: FC = () => {
  const { user, canSee } = useAuth();
  if (user?.role === 'medico') return <Navigate to="/agenda" replace />;
  if (canSee('/')) return <Dashboard />;
  for (const href of LANDING_CANDIDATOS) {
    if (canSee(href)) return <Navigate to={href} replace />;
  }
  return (
    <div className="min-h-screen flex flex-col items-center justify-center gap-3">
      <p className="text-theme-heading font-semibold">Sin acceso a módulos</p>
      <p className="text-sm text-theme-muted">Tu usuario no tiene secciones habilitadas. Contacta al administrador.</p>
    </div>
  );
};

const App: FC = () => {
  return (
    <ErrorBoundary>
    <AuthProvider>
      <QuickLinksProvider>
        <Router>
        <ToastProvider />
        <PatientDrawerProvider>
        <ChatNotifications />
        <Routes>
          <Route path="/login" element={<LoginRoute />} />
          <Route path="/" element={<RequireAuth href="/"><HomeRoute /></RequireAuth>} />
          <Route path="/agenda" element={<RequireAuth href="/agenda"><Agenda /></RequireAuth>} />
          <Route path="/mis-ventas" element={<RequireAuth href="/mis-ventas"><MisVentas /></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={<Navigate to="/pacientes" replace />} />
          <Route path="/ultimas-visitas" element={<Navigate to="/pacientes" replace />} />
          <Route path="/servicios" element={<RequireAuth href="/servicios"><Servicios /></RequireAuth>} />
          <Route path="/medicos" element={<RequireAuth href="/medicos"><Medicos /></RequireAuth>} />
          <Route path="/paquetes" element={<RequireAuth href="/paquetes"><Paquetes /></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="/tickets" element={<RequireAuth href="/tickets"><Tickets /></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="/chat" element={<RequireAuth href="/chat"><Chat /></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>
        </PatientDrawerProvider>
        </Router>
      </QuickLinksProvider>
    </AuthProvider>
    </ErrorBoundary>
  );
};

export default App;