/* eslint-disable @typescript-eslint/no-explicit-any */
"use client"

import { useState } from "react"
import styles from "./invest-item.module.scss"
import DeleteConfirmationModal from "../Modals/DeleteConfirmationModal"
import ProcessInvestmentModal from "../Modals/ProcessInvestmentPlan"
import UpdateInvestmentModal from "../Modals/UpdateUserInvestmentModal"
import { formatMoneyComplete } from "@/lib/utils/format-money"
import { capitalizeFirstLetter } from "@/lib/utils/capitalise-first-letter"
import { formatDate } from "@/lib/utils/format-date"

import currencyData from "../../../../data/countries-currencies.json";
import { usePage } from "@inertiajs/react"

const UserInvestmentItem = ({ plan }: any) => {
  const { user, plan: boughtPlan, amount_invested, expected_return, status } = plan

  const { appSettings } =
      usePage().props as unknown as any
  
    const currency = currencyData.find(
      (item) => item.currency_code === appSettings?.base_currency
    )

  const [showDelete, setShowDelete] = useState(false)
  const [showProcess, setShowProcess] = useState(false)
  const [showUpdate, setShowUpdate] = useState(false)

  const toggleDelete = () => setShowDelete((prev) => !prev)
  const toggleProcess = () => setShowProcess((prev) => !prev)
  const toggleUpdate = () => setShowUpdate((prev) => !prev)

  console.log(plan)

  return (
    <>
      {showDelete && (
        <DeleteConfirmationModal
          closeModal={toggleDelete}
          deleteUrl={""}
          title="Delete User Plan"
          description="You are about to delete this user investment plan. This action cannot be undone. Please confirm before proceeding."
        />
      )}

      {showProcess && <ProcessInvestmentModal closeModal={toggleProcess} plan={plan} />}

      {showUpdate && <UpdateInvestmentModal closeModal={toggleUpdate} plan={plan} />}

      <div className={styles["invest__item"]}>
        <span>{user?.name}</span>
        <span>{boughtPlan?.name}</span>
        <span>{currency?.currency_symbol}{formatMoneyComplete(amount_invested)}</span>
        <span>{currency?.currency_symbol}{formatMoneyComplete(expected_return)}</span>
        <span>{ formatDate(plan?.start_date) }</span>
        <span>{ formatDate(plan?.end_date) }</span>
         <span
          className={`${styles.cell} ${
            status === "active"
              ? styles["port--success"]: status === "completed" ? styles["port--progress"]
              : styles["port--failed"]
          }`}
        >
          { capitalizeFirstLetter(status) }
        </span>
        <span className={styles["invest__item--actions"]}>
          <span onClick={toggleProcess} title="Process">
            Options
          </span>
        </span>
      </div>
    </>
  )
}

export default UserInvestmentItem