import { lazy, Suspense } from 'react';
import { Routes, Route, Navigate } from 'react-router';
import './App.css';
import ProtectedRoute from './components/ProtectedRoute';

const NotePage       = lazy(() => import('./pages/note-page'));
const SignIn         = lazy(() => import('./pages/sign-in'));
const Register       = lazy(() => import('./components/register.component'));
const Profile        = lazy(() => import('./components/profile.component'));
const BoardUser      = lazy(() => import('./components/board-user.component'));
const BoardModerator = lazy(() => import('./components/board-moderator.component'));
const BoardAdmin     = lazy(() => import('./components/board-admin.component'));

export default function App() {
  return (
    <Suspense fallback={<div style={{ padding: 24 }}>Loading…</div>}>
      <Routes>
        {/* Public routes */}
        <Route path="/login"    element={<SignIn />} />
        <Route path="/register" element={<Register />} />

        {/* Protected routes */}
        <Route element={<ProtectedRoute />}>
          <Route path="/"        element={<Navigate to="/home" replace />} />
          <Route path="/home"    element={<NotePage />} />
          <Route path="/profile" element={<Profile />} />
          <Route path="/user"    element={<BoardUser />} />
          <Route path="/mod"     element={<BoardModerator />} />
          <Route path="/admin"   element={<BoardAdmin />} />
        </Route>

        {/* Fallback */}
        <Route path="*" element={<Navigate to="/login" replace />} />
      </Routes>
    </Suspense>
  );
}