import { getAttributes } from "@/actions/catalog";
import AttributesOverviewClient from "./AttributesOverviewClient";
import { AttributesOverview } from "./columns";
import React, { Suspense } from "react";
import { ErrorDisplay } from "@/components/dashboard/shared/ErrorDisplay";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Plus } from "lucide-react";

/**
 * AttributesPage is now a Server Component.
 * ⚡ Performance: Initial data is fetched on the server, eliminating the client-side fetch waterfall
 * and the "Laden..." flickering state. It leverages React.cache for efficient data retrieval.
 */
export default async function AttributesPage(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;

  // Fetch initial data on the server
  const result = await getAttributes({ limit: pageSize, page: activePage });

  if (!result.success) {
    return (
      <div className="space-y-6">
        <div className="flex flex-col gap-2">
          <h1 className="text-2xl font-bold tracking-tight">Attribute</h1>
          <p className="text-muted-foreground">Fehler beim Laden der Attributdaten.</p>
        </div>
        <ErrorDisplay title="Ladefehler" error={result.error} />
      </div>
    );
  }

  const initialData = result.data!;

  return (
    <Suspense
      key={`${activePage}-${pageSize}`}
      fallback={<div className="h-96 flex items-center justify-center text-muted-foreground">Laden...</div>}
    >
      <AttributesOverviewClient
        initialData={initialData as any}
        activePage={activePage}
        pageSize={pageSize}
      />
    </Suspense>
  );
}