"use client";
import getData from "@/utils/fetch";
import { useParseFloat } from "@/utils/lib/helpers";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import { Checkbox, Spinner } from "flowbite-react";
import { BaseSyntheticEvent, FC, useEffect, useState } from "react";
import ClientNameInfo from "../clients/client-id-name-phone";
import ClientZoneInfo from "../clients/client-zone-address";
import CustomPagination from "../common/pagination";
import DataTable from "../dataTable/data-table-fb";
import ClientInfo from "./client-blling-paymet";
import { TSclientSchema } from "../forms/schema/client";
import { useSearchParams } from "next/navigation";

type props = {
  filterValue?: string | null;
  setClientCount?: (x: number) => void;
  setClientIds?: (x: any) => void;
  setFilter?: (x: any) => void;
  setQuery?: (x: string) => void;
  clientIds?: string[];
  is_all_client?: boolean;
};
const SmsClientList: FC<props> = ({
  filterValue,
  setClientCount = () => { },
  setClientIds = () => { },
  setFilter = () => { },
  setQuery = () => { },
  clientIds = [],
  is_all_client = false,
}) => {
  const [currentPage, setCurrentPage] = useState<any>(1);
  const [pagination, setPagination] = useState<any>({});
  const onPageChange = (page: number) => setCurrentPage(page);
  const searchParams = useSearchParams();
  const clientPhone = searchParams.get("phone");
  // const router = useRouter();
  // const search = useSearchParams();

  let base_url = `/api/v1/sms-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);
    setPagination(pagination);
    if (filterValue) {
      setQuery(filterValue);
    }
    setClientCount(clients);
    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 handleCheckboxChange = (event: BaseSyntheticEvent) => {
    const clientId = event.target.value;
    let isChecked = event.target.checked;
    if (!isChecked) {
      setClientIds((prev: any) =>
        prev && prev?.filter((user: string) => user !== clientId)
      );
    } else {
      setClientIds((prev: string[]) => [...prev, clientId]);
    }
  };
  const selectAll = (table: any) => {
    let selectedId: string[] = table
      .getRowModel()
      .rows.map((row: any) => row.getValue("cid")?.toString());
    if (clientIds.length > 0) {
      selectedId = [];
    }
    setClientIds(selectedId);
  };
  useEffect(() => {
    if (clientPhone && clientPhone?.length > 0) {
      const client = clients?.find((client) => client?.phone === clientPhone);
      setClientIds((prev) => {
        const next = new Set(prev);
        if (client?.cid) next.add(String(client.cid));
        return Array.from(next);
      });
      setFilter(`phone=${clientPhone}`);
    }
  }, [clientPhone, clients]);

  const columns = [
    {
      header: ({ table }: any) => (
        <>
          <Checkbox
            onChange={() => selectAll(table)}
            className="cursor-pointer"
            checked={clientIds.length > 0}
            disabled={is_all_client}
          />
        </>
      ),
      accessorKey: "cid",
      cell: ({ row }: any) => {
        const client = row?.original;
        return (
          <>
            <div className="font-bold">
              <Checkbox
                id={`client-id-${client?.cid}`}
                value={client?.cid}
                className="cursor-pointer"
                onChange={handleCheckboxChange}
                checked={clientIds?.includes(client?.cid?.toString())}
                disabled={is_all_client}
              />
            </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: "Due/BW/Package",
      accessorKey: "package",
      cell: ({ row }: any) => {
        const client = row.original;
        return <ClientInfo client={client} />;
      },
    },
    {
      header: "Status",
      accessorKey: "status",
      cell: ({ row }: any) => {
        const client = row.original;
        return (
          <p
            className={`${client?.status === 1 ? "text-green-600" : "text-red-600"}`}
          >
            {client?.status === 1 ? "Active" : "Inactive"}
          </p>
        );
      },
    },
  ];

  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 shadow-md">
          <div className="border-b dark:border-t dark:border-gray-500">
            <DataTable data={clients} columns={columns} />
          </div>
          <CustomPagination
            pagination={pagination}
            currentPage={currentPage}
            onPageChange={onPageChange}
            keys="clients"
          />
        </div>
      )}
    </>
  );
};
export default SmsClientList;