"use client";
import Cards from "../cards";
import CustomerList from "../../reusables/ui/customerlist";
import { useSelector } from "react-redux";
import { RootState } from "@/src/redux/store";
import CustomerDetails from "../../reusables/ui/view";
import { setAdminStats } from "@/src/redux/appActions";
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { useGetStats } from "@/src/utils/hooks/useGetAdmindashboardStats";

export default function CustomersPage() {
  const { isOpen } = useSelector(
    (state: RootState) => state.counter.viewCustomer
  );

  const statsData = useSelector(
    (state: RootState) => state.counter.adminSettings.stats
  );

  const dispatch = useDispatch();

  const { data: statsValues } = useGetStats();

  useEffect(() => {
    if (statsValues && statsValues?.payload) {
      dispatch(setAdminStats(statsValues.payload));
    }
  }, [statsValues]);

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <Cards
          title="Total Customers"
          statValue={statsData.total_users_count}
          profitValue={23}
          iconPath="/images/hand.svg"
        />
        <Cards
          title="New Customers"
          statValue={statsData.new_users_count}
          profitValue={6}
          iconPath="/images/person.svg"
        />
        <Cards
          title="Deactivated Accounts"
          statValue={statsData.deleted_accounts_count}
          profitValue={3}
          iconPath="/images/modules.svg"
        />
      </div>

      <div className="bg-white p-10 my-8 rounded-md">
        {isOpen ? <CustomerDetails /> : <CustomerList />}
      </div>
    </div>
  );
}
