import { ImageIcon } from "lucide-react";

import { ListPageCard } from "@/app/dashboard/_components";
import { ErrorBanner } from "@/components/shared/error-banner";
import { parseMasterListQuery } from "@/lib/server/parse-master-list-search-params";

import { BannersTable } from "./_components/banners-table";
import { BannersHeaderActions } from "./_components/list-header-actions";
import {
  fetchBackendBanners,
  parseBannerFiltersFromSearchParams,
} from "./_lib/banners-server-api";

type BannersPageProps = {
  searchParams: Promise<Record<string, string | undefined>>;
};

export default async function BannersPage({ searchParams }: BannersPageProps) {
  const query = await searchParams;
  const { page, pageSize, filters } = parseMasterListQuery(query, parseBannerFiltersFromSearchParams);
  const { rows, totalCount, pageCount, errorMessage, categoryOptions } = await fetchBackendBanners({
    page,
    pageSize,
    bannerFilters: filters,
  });

  return (
    <ListPageCard
      icon={ImageIcon}
      title="Banners"
      description="Manage gallery banners by site, category, priority, and status."
      breadcrumb={[{ label: "Master" }, { label: "Banners" }]}
      actions={<BannersHeaderActions data={rows} />}
    >
      <ErrorBanner message={errorMessage} className="mb-4" />
      <BannersTable
        data={rows}
        initialFilters={filters}
        categoryOptions={categoryOptions}
        pagination={{ page, pageSize, totalCount, pageCount }}
      />
    </ListPageCard>
  );
}