import React, { Suspense } from "react";
import { getTaxClasses } from "@/actions/catalog";
import TaxClassesOverviewClient from "./TaxClassesOverviewClient";
import { TaxClassesOverview } from "./columns";
import { DashboardPage } from "@/components/dashboard/DashboardPage";
import { EntityOverviewHeader } from "@/components/dashboard/EntityOverviewHeader";
import { DataTableSkeleton } from "@/components/dashboard/shared/DataTableSkeleton";

/**
 * ⚡ Optimization: Server-Side Rendering (SSR) for Tax Classes
 * - Fetching data on the server eliminates the client-side fetch waterfall.
 * - Improves TTFB and FCP by providing initial data in the HTML.
 * - Leverages React.cache for deduplicated data fetching.
 */
export default async function TaxClassesPage({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
  const params = await searchParams;
  const page = typeof params["page"] === "string" ? parseInt(params["page"], 10) || 1 : 1;
  const pageSize = typeof params["pageSize"] === "string" ? parseInt(params["pageSize"], 10) || 10 : 10;

  const response = await getTaxClasses({ limit: pageSize, page });
  const initialData = (response && response.success)
    ? { documents: response.data.documents as TaxClassesOverview[], total: response.data.pagination.total }
    : { documents: [], total: 0 };

  return (
    <DashboardPage>
      <Suspense
        key={`${page}-${pageSize}`}
        fallback={<DataTableSkeleton rowCount={Math.min(pageSize, 10)} />}
      >
        <TaxClassesOverviewClient
          initialData={initialData}
          page={page}
          pageSize={pageSize}
        />
      </Suspense>
    </DashboardPage>
  );
}