import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { isLoggedIn } from './api/client';
import Sidebar from './components/Sidebar';
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';
import MqttBrokers from './pages/MqttBrokers';
import MqttTopics from './pages/MqttTopics';
import PgSources from './pages/PgSources';
import Datapoints from './pages/Datapoints';
import Displays from './pages/Displays';
import Layouts from './pages/Layouts';

function ProtectedRoute({ children }: { children: React.ReactNode }) {
  if (!isLoggedIn()) return <Navigate to="/login" replace />;
  return (
    <div className="flex min-h-screen bg-gray-100">
      <Sidebar />
      <main className="ml-56 flex-1 p-6 overflow-auto">
        {children}
      </main>
    </div>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
        <Route path="/mqtt/brokers" element={<ProtectedRoute><MqttBrokers /></ProtectedRoute>} />
        <Route path="/mqtt/topics/:brokerId" element={<ProtectedRoute><MqttTopics /></ProtectedRoute>} />
        <Route path="/pg/sources" element={<ProtectedRoute><PgSources /></ProtectedRoute>} />
        <Route path="/datapoints" element={<ProtectedRoute><Datapoints /></ProtectedRoute>} />
        <Route path="/displays" element={<ProtectedRoute><Displays /></ProtectedRoute>} />
        <Route path="/layouts" element={<ProtectedRoute><Layouts /></ProtectedRoute>} />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </BrowserRouter>
  );
}