/* eslint-disable @typescript-eslint/no-explicit-any */
// Converted to TypeScript (automated pass)
// Manual type improvements may still be required for complex/dynamic code.
import styles from "./invests.module.scss"
import AdminDashboardLayout from "@/layouts/admin_layout"
import PageIntro from "@/components/dashboard/PageIntro"
import { useEffect, useState } from "react"
import AdminTradingPlans from "@/components/admin/Admin-Plans/AdminTradingPlans"
import RealEstatePlans from "@/components/admin/Admin-Plans/RealEstatePlan"
// import ManageUsersActivePlans from "@/components/admin/Admin-Plans/ManageUsersActivePlans"

const PlanCardSkeleton = () => {
  return (
    <div className={styles.planSkeleton}>
      <div className={styles.planSkeleton__badge}></div>

      <div className={styles.planSkeleton__header}>
        <div className={styles.planSkeleton__title}></div>

        <div className={styles.planSkeleton__price}></div>

        <div className={styles.planSkeleton__minimum}></div>
      </div>

      <div className={styles.planSkeleton__details}>
        {[...Array(7)].map((_, index) => (
          <div
            key={index}
            className={styles.planSkeleton__row}
          >
            <span></span>
            <span></span>
          </div>
        ))}
      </div>

      <div className={styles.planSkeleton__button}></div>
    </div>
  );
};

const AdminPlanSkeleton = () => {
  return (
    <div className={styles.invests__skeleton}>
      {[...Array(4)].map((_, index) => (
        <PlanCardSkeleton key={index} />
      ))}
    </div>
  );
};

const TradingPlans = ({ plans, estatePlans }: any) => {
  const [toggleActive, setTogglActive] = useState(1)
  const [loading, setLoading] = useState(true)

  const toggleActiveState = (key: number) => {
    setTogglActive(key)
  }

  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 1000) // Simulate loading
    return () => clearTimeout(timer)
  }, [])

  return (
    <div className={styles["invests"]}>
      <PageIntro 
        title="Trading invests & Investments" 
        description="Manage trading invests and investment opportunities." 
      />

      <div className={styles["invests__tab"]}>
        <div
          onClick={() => toggleActiveState(1)}
          className={
            toggleActive === 1
              ? styles["invests__tab--item--active"]
              : styles["invests__tab--item"]
          }
        >
          Trading Plans
        </div>
      </div>

      <div className={styles["invests__content"]}>
        {loading ? (
          <AdminPlanSkeleton />
        ) : toggleActive === 1 ? (
          <AdminTradingPlans plans={plans?.data} />
        ) : toggleActive === 2 ? (
          <RealEstatePlans estates={estatePlans} />
        ) : null}
      </div>
    </div>
  )
}

TradingPlans.layout = (page: React.ReactNode) => (
  <AdminDashboardLayout title="Manage trading plans">{page}</AdminDashboardLayout>
)

export default TradingPlans