import BreadCrumbLink from "@/layouts/shared/page.breadcrumbLink";
import { listCampaigns } from "@/lib/features/notifications/action";
import { createRoleProtectedLoader } from "@/lib/features/protectedFetcher";
import { FEATURE_SLUGS } from "@/lib/role-helpers";
import type { Route } from "./+types/page";
import NotificationsClientsPage from "./_client";

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

export const loader = createRoleProtectedLoader(
  FEATURE_SLUGS.notifications,
  "read",
  async ({ request }) => {
    const url = new URL(request.url);
    const page = parseInt(url.searchParams.get("page") ?? "1", 10);
    const pageSize = parseInt(url.searchParams.get("pageSize") ?? "10", 10);
    const search = url.searchParams.get("search") ?? undefined;
    const status = url.searchParams.get("status") ?? undefined;
    const country = url.searchParams.get("country") ?? undefined;
    const city = url.searchParams.get("city") ?? undefined;

    const start = (page - 1) * pageSize;

    const headers = {
      Cookie: request.headers.get("Cookie") ?? "",
    };

    return {
      campaigns: { success: true, data: { items: [], total: 0 } },
    };
  },
);

const NotificationsPage: React.FC<Route.ComponentProps> = ({ loaderData }) => {
  const { campaigns } = loaderData;

  const campaignsData = campaigns.success ? (campaigns.data as any) : { items: [], total: 0 };
  const items = Array.isArray(campaignsData) ? campaignsData : (campaignsData.items || []);
  const total = Array.isArray(campaignsData) ? campaignsData.length : (campaignsData.total || 0);

  return (
    <NotificationsClientsPage
      initialCampaigns={items}
      totalCount={total}
    />
  );
};

export default NotificationsPage;