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

import { useEffect } from "react"
import { router, useForm } from "@inertiajs/react"

import { BsSearch } from "react-icons/bs"

import styles from "./users.module.scss"

import AdminDashboardLayout from "@/layouts/admin_layout"

import PageIntro from "@/components/dashboard/PageIntro"
import NoResults from "@/components/dashboard/NoResults"

import UserTableRow from "@/components/admin/UserTableRow"

import Pagination from "@/components/shared/Pagination"
import ResultsPerPage from "@/components/shared/ResultsPerPage"

import { usePaginatedData } from "@/hooks/use-paginated-data"

interface Props {
  users: any
  filters?: {
    search?: string
  }
  perPage?: number
}

const Users = ({
  users,
  filters,
  perPage: initialPerPage = 20,
}: Props) => {
  const { data, setData } = useForm({
    searchTerm: filters?.search ?? "",
  })

  const {
    perPage,
    loading: isLoading,
    setLoading,
    handlePageChange,
    handlePerPageChange,
  } = usePaginatedData(initialPerPage)

  /* ==========================================
     INITIAL SKELETON
  ========================================== */

  useEffect(() => {
    setLoading(true)

    const timer = setTimeout(() => {
      setLoading(false)
    }, 800)

    return () => clearTimeout(timer)
  }, [])

  /* ==========================================
     LIVE SEARCH
  ========================================== */

  useEffect(() => {
    const timer = setTimeout(() => {
      setLoading(true)

      router.get(
        route("admin.users.index"),
        {
          search: data.searchTerm,
          perPage,
        },
        {
          preserveState: true,
          preserveScroll: true,
          replace: true,

          onFinish: () => {
            setLoading(false)
          },
        }
      )
    }, 400)

    return () => clearTimeout(timer)
  }, [data.searchTerm])

  /* ==========================================
     RESULTS PER PAGE
  ========================================== */

  useEffect(() => {
    router.get(
      route("admin.users.index"),
      {
        search: data.searchTerm,
        perPage,
      },
      {
        preserveState: true,
        preserveScroll: true,
        replace: true,
      }
    )
  }, [perPage])

  /* ==========================================
     PREMIUM TABLE SKELETON
  ========================================== */

  const TableSkeleton = () => (
    <div className={styles["users__children"]}>
      {[...Array(8)].map((_, row) => (
        <div
          key={row}
          className={styles["skeleton__row"]}
        >
          {[...Array(6)].map((__, col) => (
            <div
              key={col}
              className={styles["skeleton__cell"]}
            />
          ))}
        </div>
      ))}
    </div>
  )

  return (
    <>
      <div className={styles.users}>
        <PageIntro
          title="Manage Users"
          description="View, search and manage every registered user across the TraderPlus platform."
        />

        {/* ==========================================
            SEARCH
        ========================================== */}

        <div className={styles["users__header"]}>
          <div className={styles["users__header--form"]}>
            <div
              className={
                styles["users__header--form--left"]
              }
            >
              <BsSearch
                size="1rem"
                color="#8f98a8"
              />

              <input
                type="text"
                placeholder="Search by name, email or phone..."
                value={data.searchTerm}
                onChange={(e) =>
                  setData(
                    "searchTerm",
                    e.target.value
                  )
                }
              />
            </div>
          </div>
        </div>

        {/* ==========================================
            RESULTS PER PAGE
        ========================================== */}

        <ResultsPerPage
          current={perPage}
          options={[10, 20, 50, 100]}
          onChange={handlePerPageChange}
        />
                {/* ==========================================
            TABLE
        ========================================== */}

        <div className={styles["users__content"]}>
          <div className={styles["users__table-wrapper"]}>

            {/* TABLE HEADER */}

            <div className={styles["users__table"]}>
              <span>Client Name</span>
              <span>Email Address</span>
              <span>Wallet Balance</span>
              <span>Date Joined</span>
              <span>Status</span>
              <span>Action</span>
            </div>

            {/* TABLE BODY */}

            <div className={styles["users__children"]}>
              {isLoading ? (
                <TableSkeleton />
              ) : users?.data?.length === 0 ? (
                <NoResults
                  title={
                    data.searchTerm
                      ? "No Users Found"
                      : "No Users"
                  }
                  description={
                    data.searchTerm
                      ? `No users matched "${data.searchTerm}".`
                      : "There are currently no registered users."
                  }
                />
              ) : (
                users.data.map((user: any) => (
                  <UserTableRow
                    key={user.id}
                    user={user}
                  />
                ))
              )}
            </div>

          </div>
        </div>

        {/* ==========================================
            PAGINATION
        ========================================== */}

        <div className={styles.pagination}>
          {users?.data?.length > 0 &&
            users?.links?.length > 0 && (
              <Pagination
                links={users.links}
                onChange={handlePageChange}
              />
            )}
        </div>

      </div>
    </>
  )
}

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

export default Users