/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./trans-item.module.scss";
import { BsEye } from "react-icons/bs";
import { MdOutlineEditLocationAlt, MdDeleteForever } from "react-icons/md";
import { useState } from "react";
import DeleteModal from "../../modals/delete-modal";
import CreateAttendanceModal from "../../modals/create-attendance-modal";

interface TransactionProps {
  transaction: any;
}

const TransactionItem: React.FC<TransactionProps> = ({ transaction }) => {
  const { date, description, category, amount, type } = transaction;

  const [deleteModal, setDeleteModal] = useState(false);
  const [updateModal, setUpdateModal] = useState(false);

  const toggleDeleteModal = () => setDeleteModal((prev) => !prev);
  const toggleUpdateModal = () => setUpdateModal((prev) => !prev);

  return (
    <>
      {/* ✅ Delete Confirmation Modal */}
      {deleteModal && <DeleteModal deleteUrl="" closeModal={toggleDeleteModal} />}

      {/* ✅ Update Transaction Modal (using the same structure as CreateAttendanceModal for now) */}
      {updateModal && (
        <CreateAttendanceModal
          type="update"
          closeModal={toggleUpdateModal}
          attendance={transaction}
        />
      )}

      <div className={styles["trans__item"]}>
        <span>{date}</span>
        <span className={styles["trans__item--desc"]}>{description}</span>
        <span
          className={`${styles["trans__item--category"]} ${
            category === "Project"
              ? styles.project
              : category === "Regular"
              ? styles.regular
              : ""
          }`}
        >
          {category}
        </span>
        <span className={styles["trans__item--amount"]}>
          ₦{Number(amount).toLocaleString("en-US")}
        </span>
        <span
          className={`${styles["trans__item--type"]} ${
            type === "Credit" ? styles.credit : styles.debit
          }`}
        >
          {type}
        </span>
        <span className={styles["trans__item--actions"]}>
          <BsEye style={{ cursor: "pointer" }} size="1.2rem" color="#60A5FA" />
          <MdOutlineEditLocationAlt
            onClick={toggleUpdateModal}
            style={{ cursor: "pointer" }}
            size="1.2rem"
            color="#22C55E"
          />
          <MdDeleteForever
            onClick={toggleDeleteModal}
            style={{ cursor: "pointer" }}
            size="1.2rem"
            color="#EF4444"
          />
        </span>
      </div>
    </>
  );
};

export default TransactionItem;