import { AppShell } from "@mantine/core";
import { Routes, Route, Navigate } from "react-router-dom";
import Sidebar from "./components/Sidebar";
import HeaderBar from "./components/HeaderBar";
import Dashboard from "./pages/Dashboard";
import NodePage from "./pages/NodePage";
import Metrics from "./pages/Metrics";
import Logs from "./pages/Logs";
import Alerts from "./pages/Alerts";

export default function App() {
  return (
    <AppShell
      padding="md"
      header={{ height: 60 }}
      navbar={{ width: 240, breakpoint: "sm" }}
    >
      <AppShell.Header>
        <HeaderBar />
      </AppShell.Header>

      <AppShell.Navbar>
        <Sidebar />
      </AppShell.Navbar>

      <AppShell.Main>
        <Routes>
          <Route path="/" element={<Navigate to="/dashboard" replace />} />

          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/nodeInfo" element={<NodePage />} />
          <Route path="/metrics" element={<Metrics />} />
          <Route path="/logs" element={<Logs />} />
          <Route path="/alerts" element={<Alerts />} />
          <Route path="*" element={<div>404 Not Found</div>} />
        </Routes>
      </AppShell.Main>
    </AppShell>
  );
}
