import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';
import ProtectedRoute from './components/ProtectedRoute';
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';
import DataSync from './pages/DataSync';
import Trends from './pages/Trends';
import Recommendations from './pages/Recommendations';
import Settings from './pages/Settings';
import Sleep from './pages/Sleep';
import Achievements from './pages/Achievements';
import Daily from './pages/Daily';
import Health from './pages/Health';
import { FEATURES } from './features';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />

        <Route
          path="*"
          element={
            <ProtectedRoute>
              <Layout>
                <Routes>
                  <Route path="/" element={<Dashboard />} />
                  <Route path="/sync" element={<DataSync />} />
                  <Route path="/health" element={<Health />} />
                  <Route path="/daily" element={<Daily />} />
                  <Route path="/trends" element={<Trends />} />
                  <Route path="/sleep" element={<Sleep />} />
                  <Route path="/achievements" element={<Achievements />} />
                  {FEATURES.ai && (
                    <Route path="/recommendations" element={<Recommendations />} />
                  )}
                  <Route path="/settings" element={<Settings />} />
                </Routes>
              </Layout>
            </ProtectedRoute>
          }
        />
      </Routes>
    </Router>
  );
}

export default App;