import React from 'react';
import { HashRouter, Routes, Route, Navigate } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Toaster } from 'sonner';

// Theme
import { ThemeProvider } from './contexts/ThemeContext';
import { BaseLayout } from './layouts/BaseLayout';

// Pages
import Shop from './pages/Shop';
import Product from './pages/Product';
import Cart from './pages/Cart';
import Checkout from './pages/Checkout';
import ThankYou from './pages/ThankYou';
import Account from './pages/Account';
import Wishlist from './pages/Wishlist';

// Create QueryClient instance
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // 5 minutes
      refetchOnWindowFocus: false,
      retry: 1,
    },
  },
});

// Get theme config from window (injected by PHP)
const getThemeConfig = () => {
  const config = (window as any).woonoowCustomer?.theme;
  
  // Default config if not provided
  return config || {
    mode: 'full',
    layout: 'modern',
    colors: {
      primary: '#3B82F6',
      secondary: '#8B5CF6',
      accent: '#10B981',
    },
    typography: {
      preset: 'professional',
    },
  };
};

// Get appearance settings from window
const getAppearanceSettings = () => {
  return (window as any).woonoowCustomer?.appearanceSettings || {};
};

function App() {
  const themeConfig = getThemeConfig();
  const appearanceSettings = getAppearanceSettings();
  const toastPosition = (appearanceSettings?.general?.toast_position || 'top-right') as any;
  
  return (
    <QueryClientProvider client={queryClient}>
      <ThemeProvider config={themeConfig}>
        <HashRouter>
          <BaseLayout>
            <Routes>
              {/* Shop Routes */}
              <Route path="/" element={<Shop />} />
              <Route path="/shop" element={<Shop />} />
              <Route path="/product/:slug" element={<Product />} />
              
              {/* Cart & Checkout */}
              <Route path="/cart" element={<Cart />} />
              <Route path="/checkout" element={<Checkout />} />
              <Route path="/order-received/:orderId" element={<ThankYou />} />
              
              {/* Wishlist - Public route accessible to guests */}
              <Route path="/wishlist" element={<Wishlist />} />
              
              {/* My Account */}
              <Route path="/my-account/*" element={<Account />} />
              
              {/* Fallback */}
              <Route path="*" element={<Navigate to="/shop" replace />} />
            </Routes>
          </BaseLayout>
        </HashRouter>
        
        {/* Toast notifications - position from settings */}
        <Toaster position={toastPosition} richColors />
      </ThemeProvider>
    </QueryClientProvider>
  );
}

export default App;