/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-empty-object-type */
import styles from "./crypto-checkout.module.scss"
import UserDashboardLayout from "@/layouts/user_dashboard_layout";
import { Link, router, useForm } from "@inertiajs/react"
import { BsArrowLeft, BsArrowRight } from "react-icons/bs";
import { useState, ReactNode } from "react";
import {usePage} from "@inertiajs/react";

import { FaCopy } from "react-icons/fa";
import ConfirmTransaction from "@/components/dashboard/Modals/ConfirmTransaction";

/* ---------------------------------------------------------------------
   CUSTOM INERTIA PAGE TYPE
------------------------------------------------------------------------ */
export type InertiaPage<P = {}> = React.FC<P> & {
  layout?: (page: ReactNode) => ReactNode;
};
/* ------------------------------------------------------------------- */

const CryptoCheckout: InertiaPage = () => {
  const [copied, setCopied] = useState(false);
  const [confirmModal, setConfirmModal] = useState(false);

  // Extract from URL
  const params = new URLSearchParams(window.location.search);
  const channel = params.get("method") || "BTC";
  const amount = params.get("amount") || "0";
  const wallet = params.get("wallet") || "0";


  const [uploadProgress, setUploadProgress] = useState(0)
  const [previewUrl, setPreviewUrl] = useState("")

const handleFileChange = (
  e: React.ChangeEvent<HTMLInputElement>
) => {
  const file = e.target.files?.[0]

  if (!file) return

  setData("proof", file)

  if (file.type.startsWith("image/")) {
    setPreviewUrl(URL.createObjectURL(file))
  } else {
    setPreviewUrl("")
  }
}

const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault()

  post(route("transactions.store"), {
    forceFormData: true,

    onProgress: (progress) => {
      setUploadProgress(progress?.percentage || 0)
    },

    onSuccess: () => {
      setUploadProgress(0)
      setPreviewUrl("")
      reset()

      toggleConfirmModal()

      router.reload({
        only: ["flash"],
      })
    },

    onError: () => {
      setUploadProgress(0)
    },
  })
}


