import { getCustomers } from "@/actions/customers";
import CustomersOverviewClient from "./CustomersOverviewClient";
import React, { Suspense } from "react";
import { DataTableSkeleton } from "@/components/dashboard/shared/DataTableSkeleton";
import { InlineError } from "@/components/dashboard/shared/InlineError";

export default async function CustomersPage(props: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
  const searchParams = await props.searchParams;
  const activePage = typeof searchParams["page"] === "string" ? parseInt(searchParams["page"], 10) || 1 : 1;
  const pageSize = typeof searchParams["pageSize"] === "string" ? parseInt(searchParams["pageSize"], 10) || 10 : 10;

  const response = await getCustomers({ limit: pageSize, offset: (activePage - 1) * pageSize });

  if (!response.success) {
    return (
      <div className="space-y-6">
        <div className="flex flex-col gap-2">
          <h1 className="text-2xl font-bold tracking-tight">Kunden</h1>
          <p className="text-muted-foreground">Verwalten Sie Ihre Kundenbasis und deren Konten.</p>
        </div>
        <InlineError message={response.error} />
      </div>
    );
  }

  const initialData = response.data;

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-2">
        <h1 className="text-2xl font-bold tracking-tight">Kunden</h1>
        <p className="text-muted-foreground">Verwalten Sie Ihre Kundenbasis und deren Konten.</p>
      </div>

      <Suspense
        key={`${activePage}-${pageSize}`}
        fallback={<DataTableSkeleton rowCount={pageSize} />}
      >
        <CustomersOverviewClient
          initialData={initialData as any}
          activePage={activePage}
          pageSize={pageSize}
        />
      </Suspense>
    </div>
  );
}