/* eslint-disable react-hooks/set-state-in-effect */
"use client";

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

import { useState, useEffect } from "react";
import { useForm } from "@inertiajs/react";
import { FiX, FiCheckCircle } from "react-icons/fi";
import ReactDOM from "react-dom";

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

const DonationFundModal = ({ onClose, fund = null }: any) => {
  const isEdit = !!fund;

  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);

    // 🔥 Prevent background scroll
    document.body.style.overflow = "hidden";

    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) => {
    return value.replace(/,/g, "");
  };

  /* ================= FORM ================= */

  const {
    data,
    setData,
    post,
    put,
    processing,
    errors,
    transform,
  } = useForm({
    title: fund?.title || "",
    description: fund?.description || "",
    target_amount: fund?.target_amount
      ? formatNumber(fund.target_amount)
      : "",
    status: fund?.status || "active",
  });

  const [success, setSuccess] = useState(false);

  /* ================= HANDLE CHANGE ================= */

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

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

      if (raw === "") {
        setData("target_amount", "");
        return;
      }

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

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

    setData(name, value);
  };

  /* ================= SUBMIT ================= */

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

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

    if (isEdit) {
      put(route("dashboard.donation.funds.update", fund.id), {
        onSuccess: () => {
          onClose();
        },
      });
    } else {
      post(route("dashboard.donation.funds.store"), {
        onSuccess: () => {
          onClose();
        },
      });
    }
  };

  /* ================= RENDER ================= */

  if (!mounted) return null;

  return ReactDOM.createPortal(
    <div className={styles.modalBackdrop} onClick={onClose}>
      <div
        className={styles.modalContent}
        onClick={(e) => e.stopPropagation()}
      >
        {/* ================= HEADER ================= */}
        <div className={styles.modalHeader}>
          <PageIntro
            title={
              success
                ? "Fund Saved Successfully"
                : isEdit
                ? "Edit Donation Fund"
                : "Create Donation Fund"
            }
            description={
              success
                ? "Your donation fund has been saved successfully"
                : "Fill the details to manage your fundraising campaign"
            }
          />

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

        {/* ================= SUCCESS ================= */}
        {success && (
          <div className={styles.successBox}>
            <div className={styles.successIconWrapper}>
              <FiCheckCircle className={styles.successIcon} />
            </div>

            <h3>Success!</h3>
            <p>Your donation fund has been saved successfully.</p>

            <button className={styles.successBtn} onClick={onClose}>
              Close
            </button>
          </div>
        )}

        {/* ================= FORM ================= */}
        {!success && (
          <form onSubmit={handleSubmit} className={styles.modalForm}>
            <div className={styles.formGroup}>
              <label>Fund Title</label>
              <input
                type="text"
                name="title"
                placeholder="e.g. Building Project Fund"
                value={data.title}
                onChange={handleChange}
              />
              {errors.title && (
                <span className={styles.error}>{errors.title}</span>
              )}
            </div>

            <div className={styles.formGroup}>
              <label>Description</label>
              <textarea
                name="description"
                placeholder="Describe the purpose of this fund..."
                value={data.description}
                onChange={handleChange}
              />
              {errors.description && (
                <span className={styles.error}>
                  {errors.description}
                </span>
              )}
            </div>

            <div className={styles.formGroup}>
              <label>Target Amount (₦)</label>
              <input
                type="text"
                name="target_amount"
                placeholder="Enter amount e.g. 1,000,000"
                value={data.target_amount}
                onChange={handleChange}
              />
              {errors.target_amount && (
                <span className={styles.error}>
                  {errors.target_amount}
                </span>
              )}
            </div>

            {isEdit && (
              <div className={styles.formGroup}>
                <label>Status</label>
                <select
                  name="status"
                  value={data.status}
                  onChange={handleChange}
                >
                  <option value="active">Ongoing</option>
                  <option value="closed">Completed</option>
                </select>
              </div>
            )}

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

export default DonationFundModal;