const truncateWallet = (
  address: string,
  start = 20,
  end = 6
) => {
  if (!address) return ""

  if (address.length <= start + end) {
    return address
  }

  return `${address.slice(0, start)}...${address.slice(-end)}`
}

  /* ---------------------------------------------------------------------
     useForm DATA (Everything included)
  --------------------------------------------------------------------- */
  const { auth } = usePage<any>().props;
  const user = auth.user;

  const { data, setData, post, processing, reset } = useForm({
    user_id: user.id,
    amount: amount,
    channel: channel,
    network: "BTC",
    type: 'deposit',
    wallet: wallet,
    proof: null as File | null,
  });

  console.log('User', user)

  const handleNetworkChange = (value: string) => {
    setData("network", value);
  };

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(wallet);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      console.error("Failed to copy");
    }
  };

  const toggleConfirmModal = () => {
    setConfirmModal(!confirmModal);
  };

  // /* ---------------------------------------------------------------------
  //    FORM SUBMIT (Uploads Proof + Sends All Data)
  // --------------------------------------------------------------------- */
  // const handleSubmit = (e: React.FormEvent) => {
  //   e.preventDefault();

  //   post(route("transactions.store"), {
  //   //   forceFormData: true, // IMPORTANT for file uploads
  //     onSuccess: () => {
  //       reset();
  //       toggleConfirmModal();
  //       router.reload({ only: ["flash"] });
  //     }
  //   });
  // };


  return (
    <>
      {confirmModal && (
        <ConfirmTransaction
          handleModalClose={toggleConfirmModal}
          transaction={{
            type: "credit",
            paymentMethod: "crypto",
            cryptocurrency: data.channel,
            amount: Number(data.amount),
            wallet: data.wallet,
            status: "Completed",
            date: Date.now(),
          }}
        />
      )}

      <form onSubmit={handleSubmit}>
        <div className={styles["checkout"]}>
          <div className={styles["checkout--top"]}>
            <Link href="/dashboard/deposits">
              <BsArrowLeft color="#F79318" size="1.5rem" />
            </Link>
            <h6>Checkout</h6>
          </div>

          <div className={styles["checkout--header"]}>
            <h2>Payment Summary</h2>
            <p>This is the details of the transaction you are about to carry out.</p>
          </div>

          <div className={styles["checkout--content"]}>

            {/* NETWORK */}
            <div className={styles["checkout--network"]}>
              <h6>Choose Network Type Used *</h6>
              <small>
                If your preferred network is not here, choose <strong>OTHERS</strong>
              </small>

              <div className={styles["checkout--network--grid"]}>
                {["BTC", "BTC-bc1", "BTC-Taproot", "BTC-LN", "Off-chain", "OTHERS"].map((item) => (
                  <span
                    key={item}
                    onClick={() => handleNetworkChange(item)}
                    className={
                      data.network === item
                        ? styles["checkout--network--grid--item--active"]
                        : styles["checkout--network--grid--item"]
                    }
                  >
                    {item}
                  </span>
                ))}
              </div>
            </div>

            {/* AMOUNT */}
            <div className={styles["checkout--amount"]}>
              <div>
                <p>Amount</p>
                <span>
                  <h2>{Number(data.amount).toLocaleString("en-US")}</h2>
                </span>
              </div>
              <div>
                <Link href="/dashboard/deposits">
                  <span>
                    Change &nbsp; <BsArrowRight color="#F79318" size="1.5rem" />
                  </span>
                </Link>
              </div>
            </div>

            {/* ADDRESS */}
            <div className={styles["checkout--address"]}>
              <div>
                <p>Wallet Address</p>
                <span>
                  <h2
                    title={data.wallet}
                    className={styles.walletAddress}
                  >
                    {truncateWallet(data.wallet)}
                  </h2>
                </span>
              </div>

              <div>
                <button type="button" onClick={handleCopy}>
                  {copied ? "Copied!" : "Copy"} &nbsp; <FaCopy />
                </button>
              </div>
            </div>

            {/* PROOF */}
            <div className={styles["checkout--proof"]}>
              <h6>Upload payment proof *</h6>

              <div className={styles["checkout--proof--content"]}>
                <label
                  htmlFor="file-upload"
                  className={styles["checkout--proof--file"]}
                >
                  Choose File
                </label>

                <small>
                  {data.proof
                    ? data.proof.name
                    : "No file selected"}
                </small>
              </div>

              <input
                id="file-upload"
                type="file"
                accept="image/*,.pdf"
                onChange={handleFileChange}
                required
              />

              {data.proof && (
                <div className={styles.fileInfo}>
                  <p>{data.proof.name}</p>

                  <span>
                    {(data.proof.size / 1024 / 1024).toFixed(2)}
                    MB
                  </span>
                </div>
              )}

              {previewUrl && (
                <div className={styles.preview}>
                  <img
                    src={previewUrl}
                    alt="Payment proof preview"
                  />
                </div>
              )}

              {uploadProgress > 0 &&
                uploadProgress < 100 && (
                  <div className={styles.progressWrapper}>
                    <div
                      className={styles.progressBar}
                      style={{
                        width: `${uploadProgress}%`,
                      }}
                    />

                    <span>{uploadProgress}%</span>
                  </div>
                )}
            </div>

            {/* NOTE */}
            <div className={styles["checkout--note"]}>
              <h4>Note</h4>
              <p>
                Once your transaction is confirmed, funds will be credited to your wallet.
                For help contact: contact@traderpluss.com
              </p>
            </div>

            {/* SUBMIT */}
            <button type="submit" className={styles["checkout--btn"]} disabled={processing}>
              {processing ? "PROCESSING..." : "SUBMIT PAYMENT"}
            </button>
          </div>
        </div>
      </form>
    </>
  );
};

CryptoCheckout.layout = (page: ReactNode) => (
  <UserDashboardLayout children={page} title="Payment checkout" />
);

export default CryptoCheckout;