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

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

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

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

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

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

// PM SCHEDULES
import PMScheduleList from "./pages/PmSchedule/list/List";
import PMScheduleForm from "./pages/PmSchedule/form/PmScheduleFormPage";
import PMScheduleEdit 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>

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

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

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

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

              {/* PM SCHEDULES */}
              <Route path="/pmschedules" element={<PMScheduleList />} />
              <Route path="/pmschedules/new" element={<PMScheduleForm />} />
              <Route path="/pmschedules/edit/:id" element={<PMScheduleEdit />} />

            </Routes>
          </div>
        </div>
      </div>
    </BrowserRouter>
  );
}