import {
  useNavigate,
  useLocation,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";
import { DashboardLayout, type SidebarItem } from "@edr/ui-common";

import BookingsPage from "./pages/bookings/BookingsPage";
import BookingDetailPage from "./pages/bookings/BookingDetailPage";
import CreateBookingPage from "./pages/bookings/CreateBookingPage";
import ConsignmentsPage from "./pages/consignments/ConsignmentsPage";
import ConsignmentDetailPage from "./pages/consignments/ConsignmentDetailPage";
import TrackingPage from "./pages/tracking/TrackingPage";
import BillingPage from "./pages/billing/BillingPage";
import TrainsPage from "./pages/trains/TrainsPage";
import DashboardPage from "./pages/dashboard/DashboardPage";

const sidebarItems: SidebarItem[] = [
  { label: "Dashboard", href: "/" },
  { label: "Bookings", href: "/bookings" },
  { label: "Consignments", href: "/consignments" },
  { label: "Tracking", href: "/tracking" },
  { label: "Trains", href: "/trains" },
  { label: "Billing", href: "/billing" },
];

const App = () => {
  const navigate = useNavigate();
  const location = useLocation();

  return (
    <DashboardLayout
      title="EDR Freight"
      sidebarItems={sidebarItems}
      activeHref={location.pathname}
      onNavigate={navigate}
    >
      <Routes>
        <Route path="/" element={<DashboardPage />} />
        <Route path="/bookings" element={<BookingsPage />} />
        <Route path="/bookings/new" element={<CreateBookingPage />} />
        <Route path="/bookings/:id" element={<BookingDetailPage />} />
        <Route path="/consignments" element={<ConsignmentsPage />} />
        <Route path="/consignments/:id" element={<ConsignmentDetailPage />} />
        <Route path="/tracking" element={<TrackingPage />} />
        <Route path="/trains" element={<TrainsPage />} />
        <Route path="/billing" element={<BillingPage />} />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </DashboardLayout>
  );
};

export default App;
