import React, { useEffect, useState } from "react";
import showToast from "../../services/toastService";
import EmployeeRepository from "../../repositories/EmployeeRepository";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import useMaster from "../../hooks/masterHook/useMaster";
import { useDispatch } from "react-redux";
import { changeMaster } from "../../slices/localVariablesSlice";
import { Link, useNavigate, useParams } from "react-router-dom";
import { formatDate } from "../../utils/dateUtils";
import { useEmployeeProfile, useUpdateEmployee } from "../../hooks/useEmployees";
import {
  cacheData,
  clearCacheKey,
  getCachedData,
} from "../../slices/apiDataManager";
import { clearApiCacheKey } from "../../slices/apiCacheSlice";
import { useMutation } from "@tanstack/react-query";

const mobileNumberRegex = /^[0-9]\d{9}$/;

const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
  const dispatch = useDispatch();
  const { mutate: updateEmployee, isPending } = useUpdateEmployee();

  const {
    employee,
    error,
    loading: empLoading,
    refetch
  } = useEmployeeProfile(employeeId);

  useEffect(() => {
    dispatch(changeMaster("Job Role"));
  }, [employeeId]);

  const [disabledEmail, setDisabledEmail] = useState(false);
  const { data: job_role, loading } = useMaster();
  const [isloading, setLoading] = useState(false);
  const navigation = useNavigate();
  const [currentEmployee, setCurrentEmployee] = useState(null);
  const [currentAddressLength, setCurrentAddressLength] = useState(0);
  const [permanentAddressLength, setPermanentAddressLength] = useState(0);

  const userSchema = z.object({
    ...(employeeId ? { id: z.string().optional() } : {}),
    firstName: z.string().min(1, { message: "First Name is required" }),
    middleName: z.string().optional(),
    lastName: z.string().min(1, { message: "Last Name is required" }),
    email: z
      .string()
      .max(80, "Email cannot exceed 80 characters")
      .optional()
      .refine((val) => !val || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val), {
        message: "Invalid email format",
      })
      .refine(
        (val) => {
          if (!val) return true;
          const [local, domain] = val.split("@");
          return (
            val.length <= 320 && local?.length <= 64 && domain?.length <= 255
          );
        },
        {
          message: "Email local or domain part is too long",
        }
      ),
    currentAddress: z
      .string()
      .min(1, { message: "Current Address is required" })
      .max(500, { message: "Address cannot exceed 500 characters" }),
    birthDate: z
      .string()
      .min(1, { message: "Birth Date is required" })
      .refine(
        (date, ctx) => {
          return new Date(date) <= new Date();
        },
        {
          message: "Birth date cannot be in the future",
        }
      ),
    joiningDate: z
      .string()
      .min(1, { message: "Joining Date is required" })
      .refine(
        (date, ctx) => {
          return new Date(date) <= new Date();
        },
        {
          message: "Joining date cannot be in the future",
        }
      ),
    emergencyPhoneNumber: z
      .string()
      .min(1, { message: "Phone Number is required" })
      .regex(mobileNumberRegex, { message: "Invalid phone number " }),
    emergencyContactPerson: z
      .string()
      .min(1, { message: "Emergency Contact Person is required" })
      .regex(/^[A-Za-z\s]+$/, {
        message: "Emergency Contact Person must contain only letters",
      }),
    aadharNumber: z
      .string()
      .optional()
      .refine((val) => !val || /^\d{12}$/.test(val), {
        message: "Aadhar card must be exactly 12 digits long",
      }),
    gender: z
      .string()
      .min(1, { message: "Gender is required" })
      .refine((val) => val !== "Select Gender", {
        message: "Please select a gender",
      }),
    panNumber: z
      .string()
      .optional()
      .refine((val) => !val || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(val), {
        message: "Invalid PAN number",
      }),
    permanentAddress: z
      .string()
      .min(1, { message: "Permanent Address is required" })
      .max(500, { message: "Address cannot exceed 500 characters" }),
    phoneNumber: z
      .string()
      .min(1, { message: "Phone Number is required" })
      .regex(mobileNumberRegex, { message: "Invalid phone number " }),
    jobRoleId: z.string().min(1, { message: "Role is required" }),
  });

  useEffect(() => {
    refetch()
  }, [])

  const {
    register,
    control,
    handleSubmit,
    watch,
    formState: { errors },
    reset,
    getValues,
  } = useForm({
    resolver: zodResolver(userSchema),
    defaultValues: {
      id: currentEmployee?.id || null,
      firstName: currentEmployee?.firstName || "",
      middleName: currentEmployee?.middleName || "",
      lastName: currentEmployee?.lastName || "",
      email: currentEmployee?.email || "",
      currentAddress: currentEmployee?.currentAddress || "",
      birthDate: formatDate(currentEmployee?.birthDate) || "",
      joiningDate: formatDate(currentEmployee?.joiningDate) || "",
      emergencyPhoneNumber: currentEmployee?.emergencyPhoneNumber || "",
      emergencyContactPerson: currentEmployee?.emergencyContactPerson || "",
      aadharNumber: currentEmployee?.aadharNumber || "",
      gender: currentEmployee?.gender || "",
      panNumber: currentEmployee?.panNumber || "",
      permanentAddress: currentEmployee?.permanentAddress || "",
      phoneNumber: currentEmployee?.phoneNumber || "",
      jobRoleId: currentEmployee?.jobRoleId.toString() || null,
    },
    mode: "onChange",
  });

  const AadharNumberValue = watch("aadharNumber") || "";

  const onSubmit = (data) => {
    if (data.email === "") {
      data.email = null;
    }

    updateEmployee({ ...data, IsAllEmployee }, {
      onSuccess: () => {
        reset();
        onClosed();
      },
    });
  };


  useEffect(() => {
    if (!loading && !error && employee) {
      setCurrentEmployee(employee);
    }
  }, [loading, error, employee]);

  useEffect(() => {
    reset(
      currentEmployee
        ? {
          id: currentEmployee.id || null,
          firstName: currentEmployee.firstName || "",
          middleName: currentEmployee.middleName || "",
          lastName: currentEmployee.lastName || "",
          email: currentEmployee.email || "",
          currentAddress: currentEmployee.currentAddress || "",
          birthDate: formatDate(currentEmployee.birthDate) || "",
          joiningDate: formatDate(currentEmployee.joiningDate) || "",
          emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
          emergencyContactPerson:
            currentEmployee.emergencyContactPerson || "",
          aadharNumber: currentEmployee.aadharNumber || "",
          gender: currentEmployee.gender || "",
          panNumber: currentEmployee.panNumber || "",
          permanentAddress: currentEmployee.permanentAddress || "",
          phoneNumber: currentEmployee.phoneNumber || "",
          jobRoleId: currentEmployee.jobRoleId?.toString() || "",
        }
        : {}
    );
    setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0);
    setPermanentAddressLength(currentEmployee?.permanentAddress?.length || 0);
  }, [currentEmployee, reset]);

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)} className="p-sm-0 p-2">
        <div className="text-center"><p className="fs-6 fw-semibold"> {employee ? "Update Employee" : "Create Employee"}</p> </div>
        <div className="row mb-3">
          <div className="col-sm-4">
            <div className="form-text text-start">First Name</div>
            <input
              type="text"
              name="firstName"
              {...register("firstName", {
                required: "First name is required",
                pattern: {
                  value: /^[A-Za-z\s]+$/, // Only letters and spaces
                  message: "Only letters are allowed",
                },
              })}
              className="form-control form-control-sm"
              id="firstName"
              placeholder="First Name"
              onInput={(e) => {
                e.target.value = e.target.value.replace(/[^A-Za-z\s]/g, "");
              }}
            />
            {errors.firstName && (
              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
                {errors.firstName.message}
              </div>
            )}
          </div>
          <div className="col-sm-4">
            <div className="form-text text-start">Middle Name</div>
            <input
              type="text"
              {...register("middleName", {
                pattern: {
                  value: /^[A-Za-z\s]+$/, // Only letters and spaces
                  message: "Only letters are allowed",
                },
              })}
              className="form-control form-control-sm"
              id="middleName"
              placeholder="Middle Name"
              onInput={(e) => {
                e.target.value = e.target.value.replace(/[^A-Za-z\s]/g, "");
              }}
            />
            {errors.middleName && (
              <div className="danger-text text-start " style={{ fontSize: "12px" }}>
                {errors.middleName.message}
              </div>
            )}
          </div>

          <div className="col-sm-4">
            <div className="form-text text-start">Last Name</div>
            <input
              type="text"
              {...register("lastName", {
                pattern: {
                  value: /^[A-Za-z\s]+$/, // Only letters and spaces
                  message: "Only letters are allowed",
                },
              })}
              className="form-control form-control-sm"
              id="lastName"
              placeholder="Last Name"
              onInput={(e) => {
                e.target.value = e.target.value.replace(/[^A-Za-z\s]/g, "");
              }}
            />
            {errors.lastName && (
              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
                {errors.lastName.message}
              </div>
            )}
          </div>

        </div>
        <div className="row mb-3">
          <div className="col-sm-6">
            <div className="form-text text-start">Email</div>
            <input
              type="email"
              id="email"
              {...register("email")}
              className="form-control form-control-sm"
              placeholder="example@domain.com"
              maxLength={80}
              aria-describedby="Email"
              disabled={!!currentEmployee?.email}
            />
            {errors.email && (
              <div
                className="danger-text text-start"
                style={{ fontSize: "12px" }}
              >
                {errors.email.message}
              </div>
            )}
          </div>
          <div className="col-sm-6">
            <div className="form-text text-start">Phone Number</div>
            <input
              type="text"
              keyboardType="numeric"
              id="phoneNumber"
              {...register("phoneNumber")}
              className="form-control form-control-sm"
              placeholder="Phone Number"
              inputMode="numeric"
              maxLength={10}
            />
            {errors.phoneNumber && (
              <div
                className="danger-text text-start"
                style={{ fontSize: "12px" }}
              >
                {errors.phoneNumber.message}
              </div>
            )}
          </div>
        </div>
        <div className="row mb-3"></div>
        <div className="row mb-3">
          <div className="col-sm-4">
            <div className="form-text text-start">Gender</div>

            <div className="input-group">
              <select
                className="form-select form-select-sm "
                {...register("gender")}
                id="gender"
                aria-label=""
              >
                <option disabled value="">
                  Select Gender
                </option>
                <option value="Male">Male </option>
                <option value="Female">Female</option>
                <option value="Other">Other</option>
              </select>
            </div>
            {errors.gender && (
              <div
                className="danger-text text-start"
                style={{ fontSize: "12px" }}
              >
                {errors.gender.message}
              </div>
            )}
          </div>
          <div className="col-sm-4">
            <div className="form-text text-start">Birth Date</div>

            <div className="input-group">
              <input
                className="form-control form-control-sm"
                type="date"
                {...register("birthDate")}
                id="birthDate"
              />
            </div>
            {errors.birthDate && (
              <div
                className="danger-text text-start"
                style={{ fontSize: "12px" }}
              >
                {errors.birthDate.message}
              </div>
            )}
          </div>
          <div className="col-sm-4">
            <div className="form-text text-start">Joining Date</div>

            <div className="input-group">
              <input
                className="form-control form-control-sm"
                type="date"
                {...register("joiningDate")}
                id="joiningDate"
              />
            </div>
            {errors.joiningDate && (
              <div
                className="danger-text text-start"
                style={{ fontSize: "12px" }}
              >
                {errors.joiningDate.message}
              </div>
            )}
          </div>
        </div>
        <div className="row mb-3">
          <div className="col-sm-6">
            <div className="form-text text-start">Current Address</div>

            <textarea
              id="currentAddress"
              className="form-control form-control-sm"
              placeholder="Current Address"
              aria-label="Current Address"
              aria-describedby="basic-icon-default-message2"
              {...register("currentAddress")}
              maxLength={500}
              onChange={(e) => {
                setCurrentAddressLength(e.target.value.length);
                // let react-hook-form still handle it
                register("currentAddress").onChange(e);
              }}
            ></textarea>
            <div className="text-end muted">
              <small>
                {" "}
                {500 - currentAddressLength} characters left
              </small>
            </div>
            {errors.currentAddress && (
              <div
                className="danger-text text-start"
                style={{ fontSize: "12px" }}
              >
                {errors.currentAddress.message}
              </div>
            )}
          </div>
          <div className="col-sm-6">
            <div className="form-text text-start">
              Permanent Address
            </div>

            <textarea
              id="permanentAddress"
              className="form-control form-control-sm"
              placeholder="Permanent Address"
              aria-label="Permanent Address"
              aria-describedby="basic-icon-default-message2"
              {...register("permanentAddress")}
              maxLength={500}
              onChange={(e) => {
                setPermanentAddressLength(e.target.value.length);
                register("permanentAddress").onChange(e);
              }}
            ></textarea>
            <div className="text-end muted">
              <small>
                {500 - permanentAddressLength} characters left
              </small>
            </div>
            {errors.permanentAddress && (
              <div
                className="danger-text text-start"
                style={{ fontSize: "12px" }}
              >
                {errors.permanentAddress.message}
              </div>
            )}
          </div>
        </div>
        <div className="row mb-3">
          {" "}
          <div className="divider">
            <div className="divider-text">Other Information</div>
          </div>
        </div>
        <div className="row mb-3">
          <div className="col-sm-4">
            <div className="form-text text-start">Official Designation</div>
            <div className="input-group">
              <select
                className="form-select form-select-sm"
                {...register("jobRoleId")}
                id="jobRoleId"
                aria-label=""
              >
                <option disabled value="">
                  Select Role
                </option>
                {[...job_role]
                  .sort((a, b) => a?.name?.localeCompare(b.name))
                  .map((item) => (
                    <option value={item?.id} key={item.id}>
                      {item?.name}{" "}
                    </option>
                  ))}
              </select>
            </div>
            {errors.jobRoleId && (
              <div
                className="danger-text text-start"
                style={{ fontSize: "12px" }}
              >
                {errors.jobRoleId.message}
              </div>
            )}
          </div>
          <div className="col-sm-4">
            <div className="form-text text-start">
              Emergency Contact Person
            </div>
            <input
              type="text"
              {...register("emergencyContactPerson")}
              className="form-control form-control-sm"
              id="emergencyContactPerson"
              maxLength={50}
              placeholder="Contact Person"
            />
            {errors.emergencyContactPerson && (
              <div
                className="danger-text text-start"
                style={{ fontSize: "12px" }}
              >
                {errors.emergencyContactPerson.message}
              </div>
            )}
          </div>
          <div className="col-sm-4">
            <div className="form-text text-start">
              Emergency Phone Number
            </div>
            <input
              type="text"
              {...register("emergencyPhoneNumber")}
              className="form-control form-control-sm phone-mask"
              id="emergencyPhoneNumber"
              placeholder="Phone Number"
              inputMode="numeric"
              maxLength={10}
            />
            {errors.emergencyPhoneNumber && (
              <div
                className="danger-text text-start"
                style={{ fontSize: "12px" }}
              >
                {errors.emergencyPhoneNumber.message}
              </div>
            )}
          </div>
        </div>
        <div className="row mb-3 d-none">
          <div className="col-sm-6">
            <div className="form-text text-start">AADHAR Number</div>

            <input
              type="text"
              {...register("aadharNumber")}
              className="form-control form-control-sm"
              id="aadharNumber"
              placeholder="AADHAR Number"
              maxLength={12}
              inputMode="numeric"
            />
            {errors.aadharNumber && (
              <div className="danger-text text-start">
                {errors.aadharNumber.message}
              </div>
            )}
          </div>
          <div className="col-sm-6 d-none">
            <div className="form-text text-start">PAN Number</div>

            <input
              type="text"
              {...register("panNumber")}
              className="form-control form-control-sm"
              id="panNumber"
              placeholder="PAN Number"
              maxLength={10}
            />
            {errors.panNumber && (
              <div
                className="danger-text text-start"
                style={{ fontSize: "12px" }}
              >
                {errors.panNumber.message}
              </div>
            )}
          </div>
        </div>

        {employeeId && (
          <div className="row mb-3 d-none">
            <div className="col-sm-12">
              <input type="text" name="id" {...register("id")} />
            </div>
          </div>
        )}

        <div className="row justify-content-start">
          <div className="col-sm-12">
            <button
              aria-label="manage employee"
              type="submit"
              className="btn btn-sm btn-primary"
              disabled={isPending}
            >
              {isPending
                ? "Please Wait..."
                : employeeId
                  ? "Update"
                  : "Create"}
            </button>

            <button
              aria-label="manage employee"
              type="reset"
              className="btn btn-sm btn-secondary ms-2"
              disabled={isPending}
            >
              Clear
            </button>
          </div>
        </div>
      </form>

    </>
  );
};

export default ManageEmployee;