import { Switch, Route } from "wouter";
import { queryClient } from "./lib/queryClient";
import { QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "@/components/ui/toaster";
import { TooltipProvider } from "@/components/ui/tooltip";
import { useAuth } from "@/hooks/useAuth";
import Landing from "@/pages/Landing";
import Home from "@/pages/Home";
import MediaOutlet from "@/pages/MediaOutlet";
import Article from "@/pages/Article";
import AdminDashboard from "@/pages/AdminDashboard";
import SuperAdminDashboard from "@/pages/SuperAdminDashboard";
import Auctions from "@/pages/Auctions";
import AuctionGuide from "@/pages/AuctionGuide";
import MediaOutletAuction from "@/pages/MediaOutletAuction";
import Report from "@/pages/Report";
import NotFound from "@/pages/not-found";

function Router() {
  const { isAuthenticated, user } = useAuth();

  return (
    <Switch>
      <Route path="/" component={isAuthenticated ? Home : Landing} />
      <Route path="/media/:slug/report" component={Report} />
      <Route path="/media/:slug/auction" component={MediaOutletAuction} />
      <Route path="/media/:slug" component={MediaOutlet} />
      <Route path="/articles/:slug" component={Article} />
      <Route path="/auctions" component={Auctions} />
      <Route path="/auction-guide" component={AuctionGuide} />
      
      {/* Admin routes - only when authenticated */}
      {isAuthenticated && (user?.role === 'admin' || user?.role === 'superadmin') && (
        <Route path="/admin" component={AdminDashboard} />
      )}
      {isAuthenticated && user?.role === 'superadmin' && (
        <Route path="/superadmin" component={SuperAdminDashboard} />
      )}
      
      <Route component={NotFound} />
    </Switch>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <TooltipProvider>
        <Toaster />
        <Router />
      </TooltipProvider>
    </QueryClientProvider>
  );
}

export default App;