import type { ComponentType, ReactElement } from "react";
import { createBrowserRouter } from "react-router-dom";
import { ProtectedRoute } from "./app/components/ProtectedRoute";
import { LoginPage } from "./app/components/LoginPage";
import { AppShell } from "./app/layouts/AppShell";
import { HomePage } from "./app/components/HomePage";
import { ProfilePage } from "./app/components/ProfilePage";
import { EditProfilePage } from "./app/components/EditProfilePage";
import { MagicBagPage } from "./app/components/MagicBagPage";
import { MessagesPage } from "./app/components/MessagesPage";
import { PublicChatPage } from "./app/components/PublicChatPage";
import { ProtectedFeedPage } from "./app/components/ProtectedFeedPage";
import { ChallengeSelectionPage } from "./app/components/ChallengeSelectionPage";
import { ChatbotPage } from "./app/components/ChatbotPage";
import { SubmitChallengePage } from "./app/components/SubmitChallengePage";

function protectedElement(element: ReactElement) {
  return <ProtectedRoute>{element}</ProtectedRoute>;
}

function protectedPage(Component: ComponentType) {
  return protectedElement(<Component />);
}

export const router = createBrowserRouter([
  {
    path: "/login",
    element: <LoginPage />,
  },
  {
    path: "/",
    element: protectedElement(<AppShell />),
    handle: {
      header: {
        title: "خانه",
        showBack: false,
        action: "profile",
      },
    },
    children: [
      {
        index: true,
        element: <HomePage />,
        handle: {
          header: {
            title: "خانه",
            showBack: false,
            action: "profile",
          },
        },
      },
      {
        path: "public-chat",
        element: <PublicChatPage />,
        handle: {
          header: {
            title: "چت با ربات",
            showBack: true,
            backTo: "/",
            action: "history",
          },
        },
      },
      {
        path: "magic-bag",
        element: <MagicBagPage />,
        handle: {
          header: {
            title: "کیف جادویی",
            showBack: false,
            action: "profile",
          },
        },
      },
      {
        path: "messages",
        element: <MessagesPage />,
        handle: {
          header: {
            title: "اعلان‌ها",
            showBack: false,
            action: "profile",
          },
        },
      },
      {
        path: "profile",
        element: <ProfilePage />,
        handle: {
          header: {
            title: "پروفایل",
            showBack: false,
            action: "profile",
          },
        },
      },
      {
        path: "edit-profile",
        element: <EditProfilePage />,
        handle: {
          header: {
            title: "ویرایش پروفایل",
            showBack: true,
            backTo: "/profile",
            action: "settings",
          },
        },
      },
    ],
  },
  {
    path: "/feed/:topicId",
    element: protectedPage(ProtectedFeedPage),
  },
  {
    path: "/challenges/:topicId",
    element: protectedPage(ChallengeSelectionPage),
  },
  {
    path: "/chatbot/:topicId",
    element: protectedPage(ChatbotPage),
  },
  {
    path: "/submit/:topicId",
    element: protectedPage(SubmitChallengePage),
  },
  {
    path: "/challenges",
    element: protectedPage(ChallengeSelectionPage),
  },
  {
    path: "/chatbot",
    element: protectedPage(ChatbotPage),
  },
  {
    path: "/submit-challenge",
    element: protectedPage(SubmitChallengePage),
  },
]);
