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

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

import UserDashboardLayout from "@/layouts/user_dashboard_layout"
import PageIntro from "@/components/dashboard/PageIntro"

import { router } from "@inertiajs/react"

import { useState } from "react"

import {
  FaFileImage,
  FaFilePdf,
  FaClock,
  FaCheckCircle,
  FaTimesCircle,
  FaShieldAlt,
} from "react-icons/fa"

import { toast } from "react-hot-toast"

const KYCVerification = ({ kyc }: any) => {
  const kycStatus =
    kyc?.status || "not_started"

  const isPending =
    kycStatus === "pending"

  const isApproved =
    kycStatus === "approved"

  const isRejected =
    kycStatus === "rejected"

  const canSubmit =
    !isPending && !isApproved

  const [documentType, setDocumentType] =
    useState("")

  const [idFile, setIdFile] =
    useState<File | null>(null)

  const [passportFile, setPassportFile] =
    useState<File | null>(null)

  const [idProgress, setIdProgress] =
    useState(0)

  const [
    passportProgress,
    setPassportProgress,
  ] = useState(0)

  const [submitting, setSubmitting] =
    useState(false)

  const simulateUpload = (
    setProgress: (
      value: number
    ) => void
  ) => {
    let value = 0

    const interval = setInterval(() => {
      value += 10

      setProgress(value)

      if (value >= 100) {
        clearInterval(interval)
      }
    }, 150)
  }

  const handleFileChange = (
    file: File,
    setter: (
      file: File
    ) => void,
    setProgress: (
      value: number
    ) => void
  ) => {
    setter(file)

    setProgress(0)

    simulateUpload(setProgress)
  }

  const renderPreview = (
    file: File
  ) => {
    const isPdf =
      file.type.includes("pdf")

    const url =
      URL.createObjectURL(file)

    return (
      <div className={styles.preview}>
        <div
          className={styles.previewIcon}
        >
          {isPdf ? (
            <FaFilePdf />
          ) : (
            <FaFileImage />
          )}
        </div>

        {isPdf ? (
          <span>{file.name}</span>
        ) : (
          <img
            src={url}
            alt="preview"
          />
        )}
      </div>
    )
  }

  const handleSubmit = () => {
    if (
      !documentType ||
      !idFile ||
      !passportFile
    ) {
      toast.error(
        "Please complete all required fields."
      )

      return
    }

    setSubmitting(true)

    const formData =
      new FormData()

    formData.append(
      "document_type",
      documentType
    )

    formData.append(
      "document",
      idFile
    )

    formData.append(
      "passport",
      passportFile
    )

    router.post(
      "/kyc/submit",
      formData,
      {
        preserveScroll: true,

        onSuccess: () => {
          toast.success(
            "KYC submitted successfully. Your documents are now under review."
          )
        },

        onError: () => {
          toast.error(
            "Failed to submit KYC."
          )
        },

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

  return (
    <div className={styles.kyc}>
      <PageIntro
        title="Identity Verification"
        description="Verify your identity to unlock withdrawals and full platform access."
      />

      <div className={styles.kyc__content}>
        {/* STATUS CARD */}

        <div
          className={`${styles.statusCard}
          ${
            isApproved
              ? styles.approved
              : isPending
              ? styles.pending
              : isRejected
              ? styles.rejected
              : styles.notStarted
          }`}
        >
          <div
            className={
              styles.statusCard__icon
            }
          >
            {isApproved ? (
              <FaCheckCircle />
            ) : isPending ? (
              <FaClock />
            ) : isRejected ? (
              <FaTimesCircle />
            ) : (
              <FaShieldAlt />
            )}
          </div>

          <div
            className={
              styles.statusCard__content
            }
          >
            <h4>
              {isApproved
                ? "Identity Verified"
                : isPending
                ? "Verification Under Review"
                : isRejected
                ? "Verification Rejected"
                : "Verification Required"}
            </h4>

            <p>
              {isApproved
                ? "Your identity has been verified successfully and your account now has access to all platform features."
                : isPending
                ? "Your submitted documents are currently being reviewed by our compliance team."
                : isRejected
                ? "Your previous submission was rejected. Please upload valid documents and try again."
                : "Submit a government-issued identity document and passport photograph to complete verification."}
            </p>
          </div>
        </div>

        {/* PENDING */}

        {isPending && (
          <div
            className={`${styles.infoCard} ${styles.pendingCard}`}
          >
            <FaClock />

            <div>
              <h4>
                Verification Submitted
              </h4>

              <p>
                Your KYC application has
                been received successfully
                and is currently under
                review. Verification
                usually takes between a
                few minutes and 24 hours.
              </p>
            </div>
          </div>
        )}

        {/* APPROVED */}

        {isApproved && (
          <div
            className={`${styles.infoCard} ${styles.successCard}`}
          >
            <FaCheckCircle />

            <div>
              <h4>
                Verification Complete
              </h4>

              <p>
                Your identity has been
                verified successfully.
                No further action is
                required from you.
              </p>
            </div>
          </div>
        )}

        {/* REJECTED */}

        {isRejected && (
          <div
            className={`${styles.infoCard} ${styles.dangerCard}`}
          >
            <FaTimesCircle />

            <div>
              <h4>
                Verification Rejected
              </h4>

              <p>
                Your previous documents
                could not be verified.
                Please upload clearer and
                valid documents before
                submitting again.
              </p>
            </div>
          </div>
        )}

        {/* FORM */}

        {canSubmit && (
          <div className={styles.form}>
            <div className={styles.step}>
              <div
                className={
                  styles.step__number
                }
              >
                1
              </div>

              <h5>
                Select Identity
                Document
              </h5>
            </div>

            <div
              className={
                styles.formGroup
              }
            >
              <label>
                Document Type
              </label>

              <select
                value={documentType}
                onChange={(e) =>
                  setDocumentType(
                    e.target.value
                  )
                }
                disabled={submitting}
              >
                <option value="">
                  Select Document
                </option>

                <option value="passport">
                  International Passport
                </option>

                <option value="national_id">
                  National ID
                </option>

                <option value="drivers_license">
                  Driver's License
                </option>
              </select>
            </div>

            <div className={styles.step}>
              <div
                className={
                  styles.step__number
                }
              >
                2
              </div>

              <h5>
                Upload Identity
                Document
              </h5>
            </div>

            <div
              className={
                styles.uploadCard
              }
            >
              <label>
                Government Issued
                Identity Document
              </label>

              <input
                type="file"
                accept="image/*,application/pdf"
                disabled={submitting}
                onChange={(e) =>
                  e.target.files &&
                  handleFileChange(
                    e.target.files[0],
                    setIdFile,
                    setIdProgress
                  )
                }
              />

              {idFile &&
                renderPreview(idFile)}

              {idProgress > 0 && (
                <div
                  className={
                    styles.progress
                  }
                >
                  <div
                    style={{
                      width: `${idProgress}%`,
                    }}
                  />
                </div>
              )}
            </div>

            <div className={styles.step}>
              <div
                className={
                  styles.step__number
                }
              >
                3
              </div>

              <h5>
                Upload Passport
                Photograph
              </h5>
            </div>

            <div
              className={
                styles.uploadCard
              }
            >
              <label>
                Recent Passport
                Photograph
              </label>

              <input
                type="file"
                accept="image/*"
                disabled={submitting}
                onChange={(e) =>
                  e.target.files &&
                  handleFileChange(
                    e.target.files[0],
                    setPassportFile,
                    setPassportProgress
                  )
                }
              />

              {passportFile &&
                renderPreview(
                  passportFile
                )}

              {passportProgress >
                0 && (
                <div
                  className={
                    styles.progress
                  }
                >
                  <div
                    style={{
                      width: `${passportProgress}%`,
                    }}
                  />
                </div>
              )}
            </div>

            <button
              className={
                styles.submitBtn
              }
              onClick={handleSubmit}
              disabled={submitting}
            >
              {submitting
                ? "Submitting..."
                : "Submit For Verification"}
            </button>
          </div>
        )}
      </div>
    </div>
  )
}

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

export default KYCVerification