/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import React from "react";
import ReactDOM from "react-dom";
import styles from "../create-branch/branch.module.scss"; // reuse same style
import { useForm, router } from "@inertiajs/react";

interface ModalProps {
  closeModal: () => void;
  branches: any
}

const CreatePastorModal: React.FC<ModalProps> = ({
  closeModal,
  branches,
}) => {
  const { data, setData, post, processing, errors, reset } = useForm({
    firstName: "",
    lastName: "",
    email: "",
    branch_id: "",
  });

  console.log("Received branches", branches)

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

    post(route("admin.pastors.store"), {
      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>Create New Pastor</h2>
          <p>Basic details only. Full profile will be completed later.</p>

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

        {/* FORM */}
        <form onSubmit={handleSubmit} className={styles.modalForm}>
          {/* FIRST NAME */}
          <div className={styles.formGroup}>
            <label>First Name *</label>
            <input
              type="text"
              value={data.firstName}
              onChange={(e) => setData("firstName", e.target.value)}
              placeholder="John"
            />
            {errors.firstName && (
              <small className={styles.error}>{errors.firstName}</small>
            )}
          </div>

          {/* LAST NAME */}
          <div className={styles.formGroup}>
            <label>Last Name *</label>
            <input
              type="text"
              value={data.lastName}
              onChange={(e) => setData("lastName", e.target.value)}
              placeholder="Doe"
            />
            {errors.lastName && (
              <small className={styles.error}>{errors.lastName}</small>
            )}
          </div>

          {/* EMAIL */}
          <div className={styles.formGroup}>
            <label>Email *</label>
            <input
              type="email"
              value={data.email}
              onChange={(e) => setData("email", e.target.value)}
              placeholder="pastor@email.com"
            />
            {errors.email && (
              <small className={styles.error}>{errors.email}</small>
            )}
          </div>

          {/* BRANCH */}
          <div className={styles.formGroup}>
            <label>Assign Branch *</label>
            <select
              value={data.branch_id}
              onChange={(e) => setData("branch_id", e.target.value)}
            >
              <option value="">Select Branch</option>
              {branches?.map((branch: any) => (
                <option key={branch.id} value={branch.id}>
                  {branch.name}
                </option>
              ))}
            </select>

            {errors.branch_id && (
              <small className={styles.error}>{errors.branch_id}</small>
            )}
          </div>

          {/* INFO NOTICE */}
         <div className={styles.infoBox}>
            <div className={styles.infoIcon}>ℹ️</div>

            <div className={styles.infoContent}>
              <strong>Note</strong>
              <p>
                Creating a pastor here does <b>not</b> grant system access.  
                Only pastors assigned as <b>Head Pastor</b> will receive an invite
                to set up their account.
              </p>
            </div>
          </div>

          {/* SUBMIT */}
          <button
            type="submit"
            disabled={processing}
            className={styles.submitBtn}
          >
            {processing ? "Creating..." : "Create Pastor"}
          </button>
        </form>
      </div>
    </div>,
    document.body
  );
};

export default CreatePastorModal;