"use client";
import { usePermission } from "@/utils/auth/permission";
import getData from "@/utils/fetch";
import { cellIndex } from "@/utils/lib/helpers";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import { Spinner } from "flowbite-react";
import { FC, useEffect, useState } from "react";
import { ExpandableTextCell, useExpandableCells } from "../common/expandable-text-cell";
import CustomPagination from "../common/pagination";
import DataTable from "../dataTable/data-table-fb";
import SmsResend from "../sms-send-out/sms-resend";

type Props = {
  filterValue?: string;
};

const CommunicationQueueList: FC<Props> = ({ filterValue }) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [pagination, setPagination] = useState<any>({});
  const { expandedIds, toggle } = useExpandableCells([currentPage, filterValue]);

  const onPageChange = (page: number) => setCurrentPage(page);

  const base_url = `/api/v1/communication-queue?page=${currentPage}`;
  const url = filterValue ? `${base_url}&${filterValue}` : base_url;

  const fetchQueue = async () => {
    const {
      data: { data },
      data: { pagination },
    } = await getData(url);
    setPagination(pagination);
    return data;
  };

  const {
    data: queueItems,
    isLoading,
    isFetching,
    refetch,
  } = useQuery({
    queryKey: ["communication-queue", { currentPage }],
    placeholderData: keepPreviousData,
    queryFn: fetchQueue,
    retry: 0,
  });

  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: "SMS To",
      accessorKey: "sms_to",
    },
    {
      header: "SMS From",
      accessorKey: "sms_from",
    },
    {
      header: "SMS Type",
      accessorKey: "sms_type",
      cell: ({ row }: any) => {
        const item = row.original;
        return (
          <div className="capitalize">
            {item?.sms_type?.split("_")?.join(" ")}
          </div>
        );
      },
    },
    {
      header: "SMS Count",
      accessorKey: "sms_count",
    },
    {
      header: "Message",
      accessorKey: "message",
      cell: ({ row }: { row: { original: { id: string | number; message?: string } } }) => (
        <ExpandableTextCell
          text={row.original.message ?? ""}
          rowId={row.original.id}
          isExpanded={expandedIds.has(row.original.id)}
          onToggle={toggle}
        />
      ),
    },
    {
      header: "Status",
      accessorKey: "status",
      cell: ({ row }: any) => {
        const item = row.original;
        let statusClass = "text-gray-600";
        if (item.status === "stop" || item.status === "failed") {
          statusClass = "text-red-600";
        }
        if (item.status === "completed") {
          statusClass = "text-green-600";
        }
        if (item.status === "processing") {
          statusClass = "text-blue-600";
        }
        return <p className={`capitalize ${statusClass}`}>{item.status}</p>;
      },
    },
    {
      header: "Comment",
      accessorKey: "comment",
    },
    {
      header: "Send At",
      accessorKey: "send_at",
    },
    {
      header: "Expire At",
      accessorKey: "expire_at",
    },
    {
      header: "Actions",
      id: "actions",
      cell: ({ row }: any) => {
        const item = row.original;
        const itemId: string = String(item.id);
        return (
          <div className="flex">
            {usePermission("sms-queue.resend") &&
              (item.status === "stop" || item.status === "failed") && (
                <SmsResend smsId={itemId} />
              )}
          </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>
      )}
      {queueItems !== undefined && (
        <div className="user-list pb-20 shadow-md">
          <div className="border-b overflow-x-auto">
            <DataTable
              data={queueItems}
              columns={columns}
              loading={false}
              initSorting={{ id: "send_at", desc: true }}
            />
          </div>
          <CustomPagination
            pagination={pagination}
            currentPage={currentPage}
            onPageChange={onPageChange}
            keys="communication-queue"
          />
        </div>
      )}
    </>
  );
};

export default CommunicationQueueList;