import { BrowserRouter, Routes, Route } from "react-router-dom";
import Sidebar from "./components/Sidebar";
import Header from "./components/Header";
import ProtectedRoute from "./components/ProtectedRoute";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Dashboard from "./pages/Dashboard";
import Carpage from "./pages/Carpage";
import Servicespage from "./pages/Servicespage";
import ServiceRecordpages from "./pages/ServiceRecordpages";
import Paymentpage from "./pages/Paymentpage";
import Reportpage from "./pages/Reportpage";

function App() {
  const token = localStorage.getItem("token");
  return (
    <BrowserRouter>
      <div style={{ display: "flex", minHeight: "100vh" }}>
        {token && <Sidebar />}
        
        <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
          {token && <Header />}
          
          <main style={{ padding: "20px" }}>
            <Routes>
              <Route path="/" element={<Login />} />
              <Route path="/register" element={<Register />} />

              <Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
              <Route path="/cars" element={<ProtectedRoute><Carpage /></ProtectedRoute>} />
              <Route path="/services" element={<ProtectedRoute><Servicespage /></ProtectedRoute>} />
              <Route path="/records" element={<ProtectedRoute><ServiceRecordpages /></ProtectedRoute>} />
              <Route path="/payments" element={<ProtectedRoute><Paymentpage /></ProtectedRoute>} />
              <Route path="/reports" element={<ProtectedRoute><Reportpage /></ProtectedRoute>} />
            </Routes>
          </main>
        </div>
      </div>
    </BrowserRouter>
  );
}

export default App;