import { createBrowserRouter } from "react-router";
import ProfilePage from "./page/ProfilePage";
import EventPage from "./page/EventPage";
import type { MatchInfo, MatchSummary, XCXMember } from "./types";
import { FindUserPage } from "./page/FindUserPage";
import { FavePlayersPage } from "./page/FavPlayersPage";
import { UserCenter } from "./page/UserCenter";
import { CallbackPage } from "./page/Logto/Callback";
import App from "./App";
import { ClubEventsPage } from "./page/ClubEvents";
import { HydrateFallback } from "./components/HydrateFallback";
import { AppBarLayout } from './components/Layout';

export const route = createBrowserRouter([
  {
    path: '/',
    element: <AppBarLayout />,
    children: [
      {
        path: '',
        index: true,
        Component: App,
        HydrateFallback: () => <HydrateFallback />
      },
      {
        path: '/club/:id',
        Component: ClubEventsPage,
        HydrateFallback: () => <HydrateFallback />,
        loader: async ({ params }) => {
          const id = params.id;
          const [info] = await Promise.all([
            fetch(`/api/club/${id}`).then(r => r.json()),
          ]);
          return { info };
        },
      },
      {
        path: '/fav-players',
        Component: FavePlayersPage,
      },
      {
        path: '/event/:matchId',
        loader: async ({ params }) => {
          const { detail: info, summary } = await fetch(`/api/match/${params.matchId}`)
            .then(res => res.json())
            .then(data => data as {
              detail: MatchInfo,
              summary: MatchSummary,
            });
          const members = info.itemId
            ? await (await fetch(`/api/match/${params.matchId}/${info.itemId}`)).json()
            : info.players.map((e, i) => ({
                number: i + 1,
                uid: e.uid,
                name: e.name,
                score: e.score,
                realname: e.name,
              } as XCXMember));
          const uids = info.players.map(e => e.uid);
          const uidScore = await fetch(`/api/user/nowScores`, {
            method: "POST",
            body: JSON.stringify({ uids }),
          }).then(res => res.json()).catch(() => ({}));
          return { info, members, uidScore: new Map(Object.entries(uidScore)), summary };
        },
        Component: EventPage,
        HydrateFallback: () => <HydrateFallback />
      },
      {
        path: 'profile/:uid',
        loader: async ({ params }) => {
          const { uid } = params;
          const profile = await (await fetch(`/api/user/${uid}`)).json();
          const tags = await (await fetch(`/api/user/${uid}/tags`)).json();
          return { profile, uid, tags };
        },
        Component: ProfilePage,
        HydrateFallback: () => <HydrateFallback />
      },
      {
        path: 'find',
        Component: FindUserPage,
      },
      {
        path: 'user-center',
        Component: UserCenter,
      },
      {
        path: 'auth',
        children: [
          {
            path: 'callback',
            Component: CallbackPage,
          },
        ],
      },
    ],
  },
  {
    path: '/dev',
    Component: HydrateFallback,
  }
]);