import { createBrowserRouter } from "react-router-dom";
import { lazy, Suspense, type ComponentType } from "react";
import AppLayout from "@/components/layout/AppLayout";
import AuthLayout from "@/components/layout/AuthLayout";
import ProtectedRoute from "./ProtectedRoute";
import PublicRoute from "./PublicRoute";

/** lazy import 래퍼 */
function lazyPage(importFn: () => Promise<{ default: ComponentType }>) {
  const LazyComponent = lazy(importFn);
  return (
    <Suspense fallback={<div className="flex h-full items-center justify-center p-6">로딩 중...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

/* Auth 페이지 */
const LoginPage = () => lazyPage(() => import("@/features/auth/pages/LoginPage"));
const SignupPage = () => lazyPage(() => import("@/features/auth/pages/SignupPage"));
const VerifyEmailPage = () => lazyPage(() => import("@/features/auth/pages/VerifyEmailPage"));

/* Dashboard 페이지 */
const HomePage = () => lazyPage(() => import("@/features/dashboard/pages/HomePage"));
const DashboardPage = () => lazyPage(() => import("@/features/dashboard/pages/DashboardPage"));

/* Service 페이지 */
const ServiceListPage = () => lazyPage(() => import("@/features/service/pages/ServiceListPage"));
const ServiceRegisterPage = () => lazyPage(() => import("@/features/service/pages/ServiceRegisterPage"));
const ServiceDetailPage = () => lazyPage(() => import("@/features/service/pages/ServiceDetailPage"));
const ServiceEditPage = () => lazyPage(() => import("@/features/service/pages/ServiceEditPage"));

/* Message 페이지 */
const MessageListPage = () => lazyPage(() => import("@/features/message/pages/MessageListPage"));
const MessageRegisterPage = () => lazyPage(() => import("@/features/message/pages/MessageRegisterPage"));

/* Statistics 페이지 */
const StatisticsPage = () => lazyPage(() => import("@/features/statistics/pages/StatisticsPage"));
const StatisticsHistoryPage = () => lazyPage(() => import("@/features/statistics/pages/StatisticsHistoryPage"));

/* Device 페이지 */
const DeviceListPage = () => lazyPage(() => import("@/features/device/pages/DeviceListPage"));

/* Tag 페이지 */
const TagManagePage = () => lazyPage(() => import("@/features/tag/pages/TagManagePage"));

/* Settings 페이지 */
const MyPage = () => lazyPage(() => import("@/features/settings/pages/MyPage"));
const ProfileEditPage = () => lazyPage(() => import("@/features/settings/pages/ProfileEditPage"));
const NotificationsPage = () => lazyPage(() => import("@/features/settings/pages/NotificationsPage"));

export const router = createBrowserRouter([
  {
    /* 공개 라우트 (인증 불필요) */
    element: <PublicRoute />,
    children: [
      {
        element: <AuthLayout />,
        children: [
          { path: "/login", element: <LoginPage /> },
          { path: "/signup", element: <SignupPage /> },
          { path: "/verify-email", element: <VerifyEmailPage /> },
        ],
      },
    ],
  },
  {
    /* 보호된 라우트 (인증 필요) */
    element: <ProtectedRoute />,
    children: [
      {
        element: <AppLayout />,
        children: [
          { path: "/", element: <HomePage /> },
          { path: "/dashboard", element: <DashboardPage /> },
          { path: "/services", element: <ServiceListPage /> },
          { path: "/services/register", element: <ServiceRegisterPage /> },
          { path: "/services/:id", element: <ServiceDetailPage /> },
          { path: "/services/:id/edit", element: <ServiceEditPage /> },
          { path: "/messages", element: <MessageListPage /> },
          { path: "/messages/register", element: <MessageRegisterPage /> },
          { path: "/statistics", element: <StatisticsPage /> },
          { path: "/statistics/history", element: <StatisticsHistoryPage /> },
          { path: "/devices", element: <DeviceListPage /> },
          { path: "/tags", element: <TagManagePage /> },
          { path: "/settings", element: <MyPage /> },
          { path: "/settings/profile", element: <ProfileEditPage /> },
          { path: "/settings/notifications", element: <NotificationsPage /> },
        ],
      },
    ],
  },
]);