import React, { Suspense } from "react";
import OverviewClient from "./OverviewClient";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Plus } from "lucide-react";
import { getAdminProducts } from "@/lib/product-actions";
import { DataTableSkeleton } from "@/components/dashboard/shared/DataTableSkeleton";
import { InlineError } from "@/components/dashboard/shared/InlineError";

export default async function OverviewPage({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
  const params = await searchParams;
  const page = Number(params["page"] ?? 1);
  const pageSize = Number(params["pageSize"] ?? 10);
  const sortBy = (params["sortBy"] as any) ?? "created_at";
  const sortOrder = (params["sortOrder"] as "ASC" | "DESC") ?? "DESC";
  const query = (params["query"] as string) || undefined;

  const response = await getAdminProducts({
    page,
    pageSize,
    sortBy,
    sortOrder,
    query
  });

  if (!response.success) {
    return (
      <div className="space-y-6">
        <h1 className="text-2xl font-bold tracking-tight">Produkte</h1>
        <InlineError message={response.error} />
      </div>
    );
  }

  const initialData = response.data;

  return (
    <Suspense
      key={`${page}-${pageSize}-${sortBy}-${sortOrder}-${query}`}
      fallback={<DataTableSkeleton rowCount={pageSize} />}
    >
      <OverviewClient
        initialData={initialData}
        page={page}
        pageSize={pageSize}
        sortBy={sortBy}
        sortOrder={sortOrder}
      />
    </Suspense>
  );
}