/* eslint-disable react-hooks/set-state-in-effect */
/* eslint-disable @typescript-eslint/no-explicit-any */
"use client"

import ReactDOM from "react-dom"
import { useState, useEffect } from "react"
import styles from "../modal-styles.module.scss"
import { router } from "@inertiajs/react"
import { FiX } from "react-icons/fi"
import PageIntro from "@/components/dashboard/page-intro"

interface Props {
  closeModal: () => void
  business: any
}

const UpdateBusinessStatusModal = ({ closeModal, business }: Props) => {
  const [form, setForm] = useState({
    status: "pending",
    confirm: false,
    rejection_reason: "",
  })

  const [errors, setErrors] = useState<any>({})
  const [loading, setLoading] = useState(false)

  /* ================= PREFILL ================= */
  useEffect(() => {
    if (business?.status) {
      setForm((prev) => ({
        ...prev,
        status: business.status,
      }))
    }
  }, [business])

  /* ================= HANDLE CHANGE ================= */
  const handleChange = (key: string, value: any) => {
    setForm((prev) => ({ ...prev, [key]: value }))
  }


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

    setLoading(true)
    setErrors({})

    router.patch(
      route("dashboard.businesses.status.update", business.id),
      {
        status: form.status,
        rejection_reason: form.rejection_reason,
      },
      {
        preserveScroll: true,
        onError: (err) => setErrors(err),
        onSuccess: () => closeModal(),
        onFinish: () => setLoading(false),
      }
    )
  }

  return ReactDOM.createPortal(
    <div className={styles.modalBackdrop} onClick={closeModal}>
      <div
        className={styles.modalContent}
        onClick={(e) => e.stopPropagation()}
      >
        {/* HEADER */}
        <div className={styles.modalHeader}>
          <PageIntro
            title="Update Business Status"
            description="Change the approval status of this business listing"
          />

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

        {/* FORM */}
        <form className={styles.modalForm} onSubmit={handleSubmit}>
          {/* STATUS */}
          <div className={styles.formGroup}>
            <label>Status</label>

            <select
              value={form.status}
              onChange={(e) =>
                handleChange("status", e.target.value)
              }
            >
              <option value="approved">Approved</option>
              <option value="pending">Pending</option>
              <option value="rejected">Rejected</option>
            </select>

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

          {/* 🔥 REJECTION REASON */}
          {form.status === "rejected" && (
            <div className={styles.formGroup}>
              <label>Reason for Rejection</label>

              <textarea
                placeholder="Explain why this business was rejected..."
                value={form.rejection_reason}
                onChange={(e) =>
                  handleChange("rejection_reason", e.target.value)
                }
              />

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

          {/* INFO */}
          <div className={styles.infoBox}>
            This action affects how the business is displayed on the members area.
            Only approved businesses will be visible.
          </div>

          {/* SUBMIT */}
          <button
            type="submit"
            className={styles.submitBtn}
            disabled={loading}
          >
            {loading ? "Updating..." : "Update Status"}
          </button>
        </form>
      </div>
    </div>,
    document.body
  )
}

export default UpdateBusinessStatusModal