/* eslint-disable @typescript-eslint/no-explicit-any */

import { useState } from "react"
import { router } from "@inertiajs/react"

import styles from "./admin-kyc.module.scss"

import AdminDashboardLayout from "@/layouts/admin_layout"

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

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

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

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

import {
  FaEye,
} from "react-icons/fa"

import { capitalizeFirstLetter } from "@/lib/utils/capitalise-first-letter"

type Status =
  | "pending"
  | "approved"
  | "rejected"

const AdminKYC = ({
  kycs,
  perPage: initialPerPage = 10,
}: any) => {
  const [activeTab, setActiveTab] =
    useState<
      "all" | Status
    >("all")

  const [selectedKyc, setSelectedKyc] =
    useState<any>(null)

  const [
    showApproveModal,
    setShowApproveModal,
  ] = useState(false)

  const [
    showRejectModal,
    setShowRejectModal,
  ] = useState(false)

  const [
    showPreviewModal,
    setShowPreviewModal,
  ] = useState(false)

  const [approving, setApproving] =
    useState(false)

  const [rejecting, setRejecting] =
    useState(false)

  const [
    rejectionReason,
    setRejectionReason,
  ] = useState("")

  const {
    handlePageChange,
  } = usePaginatedData(
    initialPerPage
  )

  const filteredKycs =
    activeTab === "all"
      ? kycs?.data || []
      : (
          kycs?.data || []
        ).filter(
          (item: any) =>
            item.status ===
            activeTab
        )

  const totalApplications =
    kycs?.data?.length || 0

  const pendingApplications =
    kycs?.data?.filter(
      (item: any) =>
        item.status ===
        "pending"
    ).length || 0

  const approvedApplications =
    kycs?.data?.filter(
      (item: any) =>
        item.status ===
        "approved"
    ).length || 0

  const rejectedApplications =
    kycs?.data?.filter(
      (item: any) =>
        item.status ===
        "rejected"
    ).length || 0

  const handleApprove = () => {
    if (!selectedKyc) return

    setApproving(true)

    router.post(
      `/admin/kyc/${selectedKyc.id}/approve`,
      {},
      {
        preserveScroll: true,

        onSuccess: () => {
          setShowApproveModal(false)

          setSelectedKyc(null)
        },

        onFinish: () => {
          setApproving(false)
        },
      }
    )
  }

  const handleReject = () => {
    if (!selectedKyc) return

    setRejecting(true)

    router.post(
      `/admin/kyc/${selectedKyc.id}/decline`,
      {
        decline_reason:
          rejectionReason,
      },
      {
        preserveScroll: true,

        onSuccess: () => {
          setShowRejectModal(false)

          setSelectedKyc(null)

          setRejectionReason("")
        },

        onFinish: () => {
          setRejecting(false)
        },
      }
    )
  }

  return (
    <div className={styles.kyc}>
      <PageIntro
        title="KYC Applications"
        description="Review, verify and manage customer identity verification requests."
      />

      {/* ===================================== */}
      {/* STATS */}
      {/* ===================================== */}

      <div className={styles.stats}>
        <div className={styles.statsCard}>
          <span>
            Total Applications
          </span>

          <h3>
            {totalApplications}
          </h3>
        </div>

        <div className={styles.statsCard}>
          <span>Pending</span>

          <h3>
            {pendingApplications}
          </h3>
        </div>

        <div className={styles.statsCard}>
          <span>Approved</span>

          <h3>
            {approvedApplications}
          </h3>
        </div>

        <div className={styles.statsCard}>
          <span>Rejected</span>

          <h3>
            {rejectedApplications}
          </h3>
        </div>
      </div>

      {/* ===================================== */}
      {/* FILTERS */}
      {/* ===================================== */}

      <div className={styles.tabs}>
        {[
          "all",
          "pending",
          "approved",
          "rejected",
        ].map((tab) => (
          <button
            key={tab}
            onClick={() =>
              setActiveTab(
                tab as any
              )
            }
            className={
              activeTab === tab
                ? styles.active
                : ""
            }
          >
            {capitalizeFirstLetter(
              tab
            )}
          </button>
        ))}
      </div>

      {/* ===================================== */}
      {/* TABLE */}
      {/* ===================================== */}

      <div
        className={
          styles.tableWrapper
        }
      >
        {filteredKycs.length >
        0 ? (
          <div
            className={
              styles.table
            }
          >
            <div
              className={
                styles.tableHeader
              }
            >
              <span>Name</span>

              <span>Email</span>

              <span>
                Document Type
              </span>

              <span>
                Documents
              </span>

              <span>Status</span>

              <span>
                Actions
              </span>
            </div>

            {filteredKycs.map(
              (kyc: any) => (
                <div
                  key={kyc.id}
                  className={
                    styles.row
                  }
                >
                  <span>
                    {
                      kyc?.user
                        ?.name
                    }
                  </span>

                  <span>
                    {
                      kyc?.user
                        ?.email
                    }
                  </span>

                  <span>
                    {capitalizeFirstLetter(
                      kyc.document_type
                    )}
                  </span>

                  <div
                    className={
                      styles.files
                    }
                  >
                    {kyc.document_path && (
                      <button
                        onClick={() => {
                          setSelectedKyc(
                            {
                              url: `/storage/${kyc.document_path}`,
                            }
                          )

                          setShowPreviewModal(
                            true
                          )
                        }}
                      >
                        <FaEye />
                        Document
                      </button>
                    )}

                    {kyc.passport_path && (
                      <button
                        onClick={() => {
                          setSelectedKyc(
                            {
                              url: `/storage/${kyc.passport_path}`,
                            }
                          )

                          setShowPreviewModal(
                            true
                          )
                        }}
                      >
                        <FaEye />
                        Passport
                      </button>
                    )}
                  </div>

                  <span
                    className={`${styles.status}
                    ${
                      styles[
                        kyc
                          .status
                      ]
                    }`}
                  >
                    {capitalizeFirstLetter(
                      kyc.status
                    )}
                  </span>

                  <div
                    className={
                      styles.actions
                    }
                  >
                    {kyc.status ===
                    "pending" ? (
                      <>
                        <button
                          className={
                            styles.approve
                          }
                          onClick={() => {
                            setSelectedKyc(
                              kyc
                            )

                            setShowApproveModal(
                              true
                            )
                          }}
                        >
                          Approve
                        </button>

                        <button
                          className={
                            styles.reject
                          }
                          onClick={() => {
                            setSelectedKyc(
                              kyc
                            )

                            setShowRejectModal(
                              true
                            )
                          }}
                        >
                          Reject
                        </button>
                      </>
                    ) : (
                      <span
                        className={
                          styles.processed
                        }
                      >
                        Processed
                      </span>
                    )}
                  </div>
                </div>
              )
            )}
          </div>
        ) : (
          <NoResults
            title="No KYC Applications"
            description="There are currently no KYC applications available for this filter."
          />
        )}
      </div>

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

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

      {/* ===================================== */}
      {/* APPROVE MODAL */}
      {/* ===================================== */}

      {showApproveModal &&
        selectedKyc && (
          <div
            className={
              styles.modalBackdrop
            }
          >
            <div
              className={
                styles.modalContent
              }
            >
              <span
                className={
                  styles.closeBtn
                }
                onClick={() =>
                  setShowApproveModal(
                    false
                  )
                }
              >
                ×
              </span>

              <h2>
                Approve KYC
              </h2>

              <p>
                You are about to
                approve this KYC
                application. The
                user's identity
                will be verified
                and access will be
                granted.
              </p>

              <button
                disabled={
                  approving
                }
                className={
                  styles.confirmBtn
                }
                onClick={
                  handleApprove
                }
              >
                {approving
                  ? "Approving..."
                  : "Confirm Approval"}
              </button>
            </div>
          </div>
        )}

      {/* ===================================== */}
      {/* REJECT MODAL */}
      {/* ===================================== */}

      {showRejectModal &&
        selectedKyc && (
          <div
            className={
              styles.modalBackdrop
            }
          >
            <div
              className={
                styles.modalContent
              }
            >
              <span
                className={
                  styles.closeBtn
                }
                onClick={() =>
                  setShowRejectModal(
                    false
                  )
                }
              >
                ×
              </span>

              <h2>
                Reject KYC
              </h2>

              <p>
                Please provide a
                reason for
                rejecting this
                application.
              </p>

              <textarea
                placeholder="Enter rejection reason..."
                value={
                  rejectionReason
                }
                onChange={(e) =>
                  setRejectionReason(
                    e.target.value
                  )
                }
              />

              <button
                disabled={
                  rejecting ||
                  !rejectionReason.trim()
                }
                className={
                  styles.rejectBtn
                }
                onClick={
                  handleReject
                }
              >
                {rejecting
                  ? "Rejecting..."
                  : "Reject Application"}
              </button>
            </div>
          </div>
        )}

      {/* ===================================== */}
      {/* DOCUMENT PREVIEW */}
      {/* ===================================== */}

      {showPreviewModal &&
        selectedKyc && (
          <div
            className={
              styles.modalBackdrop
            }
          >
            <div
              className={`${styles.modalContent}
              ${styles.previewModal}`}
            >
              <span
                className={
                  styles.closeBtn
                }
                onClick={() =>
                  setShowPreviewModal(
                    false
                  )
                }
              >
                ×
              </span>

              {selectedKyc.url.endsWith(
                ".pdf"
              ) ? (
                <iframe
                  src={
                    selectedKyc.url
                  }
                />
              ) : (
                <img
                  src={
                    selectedKyc.url
                  }
                  alt="Preview"
                />
              )}
            </div>
          </div>
        )}
    </div>
  )
}

AdminKYC.layout = (
  page: React.ReactNode
) => (
  <AdminDashboardLayout title="KYC Verification">
    {page}
  </AdminDashboardLayout>
)

export default AdminKYC