import { useForm, useFieldArray } from "react-hook-form";
import useAuthProvider from "@/useAuthProvider";
import { addContact, getCarrierContactInformation, toDeleteContactName } from "@/services/public";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { ToastContainer, toast } from "react-toastify";
import { FormLabel, Button } from "react-bootstrap";
import { useSession } from "next-auth/react";
import { useEffect, useState } from "react";
import ConfirmModalAlert from "../modal/ConfirmModalAlert";
export default function ContactNames(props: any) {
  
  const { Permission: userData } = useAuthProvider();

  function transformData(inputData) {
    const transformedData = {
      id: [],
      name: [],
      position: [],
      phone: [],
      email: [],
      is_recived_email: [],
      is_primary: [],
    };

    function checkAndToastError() {
      toast.error(
        "Include on Rate Request requires at least one valid Email address",
        { position: toast.POSITION.TOP_CENTER }
      );
    }

    function addContactToTransformedData(contact, isPrimary) {
      transformedData.id.push(contact.id);
      transformedData.name.push(contact.name);
      transformedData.position.push(contact.position);
      transformedData.phone.push(contact.phone);
      transformedData.email.push(contact.email);
      transformedData.is_recived_email.push(transformDataEmail(contact));
      transformedData.is_primary.push(transformDataPrimary(isPrimary));
    }

    function processContact(contact, isPrimary) {
      if (emailReceiveCheck(contact)) {
        checkAndToastError();
        return false;
      }
      addContactToTransformedData(contact, isPrimary);
      return true;
    }

    function transformPrimaryContacts({ primaryContacts }: { primaryContacts; }) {
      for (let contact of primaryContacts) {
        if (!processContact(contact, false)) {
          return false;
        }
      }
      return true;
    }

    if (checkEmailFunc(inputData)) {
      checkAndToastError();
      return transformedData;
    }

    addContactToTransformedData(inputData, true);

    if (!transformPrimaryContacts({ primaryContacts: inputData.primarycontacts })) {
      return transformedData;
    }

    return transformedData;
  }

  const { data } = useSession();

  const token = data?.user?.image;
  const ids = data?.user?.carrier_id;
 const registerSubmit = async (datas: any) => {
    const transformedData = transformData(datas);
    registerSubmitModScope(props, transformedData);
    await registerSubmitData(
      transformedData,
      token,
      ids,
      fetchData,
      props
    );
  };

  const schema = yup.object().shape({
    is_recived_email: yup.boolean(),
    name: yup
      .string()
      .required("Name is required")
      .max(20, "Maximum 20 characters allowed"),
    email: yup
      .string()
      .email("Please enter a valid email address")
      .matches(
        /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}$/,
        "Please enter a valid email address"
      )
      .nullable()
      .max(40, "Maximum 40 characters allowed"),
    phone: yup
      .string()
      .nullable()
      .notRequired()
      .test(
        "is-valid-phone",
        "Phone number must be 10 digits",
        (value) => {
          if (!value) return true;
          const stringValue = String(value);
          return (stringValue.length == 12) ? true : false;
        }
      ),
    position: yup.string().nullable().max(20, "Maximum 20 characters allowed"),
    primarycontacts: yup.array().of(
      yup.object().shape({
        id: yup.string(),
        name: yup
          .string()
          .required("Name is required")
          .max(20, "Maximum 20 characters allowed"),
        email: yup
          .string()
          .email("Please enter a valid email address")
          .matches(
            /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}$/,
            "Please enter a valid email address"
          )
          .nullable()
          .max(40, "Maximum 40 characters allowed"),
        phone: yup
          .string()
          .nullable()
          .notRequired()
          .test(
            "is-valid-phone",
            "Phone number must be 10 digits",
            (value) => {
              if (!value) return true;
              const stringValue = String(value);
              return (stringValue.length == 12) ? true : false;
            }
          ),
        position: yup.string().nullable().max(20, "Maximum 20 characters allowed"),
      })
    ),
  });
  
  const {
    register,
    control,
    handleSubmit,
    formState: { errors },
    reset,
    setValue,
    watch,
  } = useForm({
    resolver: yupResolver(schema)
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: "primarycontacts",
  });
  const primaryContactsWatch = watch("primarycontacts");
  const [collapsed, setCollapsed] = useState(props?.keys === 0 ?true:false);
  const [isModalStatus, setIsModalStatus] = useState(false);
  const [selectedKeyID, setSelectedKeyID] = useState('');
  const [selectedModalKeyIndex, setSelectedModalKeyIndex] = useState<any>('');

  const fetchData = async () => {
    await fetchDataModScope(token, ids, props, reset);
  };

  useEffect(() => {
    fetchData();
  }, [props]);

  const handlePhoneChange = (event, index, fieldName) => {
    const inputValue = event.target.value;
    const cleanedInput = inputValue.replace(/\D/g, "");
    const formattedNumber = cleanedInput.slice(0, 10);
    const formattedDisplayNumber = formattedNumber.replace(
      /(\d{3})(\d{3})(\d{4})/,
      "$1-$2-$3"
    );
    handlePhoneChangeValueMod(setValue, index, fieldName, formattedDisplayNumber);
  };

  const handleFaxChange = (event, index, fieldName) => {
    const inputValue = event.target.value;
    const cleanedInput = inputValue.replace(/\D/g, "");
    const formattedNumber = cleanedInput.slice(0, 10);
    const formattedDisplayNumber = formattedNumber.replace(
      /(\d{3})(\d{3})(\d{4})/,
      "$1-$2-$3"
    );
    handleFaxChangeModScope(setValue, index, fieldName, formattedDisplayNumber);
  };

  const handleDeleteModalfn = async ()=>{
    if(selectedKeyID){
      const response = await toDeleteContactName(token, selectedKeyID);
      if (response.status === 'success') {
        remove(selectedModalKeyIndex);
        const currentValues = watch("primarycontacts");
        reset({ primarycontacts: currentValues });
        setIsModalStatus(false);
        toast.success(response.message, { position: toast.POSITION.TOP_CENTER });
      }
    }
  }

  const handleModalClosefn = ()=>{
    setIsModalStatus(false);
  }

  return (
    <>
      {isModalStatus && (
        <ConfirmModalAlert  
          handleDeleteModalfn = {handleDeleteModalfn}
          handleModalClosefn = {handleModalClosefn}
          isModalStatus = {isModalStatus}
        />
      )}
      <ToastContainer />
      {jsxContent({
        handleSubmit,
        registerSubmit,
        register,
        errors,
        handlePhoneChange,
        watch,
        data,
        fields,
        handleFaxChange,
        userData,
        append,
        collapsed,
        setCollapsed,
        props,
        remove,
        primaryContactsWatch,
        toDeleteContactName,
        token,
        reset,
        setIsModalStatus,
        setSelectedKeyID,
        setSelectedModalKeyIndex
      })}
    </>
  );
}

