import React, { useEffect } from "react";
import { Modal } from "@/components/common/modal";
import { X } from "lucide-react";
import { useForm } from "react-hook-form";

interface ActionLeaveModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (actionType: "Approved" | "Rejected", comment: string) => void;
  actionType: "Approve" | "Reject" | null;
}

interface FormValues {
  comment: string;
}

export default function ActionLeaveModal({ isOpen, onClose, onSave, actionType }: ActionLeaveModalProps) {
  const { register, handleSubmit, reset, formState: { errors } } = useForm<FormValues>({
    defaultValues: {
      comment: "",
    }
  });

  useEffect(() => {
    if (isOpen) {
      reset({ comment: "" });
    }
  }, [isOpen, reset]);

  const onSubmit = (data: FormValues) => {
    if (actionType) {
      onSave(actionType === "Approve" ? "Approved" : "Rejected", data.comment);
    }
    onClose();
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose} className="max-w-[450px] m-4">
      <div className="no-scrollbar relative w-full rounded-3xl bg-white p-4 lg:p-8">
        {actionType === "Approve" ? (
          <div className="px-2 text-center">
            <h4 className="text-xl lg:text-2xl font-semibold text-brand-950 mb-2">
              Approve Leave
            </h4>
            <p className="mb-6 text-sm text-gray-500 lg:mb-7">
              Are you sure you want to approve this leave?
            </p>
          </div>
        ) : (
          <div className="px-2 pr-14 mb-6 lg:mb-7">
            <h4 className="text-xl lg:text-2xl font-semibold text-brand-950">
              Reject Leave
            </h4>
          </div>
        )}

        {/* Body */}
        <form onSubmit={handleSubmit(onSubmit)}>
          {actionType !== "Approve" && (
            <div className="px-2">
              <label className="mb-1.5 block text-sm font-medium text-gray-700">
                Comment <span className="text-red-500">*</span>
              </label>
              <textarea
                {...register("comment", { required: "Comment is required" })}
                rows={4}
                placeholder="Enter reason for rejection..."
                className={`w-full rounded-lg border appearance-none px-4 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 bg-transparent text-gray-800 border-gray-300 outline-none resize-y align-middle ${errors.comment ? "border-red-500" : "border-gray-300"}`}
              ></textarea>
              {errors.comment && <p className="text-red-500 text-xs mt-1">{errors.comment.message}</p>}
            </div>
          )}
          {/* Footer */}
          <div className={`flex items-center gap-3 mt-6 ${actionType === "Approve" ? 'justify-center' : 'lg:justify-end'}`}>
            <button
              type="button"
              onClick={onClose}
              className="flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-[#f7f8fa] px-4 py-3 text-sm font-medium text-gray-700"
            >
              Cancel
            </button>
            <button
              type="submit"
              className={`inline-flex items-center justify-center font-medium gap-2 rounded-lg transition px-4 py-3 text-sm bg-brand-950 text-white shadow-theme-xs hover:text-brand-950 hover:bg-yellow-500 disabled:bg-yellow-500 disabled:opacity-50`}
            >
              Confirm {actionType}
            </button>
          </div>
        </form>
      </div>
    </Modal>
  );
}