/* eslint-disable @typescript-eslint/no-explicit-any */
import React from "react";
import ReactDOM from "react-dom";
import styles from "./modal.module.scss";
import { useForm, router } from "@inertiajs/react";

interface ModalProps {
  closeModal: () => void;
  type: "add" | "update";
  program?: any;
  onSuccess?: (message: string) => void;
}

const CreateProgramModal: React.FC<ModalProps> = ({
  closeModal,
  type,
  program,
}) => {
  const { data, setData, post, put, processing, errors, reset } = useForm({
    name: type === "update" ? program?.name || "" : "",
    theme: type === "update" ? program?.theme || "" : "",
    location: type === "update" ? program?.location || "" : "",
    description: type === "update" ? program?.description || "" : "",
    status: type === "update" ? program?.status || "" : "",
    starts: type === "update" ? program?.starts || "" : "",
    ends: type === "update" ? program?.ends || "" : "",
  });

  const programStatus = [
    { id: 1, name: "completed" },
    { id: 2, name: "upcoming" },
    { id: 3, name: "on-going" },
  ];

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

    if (type === "add") {
      post(route("dashboard.programs.store"), {
        onSuccess: () => {
          reset();
          closeModal();
          router.reload({ only: ["flash"] });
        },
      });
    } else if (type === "update" && program?.id) {
      put(route("dashboard.programs.update", program.id), {
        onSuccess: () => {
          reset();
          closeModal();
          router.reload({ only: ["flash"] });
        },
      });
    }
  };

  return ReactDOM.createPortal(
    <div className={styles.modalBackdrop} onClick={closeModal}>
      <div
        className={styles.modalContent}
        onClick={(e) => e.stopPropagation()}
      >
        {/* ================= HEADER ================= */}
        <div className={styles.modalHeader}>
          <h2>
            {type === "add"
              ? "Create New Program"
              : "Update Program"}
          </h2>
          <p>
            Seamlessly add or update a program by filling out the form below
          </p>

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

        {/* ================= FORM ================= */}
        <form
          onSubmit={handleSubmit}
          className={styles.modalForm}
          autoComplete="off"
        >
          <div className={styles.formGroup}>
            <label htmlFor="name">Program Name *</label>
            <input
              id="name"
              type="text"
              placeholder="Ebenezer 2025"
              value={data.name}
              onChange={(e) => setData("name", e.target.value)}
              required
            />
            {errors.name && (
              <small className={styles.error}>{errors.name}</small>
            )}
          </div>

          <div className={styles.formGroup}>
            <label htmlFor="theme">Theme *</label>
            <input
              id="theme"
              type="text"
              placeholder="Victory at last"
              value={data.theme}
              onChange={(e) => setData("theme", e.target.value)}
              required
            />
            {errors.theme && (
              <small className={styles.error}>{errors.theme}</small>
            )}
          </div>

          <div className={styles.formGroup}>
            <label htmlFor="location">Location *</label>
            <input
              id="location"
              type="text"
              placeholder="Church Auditorium"
              value={data.location}
              onChange={(e) => setData("location", e.target.value)}
              required
            />
            {errors.location && (
              <small className={styles.error}>{errors.location}</small>
            )}
          </div>

          <div className={styles.formGroup}>
            <label htmlFor="starts">Start Date *</label>
            <input
              id="starts"
              type="date"
              value={data.starts}
              onChange={(e) => setData("starts", e.target.value)}
              required
            />
            {errors.starts && (
              <small className={styles.error}>{errors.starts}</small>
            )}
          </div>

          <div className={styles.formGroup}>
            <label htmlFor="ends">End Date *</label>
            <input
              id="ends"
              type="date"
              value={data.ends}
              onChange={(e) => setData("ends", e.target.value)}
              required
            />
            {errors.ends && (
              <small className={styles.error}>{errors.ends}</small>
            )}
          </div>

          <div className={styles.formGroup}>
            <label htmlFor="status">Program Status *</label>
            <select
              id="status"
              value={data.status}
              onChange={(e) => setData("status", e.target.value)}
              required
            >
              <option value="" disabled>
                Select program status
              </option>
              {programStatus.map((status) => (
                <option key={status.id} value={status.name}>
                  {status.name.charAt(0).toUpperCase() +
                    status.name.slice(1)}
                </option>
              ))}
            </select>
          </div>

          <div className={styles.formGroup}>
            <label htmlFor="description">Description *</label>
            <textarea
              id="description"
              placeholder="Enter program description..."
              value={data.description}
              onChange={(e) =>
                setData("description", e.target.value)
              }
              required
            />
            {errors.description && (
              <small className={styles.error}>
                {errors.description}
              </small>
            )}
          </div>

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

export default CreateProgramModal;