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 } from "../../hooks/useDirectory";
import { useProjects } from "../../hooks/useProjects";
import SelectMultiple from "../common/SelectMultiple";
import {ContactSchema} from "./DirectorySchema";



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 { contactTags, loading: Tagloading } = useContactTags();
  const [IsSubmitting, setSubmitting] = useState(false);
  const dispatch = useDispatch();

  const methods = useForm({
    resolver: zodResolver(ContactSchema),
    defaultValues: {
      name: "",
      organization: "",
      contactCategoryId: null,
      address: "",
      description: "",
      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: "" }); // ✅ valid object
  }
  if (phoneFields.length === 0) {
    appendPhone({ label: "Office", phoneNumber: "" }); // ✅ valid object
  }
}, [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");

  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() !== ""
    ),
  };

  // Submit cleaned data
  console.log(cleaned);
    // setSubmitting(true);
    // submitContact(data, reset, setSubmitting);
  };

  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">
          <IconButton size={15} iconClass="bx bx-user-plus" color="primary" />{" "}
          <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>
            <input
              className="form-control form-control-sm"
              {...register("organization")}
            />
            {errors.organization && (
              <small className="danger-text">
                {errors.organization.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 ? (
                      <button
                        type="button"
                        className="btn btn-xs btn-primary ms-1"
                        onClick={handleAddEmail}
                        style={{ width: "24px", height: "24px" }}
                      >
                        <i className="bx bx-plus bx-xs" />
                      </button>
                    ) : (
                      <button
                        type="button"
                        className="btn btn-xs btn-danger ms-1 p-0"
                        onClick={() => removeEmail(index)}
                        style={{ width: "24px", height: "24px" }}
                      >
                        <i className="bx bx-x bx-xs" />
                      </button>
                    )}
                  </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 ? (
                      <button
                        type="button"
                        className="btn btn-xs btn-primary ms-1"
                        onClick={handleAddPhone}
                        style={{ width: "24px", height: "24px" }}
                      >
                        <i className="bx bx-plus bx-xs" />
                      </button>
                    ) : (
                      <button
                        type="button"
                        className="btn btn-xs btn-danger ms-1"
                        onClick={() => removePhone(index)}
                        style={{ width: "24px", height: "24px" }}
                      >
                        <i className="bx bx-x bx-xs" />
                      </button>
                    )}
                  </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 selected 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 Label</label>

            <ul
              className="d-flex flex-wrap px-1 list-unstyled overflow-auto mb-0"
              style={{ maxHeight: "80px" }}
            >
              {bucketsLoaging && <p>Loading...</p>}
              {buckets?.map((item) => (
                <li
                  key={item.id}
                  className="list-inline-item flex-shrink-0 me-6 mb-2"
                >
                  <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="text-danger">{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;