import React, { useEffect, useState, useMemo } from "react";
import { Select } from "../Select";
import { Input } from "../Input";
import { Button } from "../Button";
import { DatePicker } from "../DatePicker";
import { DateRangePicker } from "../DateRangePicker";
import { useController, useForm } from "react-hook-form";
import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
import {
  NON_TEXT_FILTER_OPTIONS,
  TEXT_FILTER_OPTIONS,
  isColumnSelectionDuplicate,
} from "../../utils/helper";
import moment from "moment";
import { use } from "react";
const AdvanceSearchModalItem = ({
  colDefs,
  control,
  index,
  actualIndex, // Add actualIndex prop for the real form index
  onDelete,
  filteredColumnsInitialOptions,
  totalColumns,
  currentColumnId,
  activeOption,
  getValues,
  addNewColumn,
  setToShowDuplicateColumnInAdvanceSearch,
  selectedThirdOptionDropdownValue,
  setSelectedThirdOptionDropdownValue,
  isClearAll,
  fields,
  isLastVisible,
  flag,
  setFlag,
  pendingDeletions,
  setPendingDeletions,
  remove,
  ...args
}) => {
  const [isColumnOptionsOpen, setIsColumnOptionsOpen] = useState(false);
  const [isOperationOptionsOpen, setIsOperationOptionsOpen] = useState(false);
  const [isThirdOptionDropdownOpen, setIsThirdOptionDropdownOpen] =
    useState(false);
  const [currentOperationOptions, setCurrentOperationOptions] = useState([]);

  const [
    currentThirdOptionDropdownOptions,
    setCurrentThirdOptionDropdownOptions,
  ] = useState([]);
  const [currentColumnDef, setCurrentColumnDef] = useState(null);
  const [
    currentFilteredColumnsInitialOptions,
    setCurrentFilteredColumnsInitialOptions,
  ] = useState(filteredColumnsInitialOptions);
  // Column field controller - use actualIndex for form binding
  const formIndex = actualIndex !== undefined ? actualIndex : index;
  const { field: columnField } = useController({
    name: `filters.${formIndex}.column`,
    control,
    rules: {
      required: true,
    },
  });

  const { unregister } = useForm();
  // useEffect(() => {
  //   if (activeOption !== "advanceSearch") {
  //     unregister(`filters.${index}.operation`); // Completely removes field from form state
  //   }
  // }, [activeOption, index, unregister]);

  const { field: operationField, fieldState: operationFieldState } =
    useController({
      name: `filters.${formIndex}.operation`,
      control,
      rules: { required: activeOption !== "advanceSearch" && true },
    });

  // Value field controller
  const { field: valueField } = useController({
    name: `filters.${formIndex}.value`,
    control,
    rules: {
      required: true,
    },
  });

  useEffect(() => {
    if (columnField?.value) {
      // Recursively find the column definition
      const findColumnDef = (cols, field) => {
        for (const col of cols) {
          if (col.children) {
            const found = findColumnDef(col.children, field);
            if (found) return found;
          }
          if (
            col.toShowDuplicateColumnInAdvanceSearch &&
            col.columnFieldsInAdvanceSearch
          ) {
            const index = col.columnFieldsInAdvanceSearch?.indexOf(field);
            if (index !== -1) {
              return {
                ...col,
                currentColumnField: `${field}${index + 1}`, // add index + 1
              };
            }
          } else if (col.colId === field || col.field === field) {
            return col;
          }
        }
        return null;
      };

      const columnDef = findColumnDef(colDefs, columnField.value.value);
      setCurrentColumnDef(columnDef);
      const operatorList = columnDef?.operationFilterOptions
        ? columnDef.operationFilterOptions
        : columnDef?.filter === "agNumberColumnFilter"
        ? NON_TEXT_FILTER_OPTIONS
        : TEXT_FILTER_OPTIONS;
      setCurrentOperationOptions(operatorList);
    }
  }, [columnField?.value, colDefs]);

  useEffect(() => {
    if (currentColumnDef?.thirdOptionAsDropdown && operationField?.value) {
      if (currentColumnDef?.toShowDuplicateColumnInAdvanceSearch) {
        const currentOptions = currentColumnDef.currentColumnField?.endsWith(
          "1"
        )
          ? currentColumnDef?.thirdOptionDropdownOptions1
          : currentColumnDef?.thirdOptionDropdownOptions2;
        setCurrentThirdOptionDropdownOptions(currentOptions);
      } else {
        setCurrentThirdOptionDropdownOptions(
          currentColumnDef?.thirdOptionDropdownOptions
        );
      }
    }
    setToShowDuplicateColumnInAdvanceSearch(
      currentColumnDef?.toShowDuplicateColumnInAdvanceSearch
    );
  }, [currentColumnDef, operationField]);

  useEffect(() => {
    // Case: When we click on icon to open advance filter

    setCurrentFilteredColumnsInitialOptions(filteredColumnsInitialOptions);
    if (
      currentColumnId &&
      !columnField.value &&
      columnField.value !== currentColumnId &&
      filteredColumnsInitialOptions?.length > 0 &&
      !isClearAll
    ) {
      const columnOption = filteredColumnsInitialOptions?.find(
        (opt) => opt.value === currentColumnId
      );
      const isColumnExists = getValues()
        ?.filters?.map((filter) => filter?.column?.value)
        ?.includes(currentColumnId);

      // set the column value such as make ,modal etc
      if (!isColumnExists) {
        columnField?.onChange?.(columnOption);
      }
    }
    // // Case where only one column is available
    // if (filteredColumnsInitialOptions.length === 1 && !columnField.value) {
    //   columnField.onChange(filteredColumnsInitialOptions[0]);
    // }
  }, [filteredColumnsInitialOptions, currentColumnId]);

  const handleClickOutside = (event) => {
    if (
      isColumnOptionsOpen ||
      isThirdOptionDropdownOpen ||
      (isOperationOptionsOpen &&
        !event.target.closest(".ia-table-search-content-body"))
    ) {
      setIsColumnOptionsOpen(false);
      setIsThirdOptionDropdownOpen(false);
      setIsOperationOptionsOpen(false);
    }
  };

  useEffect(() => {
    document.addEventListener("click", handleClickOutside);
    return () => {
      document.removeEventListener("click", handleClickOutside);
    };
  }, [isColumnOptionsOpen, isThirdOptionDropdownOpen, isOperationOptionsOpen]);

  useEffect(() => {
    if (
      activeOption === "search" &&
      !operationField.value &&
      columnField?.value &&
      currentOperationOptions.length > 0
    ) {
      operationField.onChange({ label: "Contains", value: "contains" });
    }
  }, [columnField?.value, currentOperationOptions, activeOption]);
  return (
    <div className="ia-table-search-content-body">
      <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
        <Select
          name={`filters.${formIndex}.column`}
          placeholder="Select"
          isOpen={isColumnOptionsOpen}
          setIsOpen={(val) => {
            setFlag(!flag);
            setIsColumnOptionsOpen(val);
          }}
          currentOptions={currentFilteredColumnsInitialOptions}
          setCurrentOptions={setCurrentFilteredColumnsInitialOptions}
          selectedOptions={columnField?.value || null}
          setSelectedOptions={(option) => {
            const formValues = getValues();

            // Find if the selected column is in a filter that is pending deletion.
            const deletedFilter = fields.find((field, i) => {
              const filterData = formValues.filters[i];
              return (
                pendingDeletions.includes(field.fieldId) &&
                filterData?.column?.value === option.value
              );
            });

            // If it is, remove it from the pending deletions list and remove the current row.
            if (deletedFilter) {
              setPendingDeletions((prev) =>
                prev.filter((id) => id !== deletedFilter.fieldId)
              );
              remove(actualIndex);
              return; // Stop processing to prevent the new row from being updated
            }

            const isDuplicate = isColumnSelectionDuplicate(
              formValues,
              option.value,
              pendingDeletions,
              setPendingDeletions,
              fields
            );

            if (isDuplicate) {
              return;
            }

            setFlag(!flag);
            columnField.onChange(option);

            // ✅ Default to "Contains" for normal search mode
            if (activeOption === "search") {
              operationField.onChange({ label: "Contains", value: "contains" });
            } else {
              operationField.onChange(null);
            }

            valueField.onChange("");
          }}
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
          }}
          initialOptions={filteredColumnsInitialOptions}
          minWidth={activeOption !== "advanceSearch" ? 400 : undefined}
          withPortal={true}
        />
      </div>
      {activeOption == "advanceSearch" && (
        <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
          <Select
            name={`filters.${formIndex}.operation`}
            placeholder="Select"
            isOpen={isOperationOptionsOpen}
            setIsOpen={(val) => {
              setIsOperationOptionsOpen(val);
            }}
            currentOptions={currentOperationOptions}
            setCurrentOptions={setCurrentOperationOptions}
            selectedOptions={operationField?.value || null}
            setSelectedOptions={(option) => {
              operationField.onChange(option);
            }}
            initialOptions={currentOperationOptions}
            disabled={!columnField.value}
            onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
            }}
            withPortal={true}
            isDisabled={!columnField.value}
          />
        </div>
      )}
      <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
        {currentColumnDef?.thirdOptionAsDropdown &&
        currentThirdOptionDropdownOptions?.length > 0 ? (
          <Select
            name={`filters.${formIndex}.value`}
            placeholder="Select value"
            isOpen={isThirdOptionDropdownOpen}
            setIsOpen={setIsThirdOptionDropdownOpen}
            initialOptions={currentThirdOptionDropdownOptions}
            currentOptions={currentThirdOptionDropdownOptions}
            setCurrentOptions={setCurrentThirdOptionDropdownOptions}
            selectedOptions={valueField?.value || null}
            setSelectedOptions={(option) => {
              // setSelectedThirdOptionDropdownValue(option);
              valueField.onChange(option);
            }}
            minWidth={activeOption !== "advanceSearch" ? 344 : undefined}
            withPortal={true}
            onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
            }}
            isDisabled={!operationField.value}
          />
        ) : currentColumnDef?.thirdOptionAsDatePicker ? (
          <DatePicker
            selectedDate={
              valueField?.value ? moment(valueField?.value) : undefined
            }
            setSelectedDate={(date) => {
              valueField?.onChange(date);
            }}
            placeholder="Select date"
            name={`filters.${formIndex}.value`}
            isDisabled={!operationField?.value}
            withPortal={true}
            fullWidth
            {...currentColumnDef?.thirdOptionAsDatePickerProps}
          />
        ) : currentColumnDef?.thirdOptionAsDateRangePicker ? (
          <DateRangePicker
            isDisabled={!operationField.value}
            startDate={
              valueField.value?.startDate ? valueField.value?.startDate : null
            }
            endDate={
              valueField.value?.endDate ? valueField.value?.endDate : null
            }
            setStartDate={() => {}}
            setEndDate={() => {}}
            handleDatesChange={(startDate, endDate) => {
              valueField.onChange({
                startDate: startDate,
                endDate: endDate,
              });
            }}
            withPortal={true}
            name={`filters.${formIndex}.value`}
            fullWidth
            {...currentColumnDef?.thirdOptionAsDateRangePickerProps}
          />
        ) : (
          <Input
            placeholder="Enter text"
            name={`filters.${formIndex}.value`}
            value={valueField?.value || ""}
            onChange={(e) => {
              valueField.onChange(e.target.value);
            }}
            isDisabled={
              activeOption == "advanceSearch" && !operationField.value
            }
          />
        )}
      </div>
      <Button
        variant="tertiary"
        size="large"
        onClick={(e) => {
          e.preventDefault();
          e.stopPropagation();
          onDelete();
        }}
        type="button"
        disabled={isLastVisible}
      >
        <DeleteOutlineOutlinedIcon />
      </Button>
    </div>
  );
};

export default AdvanceSearchModalItem;
