import React, { useEffect, useState } from "react";
import { useForm, useFieldArray, FormProvider } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import TagInput from "../common/TagInput";
import {
  useBuckets,
  useContactDetails,
  useCreateContact,
  useDesignation,
  useOrganization,
  useUpdateContact,
} from "../../hooks/useDirectory";
import { useProjects } from "../../hooks/useProjects";
import {
  useContactCategory,
  useContactTags,
} from "../../hooks/masterHook/useMaster";
import SelectMultiple from "../common/SelectMultiple";
import { ContactSchema, defaultContactValue } from "./DirectorySchema";
import InputSuggestions from "../common/InputSuggestion";
import Label from "../common/Label";

const ManageContact = ({ contactId, closeModal }) => {
  // fetch master data
  const { buckets, loading: bucketsLoaging } = useBuckets();
  const { projects, loading: projectLoading } = useProjects();
  const { contactCategory, loading: contactCategoryLoading } =
    useContactCategory();
  const { organizationList } = useOrganization();
  const { designationList } = useDesignation();
  const { contactTags } = useContactTags();

  // fetch contact details if editing
  const { data: contactData, isLoading: isContactLoading } = useContactDetails(
    contactId,
    {
      enabled: !!contactId,
    }
  );

  const [showSuggestions, setShowSuggestions] = useState(false);
  const [filteredDesignationList, setFilteredDesignationList] = useState([]);

  const methods = useForm({
    resolver: zodResolver(ContactSchema),
    defaultValues: defaultContactValue,
  });

  const {
    register,
    handleSubmit,
    control,
    getValues,
    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 (contactId && contactData) {
      reset({
        name: contactData.name || "",
        description: contactData.description || "",

        designation: contactData.designation || "",
        organization: contactData.organization || "",

        contactEmails: contactData.contactEmails?.length
          ? contactData.contactEmails
          : [{ label: "Work", emailAddress: "" }],

        contactPhones: contactData.contactPhones?.length
          ? contactData.contactPhones
          : [{ label: "Office", phoneNumber: "" }],

        contactCategoryId: contactData.contactCategory?.id || "",
        address: contactData?.address || "",
        projectIds: contactData.projects?.map((p) => p.id) || [],
        bucketIds: contactData.buckets?.map((b) => b.id) || [],
        tags: contactData.tags || [],
      });
    }
  }, [contactId, contactData, reset]);

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

  const watchBucketIds = watch("bucketIds") || [];

  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);
  };

  const handleSelectDesignation = (val) => {
    setShowSuggestions(false);
    setValue("designation", val);
  };

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

  // create & update mutations
  const { mutate: CreateContact, isPending: creating } = useCreateContact(() =>
    handleClosed()
  );
  const { mutate: UpdateContact, isPending: updating } = useUpdateContact(() =>
    handleClosed()
  );

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

    if (contactId) {
      const contactPayload = { ...data, id: contactId };
      UpdateContact({
        contactId: contactData.id,
        contactPayload: contactPayload,
      });
    } else {
      CreateContact(payload);
    }
  };

  const handleClosed = () => {
    closeModal();
  };

  const handleAddEmail = () => {
    appendEmail({ label: "Work", emailAddress: "" });
  };

  const handleAddPhone = () => {
    appendPhone({ label: "Office", phoneNumber: "" });
  };

  const isPending = updating || creating;
  return (
    <FormProvider {...methods}>
      <form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
        <div className="d-flex justify-content-center align-items-center mb-4">
          <h5 className="m-0 fw-18">
            {contactId ? "Edit Contact" : "Create New Contact"}
          </h5>
        </div>

        {/* Name + Organization */}
        <div className="row">
          <div className="col-md-6 text-start">
            <Label htmlFor={"name"} required>
              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 htmlFor={"organization"} required>
              Organization
            </Label>
           <InputSuggestions
    organizationList={organizationList}
  value={watch("organization") || ""}
  onChange={(val) => setValue("organization", val, { shouldValidate: true })}
  error={errors.organization?.message}
/>

          </div>
        </div>

        {/* Designation */}
        <div className="row mt-1">
          <div className="col-md-6 text-start position-relative">
            <Label htmlFor={"designation"} required>
              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,
                }}
              >
                {filteredDesignationList.map((designation) => (
                  <li
                    key={designation}
                    className="list-group-item list-group-item-action"
                    style={{ cursor: "pointer", fontSize: "14px" }}
                    onMouseDown={() => handleSelectDesignation(designation)}
                  >
                    {designation}
                  </li>
                ))}
              </ul>
            )}
            {errors.designation && (
              <small className="danger-text">
                {errors.designation.message}
              </small>
            )}
          </div>
        </div>

        {/* Emails + Phones */}
        <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>
                </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-danger"
                        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>
                </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-danger"
                        onClick={() => removePhone(index)}
                      />
                    )}
                  </div>
                  {errors.contactPhones?.[index]?.phoneNumber && (
                    <small className="danger-text">
                      {errors.contactPhones[index].phoneNumber.message}
                    </small>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Category + Projects */}
        <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>

        {/* Tags */}
        <div className="col-12 text-start">
          <TagInput
            name="tags"
            label="Tags"
            options={contactTags}
            isRequired={true}
          />
          {errors.tags && (
            <small className="danger-text">{errors.tags.message}</small>
          )}
        </div>

        {/* Buckets */}
        <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">{errors.bucketIds.message}</small>
            )}
          </div>
        </div>

        {/* Address + Description */}
        <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-end gap-2 py-2 mt-3">
          <button
            className="btn btn-sm btn-label-secondary"
            type="button"
            onClick={handleClosed}
            disabled={isPending}
          >
            Cancel
          </button>
          <button className="btn btn-sm btn-primary" type="submit" disabled={isPending}>
            {isPending ? "Please Wait..." : "Submit"}
          </button>
         
        </div>
      </form>
    </FormProvider>
  );
};

export default ManageContact;