import BreadCrumbLink from "@/layouts/shared/page.breadcrumbLink";
import { searchBookings } from "@/lib/features/bookings/query";
import type { CoreBookingUnit } from "@/lib/features/bookings/types";
import type { CoreAPIPagination, CoreResponse } from "@/lib/features/types";
import { createRoleProtectedLoader } from "@/lib/features/protectedFetcher";
import { FEATURE_SLUGS } from "@/lib/role-helpers";
import type { Route } from "../../layouts/+types/bookings.layout";
import BookingsClientPage from "./_client";

export const handle = {
  breadcrumb: () => (
    <BreadCrumbLink
      links={[
        {
          label: "Bookings",
        },
        {
          label: "Overview",
        },
      ]}
    />
  ),
};

export const loader = createRoleProtectedLoader(
  FEATURE_SLUGS.bookings,
  "read",
  async ({ request }) => {
    const url = new URL(request.url);
    const tab = url.searchParams.get("tab") ?? "internal";
    const page = parseInt(url.searchParams.get("page") ?? "1");
    const pageSize = parseInt(url.searchParams.get("pageSize") ?? "15");
    const bookingRes = await searchBookings(page, pageSize, tab);
    return bookingRes;
  },
);

const BookingsPage: React.FC<Route.ComponentProps> = ({ loaderData }) => {
  const { data, success } = loaderData as unknown as CoreResponse<{
    bookings: CoreBookingUnit[];
    pagination: CoreAPIPagination;
  }>;
  return (
    <BookingsClientPage
      tableProps={{
        data: data?.bookings ?? [],
        totalRows: data?.pagination.total,
      }}
    />
  );
};

export default BookingsPage;