import React, { useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Sidebar from "./components/Sidebar";
import Topbar from "./components/Topbar";
import Dashboard from "./pages/Dashboard";

// CONTACTS
import ContactsList from "./pages/contacts/list/List";
import ContactFormPage from "./pages/contacts/form/ContactFormPage";

// ACCOUNTS
import AccountList from "./pages/accounts/list/List";
import AccountFormPage from "./pages/accounts/form/AccountFormPage";

// EMPLOYEES
import EmployeeList from "./pages/employees/list/List";
import EmployeeFormPage from "./pages/employees/form/EmployeeFormPage";

// LOCATIONS
import LocationsList from "./pages/locations/list/List";
import LocationFormPage from "./pages/locations/form/LocationFormPage";

// WORK ORDERS
import WorkOrdersList from "./pages/workorders/list/List";
import WorkOrderFormPage from "./pages/workorders/form/WorkOrderFormPage";

// FOLLOW UPS
import FollowUpList from "./pages/followup/list/List";
import FollowUpFormPage from "./pages/followup/form/FollowUpFormPage";

// PM SCHEDULES
import PMScheduleList from "./pages/PmSchedule/list/List";
import PMScheduleFormPage from "./pages/PmSchedule/form/PmScheduleFormPage";

export default function App() {
  const [navCollapsed, setNavCollapsed] = useState(false);

  return (
    <BrowserRouter>
      <div className={`app ${navCollapsed ? "nav-collapsed" : ""}`}>
        <Sidebar />

        <div className="mainArea">
          <Topbar onToggleNav={() => setNavCollapsed(v => !v)} />

          <div className="contentWrapper">
            <Routes>
              <Route path="/" element={<Dashboard />} />
              <Route path="/dashboard" element={<Dashboard />} />

              {/* CONTACTS */}
              <Route path="/contacts" element={<ContactsList />} />
              <Route path="/contacts/new" element={<ContactFormPage />} />
              <Route path="/contacts/edit/:id" element={<ContactFormPage />} />

              {/* ACCOUNTS */}
              <Route path="/accounts" element={<AccountList />} />
              <Route path="/accounts/new" element={<AccountFormPage />} />
              <Route path="/accounts/edit/:id" element={<AccountFormPage />} />

              {/* EMPLOYEES */}
              <Route path="/employees" element={<EmployeeList />} />
              <Route path="/employees/new" element={<EmployeeFormPage />} />
              <Route path="/employees/edit/:id" element={<EmployeeFormPage />} />

              {/* LOCATIONS */}
              <Route path="/locations" element={<LocationsList />} />
              <Route path="/locations/new" element={<LocationFormPage />} />
              <Route path="/locations/edit/:id" element={<LocationFormPage />} />

              {/* WORK ORDERS */}
              <Route path="/workorders" element={<WorkOrdersList />} />
              <Route path="/workorders/new" element={<WorkOrderFormPage />} />
              <Route path="/workorders/edit/:id" element={<WorkOrderFormPage />} />

              {/* FOLLOW UPS */}
              <Route path="/followups" element={<FollowUpList />} />
              <Route path="/followups/new" element={<FollowUpFormPage />} />
              <Route path="/followups/edit/:id" element={<FollowUpFormPage />} />

              {/* PM SCHEDULES */}
              <Route path="/pmschedules" element={<PMScheduleList />} />
              <Route path="/pmschedules/new" element={<PMScheduleFormPage />} />
              <Route path="/pmschedules/edit/:id" element={<PMScheduleFormPage />} />
            </Routes>
          </div>
        </div>
      </div>
    </BrowserRouter>
  );
}