import React, { useEffect, useState } from "react";
import {
  useForm,
  useFieldArray,
  FormProvider,
  useFormContext,
} from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import TagInput from "../common/TagInput";
import IconButton from "../common/IconButton";
import useMaster, {
  useContactCategory,
  useContactTags,
} from "../../hooks/masterHook/useMaster";
import { useDispatch, useSelector } from "react-redux";
import { changeMaster } from "../../slices/localVariablesSlice";
import {
  useBuckets,
  useDesignation,
  useOrganization,
} from "../../hooks/useDirectory";
import { useProjects } from "../../hooks/useProjects";
import SelectMultiple from "../common/SelectMultiple";
import { ContactSchema } from "./DirectorySchema";
import InputSuggestions from "../common/InputSuggestion";

const ManageDirectory = ({ submitContact, onCLosed }) => {
  const selectedMaster = useSelector(
    (store) => store.localVariables.selectedMaster
  );
  const [categoryData, setCategoryData] = useState([]);

  const [TagsData, setTagsData] = useState([]);
  const { data, loading } = useMaster();
  const { buckets, loading: bucketsLoaging } = useBuckets();
  const { projects, loading: projectLoading } = useProjects();
  const { contactCategory, loading: contactCategoryLoading } =
    useContactCategory();
  const { organizationList, loading: orgLoading } = useOrganization();
  const { designationList, loading: designloading } = useDesignation();
  const { contactTags, loading: Tagloading } = useContactTags();
  const [IsSubmitting, setSubmitting] = useState(false);
  const [showSuggestions, setShowSuggestions] = useState(false);
  const [filteredDesignationList, setFilteredDesignationList] = useState([]);
  const dispatch = useDispatch();

  const methods = useForm({
    resolver: zodResolver(ContactSchema),
    defaultValues: {
      name: "",
      organization: "",
      contactCategoryId: null,
      address: "",
      description: "",
      designation: "",
      projectIds: [],
      contactEmails: [],
      contactPhones: [],
      tags: [],
      bucketIds: [],
    },
  });

  const {
    register,
    handleSubmit,
    control,
    getValues,
    trigger,
    setValue,
    watch,
    reset,
    formState: { errors },
  } = methods;

  const {
    fields: emailFields,
    append: appendEmail,
    remove: removeEmail,
  } = useFieldArray({ control, name: "contactEmails" });

  const {
    fields: phoneFields,
    append: appendPhone,
    remove: removePhone,
  } = useFieldArray({ control, name: "contactPhones" });

  useEffect(() => {
    if (emailFields.length === 0) {
      appendEmail({ label: "Work", emailAddress: "" });
    }
    if (phoneFields.length === 0) {
      appendPhone({ label: "Office", phoneNumber: "" });
    }
  }, [emailFields.length, phoneFields.length]);

  const handleAddEmail = async () => {
    const emails = getValues("contactEmails");
    const lastIndex = emails.length - 1;
    const valid = await trigger(`contactEmails.${lastIndex}.emailAddress`);
    if (valid) {
      appendEmail({ label: "Work", emailAddress: "" });
    }
  };

  const handleAddPhone = async () => {
    const phones = getValues("contactPhones");
    const lastIndex = phones.length - 1;
    const valid = await trigger(`contactPhones.${lastIndex}.phoneNumber`);
    if (valid) {
      appendPhone({ label: "Office", phoneNumber: "" });
    }
  };

  const watchBucketIds = watch("bucketIds");

  // handle logic when input of desgination is changed
  const handleDesignationChange = (e) => {
    const val = e.target.value;

    const matches = designationList.filter((org) =>
      org.toLowerCase().includes(val.toLowerCase())
    );
    setFilteredDesignationList(matches);
    setShowSuggestions(true);
    setTimeout(() => setShowSuggestions(false), 5000);
  };

  // handle logic when designation is selected
  const handleSelectDesignation = (val) => {
    setShowSuggestions(false);
    setValue("designation", val);
  };

  const toggleBucketId = (id) => {
    const updated = watchBucketIds?.includes(id)
      ? watchBucketIds.filter((val) => val !== id)
      : [...watchBucketIds, id];

    setValue("bucketIds", updated, { shouldValidate: true });
  };
  const handleCheckboxChange = (id) => {
    const updated = watchBucketIds.includes(id)
      ? watchBucketIds.filter((i) => i !== id)
      : [...watchBucketIds, id];

    setValue("bucketIds", updated, { shouldValidate: true });
  };

  const onSubmit = (data) => {
    const cleaned = {
      ...data,
      contactEmails: (data.contactEmails || []).filter(
        (e) => e.emailAddress?.trim() !== ""
      ),
      contactPhones: (data.contactPhones || []).filter(
        (p) => p.phoneNumber?.trim() !== ""
      ),
    };

    setSubmitting(true);
    submitContact(cleaned, reset, setSubmitting);
  };
  const orgValue = watch("organization");

  const handleClosed = () => {
    onCLosed();
  };
  return (
    <FormProvider {...methods}>
      <form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
        <div className="d-flex justify-content-center align-items-center">
          <h6 className="m-0 fw-18"> Create New Contact</h6>
        </div>
        <div className="row">
          <div className="col-md-6  text-start">
            <label className="form-label">Name</label>
            <input
              className="form-control form-control-sm"
              {...register("name")}
            />
            {errors.name && (
              <small className="danger-text">{errors.name.message}</small>
            )}
          </div>

          <div className="col-md-6  text-start">
            <label className="form-label">Organization</label>
            <InputSuggestions
              organizationList={organizationList}
              value={getValues("organization") || ""}
              onChange={(val) => setValue("organization", val)}
              error={errors.organization?.message}
            />
          </div>
        </div>
        <div className="row mt-1">
          <div className="col-md-6  text-start">
            <label className="form-label">Designation</label>
            <input
              className="form-control form-control-sm"
              {...register("designation")}
              onChange={handleDesignationChange}
            />
            {showSuggestions && filteredDesignationList.length > 0 && (
              <ul
                className="list-group shadow-sm position-absolute bg-white border w-50 zindex-tooltip"
                style={{
                  maxHeight: "180px",
                  overflowY: "auto",
                  marginTop: "2px",
                  zIndex: 1000,
                  borderRadius: "0px",
                }}
              >
                {filteredDesignationList.map((designation) => (
                  <li
                    key={designation}
                    className="list-group-item list-group-item-action border-none "
                    style={{
                      cursor: "pointer",
                      padding: "5px 12px",
                      fontSize: "14px",
                      transition: "background-color 0.2s",
                    }}
                    onMouseDown={() => handleSelectDesignation(designation)}
                    onMouseEnter={(e) =>
                      (e.currentTarget.style.backgroundColor = "#f8f9fa")
                    }
                    onMouseLeave={(e) =>
                      (e.currentTarget.style.backgroundColor = "transparent")
                    }
                  >
                    {designation}
                  </li>
                ))}
              </ul>
            )}
            {errors.designation && (
              <small className="danger-text">
                {errors.designation.message}
              </small>
            )}
          </div>
        </div>
        <div className="row mt-1">
          <div className="col-md-6">
            {emailFields.map((field, index) => (
              <div
                key={field.id}
                className="row d-flex align-items-center mb-1"
              >
                <div className="col-5  text-start">
                  <label className="form-label">Label</label>
                  <select
                    className="form-select form-select-sm"
                    {...register(`contactEmails.${index}.label`)}
                  >
                    <option value="Work">Work</option>
                    <option value="Personal">Personal</option>
                    <option value="Other">Other</option>
                  </select>
                  {errors.contactEmails?.[index]?.label && (
                    <small className="danger-text">
                      {errors.contactEmails[index].label.message}
                    </small>
                  )}
                </div>
                <div className="col-7  text-start">
                  <label className="form-label">Email</label>
                  <div className="d-flex align-items-center">
                    <input
                      type="email"
                      className="form-control form-control-sm"
                      {...register(`contactEmails.${index}.emailAddress`)}
                      placeholder="email@example.com"
                    />
                    {index === emailFields.length - 1 ? (
                      <i
                        className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary"
                        onClick={handleAddEmail}
                      />
                    ) : (
                      <i
                        className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-primary"
                        onClick={() => removeEmail(index)}
                      />
                    )}
                  </div>
                  {errors.contactEmails?.[index]?.emailAddress && (
                    <small className="danger-text">
                      {errors.contactEmails[index].emailAddress.message}
                    </small>
                  )}
                </div>
              </div>
            ))}
          </div>
          <div className="col-md-6">
            {phoneFields.map((field, index) => (
              <div
                key={field.id}
                className="row d-flex align-items-center mb-2"
              >
                <div className="col-5  text-start">
                  <label className="form-label">Label</label>
                  <select
                    className="form-select form-select-sm"
                    {...register(`contactPhones.${index}.label`)}
                  >
                    <option value="Office">Office</option>
                    <option value="Personal">Personal</option>
                    <option value="Business">Business</option>
                  </select>
                  {errors.phone?.[index]?.label && (
                    <small className="danger-text">
                      {errors.ContactPhones[index].label.message}
                    </small>
                  )}
                </div>
                <div className="col-7  text-start">
                  <label className="form-label">Phone</label>
                  <div className="d-flex align-items-center">
                    <input
                      type="text"
                      className="form-control form-control-sm"
                      {...register(`contactPhones.${index}.phoneNumber`)}
                      placeholder="9876543210"
                    />
                    {index === phoneFields.length - 1 ? (
                      <i
                        className="bx bx-plus-circle bx-xs ms-1 cursor-pointer text-primary"
                        onClick={handleAddPhone}
                      />
                    ) : (
                      <i
                        className="bx bx-minus-circle bx-xs ms-1 cursor-pointer text-danager"
                        onClick={() => removePhone(index)}
                      />
                    )}
                  </div>
                  {errors.contactPhones?.[index]?.phoneNumber && (
                    <small className="danger-text">
                      {errors.contactPhones[index].phoneNumber.message}
                    </small>
                  )}
                </div>
              </div>
            ))}
          </div>
          {errors.contactPhone?.message && (
            <div className="danger-text">{errors.contactPhone.message}</div>
          )}
        </div>

        <div className="row my-1">
          <div className="col-md-6  text-start">
            <label className="form-label">Category</label>
            <select
              className="form-select form-select-sm"
              {...register("contactCategoryId")}
            >
              {contactCategoryLoading && !contactCategory ? (
                <option disabled value="">
                  Loading...
                </option>
              ) : (
                <>
                  <option disabled value="">
                    Select Category
                  </option>
                  {contactCategory?.map((cate) => (
                    <option key={cate.id} value={cate.id}>
                      {cate.name}
                    </option>
                  ))}
                </>
              )}
            </select>
            {errors.contactCategoryId && (
              <small className="danger-text">
                {errors.contactCategoryId.message}
              </small>
            )}
          </div>
          <div className="col-12 col-md-6 text-start">
            <SelectMultiple
              name="projectIds"
              label="Select Projects"
              options={projects}
              labelKey="name"
              valueKey="id"
              IsLoading={projectLoading}
            />
            {errors.projectIds && (
              <small className="danger-text">{errors.projectIds.message}</small>
            )}
          </div>
        </div>

        <div className="col-12 text-start">
          <TagInput name="tags" label="Tags" options={contactTags} />
          {errors.tags && (
            <small className="danger-text">{errors.tags.message}</small>
          )}
        </div>
        <div className="row">
          <div className="col-md-12 mt-1 text-start">
            <label className="form-label ">Select Bucket</label>

            <ul className="d-flex flex-wrap px-1 list-unstyled  mb-0">
              {bucketsLoaging && <p>Loading...</p>}
              {buckets?.map((item) => (
                <li
                  key={item.id}
                  className="list-inline-item flex-shrink-0 me-6 mb-1"
                >
                  <div className="form-check ">
                    <input
                      type="checkbox"
                      className="form-check-input"
                      id={`item-${item.id}`}
                      checked={watchBucketIds.includes(item.id)}
                      onChange={() => handleCheckboxChange(item.id)}
                    />
                    <label
                      className="form-check-label"
                      htmlFor={`item-${item.id}`}
                    >
                      {item.name}
                    </label>
                  </div>
                </li>
              ))}
            </ul>
            {errors.bucketIds && (
              <small className="danger-text mt-0">
                {errors.bucketIds.message}
              </small>
            )}
          </div>
        </div>

        <div className="col-12 text-start">
          <label className="form-label">Address</label>
          <textarea
            className="form-control form-control-sm"
            rows="2"
            {...register("address")}
          />
        </div>

        <div className="col-12 text-start">
          <label className="form-label">Description</label>
          <textarea
            className="form-control form-control-sm"
            rows="2"
            {...register("description")}
          />
          {errors.description && (
            <small className="danger-text">{errors.description.message}</small>
          )}
        </div>

        <div className="d-flex justify-content-center gap-1 py-2">
          <button className="btn btn-sm btn-primary" type="submit">
            {IsSubmitting ? "Please Wait..." : "Submit"}
          </button>
          <button
            className="btn btn-sm btn-secondary"
            type="button"
            onClick={handleClosed}
          >
            Cancel
          </button>
        </div>
      </form>
    </FormProvider>
  );
};

export default ManageDirectory;