import { Switch, Route, Router as WouterRouter } from "wouter";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "@/components/ui/toaster";
import { TooltipProvider } from "@/components/ui/tooltip";
import { LanguageProvider } from "./contexts/LanguageContext";
import { AppLayout } from "./components/layout/AppLayout";
import NotFound from "@/pages/not-found";

// Page imports
import Home from "./pages/home";
import RequestSupport from "./pages/request";
import Opportunities from "./pages/opportunities";
import Donate from "./pages/donate";
import Admin from "./pages/admin";
import Track from "./pages/track";
import ThankYou from "./pages/thank-you";
import WhatsappLog from "./pages/whatsapp-log";

const queryClient = new QueryClient();

function Router() {
  return (
    <AppLayout>
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/request" component={RequestSupport} />
        <Route path="/opportunities" component={Opportunities} />
        <Route path="/donate/:id" component={Donate} />
        <Route path="/admin" component={Admin} />
        <Route path="/track/:id" component={Track} />
        <Route path="/thank-you/:id" component={ThankYou} />
        <Route path="/whatsapp-log" component={WhatsappLog} />
        <Route component={NotFound} />
      </Switch>
    </AppLayout>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <LanguageProvider>
        <TooltipProvider>
          <WouterRouter base={import.meta.env.BASE_URL.replace(/\/$/, "")}>
            <Router />
          </WouterRouter>
          <Toaster />
        </TooltipProvider>
      </LanguageProvider>
    </QueryClientProvider>
  );
}

export default App;
