/* eslint-disable react-hooks/exhaustive-deps */
/* 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"

interface Props {
  closeModal: () => void
  attendance?: any
  serviceTypes: any[]
  type: "add" | "update"
}

const CreateAttendanceModal = ({
  closeModal,
  attendance,
  serviceTypes,
  type,
}: Props) => {
  const isEdit = type === "update"

  const today = new Date().toISOString().split("T")[0]

  const [form, setForm] = useState({
    service_type_id: "",
    count: "",
    remark: "",
    date: today,
  })

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

  /* ================= PREFILL ================= */
  useEffect(() => {
    if (attendance) {
      setForm({
        service_type_id: attendance.service_type_id || "",
        count: attendance.count || "",
        remark: attendance.remark || "",
        date: attendance.created_at
          ? attendance.created_at.split("T")[0]
          : today,
      })
    }
  }, [attendance])

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

  /* ================= COUNT INPUT (WITH COMMAS) ================= */
  const handleCountChange = (value: string) => {
    const numeric = value.replace(/,/g, "")
    if (!isNaN(Number(numeric))) {
      setForm((prev) => ({
        ...prev,
        count: numeric,
      }))
    }
  }

  const formatNumber = (value: string) => {
    if (!value) return ""
    return new Intl.NumberFormat().format(Number(value))
  }

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

    setLoading(true)
    setErrors({})

    const payload = {
      service_type_id: form.service_type_id,
      count: form.count,
      remark: form.remark,
      created_at: form.date, // ✅ important
    }

    const url = isEdit
      ? `/dashboard/attendance/${attendance.id}`
      : `/dashboard/attendance`

    router.visit(url, {
      method: isEdit ? "put" : "post",
      data: payload,
      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}>
          <h2>
            {isEdit ? "Update Attendance" : "Create Attendance"}
          </h2>
          <p>
            {isEdit
              ? "Update attendance record"
              : "Record attendance for a service"}
          </p>

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

        {/* ================= FORM ================= */}
        <form className={styles.modalForm} onSubmit={handleSubmit}>
          {/* SERVICE TYPE */}
          <div className={styles.formGroup}>
            <label>Service Type</label>

            <select
              value={form.service_type_id}
              onChange={(e) =>
                handleChange("service_type_id", e.target.value)
              }
            >
              <option value="">Select service</option>

              {serviceTypes?.map((service: any) => (
                <option key={service.id} value={service.id}>
                  {service.title} ({service.time})
                </option>
              ))}
            </select>

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

          {/* DATE */}
          <div className={styles.formGroup}>
            <label>Attendance Date</label>

            <input
              type="date"
              value={form.date}
              onChange={(e) =>
                handleChange("date", e.target.value)
              }
            />

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

          {/* COUNT */}
          <div className={styles.formGroup}>
            <label>Attendance Count</label>

            <input
              type="text"
              placeholder="Enter number of attendees"
              value={formatNumber(form.count)}
              onChange={(e) =>
                handleCountChange(e.target.value)
              }
            />

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

          {/* REMARK */}
          <div className={styles.formGroup}>
            <label>Remark (optional)</label>

            <textarea
              placeholder="Add note..."
              value={form.remark}
              onChange={(e) =>
                handleChange("remark", e.target.value)
              }
            />

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

          {/* INFO */}
          <div className={styles.infoBox}>
            Tip: If no date is selected, today's date will be used.
          </div>

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

export default CreateAttendanceModal