import BreadCrumbLink from "@/layouts/shared/page.breadcrumbLink";
import {
  getMembershipFilterOptions,
  searchMemberships,
} from "@/lib/features/members/query";
import type { CoreMembership } from "@/lib/features/members/types";
import type { CoreAPIPagination, CoreResponse } from "@/lib/features/types";
import { createRoleProtectedLoader } from "@/lib/features/protectedFetcher";
import { FEATURE_SLUGS } from "@/lib/role-helpers";
import {
  getMyMemberAccess,
  NO_MEMBER_ACCESS,
  type MemberAccess,
} from "@/lib/features/members/access";
import type { Route } from "../../layouts/+types/members.layout";
import MembersClientPage from "./_client";

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

export const loader = createRoleProtectedLoader(
  FEATURE_SLUGS.members,
  "read",
  async ({ request }) => {
    const url = new URL(request.url);
    const page = parseInt(url.searchParams.get("page") ?? "1");
    const pageSize = parseInt(url.searchParams.get("pageSize") ?? "15");
    const search = url.searchParams.get("search") ?? undefined;
    const csv = (key: string) =>
      (url.searchParams.get(key) ?? "")
        .split(",")
        .map((part) => part.trim())
        .filter(Boolean);
    const isActiveParam = url.searchParams.get("isActive");

    const filters = {
      searchTerm: search,
      accountTypeIds: csv("accountTypeIds"),
      accountStatusIds: csv("accountStatusIds"),
      isActive:
        isActiveParam === "true"
          ? true
          : isActiveParam === "false"
            ? false
            : undefined,
      createdFrom: url.searchParams.get("createdFrom") ?? "",
      createdTo: url.searchParams.get("createdTo") ?? "",
    };

    const headers = { Cookie: request.headers.get("Cookie") ?? "" };
    const accessRes = await getMyMemberAccess(headers);
    const memberAccess = accessRes?.success
      ? (accessRes.data as MemberAccess)
      : NO_MEMBER_ACCESS;
    const canViewAnalytics = memberAccess.can_view_analytics;
    const [searchResponse, optionsResponse] = await Promise.all([
      searchMemberships(page, pageSize, search, headers, filters),
      getMembershipFilterOptions(headers),
    ]);
    // Analytics is deliberately NOT awaited here: it is a set of whole-table
    // scans, and blocking the loader on it delayed the table by seconds. The
    // client fetches it after mount and shows skeletons meanwhile.
    return {
      searchResponse,
      optionsResponse,
      filters,
      canViewAnalytics,
      canManageAccess: memberAccess.isSuperAdmin,
    };
  },
);

const MembersPage: React.FC<Route.ComponentProps> = ({ loaderData }) => {
  const {
    searchResponse,
    optionsResponse,
    filters,
    canViewAnalytics,
    canManageAccess,
  } = loaderData as unknown as {
    searchResponse: CoreResponse<{
      members: CoreMembership[];
      pagination: CoreAPIPagination;
    }>;
    optionsResponse?: CoreResponse<{
      accountTypes: { id: string; name: string }[];
      accountStatuses: { id: string; name: string }[];
    }>;
    canViewAnalytics?: boolean;
    canManageAccess?: boolean;
    filters: {
      searchTerm?: string;
      accountTypeIds: string[];
      accountStatusIds: string[];
      isActive?: boolean;
      createdFrom: string;
      createdTo: string;
    };
  };

  const { data, success } = searchResponse ?? {};
  const toOptions = (list?: { id: string; name: string }[]) =>
    (list ?? []).map((item) => ({ value: item.id, label: item.name }));

  return (
    <MembersClientPage
      tableProps={{
        data: success ? data.members : [],
        totalRows: data?.pagination?.total,
      }}
      filters={{
        searchTerm: filters?.searchTerm ?? "",
        accountTypeIds: filters?.accountTypeIds ?? [],
        accountStatusIds: filters?.accountStatusIds ?? [],
        activeOnly: filters?.isActive === true,
        inactiveOnly: filters?.isActive === false,
        createdFrom: filters?.createdFrom ?? "",
        createdTo: filters?.createdTo ?? "",
      }}
      canViewAnalytics={Boolean(canViewAnalytics)}
      canManageAccess={Boolean(canManageAccess)}
      filterOptions={{
        accountTypes: toOptions(optionsResponse?.data?.accountTypes),
        accountStatuses: toOptions(optionsResponse?.data?.accountStatuses),
      }}
    />
  );
};

export default MembersPage;