function registerSubmitModScope(props: any, transformedData: { id: never[]; name: never[]; position: never[]; phone: never[]; email: never[]; is_recived_email: never[]; is_primary: never[]; }) {
  if (props?.check) {
    transformedData.user_id = props?.adminToken?.data?.user_id;
  }
}

async function fetchDataModScope(token: string | null | undefined, ids: any, props: any, reset: any) {
  try {
    const res = await getCarrierContactInformation(token, ids);
    if (res?.data?.length ||
      props?.adminToken?.data?.details?.personal_info?.length > 0) {
        
      const { primaryContact, primaryContacts } = getCarrierInfoModule(
        res,
        props
      );
      
      reset({
        id: primaryContact.id,
        name: primaryContact.name,
        position: primaryContact.position,
        phone: primaryContact.phone,
        email: primaryContact.email,
        is_recived_email: primaryContact.is_recived_email,
        primarycontacts: primaryContacts,
      });
    }
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

function handleFaxChangeModScope(setValue, index: any, fieldName: any, formattedDisplayNumber: any) {
  setValue(index === 1 ? "fax" : fieldName, formattedDisplayNumber);
}

function handlePhoneChangeValueMod(setValue, index: any, fieldName: any, formattedDisplayNumber: any) {
  setValue(index === 1 ? "phone" : fieldName, formattedDisplayNumber);
}

function jsxContent({
  handleSubmit,
  registerSubmit,
  register,
  errors,
  handlePhoneChange,
  watch,
  data,
  fields,
  handleFaxChange,
  userData,
  append,
  collapsed,
  setCollapsed,
  props,
  remove,
  primaryContactsWatch,
  toDeleteContactName: contactNameDelete,
  token,
  reset,
  setIsModalStatus,
  setSelectedKeyID,
  setSelectedModalKeyIndex
}: {
  handleSubmit;
  registerSubmit: (datas: any) => Promise<void>;
  register;
  errors;
  handlePhoneChange: (event: any, index: any, fieldName: any) => void;
  watch;
  data;
  fields;
  handleFaxChange: (event: any, index: any, fieldName: any) => void;
  userData: undefined;
  append;
  collapsed: any;
  setCollapsed: any;
  props:any;
  remove: any;
  primaryContactsWatch: any;
  toDeleteContactName: any;
  token: any;
  reset: any;
  setIsModalStatus: any;
  setSelectedKeyID: any;
  setSelectedModalKeyIndex: any;
}) {
  return (
    <div className="details_bot-primary">
      <div className={[
        "profile_edit_body-detail",
        "accordion_cls",
        "my-3",
        !collapsed && "new-details" 
      ].filter(Boolean).join(' ')}>
        {newFormFunction({ handleSubmit, registerSubmit, setCollapsed, collapsed, register, errors, handlePhoneChange, watch, data, fields, handleFaxChange, userData, append, props, remove, primaryContactsWatch, contactNameDelete, token, reset, setIsModalStatus, setSelectedKeyID, setSelectedModalKeyIndex })}
    </div>
    </div>
  );
}

function newFormFunction({ handleSubmit, registerSubmit, setCollapsed, collapsed, register, errors, handlePhoneChange, watch, data, fields, handleFaxChange, userData, append, props, remove, primaryContactsWatch, contactNameDelete: deleteContactName, token, reset, setIsModalStatus, setSelectedKeyID, setSelectedModalKeyIndex }: { handleSubmit: any; registerSubmit: (datas: any) => Promise<void>; setCollapsed: any; collapsed: any; register: any; errors: any; handlePhoneChange: (event: any, index: any, fieldName: any) => void; watch: any; data: any; fields: any; handleFaxChange: (event: any, index: any, fieldName: any) => void; userData: undefined; append: any; props:any; remove: any; primaryContactsWatch: any; contactNameDelete: any; token: any; reset: any; setIsModalStatus:any; setSelectedKeyID: any; setSelectedModalKeyIndex: any;}) {
  const canAddContact = userData?.AddContacttoContactDetails || data?.user?.group_type === "super_admin";
  const canEditContact = userData?.EditContactDetailstab || data?.user?.group_type === "super_admin";
  const hasFields = fields?.length > 0;

  return  newFormFunctionReturnFunc({ handleSubmit, registerSubmit, props, setCollapsed, collapsed, register, errors, handlePhoneChange, watch, data, hasFields, fields, handleFaxChange, canAddContact, append, canEditContact, remove, primaryContactsWatch, deleteContactName, token, reset, setIsModalStatus, setSelectedKeyID, setSelectedModalKeyIndex});
}

function newFormFunctionReturnFunc({ handleSubmit, registerSubmit, props, setCollapsed, collapsed, register, errors, handlePhoneChange, watch, data, hasFields, fields, handleFaxChange, canAddContact, append, canEditContact, remove, primaryContactsWatch, deleteContactName: nameContactDelete, token, reset, setIsModalStatus, setSelectedKeyID, setSelectedModalKeyIndex }: { handleSubmit: any; registerSubmit: (datas: any) => Promise<void>; props: any; setCollapsed: any; collapsed: any; register: any; errors: any; handlePhoneChange: (event: any, index: any, fieldName: any) => void; watch: any; data: any; hasFields: boolean; fields: any; handleFaxChange: (event: any, index: any, fieldName: any) => void; canAddContact: any; append: any; canEditContact: any; remove: any; primaryContactsWatch: any; deleteContactName:any; token:any; reset: any; setIsModalStatus: any; setSelectedKeyID: any; setSelectedModalKeyIndex: any;}) {

  const handleDelete = async (index: any, id: any) => {
    if(id) {
      try {
        setIsModalStatus(true);
        setSelectedKeyID(id);
        setSelectedModalKeyIndex(index);
      } catch (error) {
        setIsModalStatus(false);
        console.error("Error while deleting the contact:", error);
      }
    } else {
      setIsModalStatus(false);
      setSelectedKeyID('');
      setSelectedModalKeyIndex('');
      remove(index);
    }
  };
  
  return <form onSubmit={handleSubmit(registerSubmit)}>
    <div onClick={() => props?.keys === 1 ? setCollapsed(!collapsed) : ""} className='profile_heading-general ' style={{ cursor: "pointer" }}>
      <h3>Primary Business Contact</h3>
      {props?.keys === 0 ? "" : <svg
        xmlns='http://www.w3.org/2000/svg'
        width='16'
        height='16'
        fill='currentColor'
        class='bi bi-caret-down-fill'
        viewBox='0 0 16 16'
      >
        <path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z' />
      </svg>}

    </div>
    <div className='row'>
      {collapsed ? (
        <>
          <label style={{ textAlign: "center", paddingBottom: "10px" }}>
            All Information entered will be publicly viewable within Draydex
          </label>
          <div style={{ display: "none" }} className='col-md-6'>
            <FormLabel htmlFor='name'>id:</FormLabel>
            <input
              {...register("id")}
              placeholder=''
              type='text'
              className='form-control' />
          </div>
          <div className='col-md-6'>
            <FormLabel htmlFor='name'>Name:</FormLabel>
            <input
              {...register("name")}
              placeholder='Enter Name'
              type='text'
              className='form-control' />
            {nameFieldErr(errors)}
          </div>
          <div className='col-md-6'>
            <FormLabel htmlFor='name'>Position:</FormLabel>
            <input
              {...register("position")}
              placeholder='Enter Position'
              type='text'
              className='form-control' />
            {positionFieldErr(errors)}
          </div>
          <div style={{ display: "none" }} className='col-md-6'>
            <FormLabel htmlFor='name'>primary:</FormLabel>
            <input
              {...register("primary")}
              placeholder='Enter Primary'
              type='text'
              value='1'
              className='form-control' />
          </div>
          <div className='col-md-6'>
            <FormLabel htmlFor='name'>Phone:</FormLabel>
            <input
              {...register("phone")}
              placeholder='Enter Phone'
              type='text'
              className='form-control'
              onChange={(e) => handlePhoneChange(e, 1, "")}
              value={watch("phone")} />
              {errors && errors.phone && (
                <p className='text-danger'>{errors.phone.message}</p>
              )}
          </div>
          <div className='col-md-6'>
            <FormLabel htmlFor='name'>Email:</FormLabel>
            <input
              {...register("email")}
              placeholder='Enter Email'
              type='text'
              className='form-control' />
            {midJscData(data, register)}

            {emailFieldErr(errors)}
          </div>
        </>
      ) : (
        ""
      )}
    </div>
    <br />
    {collapsed ? (
      <>
        <div>
          {hasFields && (
          <div className="table-header-carrier"> 
           <h3 className='text-center head-center head-count'>
           Additional Contacts
        </h3></div>
          )}
          {fields.map(({ id }, index) => (
            <>
              <div key={id}>
                <div className='row px-3'>
                  <div style={{textAlign: 'end', position: 'relative', top: '26px'}}>
                    <Button className="btn btn-sm btn-danger" onClick={()=>{handleDelete(index, primaryContactsWatch[index]?.id);
                    }}>&times;</Button>
                  </div>
                  <div className='d-flex justify-content-end mt-2'>
                    <div>&nbsp;</div>
                  </div>

                  <div className='col-md-6'>
                     <input
                      {...register(`primarycontacts[${index}].id`)}
                      placeholder='Enter Name'
                      type='hidden'
                      className='form-control'
                      value={primaryContactsWatch[index]?.id || ""}
                      />
                    <FormLabel htmlFor='name'>Name:</FormLabel>
                    <input
                      {...register(`primarycontacts[${index}].name`)}
                      placeholder='Enter Name'
                      type='text'
                      className='form-control' />
                    {primarycontactsErrFields(errors, index)}
                  </div>
                  <div className='col-md-6'>
                    <FormLabel htmlFor='name'>Position:</FormLabel>
                    <input
                      {...register(`primarycontacts[${index}].position`)}
                      placeholder='Enter Position'
                      type='text'
                      className='form-control' />
                    {errors.primarycontacts &&
                      errors.primarycontacts[index] &&
                      errors.primarycontacts[index].position && (
                        <p className='text-danger'>
                          {errors.primarycontacts[index].position.message}
                        </p>
                      )}
                  </div>
                  <div style={{ display: "none" }} className='col-md-6'>
                    <FormLabel htmlFor='name'>Primary:</FormLabel>
                    <input
                      {...register(`primarycontacts[${index}].primary`)}
                      placeholder='Enter primary'
                      type='text'
                      defaultValue='0'
                      value='0'
                      className='form-control' />
                  </div>
                  <div className='col-md-6'>
                    <FormLabel htmlFor='name'>Phone:</FormLabel>
                    <input
                      {...register(`primarycontacts[${index}].phone`)}
                      placeholder='Enter Phone'
                      type='text'
                      onChange={(e) => handleFaxChange(
                        e,
                        2,
                        `primarycontacts[${index}].phone`
                      )}
                      value={watch(`primarycontacts[${index}].phone`) || ""}
                      className='form-control' />
                      {errors.primarycontacts &&
                      errors.primarycontacts[index] &&
                      errors.primarycontacts[index].phone && (
                        <p className='text-danger'>
                          {errors.primarycontacts[index].phone.message}
                        </p>
                      )}
                  </div>
                  <div className='col-md-6'>
                    <FormLabel htmlFor='name'>Email:</FormLabel>
                    <input
                      {...register(`primarycontacts[${index}].email`)}
                      placeholder='Enter Email'
                      type='text'
                      className='form-control' />
                    {errors.primarycontacts &&
                      errors.primarycontacts[index] &&
                      errors.primarycontacts[index].email && (
                        <p className='text-danger'>
                          {errors.primarycontacts[index].email.message}
                        </p>
                      )}
                    {data?.user?.role_id !== 3 &&
                      data?.user?.role_id !== 5 ? (
                      <div style={{ display: "flex", gap: "8px" }}>
                        <div>
                          <input
                            {...register(
                              `primarycontacts[${index}].is_recived_email`
                            )}
                            type='checkbox'
                            id={`primarycontacts[${index}].is_recived_email`}
                            name={`primarycontacts[${index}].is_recived_email`}
                            defaultChecked={false} />
                        </div>
                        <div>
                          {" "}
                          <p>
                            I want to receive the rate emails from Draydex
                          </p>
                        </div>
                      </div>
                    ) : (
                      ""
                    )}
                  </div>
                </div>
              </div>
            </>
          ))}
        </div>
        <div
          className='col-12 flex gap-2'
          style={{ gap: 10, textAlign: "center" }}
        >
          <br></br>
          {canAddContact && (
            <Button
              type='button'
              onClick={() => append({})}
              className='btn btn-primary divStylecss-update'
            >
              Add Contact
            </Button>
          )}
          &nbsp; &nbsp; &nbsp; &nbsp;
          {canEditContact && (
            <Button type='submit' className='btn btn-primary divStylecss-update'>
              Save
            </Button>
          )}
        </div>
      </>
    ) : (
      ""
    )}
  </form>;
}

function primarycontactsErrFields(errors: any, index: any) {
  return errors.primarycontacts &&
    errors.primarycontacts[index] &&
    errors.primarycontacts[index].name && (
      <p className='text-danger'>
        {errors.primarycontacts[index].name.message}
      </p>
    );
}

function emailFieldErr(errors: any) {
  return errors && errors.email && (
    <p className='text-danger'>{errors.email.message}</p>
  );
}

function positionFieldErr(errors: any) {
  return errors && errors.position && (
    <p className='text-danger'>{errors.position.message}</p>
  );
}

function nameFieldErr(errors: any) {
  return errors && errors.name && (
    <p className='text-danger'>{errors.name.message}</p>
  );
}

function midJscData(data: any, register: any) {
  return data?.user?.role_id !== 3 && data?.user?.role_id !== 5 ? (
    <div style={{ display: "flex", gap: "8px" }}>
      <div>
        {" "}
        <input
          {...register("is_recived_email")}
          type='checkbox'
          id='is_recived_email'
          name='is_recived_email'
          defaultChecked={false}
        />
      </div>
      <div>
        {" "}
        <p>I want to receive rate emails from Draydex </p>
      </div>
    </div>
  ) : (
    ""
  );
}

function getCarrierInfoModule(res: any, props: any) {
  const extractContacts = (contacts: any[]) =>
    contacts.map(({ id, name, position, phone, email, is_recived_email, contact_id }) => ({
      id,
      name,
      position,
      phone,
      email,
      is_recived_email: is_recived_email === 1,
      contactId: contact_id,
    }));

  const personalInfo = props?.adminToken?.data?.details?.personal_info || [];
  const responseData = res?.data || [];

  const personalInfoSortedData = [...personalInfo].sort((a, b) =>
    b.is_primary - a.is_primary || a.id - b.id
  );

  const responseDataSortedData: any = [...responseData].sort((a, b) =>
    b.is_primary - a.is_primary || a.id - b.id
  );
  
  const contacts = personalInfoSortedData.length > 0 ? personalInfoSortedData : responseDataSortedData;
  const [primaryContact, ...primaryContacts] = extractContacts(contacts);
  return { primaryContact, primaryContacts };
}

async function registerSubmitData(
  transformedData:
    | {
        id: never[];
        name: never[];
        position: never[];
        phone: never[];
        email: never[];
        is_recived_email: never[];
        is_primary: never[];
      }
    | undefined,
  token: string | null | undefined,
  ids: any,
  fetchData: () => Promise<void>,
  props: any,
) {
  try {
    const res = await addContact(
      transformedData,
      token,
      props?.adminToken?.data?.details?.personal_info
        ? props?.adminToken?.data?.user_id
        : ids
    );
    if (res?.status === "success") {
      await fetchData();
      if(props.keys > 0){
        props?.setLoad(true);
      }
      toast.success(res.message, { position: toast.POSITION.TOP_CENTER });
    }
  } catch (error) {
    console.error("Error submitting data:", error);
  }
}

function emailReceiveCheck(contact: any) {
  return (
    contact.is_recived_email && (!contact.email || contact.email.trim() === "")
  );
}

function checkEmailFunc(inputData: any) {
  return (
    inputData.is_recived_email &&
    (!inputData.email || inputData.email.trim() === "")
  );
}

function transformDataPrimary(isPrimary: any): never {
  return isPrimary ? "1" : "0";
}

function transformDataEmail(contact: any): never {
  return contact.is_recived_email ? "1" : "0";
}