import { Switch, Route } from "wouter";
import { QueryClientProvider } from "@tanstack/react-query";
import { queryClient } from "./lib/queryClient";
import { Toaster } from "./components/ui/toaster";
import { CartProvider } from "./hooks/use-cart";
import Header from "./components/layout/Header";
import Footer from "./components/layout/Footer";
import ShopPage from "./pages/shop";
import ProductPage from "./pages/product";
import CartPage from "./pages/cart";
import CheckoutPage from "./pages/checkout";
import OrderConfirmationPage from "./pages/order-confirmation";
import AccountPage from "./pages/account";
import AdminDashboard from "./pages/admin/dashboard";
import AdminProducts from "./pages/admin/products";
import AdminOrders from "./pages/admin/orders";
import AdminCustomers from "./pages/admin/customers";
import AdminDiscounts from "./pages/admin/discounts";
import AdminLogin from "./pages/admin/login";
import NotFound from "./pages/not-found";

function StoreFront() {
  return (
    <div className="min-h-screen flex flex-col bg-background">
      <Header />
      <main className="flex-1">
        <Switch>
          <Route path="/" component={ShopPage} />
          <Route path="/products/:handle" component={ProductPage} />
          <Route path="/cart" component={CartPage} />
          <Route path="/checkout" component={CheckoutPage} />
          <Route path="/order-confirmation" component={OrderConfirmationPage} />
          <Route path="/account" component={AccountPage} />
          <Route path="/account/verify" component={AccountPage} />
          <Route component={NotFound} />
        </Switch>
      </main>
      <Footer />
    </div>
  );
}

function AdminLayout() {
  return (
    <div className="min-h-screen bg-muted/20">
      <Switch>
        <Route path="/admin/login" component={AdminLogin} />
        <Route path="/admin" component={AdminDashboard} />
        <Route path="/admin/products" component={AdminProducts} />
        <Route path="/admin/orders" component={AdminOrders} />
        <Route path="/admin/customers" component={AdminCustomers} />
        <Route path="/admin/discounts" component={AdminDiscounts} />
        <Route component={NotFound} />
      </Switch>
    </div>
  );
}

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <CartProvider>
        <Switch>
          <Route path="/admin{/*}" component={AdminLayout} />
          <Route component={StoreFront} />
        </Switch>
        <Toaster />
      </CartProvider>
    </QueryClientProvider>
  );
}