import { Suspense } from "react";
import { PageHeader } from "@/components/shared/PageHeader";
import { AdminClientsTable } from "@/components/features/admin/AdminClientsTable";
import { getAdminClients } from "@/lib/queries/admin-queries";
import type { PlanTier } from "@/types";

interface ClientsPageProps {
  searchParams: Record<string, string | string[] | undefined>;
}

export default async function AdminClientsPage({
  searchParams,
}: ClientsPageProps) {
  const plan = String(searchParams.plan ?? "all");
  const search = String(searchParams.search ?? "");

  const clients = await getAdminClients({
    plan: plan === "all" ? undefined : (plan as PlanTier),
    search: search || undefined,
  });

  return (
    <>
      <PageHeader title="Clients" subtitle="Manage workspaces and plans" />
      <div className="flex-1 overflow-y-auto p-4 sm:p-[26px]">
        <Suspense fallback={null}>
          <AdminClientsTable clients={clients} />
        </Suspense>
      </div>
    </>
  );
}