import { Routes, Route, Navigate } from 'react-router-dom'
import Login from './pages/Login.jsx'
import Overview from './pages/Overview.jsx'
import Threats from './pages/Threats.jsx'
import ModelPerformance from './pages/ModelPerformance.jsx'
import Navbar from './components/Navbar.jsx'
import ProtectedRoute from './components/ProtectedRoute.jsx'

function Layout({ children }) {
  return (
    <div className="app-shell">
      <Navbar />
      <div className="app-content">{children}</div>
    </div>
  )
}

export default function App() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/overview" element={
        <ProtectedRoute><Layout><Overview /></Layout></ProtectedRoute>
      } />
      <Route path="/threats" element={
        <ProtectedRoute><Layout><Threats /></Layout></ProtectedRoute>
      } />
      <Route path="/model" element={
        <ProtectedRoute><Layout><ModelPerformance /></Layout></ProtectedRoute>
      } />
      <Route path="*" element={<Navigate to="/overview" replace />} />
    </Routes>
  )
}
