"use client";
import getData from "@/utils/fetch";
import { cellIndex, useParseFloat } from "@/utils/lib/helpers";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import { Popover, Spinner } from "flowbite-react";
import { FC, useEffect, useState } from "react";
import { BsThreeDots } from "react-icons/bs";
import CustomPagination from "../common/pagination";
import DataTable from "../dataTable/data-table-fb";
import ClientAction from "./client-actions";
import ClientPaymentInfo from "./client-blling-paymet";
import ClientNameInfo from "./client-id-name-phone";
import ClientPackageInfo from "./client-package";
import ClientStatus from "./client-status";
import ClientZoneInfo from "./client-zone-address";
import ClientOnlineStatus from "./client-online-status";
import ActionButton from "../action-button";
import { useRouter } from "next/navigation";
import { MdOutlineLogout, MdOutlinePower, MdOutlinePowerOff, MdOutlinePowerSettingsNew } from "react-icons/md";
import ClientSessionReset from "./client-session-reset";
import { TSclientSchema } from "../forms/schema/client";

type props = {
  filterValue?: string | null;
  setClientCount?: (x: number) => void;
};
const ClientList: FC<props> = ({ filterValue, setClientCount = () => { } }) => {
  const [currentPage, setCurrentPage] = useState<any>(1);
  const [pagination, setPagination] = useState<any>({});
  const [isResetSessionOpen, setIsResetSessionOpen] = useState(false);
  const [selectedClient, setSelectedClient] = useState<TSclientSchema | null>(null);
  const onPageChange = (page: number) => setCurrentPage(page);
  const router = useRouter();
  // const search = useSearchParams();

  let base_url = `/api/v1/clients?page=${currentPage}`;
  let url = filterValue ? `${base_url}&${filterValue}` : base_url;
  const getClients = async () => {
    const {
      data: { data },
      data: { pagination },
    } = await getData(url);
    let clients = useParseFloat(pagination?.total);
    setClientCount(clients);
    setPagination(pagination);
    return data;
  };
  const {
    data: clients,
    isLoading,
    isFetching,
    isError,
    refetch,
    error = {} as any,
  } = useQuery({
    queryKey: ["clients", { currentPage }],
    placeholderData: keepPreviousData,
    queryFn: () => getClients(),
    refetchOnWindowFocus: false,
  });

  useEffect(() => {
    if (!filterValue?.includes("#")) {
      setCurrentPage(1);
      refetch();
    }
  }, [filterValue]);

  const columns = [
    {
      header: "SL",
      cell: ({ row }: any) => (
        <div className="font-bold">{cellIndex(row.index, pagination)}</div>
      ),
    },
    {
      header: "ID/Name/Phone",
      accessorKey: "name",
      cell: ({ row }: any) => {
        const client = row.original;
        return <ClientNameInfo client={client} />;
      },
    },
    {
      header: "Zone/Address/Network",
      accessorKey: "address",
      cell: ({ row }: any) => {
        const client = row.original;
        return <ClientZoneInfo client={client} />;
      },
    },
    {
      header: "connection/Package",
      accessorKey: "package",
      cell: ({ row }: any) => {
        const client = row.original;
        return <ClientPackageInfo client={client} />;
      },
    },
    {
      header: "Bill/Payment",
      accessorKey: "payment_deadline",
      cell: ({ row }: any) => {
        const client = row.original;
        return <ClientPaymentInfo client={client} />;
      },
    },
    {
      header: "Online/info",
      accessorKey: "status",
      cell: ({ row }: any) => {
        const client = row.original;
        return <ClientOnlineStatus client={client} />;
      },
    },
    {
      header: "Status",
      cell: ({ row }: any) => {
        const client = row.original;
        return <ClientStatus client={client} />;
      },
    },
    {
      header: "Actions",
      id: "testing",
      cell: ({ row }: any) => {
        const client = row.original;
        return (
          <div className="relative flex items-center gap-2">
            <Popover
              className="z-10"
              placement="bottom"
              content={
                <div className=" text-sm text-gray-500 dark:text-gray-400">
                  <ClientAction client={client} />
                </div>
              }>
              <div className="cursor-pointer align-center hover:bg-gray-300 transition-all duration-300 text-center dark:bg-gray-800 dark:border px-3 py-2 bg-gray-100 rounded-md">
                <BsThreeDots />
              </div>
            </Popover>
            <ActionButton type="view" onClick={() => {
              router.push(`/clients/view/${client.id}`);
            }} />
            <div 
              className="px-3 py-2 bg-gray-100 rounded-md hover:bg-gray-300 transition-all duration-300 cursor-pointer"
              onClick={() => {
                setSelectedClient(client);
                setIsResetSessionOpen(true);
              }}
            >
              <MdOutlinePowerSettingsNew className="text-gray-900 font-semibold" />
            </div>
          </div>
        );
      },
    },
  ];

  return (
    <>
      {(isLoading || isFetching) && (
        <div className="relative">
          <div className="grid fixed left-2/4 top-1/2 z-50">
            <Spinner size="xl" color="purple" />
          </div>
        </div>
      )}
      {clients !== undefined && (
        <div className="user-list pb-20">
          <div className="border-b client-table dark:border-t dark:border-gray-500 border rounded-lg border-gray-200">
            <DataTable data={clients} columns={columns} />
          </div>
          <CustomPagination
            pagination={pagination}
            currentPage={currentPage}
            onPageChange={onPageChange}
            keys={`clients`}
          />
        </div>
      )}
      {selectedClient && (
        <ClientSessionReset
          client={selectedClient}
          isOpen={isResetSessionOpen}
          setOpen={setIsResetSessionOpen}
        />
      )}
    </>
  );
};
export default ClientList;