import { Add, Edit, Trash } from "iconsax-react";
import { FC, useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { toast } from "../../../components/Toast";
import Button from "../../../components/Button";
import DeleteNameConfirmModal from "../../../components/DeleteNameConfirmModal";
import PageLoading from "../../../components/PageLoading";
import Td from "../../../components/Td";
import { Pages } from "../../../config/Pages";
import { ErrorType } from "../../../helpers/types";
import { useDeleteWorkspace, useGetWorkspaces } from "./hooks/useWorkspaceData";
import { WorkspaceItemType } from "./types/WorkspaceTypes";

const WorkspaceList: FC = () => {
  const { t } = useTranslation("global");
  const getWorkspaces = useGetWorkspaces();
  const deleteWorkspace = useDeleteWorkspace();
  const [deleteTarget, setDeleteTarget] = useState<WorkspaceItemType | null>(null);

  const workspaces: WorkspaceItemType[] = getWorkspaces.data?.data?.workspaces ?? getWorkspaces.data?.data ?? [];

  const handleConfirmDelete = () => {
    if (!deleteTarget) return;

    deleteWorkspace.mutate(deleteTarget.id, {
      onSuccess: () => {
        toast(t("taskmanager.workspace_deleted"), "success");
        setDeleteTarget(null);
      },
      onError: (error: ErrorType) => {
        toast(error.response?.data?.error.message[0], "error");
      },
    });
  };

  return (
    <div className="mt-4">
      <div className="flex w-full justify-between items-center">
        <div>{t("taskmanager.workspace_list")}</div>
        <Link to={Pages.taskmanager.createWorkspace}>
          <Button className="px-5">
            <div className="flex gap-2">
              <Add
                className="size-5"
                color="#fff"
              />
              <div>{t("taskmanager.new_workspace")}</div>
            </div>
          </Button>
        </Link>
      </div>

      {getWorkspaces.isPending ? (
        <PageLoading />
      ) : (
        <div className="relative overflow-x-auto rounded-3xl mt-9 w-full">
          <table className="w-full text-sm">
            <thead className="thead">
              <tr>
                <Td text={t("taskmanager.workspacename")} />
                <Td text={t("taskmanager.workspace_description")} />
                <Td text={t("taskmanager.workspace_status")} />
                <Td text={t("taskmanager.projects")} />
                <Td text="" />
              </tr>
            </thead>
            <tbody>
              {workspaces.map((item) => (
                <tr
                  key={item.id}
                  className="tr"
                >
                  <Td text="">
                    <div className="flex items-center gap-3">
                      <div
                        className="size-4 rounded-full shrink-0"
                        style={{ backgroundColor: item.color }}
                      />
                      {item.name}
                    </div>
                  </Td>
                  <Td text={item.description ?? ""} />
                  <Td text={item.isActive ? t("slider.active") : t("slider.inactive")} />
                  <Td text="">
                    <Link to={Pages.taskmanager.projectList + item.id}>
                      <Button
                        label="مدیریت پروژه ها"
                        className="bg-blue-400 w-fit px-3"
                      />
                    </Link>
                  </Td>
                  <Td text="">
                    <div className="flex items-center gap-2">
                      <Link to={Pages.taskmanager.updateWorkspace + item.id}>
                        <Edit
                          size={20}
                          color="#8C90A3"
                        />
                      </Link>
                      <Trash
                        onClick={() => setDeleteTarget(item)}
                        color="#888"
                        size={20}
                        className="cursor-pointer"
                      />
                    </div>
                  </Td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      <DeleteNameConfirmModal
        isOpen={!!deleteTarget}
        close={() => setDeleteTarget(null)}
        onConfirm={handleConfirmDelete}
        isLoading={deleteWorkspace.isPending}
        itemName={deleteTarget?.name ?? ""}
      />
    </div>
  );
};

export default WorkspaceList;
