import { lazy, Suspense, useEffect } from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { BrowserRouter, Routes, Route, Navigate, useParams, useLocation } from 'react-router-dom';
import Layout from '@/components/Layout';
import WhatsAppFAB from '@/components/WhatsAppFAB';
import MobileBookingBar from '@/components/MobileBookingBar';
import AdminGuard from '@/components/AdminGuard';

const HomePage = lazy(() => import('@/pages/HomePage'));
const SpacesPage = lazy(() => import('@/pages/SpacesPage'));
const AmenitiesPage = lazy(() => import('@/pages/AmenitiesPage'));
const PlansPage = lazy(() => import('@/pages/PlansPage'));
const AboutPage = lazy(() => import('@/pages/AboutPage'));
const ContactPage = lazy(() => import('@/pages/ContactPage'));
const InsightsPage = lazy(() => import('@/pages/BlogPage'));
const InsightsPostPage = lazy(() => import('@/pages/BlogPostPage'));
const NoticesPage = lazy(() => import('@/pages/NoticesPage'));
const PoliciesPage = lazy(() => import('@/pages/PoliciesPage'));
const NotFoundPage = lazy(() => import('@/pages/NotFoundPage'));
const TestPage = lazy(() => import('@/pages/TestPage'));
const AdminLoginPage = lazy(() => import('@/pages/admin/AdminLoginPage'));
const AdminLayout = lazy(() => import('@/pages/admin/AdminLayout'));
const AdminBlogPage = lazy(() => import('@/pages/admin/AdminBlogPage'));
const AdminNoticesPage = lazy(() => import('@/pages/admin/AdminNoticesPage'));
const AdminInquiriesPage = lazy(() => import('@/pages/admin/AdminInquiriesPage'));

const queryClient = new QueryClient({
  defaultOptions: {
    queries: { retry: 1, staleTime: 5 * 60 * 1000 },
  },
});

function BlogSlugRedirect() {
  const { slug } = useParams<{ slug: string }>();
  return <Navigate to={`/insights/${slug ?? ''}`} replace />;
}

function ScrollToTop() {
  const { pathname } = useLocation();
  useEffect(() => { window.scrollTo(0, 0); }, [pathname]);
  return null;
}

function PageLoader() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-background">
      <div className="w-6 h-6 border-2 border-brand-500 border-t-transparent rounded-full animate-spin" />
    </div>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <BrowserRouter>
        <Suspense fallback={<PageLoader />}>
          <ScrollToTop />
          <Routes>
            <Route path="/admin/login" element={<AdminLoginPage />} />
            <Route path="/admin" element={<AdminGuard><AdminLayout /></AdminGuard>}>
              <Route index element={<AdminBlogPage />} />
              <Route path="blog" element={<AdminBlogPage />} />
              <Route path="notices" element={<AdminNoticesPage />} />
              <Route path="inquiries" element={<AdminInquiriesPage />} />
            </Route>
            <Route path="/*" element={
              <Layout>
                <Routes>
                  <Route path="/" element={<HomePage />} />
                  <Route path="/spaces" element={<SpacesPage />} />
                  <Route path="/amenities" element={<AmenitiesPage />} />
                  <Route path="/plans" element={<PlansPage />} />
                  <Route path="/about" element={<AboutPage />} />
                  <Route path="/contact" element={<ContactPage />} />
                  <Route path="/insights" element={<InsightsPage />} />
                  <Route path="/insights/:slug" element={<InsightsPostPage />} />
                  <Route path="/blog" element={<Navigate to="/insights" replace />} />
                  <Route path="/blog/:slug" element={<BlogSlugRedirect />} />
                  <Route path="/notices" element={<NoticesPage />} />
                  <Route path="/policies" element={<PoliciesPage />} />
                  <Route path="/test" element={<TestPage />} />
                  <Route path="*" element={<NotFoundPage />} />
                </Routes>
              </Layout>
            } />
          </Routes>
        </Suspense>
        <WhatsAppFAB />
        <MobileBookingBar />
      </BrowserRouter>
    </QueryClientProvider>
  );
}

export default App;