import { Routes, Route } from "react-router-dom";
import MainLayout from "@layouts/MainLayout";
import HomePage from "@pages/HomePage";
import DatabasePage from "@pages/DatabasePage";
import WorshipListsPage from "@pages/WorshipListsPage";
import SongViewPage from "@pages/SongViewPage";
import SongEditorPage from "@pages/SongEditorPage";
import ProfilesPage from "@pages/ProfilesPage";
import SettingsPage from "@pages/SettingsPage";
import AdminPage from "@pages/AdminPage";
import LoginPage from "@pages/LoginPage";
import ProtectedRoute from "@components/ProtectedRoute";
import { AuthProvider } from "@context/AuthContext";
import { ThemeProvider } from "@context/ThemeContext";

function App() {
  return (
    <AuthProvider>
      <ThemeProvider>
        <Routes>
          <Route path="/login" element={<LoginPage />} />
          <Route
            path="/"
            element={
              <ProtectedRoute>
                <MainLayout />
              </ProtectedRoute>
            }
          >
            <Route index element={<HomePage />} />
            <Route path="database" element={<DatabasePage />} />
            <Route path="worship-lists" element={<WorshipListsPage />} />
            <Route
              path="worship-lists/:listId"
              element={<WorshipListsPage />}
            />
            <Route path="song/new" element={<SongEditorPage />} />
            <Route path="song/edit/:id" element={<SongEditorPage />} />
            <Route path="song/:songId" element={<SongViewPage />} />
            <Route path="profiles" element={<ProfilesPage />} />
            <Route path="settings" element={<SettingsPage />} />
            <Route path="admin" element={<AdminPage />} />
          </Route>
        </Routes>
      </ThemeProvider>
    </AuthProvider>
  );
}

export default App;
