"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 BranchRemittanceModal = ({
  onClose,
  remittance = null,
}: any) => {
  const isEdit = !!remittance;
  const inputRef = useRef<HTMLInputElement>(null);

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

    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, "");

  const today = new Date().toISOString().split("T")[0];
  const currentMonth = today.slice(0, 7); // YYYY-MM

  /* ================= FORM ================= */
  const {
    data,
    setData,
    post,
    put,
    processing,
    errors,
    transform,
  } = useForm({
    amount: remittance?.amount
      ? formatNumber(remittance.amount)
      : "",

    date_paid: remittance?.date_paid || today,

    // 🔥 USER PICKS MONTH
    period: remittance?.period || currentMonth,

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

    proof: null as File | null,

    notes: remittance?.notes || "",
  });

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

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

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

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

    if (name === "proof") {
      setData("proof", files?.[0] || null);
      return;
    }

    setData(name, value);
  };

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

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

    if (!isValid) return;

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

    const options = {
      forceFormData: true,
      onSuccess: () => {
        onClose();

        router.reload({
          only: ["remittances", "statistics", "trends"],
        });
      },
    };

    if (isEdit) {
      put(
        route(
          "dashboard.branch-.emittances.update",
          remittance.id
        ),
        options
      );
    } else {
      post(
        route("dashboard.branch.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"
                : "Create Remittance"
            }
            description="Record a remittance sent to headquarters"
          />

          <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. 500,000"
              value={data.amount}
              onChange={handleChange}
            />
            {errors.amount && (
              <span className={styles.error}>
                {errors.amount}
              </span>
            )}
          </div>

          {/* DATE */}
          <div className={styles.formGroup}>
            <label>Date Paid</label>
            <input
              type="date"
              name="date_paid"
              value={data.date_paid}
              onChange={handleChange}
            />
            {errors.date_paid && (
              <span className={styles.error}>
                {errors.date_paid}
              </span>
            )}
          </div>

          {/* 🔥 PERIOD (MONTH PICKER) */}
          <div className={styles.formGroup}>
            <label>Remittance Period</label>
            <input
              type="month"
              name="period"
              value={data.period}
              onChange={handleChange}
            />
            {errors.period && (
              <span className={styles.error}>
                {errors.period}
              </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>
              <option value="online">Online</option>
            </select>
            {errors.payment_method && (
              <span className={styles.error}>
                {errors.payment_method}
              </span>
            )}
          </div>

          {/* PROOF */}
          <div className={styles.formGroup}>
            <label>Proof of Payment</label>
            <input
              type="file"
              name="proof"
              accept="image/*,application/pdf"
              onChange={handleChange}
            />
          </div>

          {/* NOTES */}
          <div className={styles.formGroup}>
            <label>Notes</label>
            <textarea
              name="notes"
              placeholder="Optional remarks"
              value={data.notes}
              onChange={handleChange}
            />
          </div>

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

export default BranchRemittanceModal;