import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import InputAutoComplete from '@/components/form/InputAutoComplete';
import { getEmployees } from '@/app/employees/service';
import { notification } from 'antd';
import type { ListMeta } from '@/interfaces/common';

interface options {
    value: number | string
    label: string
}

interface EmployeeDropdownProps {
    onSelect?: (
        value: number | string,
        item:
            | { value: number | string; label: string }
            | Array<{ value: number | string; label: string }>
    ) => void
    onChange?: (
        value: number | string,
        item:
            | { value: number | string; label: string }
            | Array<{ value: number | string; label: string }>
    ) => void

    name?: string
    label?: string
    placeholder?: string
    filter?: {
        role_id?: number | string
        city_id?: number | string | null
        reporting_manager_id?: number | string
        loginUser?: string
        reporting_to?: number | string | null
        userId?: number | null
        pageSize?:number
        status?: string
        is_blocked?: boolean
        launch_ids?: string
        include_user_ids?: string
    }
    localExclude?: Function
    onClear?: () => void
    defaultOption?: { value: number | string; label: string } | null
    [key: string]: any,
}

export interface MasterEmployeesProps extends EmployeeDropdownProps {
    // Add a ref parameter
    forwardRef?: React.Ref<{ reload: (filter: any) => void }>
}

const MasterEmployees: React.FC<MasterEmployeesProps> = forwardRef(
  (
    {
      name = 'employee_id',
      label,
      placeholder = 'Please Select An Employee',
      onSelect,
      onChange,
      onClear,
      forwardRef,
      localExclude,
      defaultOption,
      filter = {},
      ...rest
    },
  ) => {
    const [employeeOptions, setEmployeeOptions] = useState<Array<options>>([]);

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

    const [loading, setLoading] = useState(true);
    const [filterState, setFilterState] = useState(filter);
    const [searchQuery, setSearchQuery] = useState<string>('');
    const [meta, setMeta] = useState<ListMeta>({
      total: 0,
      count: 0,
      per_page: 0,
      current_page: 1,
      total_pages: 1,
    });

    const fetchEmployees = (
      search?: string,
      page: number = 1,
      filterReset: any = false
    ): void => {
      setSearchQuery(search ?? '');
      let filterSend = filterState;
      if (filterReset) {
        filterSend = filterReset;
      }
      setLoading(true);
      getEmployees({
        ...filterSend,
        search,
        page,
        is_default: true,
        sortColumn: 'first_name',
        sortOrder: 'asc',
      })
        .then((res: any) => {
          setLoading(false);
          let resData = res?.data;
          if (localExclude) {
            resData = localExclude(resData);
          }
          const formatData = resData?.map((employee: any) => ({
            value: employee?.id,
            label: `${employee?.first_name} ${employee?.last_name} (${employee?.role_label})`,
          })); // formatData

          setMeta(res?.meta);
          if (page === 1) {
            // Always ensure the defaultOption (pre-selected value) is in the list
            const mergedData =
              defaultOption && !formatData.some((o: options) => o.value === defaultOption.value)
                ? [defaultOption, ...formatData]
                : formatData;
            setEmployeeOptions(mergedData);
          } else {
            setEmployeeOptions((data) => {
              const combined = [...data, ...formatData];
              if (defaultOption && !combined.some((o) => o.value === defaultOption.value)) {
                return [defaultOption, ...combined];
              }
              return combined;
            });
          }
        })
        .catch((error: any) => {
          notification.error({
            message: error?.message,
            description: error?.response?.data?.message,
          });
        });
    };

    const fetchMoreEmployees = (): void => {
      if (meta?.current_page !== meta?.total_pages && !loading) {
        fetchEmployees(searchQuery, meta?.current_page + 1);
      }
    };

    // Expose the reload method using useImperativeHandle
    useImperativeHandle(
      forwardRef,
      () => ({
        reload: async(filterVal: any = {}) => {
          const newFilter = {
            ...filterState,
            ...filterVal,
          };
          await setFilterState(newFilter);
          await fetchEmployees('', 1, newFilter); // You may need to pass appropriate arguments here
        },
        filterOptions: async(filterOptions: (options: options[]) => options[]) => {
          await setEmployeeOptions(filterOptions);
        },
      }),
      []
    );
    const finalOptions = filter?.userId
    ? employeeOptions.filter((emp) => emp.value !== filter.userId)
    : employeeOptions;

    return (
      <InputAutoComplete
        loading={loading}
        name={name}
        label={label}
        placeholder={placeholder}
        options={finalOptions}
        onChange={(value, item) => {
          if (onChange) {
            onChange(value, item);
          }
        }}
        onSelect={(value, item) => {
          if (onSelect) {
            onSelect(value, item);
          }
        }}
        isSearchable={true}
        onSearch={fetchEmployees}
        onClear={() => {
          fetchEmployees('');
          if (onClear !== undefined) {
            onClear();
          }
        }}
        onPopupScroll={fetchMoreEmployees}
        {...rest}
      />
    );
  }
);

MasterEmployees.displayName = 'MasterEmployees';
export default MasterEmployees;