'use client';
import { Suspense } from 'react';
import { fetchArchivedUsers } from '@/network/apis/dashboard/userManagment/users/users.apis';
import { UsersClientList } from '@/modules/client-management/components/usersClientList/usersClientList';
import { useQuery } from '@tanstack/react-query';
import { useSearchParams } from 'next/navigation';
import { Spinner } from '@/components/ui/spinners';

const ArchivedClientsPage = () => {
  const sp = useSearchParams();
  const page = Number(sp?.get('page') ?? 1);
  const name = sp?.get('name');
  const email = sp?.get('email');
  const phone = sp?.get('phone');

  const params: Record<string, unknown> = { account_type_id: 2, page };
  if (name) params.name = name;
  if (email) params.email = email;
  if (phone) params.phone = phone;

  const { data: usersList, isLoading } = useQuery({
    queryKey: ['archived-clients', page, name, email, phone],
    queryFn: () => fetchArchivedUsers(params),
  });

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-20">
        <Spinner className="size-8 animate-spin text-primary" />
      </div>
    );
  }

  return (
    <Suspense fallback={<div>Loading archived clients...</div>}>
      <UsersClientList
        users={usersList?.items ?? []}
        pagination={usersList?.pagination}
        mode="archived"
      />
    </Suspense>
  );
};

export default ArchivedClientsPage;