/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */
"use client"

import { useEffect } from "react"
import styles from "./users-invest-plans.module.scss"
import UserInvestmentItem from "../UserInvestmentItem"
import NoResults from "@/components/dashboard/NoResults"
import Pagination from "@/components/shared/Pagination"
import { usePaginatedData } from "@/hooks/use-paginated-data"


interface UsersInvestmentPlansProps {
  plans: any
}

const UsersInvestmentPlans: React.FC<UsersInvestmentPlansProps> = ({ plans }) => {

  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 3000) // simulate 3s loading
    return () => clearTimeout(timer)
  }, [])

  const hasPlans = Array.isArray(plans?.data) && plans?.data?.length > 0;

     const {
      loading: isLoading,
      setLoading,
      handlePageChange,
    } = usePaginatedData(10);

  if (isLoading) {
    // Show skeleton
    return (
      <div className={styles["users__investments"]}>
        <div className={styles["users__investments__scroll"]}>
          <div className={styles["skeleton__row"]}>
            {Array.from({ length: 6 }).map((_, i) => (
              <div key={i} className={styles["skeleton__cell"]}></div>
            ))}
          </div>
          {Array.from({ length: 5 }).map((_, i) => (
            <div key={i} className={styles["skeleton__row"]}>
              {Array.from({ length: 6 }).map((_, j) => (
                <div key={j} className={styles["skeleton__cell"]}></div>
              ))}
            </div>
          ))}
        </div>
      </div>
    )
  }

  return (
    <div className={styles["users__investments"]}>
      <div className={styles["users__investments__scroll"]}>
        {/* Table grid wrapper */}
        <div className={styles["users__investments__grid"]}>
          {/* Table header */}
          <div className={styles["users__investments__header"]}>
            <span>Client</span>
            <span>Package</span>
            <span>Capital</span>
            <span>Returns</span>
            <span>Start Date</span>
            <span>End Date</span>
            <span>Status</span>
            <span>Actions</span>
          </div>

          {/* Table body */}
          {!hasPlans ? (
            <NoResults
              title="No Users Investments"
              description="Oops! Users are yet to purchase an investment package."
            />
          ) : (
            <div className={styles["users__investments__body"]}>
              {plans?.data?.map((plan: any) => (
                <UserInvestmentItem key={plan.id} plan={plan} />
              ))}
            </div>
          )}
        </div>
      </div>
       <div className={styles["attend__pagination"]}>
            {plans?.data?.length > 0 && plans?.links?.length > 0 && (
              <Pagination links={plans?.links} onChange={handlePageChange} />
            )}
        </div>
    </div>
  )
}

export default UsersInvestmentPlans