"use client";
import { usePermission } from "@/utils/auth/permission";
import getData from "@/utils/fetch";
import { cellIndex, useParseFloat } from "@/utils/lib/helpers";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import { FC, useEffect, useState } from "react";
import ActionButton from "../action-button";
import DeleteItem from "../common/delete-item";
import CustomPagination from "../common/pagination";
import DataTable from "../dataTable/data-table-fb";
import Spinner from "../spinner";
import { Badge } from "flowbite-react";
import TicketForm from "./ticket-form";
import Link from "next/link";

type props = {
  filterValue?: string | null;
  api?: string;
};

const TicketList: FC<props> = ({
  filterValue,
  api = "/api/v1/tickets",
}) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [pagination, setPagination] = useState<any>();
  const onPageChange = (page: number) => setCurrentPage(page);
  let base_url = `${api}?page=${currentPage}`;
  let url = filterValue ? `${base_url}&${filterValue}` : base_url;

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

  const {
    data: tickets,
    isLoading,
    isFetching,
    isError,
    refetch,
    error = {} as any,
  } = useQuery({
    queryKey: ["tickets", { currentPage }],
    placeholderData: keepPreviousData,
    queryFn: () => getTickets(),
    refetchOnWindowFocus: false,
  });

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

  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case "high":
        return "failure";
      case "medium":
        return "warning";
      case "low":
        return "success";
      default:
        return "info";
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case "open":
        return "info";
      case "in_progress":
        return "warning";
      case "resolved":
        return "success";
      case "closed":
        return "gray";
      default:
        return "info";
    }
  };

  const columns = [
    {
      header: "ID",
      accessorKey: "ticketId",
      cell: ({ row }: any) => {
        const ticket = row.original;
        return (
          <div>#{ticket.ticketId}</div>
        );
      },
    },
    {
      header: "Client",
      accessorKey: "client",
      cell: ({ row }: any) => {
        const ticket = row.original;
        return (
          <div>
            <div>
              Name: {ticket.client?.name}
            </div>
            <div>
              Phone: {ticket.client?.phone}
            </div>
          </div>
        );
      },
    },
    {
      header: "Address",
      accessorKey: "address",
      cell: ({ row }: any) => {
        const ticket = row.original;
        return (
          <div>
            {ticket.client?.current_address && (
              <div>
                Address: {ticket.client?.current_address}
              </div>
            )}
          </div>
        );
      },
    },
    {
      header: "Tags",
      accessorKey: "tag",
      cell: ({ row }: any) => {
        const ticket = row.original;
        return (
          <div>
            {ticket.tag?.map((tag: any) => tag.name).join(", ")}
          </div>
        );
      },
    },
    {
      header: "Subject",
      accessorKey: "subject",
      cell: ({ row }: any) => {
        const ticket = row.original;
        return (
          <div>
            {ticket.subject?.name}
          </div>
        );
      },
    },
    {
      header: "Assigned",
      accessorKey: "assigned_to",
      cell: ({ row }: any) => {
        const ticket = row.original;
        return (
          <div>
            {ticket.staff?.name}
          </div>
        );
      },

    },
    {
      header: "Rpl",
      accessorKey: "messages_count",
      cell: ({ row }: any) => {
        const ticket = row.original;
        return (
          <Badge color="gray" className="inline-block">{ticket.messages_count}</Badge>
        );
      },
    },
    {
      header: "Priority",
      accessorKey: "priority",
      cell: ({ row }: any) => {
        const ticket = row.original;
        return (
          <Badge color={getPriorityColor(ticket.priority)} className="inline-block">
            {ticket.priority}
          </Badge>
        );
      },
    },
    {
      header: "Status",
      accessorKey: "status",
      cell: ({ row }: any) => {
        const ticket = row.original;
        return (
          <Badge color={getStatusColor(ticket.status)} className="inline-block" >
            {ticket.status.replace("_", " ")}
          </Badge>
        );
      },
    },
    {
      header: "Created",
      accessorKey: "created_at",
    },
    {
      header: "Updated",
      accessorKey: "updated_at",
    },
    {
      header: "Actions",
      id: "actions",
      cell: ({ row }: any) => {
        const ticket = row.original;
        const ticket_id: string = String(ticket.id);
        const [isOpen, setOpen] = useState(false);
        return (
          <div className="flex">
            {usePermission("tickets.edit") && (
              <>
                <div className="mr-2" onClick={() => setOpen(true)}>
                  <ActionButton type="edit" />
                </div>
                <div>
                  {isOpen && (
                    <TicketForm isOpen={isOpen} setOpen={setOpen} ticket_id={ticket_id} mode="edit" />
                  )}
                </div>
              </>

            )}
            {(usePermission("tickets.reply")) && (
              <>
                <Link className="mr-2" href={`/tickets/reply/${ticket_id}`}>
                  <ActionButton type="reply" />
                </Link>
              </>
            )}
            {(usePermission("client.tickets.reply")) && (
              <>
                <Link className="mr-2" href={`/client/tickets/reply/${ticket_id}`}>
                  <ActionButton type="reply" />
                </Link>
              </>
            )}
            {(usePermission("tickets.delete")) && (
              <div className="mr-2">
                <DeleteItem
                  name="ticket"
                  keys={"tickets"}
                  url={`/api/v1/tickets/${ticket_id}`}
                />
              </div>
            )}
            {usePermission("client.tickets.delete") && ticket.messages_count === 0 && (
              <div className="mr-2">
                <DeleteItem
                  name="ticket"
                  keys={"tickets"}
                  url={`/api/v1/client-tickets/${ticket_id}`}
                />
              </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>
      )}
      {tickets !== undefined && (
        <div className="ticket-list pb-20 shadow-md min-h-96">
          <div className="border-b overflow-x-auto">
            <DataTable data={tickets} columns={columns} />
          </div>
          <CustomPagination
            pagination={pagination}
            currentPage={currentPage}
            onPageChange={onPageChange}
            keys="tickets"
          />
        </div>
      )}
    </>
  );
};

export default TicketList;