"use client";
import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
import ConfirmationModal from "@/components/ui/ConfirmationModal";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import Link from "next/link";
import useCustomerListPresenter from "./useCustomerListPresenter";

import { Building } from "@/components/Layouts/sidebar/icons";
import Modal from "@/components/ui/modal";
import Status from "@/components/ui/Status";
import TableSkeleton from "@/components/ui/TableSkeleton";
import { unixToDate } from "@/utils/shared";
import { toast } from "react-toastify";
import AssignToCompanyModalContent from "./AssignToCompanyModalContent";

const CustomersTable = () => {
  const {
    isPending,
    pathName,
    router,
    columns,
    allCustomers,
    isModalOpen,
    assignSelectedCompanies,
    selectedCompanies,
    currentCustomer,
    setSelectedCompanies,
    setIsModalOpen,
    onConfirmDelete,
    setCurrentCustomer,
    isAssignCompanyModalOpen,
    setIsAssignCompanyModalOpen,
  } = useCustomerListPresenter();
  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 Customer </Link>
      </button>
      <Table>
        <TableHeader>
          <TableRow>
            {columns.map((columns) => (
              <TableHead
                colSpan={100}
                className="text-start font-extrabold uppercase"
                key={columns}
              >
                {columns}
              </TableHead>
            ))}
          </TableRow>
        </TableHeader>
        {isPending && <TableSkeleton column={columns.length} />}
        <TableBody>
          {allCustomers.map((customer, index) => (
            <TableRow key={customer.id}>
              <TableCell colSpan={100}>{index + 1}</TableCell>
              <TableCell colSpan={100}>{customer.full_name}</TableCell>
              <TableCell colSpan={100}>{customer.email}</TableCell>
              <TableCell colSpan={100}>
                {unixToDate(customer.created_at)}
              </TableCell>

              <TableCell colSpan={100} className="uppercase">
                {customer.type}
              </TableCell>
              <TableCell colSpan={100}>
                <Status status={customer.status}>{customer.status}</Status>
              </TableCell>
              <TableCell colSpan={100}>
                {customer.companies?.length ? (
                  customer.companies.map((c) => (
                    <span key={c.id}>{c.name}, </span>
                  ))
                ) : (
                  <span>None</span>
                )}
              </TableCell>
              <TableCell colSpan={100} className="uppercase">
                {customer.role ?? "-"}
              </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={() => {
                      setCurrentCustomer(customer);
                      setIsModalOpen(true);
                    }}
                  >
                    <span className="sr-only">Delete Company </span>
                    <TrashIcon />
                  </button>
                  <button
                    className="hover:text-primary"
                    onClick={() =>
                      router.push(`${pathName}/edit/${customer.id}`)
                    }
                  >
                    <span className="sr-only">Edit Company </span>
                    <PencilSquareIcon />
                  </button>
                  <button
                    className="hover:text-green-dark"
                    onClick={() => {
                      setCurrentCustomer(customer);
                      setIsAssignCompanyModalOpen(true);
                    }}
                  >
                    <span className="sr-only">Assign To Company </span>
                    <Building />
                  </button>
                </div>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      <Modal
        onConfirm={() => {
          if (!selectedCompanies || !currentCustomer) {
            toast.error("Invalid credentials");
            return;
          }
          assignSelectedCompanies({
            credentials: selectedCompanies,
            id: currentCustomer?.id ?? "",
          });
        }}
        isOpen={isAssignCompanyModalOpen}
        onClose={() => setIsAssignCompanyModalOpen(false)}
      >
        <AssignToCompanyModalContent setCompanies={setSelectedCompanies} />
      </Modal>
      {isModalOpen && (
        <ConfirmationModal
          isOpen={isModalOpen}
          title={"Confirm"}
          message={"Are you sure?"}
          variant={"default"}
          size={"md"}
          confirmText={"Confirm"}
          cancelText={"Cancel"}
          onConfirm={() => {
            onConfirmDelete();
          }}
          onCancel={() => setIsModalOpen(false)}
        />
      )}
    </div>
  );
};

export default CustomersTable;
