import { getImages } from "@/actions/catalog";
import { columns } from "./columns";
import { PaginatedDataTable } from "@/components/dashboard/data-view/PaginatedDataTable";
import { Button } from "@/components/ui/button";
import { Upload } from "lucide-react";

export default async function ImagesPage({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
  const params = await searchParams;
  const activePage =
    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 getImages({ limit: pageSize, page: activePage });

  const documents = response.success ? response.data.documents : [];
  const total = response.success ? response.data.pagination.total : 0;

  return (
    <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
      <div className="flex justify-between items-center mb-8">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Bilder</h1>
          <p className="text-muted-foreground">Verwalten Sie Ihre Medienbibliothek.</p>
        </div>
        <Button disabled className="rounded-full px-6 shadow-md opacity-50 cursor-not-allowed">
          <Upload className="mr-2 h-5 w-5" />
          Bild hochladen
        </Button>
      </div>

      <div className="space-y-4">
        <PaginatedDataTable 
          columns={columns as any} 
          data={documents as any[]} 
          page={activePage}
          pageSize={pageSize}
          totalCount={total}
        />
      </div>
    </div>
  );
}