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

const UsersClientPage = () => {
  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 is_activated = sp?.get('is_activated');

  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;
  if (is_activated) params.is_activated = is_activated;

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

  const { data: totalStats } = useQuery({
    queryKey: ['clients-stats-total'],
    queryFn: () => fetchUsers({ account_type_id: 2, per_page: 1 }),
    staleTime: 60_000,
  });

  const { data: activeStats } = useQuery({
    queryKey: ['clients-stats-active'],
    queryFn: () => fetchUsers({ account_type_id: 2, is_activated: 1, per_page: 1 }),
    staleTime: 60_000,
  });

  const dashboardStats = useMemo<StatsData>(() => {
    const total = totalStats?.pagination?.total ?? usersList?.pagination?.total ?? 0;
    const active = activeStats?.pagination?.total ?? 0;
    const inactive = total - active;

    const users = usersList?.items ?? [];
    let campaigns = 0;
    let reports = 0;
    let search = 0;
    let social = 0;
    let lookalike = 0;
    let network = 0;
    let competitor = 0;

    for (const u of users) {
      campaigns += u.campaign_balance ?? 0;
      reports += u.requests_balance ?? 0;
      search += u.search_balance ?? 0;
      social += u.social_listening_balance ?? 0;
      lookalike += u.lookalike_balance ?? 0;
      network += u.mynetwork_balance ?? 0;
      competitor += u.competitor_analysis_balance ?? 0;
    }

    return {
      totalClients: total,
      activeClients: active,
      inactiveClients: inactive,
      totalCampaigns: campaigns,
      totalReportsBalance: reports,
      totalSearchBalance: search,
      totalSocialListening: social,
      totalLookalike: lookalike,
      totalNetwork: network,
      totalCompetitorAnalysis: competitor,
    };
  }, [totalStats, activeStats, usersList]);

  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 users...</div>}>
      <ClientDashboard stats={dashboardStats} />
      <UsersClientList
        users={usersList?.items ?? []}
        pagination={usersList?.pagination}
      />
    </Suspense>
  );
};

export default UsersClientPage;