"use client"

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

import React from "react"
import ReactDOM from "react-dom"
import { useForm, router } from "@inertiajs/react"
import styles from "./first-timer-modal.module.scss"
import { capitalizeFirstLetter, formatLabel } from "@/lib/utils"

interface ModalProps {
  closeModal: () => void
}

const CreateFirstTimerModal: React.FC<ModalProps> = ({ closeModal }) => {
  const genders = ["male", "female"]

  const maritalStatuses = [
    "single",
    "married",
    "divorced",
    "widowed",
  ]

  const ageGrades = [
    "under_18",
    "18_25",
    "26_35",
    "36_45",
    "46_60",
    "60_plus",
  ]

  // ✅ TODAY DEFAULT
  const today = new Date().toISOString().split("T")[0]

  const { data, setData, post, processing, errors, reset } =
    useForm<any>({
      full_name: "",
      phone: "",
      email: "",
      gender: "",
      marital_status: "",
      age_grade: "",
      created_at: today, // 👈 IMPORTANT
    })

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
  ) => {
    const { name, value } = e.target
    setData(name, value)
  }

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

    post("/dashboard/first-timers", {
      onSuccess: () => {
        reset()
        closeModal()
        router.reload({ only: ["flash"] })
      },
    })
  }

  return ReactDOM.createPortal(
    <div className={styles.modalBackdrop} onClick={closeModal}>
      <div
        className={styles.modalContent}
        onClick={(e) => e.stopPropagation()}
      >
        <div className={styles.modalHeader}>
          <h2>Add First Timer</h2>
          <p>Quickly register a first-time visitor.</p>

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

        <form className={styles.modalForm} onSubmit={handleSubmit}>
          {/* Full Name */}
          <div className={styles.formGroup}>
            <label>Full Name *</label>
            <input
              type="text"
              name="full_name"
              value={data.full_name}
              onChange={handleChange}
              placeholder="e.g. John Doe"
              required
            />
            {errors.full_name && (
              <small className={styles.error}>{errors.full_name}</small>
            )}
          </div>

          {/* Phone */}
          <div className={styles.formGroup}>
            <label>Phone *</label>
            <input
              type="text"
              name="phone"
              value={data.phone}
              onChange={handleChange}
              placeholder="e.g. 08012345678"
              required
            />
            {errors.phone && (
              <small className={styles.error}>{errors.phone}</small>
            )}
          </div>

          {/* Email */}
          <div className={styles.formGroup}>
            <label>Email</label>
            <input
              type="email"
              name="email"
              value={data.email}
              onChange={handleChange}
              placeholder="e.g. john@email.com"
            />
          </div>

          {/* Gender */}
          <div className={styles.formGroup}>
            <label>Gender</label>
            <select
              name="gender"
              value={data.gender}
              onChange={handleChange}
            >
              <option value="">Select gender</option>
              {genders.map((g) => (
                <option key={g} value={g}>
                  {capitalizeFirstLetter(g)}
                </option>
              ))}
            </select>
          </div>

          {/* Marital Status */}
          <div className={styles.formGroup}>
            <label>Marital Status</label>
            <select
              name="marital_status"
              value={data.marital_status}
              onChange={handleChange}
            >
              <option value="">Select marital status</option>
              {maritalStatuses.map((m) => (
                <option key={m} value={m}>
                  {capitalizeFirstLetter(m)}
                </option>
              ))}
            </select>
          </div>

          {/* Age Grade */}
          <div className={styles.formGroup}>
            <label>Age Grade</label>
            <select
              name="age_grade"
              value={data.age_grade}
              onChange={handleChange}
            >
              <option value="">Select age grade</option>
              {ageGrades.map((a) => (
                <option key={a} value={a}>
                  {formatLabel(a)}
                </option>
              ))}
            </select>
          </div>

          {/* 🔥 VISIT DATE */}
          <div className={styles.formGroup}>
            <label>Visit Date</label>
            <input
              type="date"
              name="created_at"
              value={data.created_at}
              onChange={handleChange}
            />
          </div>

          {/* Submit */}
          <button className={styles.submitBtn} disabled={processing}>
            {processing ? "Saving..." : "Add First Timer"}
          </button>
        </form>
      </div>
    </div>,
    document.body
  )
}

export default CreateFirstTimerModal