import { Suspense } from "react";
import OrdersOverviewClient from "./OrdersOverviewClient";
import { getOrders } from "@/actions/orders";
import { DataTableSkeleton } from "@/components/dashboard/shared/DataTableSkeleton";
import { InlineError } from "@/components/dashboard/shared/InlineError";

export default async function OrdersPage({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
  const params = await searchParams;
  const activePage = Number(params["page"] ?? 1);
  const pageSize = Number(params["pageSize"] ?? 10);

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

  const initialData = "error" in response 
    ? { total: 0, documents: [] } 
    : response.data;

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-2">
        <h1 className="text-2xl font-bold tracking-tight">Bestellungen</h1>
        <p className="text-muted-foreground">Verwalten und verfolgen Sie alle Kundenbestellungen.</p>
      </div>

      {"error" in response && (
        <InlineError message={response.error} />
      )}

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