import { Route, Routes } from "react-router-dom";
import { Toaster } from "sonner";
import { Layout } from "@/components/Layout";
import { Dashboard } from "@/pages/Dashboard";
import { Claims } from "@/pages/Claims";
import { Remittances } from "@/pages/Remittances";
import { Providers } from "@/pages/Providers";
import { ActivityLog } from "@/pages/ActivityLog";
import { Upload } from "@/pages/Upload";

function NotFound() {
  return (
    <div className="min-h-[60vh] flex flex-col items-center justify-center text-center">
      <div className="display text-[80px] text-muted-foreground/40">404</div>
      <p className="text-muted-foreground">That page doesn't exist.</p>
    </div>
  );
}

export default function App() {
  return (
    <>
      <Routes>
        <Route element={<Layout />}>
          <Route index element={<Dashboard />} />
          <Route path="claims" element={<Claims />} />
          <Route path="remittances" element={<Remittances />} />
          <Route path="providers" element={<Providers />} />
          <Route path="activity" element={<ActivityLog />} />
          <Route path="upload" element={<Upload />} />
          <Route path="*" element={<NotFound />} />
        </Route>
      </Routes>
      <Toaster
        position="bottom-right"
        theme="dark"
        toastOptions={{
          style: {
            background: "hsl(var(--card))",
            border: "1px solid hsl(var(--border))",
            color: "hsl(var(--foreground))",
          },
        }}
      />
    </>
  );
}