"use client";

import { PencilSquareIcon, TrashIcon, UserSettingIcon } from "@/assets/icons";
import ConfirmationModal from "@/components/ui/ConfirmationModal";
import Modal from "@/components/ui/modal";
import Status from "@/components/ui/Status";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import TableSkeleton from "@/components/ui/TableSkeleton";
import { AdminStatus } from "@/constants/enums";
import Link from "next/link";
import ChangeStatusModalContent from "./ChangeStatusModalContent";
import { useAdminsPresenter } from "./useAdminsPresenter";

const AdminsTable = () => {
  const {
    allUsers,
    router,
    isPending,
    onConfirmDelete,
    isModalOpen,
    setIsModalOpen,
    isChangeStatusModalOpen,
    setIsChangeStatusModalOpen,
    columns,
    setCurrentUser,
    pathName,
    changeStatus,
    currentUser,
    setStatus,
    status,
  } = useAdminsPresenter();

  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">
      <button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
        <Link href={`${pathName}/create`}>Create Admin</Link>
      </button>
      <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>
          {allUsers.map((item, index) => {
            return (
              <TableRow
                key={item.id}
                className="odd:bg-gray-2 dark:odd:bg-gray-7"
              >
                <TableCell className="text-start" colSpan={100}>
                  {index + 1}
                </TableCell>
                <TableCell className="text-start" colSpan={100}>
                  {item.full_name}
                </TableCell>
                <TableCell className="text-start" colSpan={100}>
                  {item.email}
                </TableCell>
                <TableCell className="text-start" colSpan={100}>
                  {item.role}
                </TableCell>
                <TableCell className="text-start" colSpan={100}>
                  {item.username}
                </TableCell>
                <TableCell className="text-start" colSpan={100}>
                  <Status status={item.status ?? ""}>{item.status}</Status>
                </TableCell>

                <TableCell className="text-start xl:pr-7.5">
                  <div className="flex items-center justify-start gap-x-3.5">
                    <button
                      className="hover:text-red-500"
                      onClick={() => {
                        setCurrentUser(item);
                        setIsModalOpen(true);
                      }}
                    >
                      <span className="sr-only">Delete Admin </span>
                      <TrashIcon />
                    </button>
                    <button
                      className="hover:text-yellow-dark"
                      onClick={() => {
                        setCurrentUser(item);
                        setIsChangeStatusModalOpen(true);
                      }}
                    >
                      <span className="sr-only">Change Admin Status</span>
                      <UserSettingIcon />
                    </button>
                    <button
                      className="hover:text-primary"
                      onClick={() => router.push(`/admins/edit/${item.id}`)}
                    >
                      <span className="sr-only">Edit Admin </span>
                      <PencilSquareIcon />
                    </button>
                  </div>
                </TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
      <Modal
        isOpen={isChangeStatusModalOpen}
        onClose={() => setIsChangeStatusModalOpen(false)}
        onConfirm={() => {
          changeStatus({ id: currentUser?.id!, credentials: { status } });
        }}
      >
        <ChangeStatusModalContent
          status={currentUser?.status as AdminStatus}
          setStatus={setStatus}
        />
      </Modal>
      {isModalOpen && (
        <ConfirmationModal
          isOpen={isModalOpen}
          title={"Confirm"}
          message={"Are you sure?"}
          variant={"warning"}
          size={"md"}
          confirmText={"Confirm"}
          cancelText={"Cancel"}
          onConfirm={() => {
            onConfirmDelete();
          }}
          onCancel={() => setIsModalOpen(false)}
        />
      )}
    </div>
  );
};

export default AdminsTable;
