/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./deposits.module.scss"
import AdminDashboardLayout from "@/layouts/admin_layout"
import PageIntro from "@/components/dashboard/PageIntro"
// import { BsSearch } from "react-icons/bs"
import { router } from "@inertiajs/react"
import NoResults from "@/components/dashboard/NoResults"
import { useState, useEffect } from "react"
import ConfirmActionOnUser from "@/components/admin/Modals/ConfirmActionOnUserModal"
import { formatDate } from "@/lib/utils/format-date"
import { truncateEmail } from "@/lib/utils/truncate-email"
import { usePaginatedData } from "@/hooks/use-paginated-data"
import Pagination from "@/components/shared/Pagination"
import ResultsPerPage from "@/components/shared/ResultsPerPage"
import {usePage} from "@inertiajs/react"

import ProofPreviewModal from "@/components/dashboard/Modals/ProofPreviewModal"

import currencyData from "../../../../data/countries-currencies.json";
import { formatMoneyComplete } from '@/lib/utils/format-money'

const Deposits = ({ deposits, perPage: initialPerPage = 10 }: any) => {
  // const { data, setData } = useForm({ searchTerm: "" })
  const { appSettings } = usePage().props as any

  const currency = currencyData.find(
    (item) => item.currency_code === appSettings?.base_currency
  )

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

  const [proofModal, setProofModal] = useState(false);

  const [selectedProof, setSelectedProof] =
  useState<string>("");

  const openProofModal = (proof: string) => {
    setSelectedProof(proof);
    setProofModal(true);
  };

  const closeProofModal = () => {
    setProofModal(false);
    setSelectedProof("");
  };

  const [deleteDeposit, setDeleteDeposit] = useState(false)
  const [processDeposit, setProcessDeposit] = useState(false)
  const [selectedDeposit, setSelectedDeposit] = useState<any>({})

  useEffect(() => {
    // Show skeleton for 2s
    setLoading(true)
    const timer = setTimeout(() => setLoading(false), 2000)
    return () => clearTimeout(timer)
  }, [])

  // const toggleDepositDeleteModal = (deposit: any) => {
  //   setDeleteDeposit(!deleteDeposit)
  //   setSelectedDeposit(deposit)
  // }

  const toggleProcessDeposit = (deposit: any) => {
    setProcessDeposit(!processDeposit)
    setSelectedDeposit(deposit)
  }

  const handleProcessDeposit = () => {
    setLoading(true)
    router.post(
      `/admin/deposits/confirm/${selectedDeposit?.id}`,
      {},
      {
        onSuccess: () => setProcessDeposit(false),
        onFinish: () => setLoading(false),
        onError: (errors) => console.error(errors),
      }
    )
  }

  // Skeleton mimicking table structure
  const TableSkeleton = () => (
    <div className={styles["deposits__children"]}>
      {[...Array(5)].map((_, i) => (
        <div key={i} className={styles["skeleton__row"]}>
          {[...Array(6)].map((_, j) => (
            <div key={j} className={styles["skeleton__cell"]} />
          ))}
        </div>
      ))}
    </div>
  )

  return (
    <>
      {/* Delete Deposit Modal */}
      {deleteDeposit && (
        <ConfirmActionOnUser
          title="Process Deposit"
          description="You are about to process the deposit of this user. Once confirmed, the status will become successful and funds will be credited."
          closeModal={toggleProcessDeposit}
          action={handleProcessDeposit}
          type="process"
        />
      )}

      {/* Process Deposit Modal */}
      {processDeposit && (
        <ConfirmActionOnUser
          title="Process Deposit"
          description={`You are about to process the deposit of this user. Once confirmed, the status will become successful and funds will be credited.`}
          closeModal={toggleProcessDeposit}
          action={handleProcessDeposit}
          type={"process"}
        />
      )}

      {proofModal && (
        <ProofPreviewModal
          proof={selectedProof}
          onClose={closeProofModal}
        />
      )}

      <div className={styles.deposits}>
        <PageIntro
          title="Manage Deposits"
          description="View and manage all your users' deposits seamlessly."
        />

        {/* <div className={styles["deposits__header"]}>
          <form
            className={styles["deposits__header--form"]}
            onSubmit={(e) => e.preventDefault()}
          >
            <div className={styles["deposits__header--form--left"]}>
              <BsSearch size="1.1rem" color="#FFF" />
              <input
                type="text"
                placeholder="Search deposits by email"
                value={data.searchTerm}
                onChange={(e) => setData("searchTerm", e.target.value)}
              />
            </div>
            <button type="submit">Search</button>
          </form>
        </div> */}

        <div>
          <ResultsPerPage
            current={perPage}
            options={[1, 5, 10, 25, 50]}
            onChange={handlePerPageChange}
          />
        </div>

        {/* Table Wrapper */}
        <div className={styles["deposits__content"]}>
          <div className={styles["deposits__table-wrapper"]}>
            {/* Table Header */}
            <div className={styles["deposits__table"]}>
              <span>Client Name</span>
              <span>Email Address</span>
              <span>Amount</span>
              <span>Proof</span>
              <span>Status</span>
              <span>Created At</span>
              <span>Action</span>
            </div>

            {/* Table Body */}
            <div className={styles["deposits__children"]}>
              {isLoading ? (
                <TableSkeleton />
              ) : deposits?.data?.length === 0 ? (
                <NoResults
                  title="No Deposits Record"
                  description="Oops! It seems like there are no deposit records at the moment."
                />
              ) : (
                deposits?.data?.map((deposit: any) => {
                  // Ensure user info is always present
                  const userMeta = deposit.meta?.user_name
                    ? deposit.meta
                    : {
                        user_name: "Admin / System",
                        user_email: "N/A",
                        user_phone: null,
                      }

                  return (
                    <div
                      key={deposit.id}
                      className={styles["deposits__children--item"]}
                    >
                      <span>{userMeta.user_name}</span>
                      <span>
                        {userMeta.user_email
                          ? truncateEmail(userMeta.user_email)
                          : "N/A"}
                      </span>
                      <span>
                        {currency?.currency_symbol}{formatMoneyComplete(deposit.amount)}
                      </span>
                     <span>
                      {deposit.proof ? (
                        <button
                          className={styles.viewProofBtn}
                          onClick={() =>
                            openProofModal(deposit.proof)
                          }
                        >
                          See Proof
                        </button>
                      ) : (
                        <button
                          type="button"
                          className={styles.noProofBtn}
                          disabled
                        >
                          No Proof
                        </button>
                      )}
                    </span>
                      <span
                        className={
                          deposit.status === "success"
                            ? styles[
                                "deposits__children--item--processed"
                              ]
                            : styles["deposits__children--item--pending"]
                        }
                      >
                        {deposit.status === "success" ? "Processed" : "Pending"}
                      </span>
                      <span>{formatDate(deposit.created_at)}</span>
                     <span className={styles["deposits__children--item--actions"]}>
                      {deposit.status === "pending" ? (
                        <button
                          onClick={() => toggleProcessDeposit(deposit)}
                          className={styles["actionButtonProcess"]}
                        >
                          Process
                        </button>
                      ) : (
                        <button
                          disabled
                          className={styles["actionButtonProcessed"]}
                        >
                          Processed
                        </button>
                      )}
                    </span>
                    </div>
                  )
                })
              )}
            </div>
          </div>
        </div>

        {/* Pagination */}
        <div className={styles["attend__pagination"]}>
          {deposits?.data?.length > 0 && deposits?.links?.length > 0 && (
            <Pagination links={deposits.links} onChange={handlePageChange} />
          )}
        </div>
      </div>
    </>
  )
}

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

export default Deposits