"use client";
import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
import ConfirmationModal from "@/components/ui/ConfirmationModal";
import ListHeader from "@/components/ui/ListHeader";
import Modal from "@/components/ui/modal";
import Pagination from "@/components/ui/pagination";
import Status from "@/components/ui/Status";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import TableSkeleton from "@/components/ui/TableSkeleton";
import { _TooltipDefaultParams } from "@/constants/tooltip";
import { formatPhoneNumber, unixToDate } from "@/utils/shared";
import { Tooltip } from "react-tooltip";
import ChangeStatusForm from "./ChangeStatusForm";
import InquiriesListFilters from "./InquiriesListFilters";
import useInquiriesListPresenter from "./useInquiriesListPresenter";

const InquiriesTable = () => {
  const {
    columns,
    inquiries,
    allInquiries,
    isFilterModalOpen,
    setIsFilterModalOpen,
    isPending,
    currentInquiry,
    isDeleteModalOpen,
    isChangeStatusModalOpen,
    setCurrentInquiry,
    setIsDeleteModalOpen,
    setIsChangeStatusModalOpen,
    deleteInquiry,
    handleChangeStatus,
    filterRegister,
    handleFilterSubmit,
    search,
    watch,
    setFilterValue,
    isMutating,
    setParams,
  } = useInquiriesListPresenter();
  return (
    <div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
      <ListHeader
        onFilter={() => setIsFilterModalOpen(true)}
        hasCreate={false}
      />
      <Table>
        <TableHeader>
          <TableRow className="border-none uppercase [&>th]:text-start">
            {columns.map((column) => (
              <TableHead key={column} colSpan={100}>
                {column}
              </TableHead>
            ))}
          </TableRow>
        </TableHeader>
        {isPending && <TableSkeleton column={columns.length} />}
        <TableBody>
          <EmptyListWrapper
            columns={columns}
            list={inquiries ?? []}
            emptyMessage="No Inquiries were found"
          >
            {inquiries?.map((inquiry, index) => (
              <TableRow key={inquiry?.id ?? index}>
                <TableCell className="text-start" colSpan={100}>
                  {index + 1}
                </TableCell>
                <TableCell className="text-start" colSpan={100}>
                  {inquiry?.company_name}
                </TableCell>
                <TableCell className="text-start" colSpan={100}>
                  {inquiry?.full_name}
                </TableCell>
                <TableCell className="text-start" colSpan={100}>
                  {formatPhoneNumber(inquiry?.phone_number)}
                </TableCell>
                <TableCell className="text-start" colSpan={100}>
                  <Status status={inquiry?.status ?? "pending"}>
                    {inquiry?.status}
                  </Status>
                </TableCell>
                <TableCell className="text-start" colSpan={100}>
                  {unixToDate({ unix: inquiry.created_at, hasTime: true })}
                </TableCell>
                <TableCell className="text-start xl:pr-7.5">
                  <div className="flex items-center justify-start gap-x-3.5">
                    <button
                      data-tooltip-id="change-status"
                      data-tooltip-content="Change Status"
                      data-tooltip-place="top"
                      className="hover:text-primary"
                      onClick={() => {
                        setCurrentInquiry(inquiry);
                        setIsChangeStatusModalOpen(true);
                      }}
                    >
                      <Tooltip
                        {..._TooltipDefaultParams({ id: "change-status" })}
                      />
                      <span className="sr-only">Change Status</span>
                      <PencilSquareIcon />
                    </button>
                    <button
                      data-tooltip-id="delete"
                      data-tooltip-content="Delete"
                      data-tooltip-place="top"
                      className="hover:text-red-500"
                      onClick={() => {
                        setCurrentInquiry(inquiry);
                        setIsDeleteModalOpen(true);
                      }}
                    >
                      <Tooltip {..._TooltipDefaultParams({ id: "delete" })} />
                      <span className="sr-only">Delete Contact Us </span>
                      <TrashIcon />
                    </button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </EmptyListWrapper>
        </TableBody>
      </Table>
      <Modal
        isOpen={isFilterModalOpen}
        onClose={() => setIsFilterModalOpen(false)}
        classNames="w-full xl:w-1/2"
        showButtons={false}
      >
        <InquiriesListFilters
          setValue={setFilterValue}
          filterRegister={filterRegister}
          handleFilterSubmit={handleFilterSubmit}
          isMutating={isMutating as number}
          search={search}
          setIsFilterModalOpen={setIsFilterModalOpen}
          watch={watch}
        />
      </Modal>
      <Pagination
        currentPage={
          allInquiries?.meta?.page ? allInquiries?.meta?.page - 1 : 0
        }
        totalPages={allInquiries?.meta?.pages ?? 1}
        onPageChange={(e) => {
          setParams((currentParams) => ({
            ...currentParams,
            offset: e.selected * (allInquiries?.meta?.limit ?? 10),
            limit: allInquiries?.meta?.limit ?? 10,
          }));
        }}
      />
      <Modal
        isOpen={isChangeStatusModalOpen}
        onClose={() => setIsChangeStatusModalOpen(false)}
        classNames="w-full xl:w-1/2"
        showButtons={false}
      >
        <div className="mb-4">
          <h3 className="text-xl font-semibold text-dark dark:text-white">
            Change Status - {currentInquiry?.full_name}
          </h3>
        </div>
        <ChangeStatusForm
          onSubmit={handleChangeStatus}
          onCancel={() => setIsChangeStatusModalOpen(false)}
          currentStatus={currentInquiry?.status ?? "pending"}

        />
      </Modal>
      {isDeleteModalOpen && (
        <ConfirmationModal
          isOpen={isDeleteModalOpen}
          title={`Deleting ${currentInquiry?.full_name}`}
          message={`Are you sure?`}
          variant={"default"}
          size={"lg"}
          confirmText={"Delete"}
          cancelText={"Cancel"}
          onConfirm={() => {
            deleteInquiry();
          }}
          onCancel={() => setIsDeleteModalOpen(false)}
        />
      )}
    </div>
  );
};

export default InquiriesTable;
