import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";
import { Toaster } from "react-hot-toast";
import Header from "./components/Header";
import AccessibilityMenu from "./components/AccessibilityMenu";
import ProtectedRoute from "./components/auth/ProtectedRoute";
import Home from "./pages/Home";
import Login from "./pages/Login";
import LoginPaciente from "./pages/LoginPaciente";
import LoginSecretaria from "./pages/LoginSecretaria";
import LoginMedico from "./pages/LoginMedico";
import AgendamentoPaciente from "./pages/AgendamentoPaciente";
import AcompanhamentoPaciente from "./pages/AcompanhamentoPaciente";
import PainelMedico from "./pages/PainelMedico";
import PainelSecretaria from "./pages/PainelSecretaria";
import MensagensMedico from "./pages/MensagensMedico";
import MensagensPaciente from "./pages/MensagensPaciente";
import ProntuarioPaciente from "./pages/ProntuarioPaciente";
import TokenInspector from "./pages/TokenInspector";
import AdminDiagnostico from "./pages/AdminDiagnostico";
// import TesteCadastroSquad18 from "./pages/TesteCadastroSquad18"; // Arquivo removido
import PainelAdmin from "./pages/PainelAdmin";
import CentralAjudaRouter from "./pages/CentralAjudaRouter";
import PerfilMedico from "./pages/PerfilMedico";
import PerfilPaciente from "./pages/PerfilPaciente";
import ClearCache from "./pages/ClearCache";
import AuthCallback from "./pages/AuthCallback";
import ResetPassword from "./pages/ResetPassword";

function App() {
  return (
    <Router
      future={{
        v7_startTransition: true,
        v7_relativeSplatPath: true,
      }}
    >
      <div className="app-root min-h-screen bg-gray-50 dark:bg-slate-900 dark:bg-gradient-to-br dark:from-slate-900 dark:to-slate-800 transition-colors duration-300">
        <a
          href="#main-content"
          className="fixed -top-20 left-4 z-50 px-3 py-2 bg-blue-600 text-white rounded shadow transition-all focus:top-4 focus:outline-none focus-visual:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500"
        >
          Pular para o conteúdo
        </a>
        <Header />
        <main
          id="main-content"
          className="container mx-auto px-4 py-6 max-w-7xl"
        >
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/clear-cache" element={<ClearCache />} />
            <Route path="/auth/callback" element={<AuthCallback />} />
            <Route path="/reset-password" element={<ResetPassword />} />
            <Route path="/login" element={<Login />} />
            <Route path="/paciente" element={<LoginPaciente />} />
            <Route path="/login-secretaria" element={<LoginSecretaria />} />
            <Route path="/login-medico" element={<LoginMedico />} />
            <Route path="/dev/token" element={<TokenInspector />} />
            <Route path="/admin/diagnostico" element={<AdminDiagnostico />} />
            {/* <Route path="/teste-squad18" element={<TesteCadastroSquad18 />} /> */}
            <Route path="/ajuda" element={<CentralAjudaRouter />} />
            <Route element={<ProtectedRoute roles={["admin", "gestor"]} />}>
              <Route path="/admin" element={<PainelAdmin />} />
            </Route>
            <Route
              element={
                <ProtectedRoute
                  roles={["medico", "gestor", "secretaria", "admin", "paciente", "user"]}
                />
              }
            >
              <Route path="/mensagens" element={<MensagensMedico />} />
            </Route>
            <Route
              element={
                <ProtectedRoute
                  roles={["medico", "gestor", "secretaria", "admin"]}
                />
              }
            >
              <Route path="/painel-medico" element={<PainelMedico />} />
              <Route path="/perfil-medico" element={<PerfilMedico />} />
            </Route>
            <Route
              element={
                <ProtectedRoute roles={["secretaria", "gestor", "admin"]} />
              }
            >
              <Route path="/painel-secretaria" element={<PainelSecretaria />} />
              <Route path="/pacientes/:id" element={<ProntuarioPaciente />} />
            </Route>
            <Route
              element={
                <ProtectedRoute
                  roles={["paciente", "user", "admin", "gestor"]}
                />
              }
            >
              <Route
                path="/acompanhamento"
                element={<AcompanhamentoPaciente />}
              />
              <Route path="/agendamento" element={<AgendamentoPaciente />} />
              <Route path="/mensagens-paciente" element={<MensagensPaciente />} />
              <Route path="/perfil-paciente" element={<PerfilPaciente />} />
            </Route>
            <Route path="*" element={<Navigate to="/" replace />} />
          </Routes>
        </main>
        <Toaster position="top-right" />
        <AccessibilityMenu />
      </div>
    </Router>
  );
}

export default App;
