/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useEffect } from "react"
import styles from "./confirm-action.module.scss"
import { useForm, router } from "@inertiajs/react"
import { useState } from "react"

// Data imports
import assetsClassData from "../../../../../data/investment-choice.json"
import forexPairs from "../../../../../data/forex-trading-pairs.json"
import cryptoPairs from "../../../../../data/crypto-trading-paris.json"
import stocks from "../../../../../data/stocks-trading.json"
import indices from "../../../../../data/indices-trading.json"
import commodities from "../../../../../data/commodities.json"
import leverages from "../../../../../data/trading-leverage.json"
import tradingTime from "../../../../../data/trading-time.json"

interface ConfirmActionOnUserProps {
  closeModal: any, 
  accountTypes?: any,
  /**
   * Optional custom action
   * Allows parent components to override
   * default router.post behaviour.
   */
  action?: () => void

  description: string
  title: string

  id?: any
  user?: any

  type:
    | "transaction"
    | "trading-plan"
    | "estate-plan"
    | "message"
    | "signals"
    | "trade"
    | "user"
    | "account"
    | "upgrade"
    | "withdraw"
    | "verify"
    | "process"
    | "upgrade-user-account"
}

const ConfirmActionOnUser: React.FC<ConfirmActionOnUserProps> = ({
  closeModal,
  action,
  description,
  title,
  id,
  user,
  type,
  accountTypes
}) => {

  const { data, setData, errors, setError, clearErrors } = useForm({
    // General
    name: "",
    email: "",
    username: "",
    phone: "",
    country: "",
    withdrawalCode: "",
    transferCode: "",
    accountType: "",

    // Transaction
    amount: "",
    column: "",
    transactionType: "",

    // Trading plan
    tradingPlan: "",
    amountInvested: "",
    startDate: "",
    endDate: "",

    // Estate plan
    estatePlan: "",
    units: "",
    totalAmount: "",

    // Signals
    signal: "",

    // Trade
    assetClass: "",
    asset: "",
    leverage: "",
    expiration: "",
    tradeType: "",

    // Messages
    titleMessage: "",
    message: "",
    type: "info"
  })

  const [processing, setProcessing] = useState(false)

  /* ================= PREFILL EDIT USER ================= */
  useEffect(() => {
    if (type === "user" && user) {
      setData({
        ...data,
        name: user.name ?? "",
        email: user.email ?? "",
        username: user.username ?? "",
        phone: user.phone ?? "",
        country: user.country ?? "",
        withdrawalCode: user.withdrawal_code ?? "",
        transferCode: user.transfer_code ?? "",
      })
    }
  }, [user, type])

  const formatAmount = (value: string) => {
    const numeric = value.replace(/,/g, "")
    if (isNaN(Number(numeric))) return ""
    return Number(numeric).toLocaleString("en-US")
  }

  const handleConfirm = () => {
    if (!id) return

    let endpoint = ""
    let payload: any = {}

    switch (type) {
      case "account":
        endpoint = `/admin/users/${id}/block`
        break

      case "withdraw":
        endpoint = `/admin/users/${id}/withdraw`
        break

      case "upgrade":
        endpoint = `/admin/users/${id}/upgrade`
        break

      case "verify":
        endpoint = `/admin/users/${id}/verify`
        break

      case "user":
        endpoint = `/admin/users/${id}/update`
        payload = {
          username: data.username,
          name: data.name,
          email: data.email,
          phone: data.phone,
          country: data.country,
          withdrawal_code: data.withdrawalCode,
          transfer_code: data.transferCode,
        }
        break

      case "transaction": {
      endpoint = `/admin/users/${id}/credit-debit`; // NEW route
      payload = {
        column: data.column,              
        amount: Number(data.amount),    
        direction: data.transactionType,         
      };
      break;
    }

      case "trading-plan":
        endpoint = `/admin/users/${id}/trading-plan`
        payload = {
          trading_plan: data.tradingPlan,
          amount_invested: data.amountInvested,
          start_date: data.startDate,
          end_date: data.endDate,
        }
        break

      case "estate-plan":
        endpoint = `/admin/users/${id}/estate-plan`
        payload = {
          estate_plan: data.estatePlan,
          units: data.units,
          total_amount: data.totalAmount,
          start_date: data.startDate,
          end_date: data.endDate,
        }
        break

      case "signals":
        endpoint = `/admin/users/${id}/signals`
        payload = {
          signal: data.signal,
          amount: data.amount,
        }
        break

      case "trade":
        endpoint = `/admin/users/${id}/trade`
        payload = {
          asset_class: data.assetClass,
          asset: data.asset,
          amount: data.amount,
          leverage: data.leverage,
          expiration: data.expiration,
          trade_type: data.tradeType,
        }
        break

      case "message":
      endpoint = `/admin/users/${id}/message`

      payload = {
        type: data.type,
        title: data.titleMessage,
        message: data.message,
      }
      break

      case "upgrade-user-account":
        endpoint = `/admin/users/${id}/account-type`

        payload = {
          account_type: data.accountType,
        }
      break

      default:
        return
    }

   router.post(endpoint, payload, {
      onSuccess: () => {
        closeModal()
      },

      onError: (err) => {
        console.error(err)
        alert("Something went wrong. Check console for errors")
      },

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


 const confirmAction = async () => {
  try {
    setProcessing(true)

    /**
     * Only process deposits/withdrawals
     * through custom actions.
     */
    if (
      type === "process" &&
      typeof action === "function"
    ) {
      await action()

      setProcessing(false)

      return
    }

    /**
     * Everything else should use
     * internal routing.
     */
    handleConfirm()
  } catch (error) {
    console.error(error)

    setProcessing(false)
  }
}


  return (
    <div className={styles["confirm__modal"]}>
      <div className={styles["confirm__modal__content"]}>
        <div
          onClick={closeModal}
          className={styles["confirm__modal__content--close"]}
        >
          Close
        </div>

        <div className={styles["confirm__modal__content--details"]}>
          <div className={styles["confirm__modal__content--details--header"]}>
            <div
              className={
                styles["confirm__modal__content--details--header--helper"]
              }
            >
              Confirmation
            </div>

            <h2>{title}</h2>
            <p>{description}</p>

            {/* ================= TRANSACTION ================= */}
            {type === "transaction" && (
              <form>
                <label>Amount *</label>
                <input
                  type="text"
                  value={formatAmount(data.amount)}
                  onChange={(e) => {
                    const raw = e.target.value.replace(/,/g, "")
                    if (!isNaN(Number(raw))) setData("amount", raw)
                  }}
                />

                <label>Column *</label>
                <select
                  value={data.column}
                  onChange={(e) => setData("column", e.target.value)}
                >
                  <option value="" disabled>
                    Select column
                  </option>
                  <option value="balance">Account Balance</option>
                  <option value="roi">ROI / Profits</option>
                  {/* <option value="deposits">Deposits</option> */}
                </select>

                <label>Transaction Type *</label>
                <select
                  value={data.transactionType}
                  onChange={(e) =>
                    setData("transactionType", e.target.value)
                  }
                >
                  <option value="" disabled>
                    Select type
                  </option>
                  <option value="credit">Credit</option>
                  <option value="debit">Debit</option>
                </select>
              </form>
            )}

            {/* ================= USER ================= */}
            {type === "user" && (
              <form>
                <label htmlFor="username">Username *</label>
                <input
                  placeholder="Username"
                  value={data.username}
                  onChange={(e) => setData("username", e.target.value)}
                />
                <label htmlFor="name">Full Name *</label>
                <input
                  placeholder="Fullname"
                  value={data.name}
                  onChange={(e) => setData("name", e.target.value)}
                />
                <label htmlFor="email">Email *</label>
                <input disabled
                  placeholder="Lastname"
                  value={data.email}
                  onChange={(e) => setData("email", e.target.value)}
                />
                <label htmlFor="phone">Phone Number *</label>
                <input
                  placeholder="Phone"
                  value={data.phone}
                  onChange={(e) => setData("phone", e.target.value)}
                />
                <label htmlFor="country">Country *</label>
                <input
                  placeholder="Country"
                  value={data.country}
                  onChange={(e) => setData("country", e.target.value)}
                />
                <label htmlFor="withdrawal_code">withdrawal Code *</label>
                <input
                  placeholder="Withdrawal Code"
                  value={data.withdrawalCode}
                  onChange={(e) =>
                    setData("withdrawalCode", e.target.value)
                  }
                />
                <label htmlFor="transfer_code">Transfer Code *</label>
                <input
                  placeholder="Transfer Code"
                  value={data.transferCode}
                  onChange={(e) =>
                    setData("transferCode", e.target.value)
                  }
                />
              </form>
            )}

           {/* ================= MESSAGE ================= */}
            {type === "message" && (
              <form>
                <label htmlFor="messageType">
                  Message Type *
                </label>

                <select
                  value={data.type}
                  onChange={(e) =>
                    setData("type", e.target.value)
                  }
                >
                  <option value="info">
                    Info
                  </option>

                  <option value="success">
                    Success
                  </option>

                  <option value="warning">
                    Warning
                  </option>

                  <option value="danger">
                    Danger
                  </option>
                </select>

                <label htmlFor="title">
                  Title *
                </label>

                <input
                  placeholder="Title"
                  value={data.titleMessage}
                  onChange={(e) =>
                    setData(
                      "titleMessage",
                      e.target.value
                    )
                  }
                />

                <label htmlFor="message">
                  Message *
                </label>

                <textarea
                  placeholder="Message"
                  value={data.message}
                  onChange={(e) =>
                    setData(
                      "message",
                      e.target.value
                    )
                  }
                />
              </form>
            )}


            {type === "upgrade-user-account" && (
              <form>
                <label>Account Type *</label>

                <select
                  value={data.accountType}
                  onChange={(e) =>
                    setData("accountType", e.target.value)
                  }
                >
                  <option value="">
                    Select Account Type
                  </option>

                  {accountTypes?.map((plan: any) => (
                    <option
                      key={plan.id}
                      value={plan.id}
                    >
                      {plan.name}
                    </option>
                  ))}
                </select>
              </form>
            )}
          </div>

          <button
              onClick={confirmAction}
              disabled={processing}
            >
              {processing
                ? "Processing..."
                : "Confirm Action"}
            </button>
        </div>
      </div>
    </div>
  )
}

export default ConfirmActionOnUser