import { useState, useEffect } from "react"
import { usePage } from "@inertiajs/react"
import { MdDeleteForever, MdModeEdit } from "react-icons/md"

import styles from "./estate-item.module.scss"
import EstatePortfolioSummary from "../../Modals/EstatePortfolioSummary"
import DeleteConfirmationModal from "@/components/admin/Modals/DeleteConfirmationModal"

interface EstatePortfolioItemProps {
  portfolio: {
    estateId: string
    units?: number
    amount: number
    roi?: number
    duration: string
    status: string
  }
}

const EstatePortfolioItem = ({ portfolio }: EstatePortfolioItemProps) => {
  const { estateId, amount, duration, status } = portfolio

  const [detailsModal, setDetailsModal] = useState(false)
  const [deleteModal, setDeleteModal] = useState(false)
  const [isAdmin, setIsAdmin] = useState(false)

  // ✅ Use Inertia's usePage() instead of router.page.url
  const { url } = usePage()
  const userId = url?.split("/")[3]

  useEffect(() => {
    if (url?.startsWith(`/admin/users/${userId}`)) {
      setIsAdmin(true)
    } else if (url === "/dashboard/opportunities") {
      setIsAdmin(false)
    }
  }, [url, userId])

  const toggleDetailsModal = () => setDetailsModal((prev) => !prev)
  const toggleDeleteModal = () => setDeleteModal((prev) => !prev)

  return (
    <>
      {detailsModal && (
        <EstatePortfolioSummary
          handleModalClose={toggleDetailsModal}
          portfolio={portfolio}
        />
      )}

      {deleteModal && (
        <DeleteConfirmationModal
          closeModal={toggleDeleteModal}
          handleDelete={() => {
            // TODO: Replace with actual delete logic (API or Inertia request)
            alert("User plan deleted successfully.")
            toggleDeleteModal()
          } }
          title="Delete User Plan"
          description="You are about to delete a user's active real estate plan. It will no longer be available when they log in to the dashboard. Be sure before confirming." id={undefined}        />
      )}

      <div
        onClick={!isAdmin ? toggleDetailsModal : undefined}
        className={styles["port"]}
      >
        <span>{estateId}</span>
        <span>${Number(amount).toLocaleString("en-US")}</span>
        <span>{duration}</span>

        <span
          className={
            status === "completed"
              ? styles["port--success"]
              : styles["port--failed"]
          }
        >
          {status === "completed" ? "Completed" : "On-going"}
        </span>

        {isAdmin && (
          <div className={styles["port__actions"]}>
            <MdModeEdit
              size="1.3rem"
              color="#2EAB5B"
              cursor="pointer"
              onClick={() => alert("Clicked Edit Plan")}
            />
            <MdDeleteForever
              size="1.3rem"
              color="#721C23"
              cursor="pointer"
              onClick={toggleDeleteModal}
            />
          </div>
        )}
      </div>
    </>
  )
}

export default EstatePortfolioItem