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

import { useEffect, useState } from "react"
import styles from "./home-cell-modal.module.scss"
import { router } from "@inertiajs/react"

export default function CreateHomeCellModal({
  closeModal,
  type = "add",
  homeCell = null,
}: any) {

  const [form, setForm] = useState({
    name: "",
    address: "",
    leader_name: "",
    leader_phone: "",
    leader_email: "",
    meeting_day: "",
    meeting_time: "",
    notify_users: false,
  })

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

  // ✅ Prefill for edit
  useEffect(() => {
    if (type === "edit" && homeCell) {
      setForm({
        name: homeCell.name || "",
        address: homeCell.address || "",
        leader_name: homeCell.leader_name || "",
        leader_phone: homeCell.leader_phone || "",
        leader_email: homeCell.leader_email || "",
        meeting_day: homeCell.meeting_day || "",
        meeting_time: homeCell.meeting_time?.slice(0, 5) || "",
        notify_users: false, // always reset
      })
    }
  }, [type, homeCell])

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

    setForm({
      ...form,
      [name]: type === "checkbox" ? checked : value,
    })
  }

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

    const url =
      type === "edit"
        ? route("dashboard.home.cell.update", homeCell.id)
        : route("dashboard.home.cell.store")

    const method = type === "edit" ? "put" : "post"

    router[method](url, form, {
      onError: (err: any) => {
        setErrors(err)
        setLoading(false)
      },
      onSuccess: () => {
        setLoading(false)
        closeModal()
      },
    })
  }

  return (
    <div
      className={styles.modalBackdrop}
      onClick={closeModal}
    >
      <div
        className={styles.modalContent}
        onClick={(e) => e.stopPropagation()}
      >

        {/* HEADER */}
        <div className={styles.modalHeader}>
          <h2>
            {type === "edit" ? "Update Home Cell" : "Create Home Cell"}
          </h2>

          <p>
            {type === "edit"
              ? "Modify home cell details"
              : "Set up a new home cell for members"}
          </p>

          <button
            type="button"
            className={styles.closeBtn}
            onClick={(e) => {
              e.stopPropagation()
              closeModal()
            }}
          >
            ×
          </button>
        </div>

        {/* FORM */}
        <form onSubmit={handleSubmit} className={styles.modalForm}>

          {/* NAME */}
          <div className={styles.formGroup}>
            <label>Home Cell Name</label>
            <input
              name="name"
              value={form.name}
              placeholder="e.g. Winners Home Cell"
              onChange={handleChange}
            />
            {errors.name && <span className={styles.error}>{errors.name}</span>}
          </div>

          {/* ADDRESS */}
          <div className={styles.formGroup}>
            <label>Address</label>
            <input
              name="address"
              value={form.address}
              placeholder="e.g. 12 Allen Avenue, Ikeja"
              onChange={handleChange}
            />
          </div>

          {/* LEADER NAME */}
          <div className={styles.formGroup}>
            <label>Leader Name</label>
            <input
              name="leader_name"
              value={form.leader_name}
              placeholder="e.g. John Doe"
              onChange={handleChange}
            />
          </div>

          {/* LEADER PHONE */}
          <div className={styles.formGroup}>
            <label>Leader Phone</label>
            <input
              name="leader_phone"
              value={form.leader_phone}
              placeholder="e.g. 08012345678"
              onChange={handleChange}
            />
          </div>

          {/* LEADER EMAIL */}
          <div className={styles.formGroup}>
            <label>Leader Email</label>
            <input
              name="leader_email"
              value={form.leader_email}
              placeholder="e.g. leader@email.com"
              onChange={handleChange}
            />
          </div>

          {/* DAY */}
          <div className={styles.formGroup}>
            <label>Meeting Day</label>
            <select
              name="meeting_day"
              value={form.meeting_day}
              onChange={handleChange}
            >
              <option value="">Select meeting day</option>
              {["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"].map(day => (
                <option key={day} value={day}>{day}</option>
              ))}
            </select>
          </div>

          {/* TIME */}
          <div className={styles.formGroup}>
            <label>Meeting Time</label>
            <input
              type="time"
              name="meeting_time"
              value={form.meeting_time}
              onChange={handleChange}
            />
          </div>

          {/* 🔥 ONLY SHOW ON CREATE */}
          {type === "add" && (
            <div className={styles.toggleGroup}>
              <div className={styles.toggleHeader}>
                <div>
                  <p className={styles.toggleTitle}>Notify Members</p>
                  <p className={styles.toggleDesc}>
                    Send email notification to members
                  </p>
                </div>

                <label className={styles.switch}>
                  <input
                    type="checkbox"
                    name="notify_users"
                    checked={form.notify_users}
                    onChange={handleChange}
                  />
                  <span className={styles.slider}></span>
                </label>
              </div>

              <div className={styles.infoBox}>
                Only members who have enabled promotional emails will receive this notification.
              </div>
            </div>
          )}

          {/* SUBMIT */}
          <button className={styles.submitBtn} disabled={loading}>
            {loading
              ? type === "edit"
                ? "Updating..."
                : "Creating..."
              : type === "edit"
              ? "Update Home Cell"
              : "Create Home Cell"}
          </button>

        </form>
      </div>
    </div>
  )
}