"use client";

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

import { useEffect, useRef } from "react";
import { useForm, router } from "@inertiajs/react";
import ReactDOM from "react-dom";

import {
  FiX,
} from "react-icons/fi";

import styles from "../modal-styles.module.scss";
import PageIntro from "@/components/dashboard/page-intro";

const AddRemittanceModal = ({
  onClose,
  pledge,
  remittance = null,
}: any) => {
  const isEdit = !!remittance;
  const inputRef = useRef<HTMLInputElement>(null);

  /* ================= SCROLL LOCK ================= */
  useEffect(() => {
    document.body.style.overflow = "hidden";

    // auto focus amount
    setTimeout(() => inputRef.current?.focus(), 200);

    return () => {
      document.body.style.overflow = "auto";
    };
  }, []);

  /* ================= HELPERS ================= */
  const formatNumber = (value: any) => {
    const num = Number(value || 0);
    if (isNaN(num)) return "";
    return num.toLocaleString("en-NG");
  };

  const parseNumber = (value: string) =>
    value.replace(/,/g, "");

  /* ================= FORM ================= */
  const {
    data,
    setData,
    post,
    put,
    processing,
    errors,
    transform,
  } = useForm({
    pledge_id: pledge?.id,
    branch_id: pledge?.branch_id,

    amount: remittance?.amount
      ? formatNumber(remittance.amount)
      : "",

    payment_method:
      remittance?.payment_method || "bank_transfer",

    transaction_reference:
      remittance?.transaction_reference || "",

    status: remittance?.status || "confirmed",
  });

  /* ================= HANDLE CHANGE ================= */
  const handleChange = (e: any) => {
    const { name, value } = e.target;

    if (name === "amount") {
      const raw = parseNumber(value);

      // allow only numbers
      if (!/^\d*$/.test(raw)) return;

      setData("amount", formatNumber(raw));
      return;
    }

    setData(name, value);
  };

  /* ================= VALID ================= */
  const isValid =
    data.amount &&
    Number(parseNumber(data.amount)) > 0 &&
    data.payment_method;

  /* ================= SUBMIT ================= */
  const handleSubmit = (e: any) => {
    e.preventDefault();

    if (!isValid) return;

    transform((data) => ({
      ...data,
      amount: parseNumber(data.amount),
    }));

    const options = {
      onSuccess: () => {
        onClose();

        // 🔥 refresh only pledge data (fast UI)
        router.reload({
          only: ["pledge"],
        });
      },
    };

    if (isEdit) {
      put(
        route(
          "dashboard.remittances.update",
          remittance.id
        ),
        options
      );
    } else {
      post(
        route("dashboard.remittances.store"),
        options
      );
    }
  };

  if (typeof window === "undefined") return null;

  /* ================= RENDER ================= */
  return ReactDOM.createPortal(
    <div
      className={styles.modalBackdrop}
      onClick={onClose}
    >
      <div
        className={styles.modalContent}
        onClick={(e) => e.stopPropagation()}
      >
        {/* HEADER */}
        <div className={styles.modalHeader}>
          <PageIntro
            title={
              isEdit
                ? "Update Remittance"
                : "Add Remittance"
            }
            description={
              isEdit
                ? "Update payment details"
                : "Record a payment for this pledge"
            }
          />

          <button
            className={styles.closeBtn}
            onClick={onClose}
          >
            <FiX />
          </button>
        </div>

        {/* FORM */}
        <form
          onSubmit={handleSubmit}
          className={styles.modalForm}
        >
          {/* AMOUNT */}
          <div className={styles.formGroup}>
            <label>Amount (₦)</label>

            <input
              ref={inputRef}
              name="amount"
              placeholder="e.g. 50,000"
              value={data.amount}
              onChange={handleChange}
            />

            {errors.amount && (
              <span className={styles.error}>
                {errors.amount}
              </span>
            )}
          </div>

          {/* PAYMENT METHOD */}
          <div className={styles.formGroup}>
            <label>Payment Method</label>

            <select
              name="payment_method"
              value={data.payment_method}
              onChange={handleChange}
            >
              <option value="bank_transfer">
                Bank Transfer
              </option>
              <option value="cash">Cash</option>
            </select>

            {errors.payment_method && (
              <span className={styles.error}>
                {errors.payment_method}
              </span>
            )}
          </div>

          {/* TRANSACTION REF */}
          <div className={styles.formGroup}>
            <label>Transaction Reference</label>

            <input
              name="transaction_reference"
              placeholder="Optional"
              value={data.transaction_reference}
              onChange={handleChange}
            />
          </div>

          {/* STATUS (EDIT ONLY) */}
          {isEdit && (
            <div className={styles.formGroup}>
              <label>Status</label>

              <select
                name="status"
                value={data.status}
                onChange={handleChange}
              >
                <option value="pending">
                  Pending
                </option>
                <option value="confirmed">
                  Confirmed
                </option>
                <option value="reversed">
                  Reversed
                </option>
              </select>
            </div>
          )}

          {/* SUBMIT */}
          <button
            type="submit"
            disabled={!isValid || processing}
            className={styles.submitBtn}
          >
            {processing
              ? "Saving..."
              : isEdit
              ? "Update Remittance"
              : "Add Remittance"}
          </button>
        </form>
      </div>
    </div>,
    document.body
  );
};

export default AddRemittanceModal;