import { lazy, Suspense } from "react"
import { BrowserRouter, Routes, Route } from "react-router-dom"
import { SiteProvider } from "@/context/SiteContext"
import { AuthProvider, useAuth } from "@/context/AuthContext"
import { Toaster } from "@/components/ui/sonner"
import MainLayout from "@/layouts/MainLayout"
import LandingPage from "@/pages/LandingPage"
import AdminLogin from "@/pages/AdminLogin"

// Lazy-load admin routes — tidak perlu di-load visitor landing page
const AdminLayout = lazy(() => import("@/layouts/AdminLayout"))
const AdminDashboard = lazy(() => import("@/pages/AdminDashboard"))
const HeroForm = lazy(() => import("@/pages/HeroForm"))
const PackageManager = lazy(() => import("@/pages/PackageForm"))
const BenefitsForm = lazy(() => import("@/pages/BenefitsForm"))
const AboutForm = lazy(() => import("@/pages/AboutForm"))
const ContactForm = lazy(() => import("@/pages/ContactForm"))
const SocialForm = lazy(() => import("@/pages/SocialForm"))
const GalleryForm = lazy(() => import("@/pages/GalleryForm"))
const PromoForm = lazy(() => import("@/pages/PromoForm"))
const UserManager = lazy(() => import("@/pages/UserManager"))

function AdminFallback() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <div className="text-center">
        <div className="inline-block animate-spin rounded-full h-8 w-8 border-4 border-black border-t-yellow-300" />
        <p className="mt-4 font-bold text-gray-600">Memuat panel admin...</p>
      </div>
    </div>
  )
}

function AdminGate() {
  const { user, loading } = useAuth()
  if (loading) return <AdminFallback />
  if (!user) return <AdminLogin />
  return (
    <Suspense fallback={<AdminFallback />}>
      <AdminLayout />
    </Suspense>
  )
}

export default function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <SiteProvider>
          <Routes>
            <Route element={<MainLayout />}>
              <Route path="/" element={<LandingPage />} />
            </Route>
            <Route path="/admin" element={<AdminGate />}>
            <Route
              index
              element={
                <Suspense fallback={<AdminFallback />}>
                  <AdminDashboard />
                </Suspense>
              }
            />
            <Route
              path="hero"
              element={
                <Suspense fallback={<AdminFallback />}>
                  <HeroForm />
                </Suspense>
              }
            />
            <Route
              path="packages"
              element={
                <Suspense fallback={<AdminFallback />}>
                  <PackageManager />
                </Suspense>
              }
            />
            <Route
              path="benefits"
              element={
                <Suspense fallback={<AdminFallback />}>
                  <BenefitsForm />
                </Suspense>
              }
            />
            <Route
              path="about"
              element={
                <Suspense fallback={<AdminFallback />}>
                  <AboutForm />
                </Suspense>
              }
            />
            <Route
              path="contact"
              element={
                <Suspense fallback={<AdminFallback />}>
                  <ContactForm />
                </Suspense>
              }
            />
            <Route
              path="social"
              element={
                <Suspense fallback={<AdminFallback />}>
                  <SocialForm />
                </Suspense>
              }
            />
            <Route
              path="gallery"
              element={
                <Suspense fallback={<AdminFallback />}>
                  <GalleryForm />
                </Suspense>
              }
            />
            <Route
              path="promo"
              element={
                <Suspense fallback={<AdminFallback />}>
                  <PromoForm />
                </Suspense>
              }
            />
            <Route
              path="users"
              element={
                <Suspense fallback={<AdminFallback />}>
                  <UserManager />
                </Suspense>
              }
            />
          </Route>
          </Routes>
          <Toaster />
        </SiteProvider>
      </AuthProvider>
    </BrowserRouter>
  )
}