import React, { useEffect, useRef, useState } from 'react';
import { Button, Row, Col, Typography, Popconfirm, Form, Modal, notification, Input } from 'antd';
import MasterEmployees from '@/components/masterDropdowns/MasterEmployees';
import { useRouter } from 'next/navigation';
import { DeleteOutlined, PlusOutlined, EditOutlined } from '@ant-design/icons';
import type { FormInstance } from 'antd/lib';
import type { launchValuesI, teamLaunchConfigI } from '../interface';
import InputSelect from '@/components/form/InputSelect';
import { type Session } from 'next-auth';
import { type storeDataI } from '../add-launch/page';
import { leadsValidator } from '@/utills/validator';
import { addLaunch, updateLaunchData, updateLaunchLead } from '../service';
import TeamAddModal from './TeamAddModal';
import { DataType } from '@/app/designations/interface';
import { useSelector, useDispatch } from 'react-redux';
import { RootState, AppDispatch } from '@/store/store';
import { fetchRoles } from '@/app/role/slice';
import { getRoleIdMap } from '@/utills/helper';
import CommonEmployees from '@/components/masterDropdowns/CommonEmployees';
import { useRoles } from '@/hooks/useRoles';
import EmployeeStatusName from '@/components/EmployeeStatusName';

const { Text, Title, Paragraph } = Typography;

type GetFieldValue = (name: string) => string | undefined;

const TeamAssociation = ({
  form,
  setStoreData,
  submitionLoading,
  setSubmitionLoading,
  userData,
  storeData,
  currentStep,
  cityHasChanged,
  id,
  managers,
}: {
  form: FormInstance
  submitionLoading: boolean
  currentStep: number
  id?: number
  managers: Array<{ role_id: number; role_name: string; user_id: number; user_name?: string; status?: string; is_blocked?: boolean }>
  cityHasChanged?: boolean
  setSubmitionLoading: (submitionLoading: boolean) => void
  userData: Session | null
  setStoreData: (storeData: storeDataI) => void
  storeData: storeDataI
}): React.ReactElement => {
  const router = useRouter();
  const [preSaleUser, setPreSaleUser] = useState<{ value: number; label: string }>({
    value: 0,
    label: '',
  });
  const [fieldSaleUser, setFieldSaleUser] = useState<{ value: number; label: string }>({
    value: 0,
    label: '',
  });
  const [roleFilters, setRoleFilters] = useState<any>({
    page: 1,
    sortColumn: 'sort_order',
  });
  const dispatch: AppDispatch = useDispatch();

  const [editIndex, setEditIndex] = useState<number | null>(null);
  const [preSalesLeads, setPreSalesLeads] = useState<any>(null);
  const [fieldSalesLeads, setFieldSalesLeads] = useState<any>(null);
  const [editingField, setEditingField] = useState<'preSalesLeads' | 'fieldSalesLeads' | null>(
    null
  );
  const [pairForm] = Form.useForm();
  const [isChange, setIsChange] = useState<boolean>(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [EditValue, setEditValue] = useState<any | null>(null);
  const [preAndFieldReportingManagerId, setPreAndFieldReportingManagerId] = useState<any | number | null | undefined>(null);
  const [pendingInitialValues, setPendingInitialValues] = useState<{
    pre_sales_id?: number;
    pre_sales_name?: string;
    pre_sales_leads?: number | null;
    field_sales_id?: number;
    field_sales_name?: string;
    field_sales_leads?: number | null;
  } | null>(null);

  // Derive the team lead ID from preAndFieldReportingManagerId (the last ID in the comma-separated string)
  const teamHeadId = preAndFieldReportingManagerId
    ? String(preAndFieldReportingManagerId).split(',').pop()?.trim() ?? ''
    : '';
  const clusterManagerId = form.getFieldValue('cluster_manager_id');
  const preSalesRef = useRef<any>(null);
  const fieSalesRef = useRef<any>(null);
  const teamHeadRef = useRef<any>(null);
  const [randomKey, setRandomKey] = useState<number>(0);
  const inputRef = useRef<any>(null);
  const [originalStatus, setOriginalStatus] = useState<string | undefined>(undefined);
  const { roles } = useSelector((state: RootState) => state.roles);
  useEffect(() => {
      if(roles?.length === 0) {
      dispatch(fetchRoles(roleFilters));
    }
  }, [roles]);
  
  // Track the original status when editing
  useEffect(() => {
    if (id !== undefined && id !== null && storeData?.status) {
      setOriginalStatus(storeData.status);
    }
  }, [id]);
  let allRoles = getRoleIdMap(roles);
  const { getRoleByName } = useRoles();
  useEffect(() => {
    if (inputRef?.current) {
      inputRef?.current?.focus();
    }
  }, [editIndex, editingField]);

  useEffect(() => {
    if (cityHasChanged) {
      form.setFieldsValue({
        cluster_manager_id:
          userData?.user.role?.id === getRoleByName('cluster_manager')?.id
            ? userData?.user.id
            : null,
        team_lead_id: null,
      });
      setStoreData({ ...storeData, launch_sales: [] });
    }
  }, [cityHasChanged, form, setStoreData, storeData]);

  const addDataEntry = () => {
    pairForm
      .validateFields()
      .then(() => {
        const pre_sales_leads = pairForm.getFieldValue('pre_sales_leads');
        const field_sales_leads = pairForm.getFieldValue('field_sales_leads');
        // const teamPairs = storeData.launch_sales;
        // const checkIsFieldDuplicate =
        //   teamPairs?.filter((item) => item.field_sales_id == fieldSaleUser?.value) || [];
        // const checkIsPairDuplicate =
        //   teamPairs?.filter(
        //     (item) =>
        //       item.pre_sales_id == preSaleUser?.value &&
        //       item.field_sales_id == fieldSaleUser?.value
        //   ) || [];
        // if (checkIsFieldDuplicate?.length > 0) {
        //   Modal.error({
        //     title: 'Duplicate Field Sales',
        //     content: <>This field sales has already been added to the list below.</>,
        //   });
        //   return;
        // }

        // if (checkIsPairDuplicate?.length > 0) {
        //   Modal.error({
        //     title: 'Duplicate Pair',
        //     content: <>This pair is already added to the list below.</>,
        //   });
        //   return;
        // }
        const newDataEntry = {
          pre_sales_id: preSaleUser?.value,
          pre_sales_leads: pre_sales_leads !== undefined ? Number(pre_sales_leads) : null,
          pre_sales_name: preSaleUser?.label,
          field_sales_name: fieldSaleUser?.label,
          field_sales_id: fieldSaleUser?.value,
          field_sales_leads: Number(field_sales_leads || ''),
        };

        let preIds: any[] = []
        let fieldIds: any[] = []
        if (storeData.launch_sales === undefined || storeData.launch_sales === null || storeData.launch_sales.length === 0) {
          setStoreData({ ...storeData, launch_sales: [newDataEntry] });
          preIds = [newDataEntry.pre_sales_id];
          fieldIds = [newDataEntry.pre_sales_id];
        } else {
          const launch_sales = [...storeData.launch_sales, newDataEntry];
          setStoreData({
            ...storeData,
            launch_sales,
          });
          preIds = launch_sales?.map((item) => item.pre_sales_id || 0);
          fieldIds = launch_sales?.map((item) => item.field_sales_id || 0);
          console.log(preIds, fieldIds);
        }
        pairForm.resetFields();
        setPreSaleUser({ value: 0, label: '' });
        setFieldSaleUser({ value: 0, label: '' });
      })
      .catch((error) => {
        console.error('error', error);
      });
  };

  const deleteDataEntry = (index: number): void => {
    storeData.launch_sales?.splice(index, 1);
    setIsChange(!isChange);
  };

  const statusOptions = [
    { value: 'On', label: 'On' },
    { value: 'Off', label: 'Off' },
  ];

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

  const handleClearPair = (teamHead = false) => {
    form.setFieldsValue({ pre_sales_id: '', field_sales_id: '' });
    setStoreData({ ...storeData, launch_sales: [] });
    if (teamHead) {
      form.setFieldsValue({ team_lead_id: null });
    }
    form.setFieldsValue({ pre_sales_id: null });
  };

  const onFinish = (values: launchValuesI): void => {
    const data: storeDataI = { ...storeData, ...values };

      const selectedUsers = dropdownChain
    .map((item) => item.selectedUser)
    .filter((u): u is { id: number; label: string, role: string; role_id: number } => u !== null && u !== undefined);
// New contract: send a managers array [{ role_id, user_id }] built from the
// reporting chain, instead of the legacy reporting_manager_ids JSON object.
const managers = selectedUsers
    .filter((u) => u.role_id && u.id)
    .map((u) => ({ role_id: u.role_id, user_id: u.id }));

    const incompleteManagerChain = dropdownChain.some(
      (item) => item.selectedUser === null || item.selectedUser === undefined
    );

    if (currentStep === 1) {
      if (managers.length === 0 || incompleteManagerChain) {
        Modal.error({
          title: 'Error',
          content: 'Please select all Managers.',
        });
        return;
      }
      if (data?.launch_sales === undefined || data?.launch_sales.length === 0) {
        Modal.error({
          title: 'Error',
          content: 'Please add at least one sales pair.',
        });
        return;
      }
    }
    const launchData = data;
    const launchProjectsValues = launchData?.launch_projects?.map(
      (project: { value: number }) => (project?.value ? project.value : project)
    );
    const launch_sales = launchData?.launch_sales?.map((team) => {
      // Create a base payload object with required fields
      const payload: DataType = {
        field_sales_id: team?.field_sales_id,
        field_sales_leads: team?.field_sales_leads,
      };

      // Conditionally add pre_sales_id and pre_sales_leads if pre_sales_leads is defined
      if (team?.pre_sales_leads !== undefined && team?.pre_sales_leads !== null) {
        payload.pre_sales_id = team?.pre_sales_id;
        payload.pre_sales_leads = team?.pre_sales_leads;
      }

      return payload;
    });
    const reqData = {
      name: launchData.name,
      location: launchData?.location,
      managers,
      city_id: launchData?.city_id,
      locality_name: Array.isArray(launchData?.locality_name)
        ? launchData.locality_name.join(',')
        : (launchData?.locality_name ?? ''),
      status: values?.status,
      launch_projects: launchProjectsValues,
      launch_sales,
      is_sustenance: launchData?.is_sustenance ? 1 : 0,
    };

    if (id !== undefined && id !== null) {
      // Check if status has changed
      const hasStatusChanged = originalStatus && values?.status && originalStatus !== values.status;
      
      const performUpdate = () => {
        setSubmitionLoading(true);
        updateLaunchData(id, reqData)
          .then((el) => {
            notification.success({
              message: 'Success',
              description: el?.message,
            });

            router.push('/launches');
            setSubmitionLoading(false);
          })
          .catch((error) => {
            notification.error({
              message: 'Error',
              description: error?.response?.data?.message,
            });
            setSubmitionLoading(false);
          });
      };

      // Show confirmation if status has changed
      if (hasStatusChanged) {
        Modal.confirm({
          title: 'Confirm Status Change',
          content: `Are you sure you want to change the status from ${originalStatus} to ${values?.status}?`,
          okText: 'Yes',
          cancelText: 'No',
          onOk() {
            performUpdate();
          },
        });
      } else {
        performUpdate();
      }
    } else {
      setSubmitionLoading(true);
      addLaunch(reqData)
        .then((res) => {
          Modal.success({
            title: 'Success',
            content: res?.message,
            okText: 'Okay',
            onOk() {
              router.push('/launches');
            },
          });
          setSubmitionLoading(false);
        })
        .catch((error) => {
          notification.error({
            message: 'Error',
            description: error?.response?.data?.message,
          });
          setSubmitionLoading(false);
        });
    }
  };

  const handleSave = () => {
    form.validateFields()
      .then((values) => {
        onFinish(values);
      })
      .catch((errorInfo) => {
        console.error('Main form validation failed:', errorInfo);
      });
  };

  const preSalesIsRequiredValidator = ({ getFieldValue }: { getFieldValue: GetFieldValue }) => ({
    async validator(_: unknown, value: string | undefined) {
      const preSalesLeads = getFieldValue('pre_sales_leads');
      if (preSalesLeads && !value) {
        return await Promise.reject(new Error('Please Select a Pre Sales'));
      }
      await Promise.resolve();
    },
  });

  const handleEditClick = (
    index: number,
    preSalesLeads: number | null,
    fieldSalesLeads: number | null,
    field: 'preSalesLeads' | 'fieldSalesLeads'
  ) => {
    setEditIndex(index);
    setEditingField(field);
    setPreSalesLeads(preSalesLeads);
    setFieldSalesLeads(fieldSalesLeads);
  };

  const handleSaveLaunchSales = (index: number, config: teamLaunchConfigI) => {
    if (preSalesLeads !== null || fieldSalesLeads !== null) {
      const updatedConfig = {
        ...config,
        pre_sales_leads: preSalesLeads,
        field_sales_leads: fieldSalesLeads,
      };

      const updatedData = storeData.launch_sales?.map((item, id) => {
        if (id === index) {
          return updatedConfig;
        }
        return item;
      });

      setStoreData({ ...storeData, launch_sales: updatedData });
    }
    setEditIndex(null);
    setEditingField(null);
    setPreSalesLeads(null);
    setFieldSalesLeads(null);
  };

  const handleUpdateLaunchSales = () => {
    if (id !== undefined && id !== null) {
      setSubmitionLoading(true);
      const launch_sales = storeData.launch_sales?.map((team) => ({
        field_sales_id: team?.field_sales_id,
        field_sales_leads: team?.field_sales_leads,
        pre_sales_id: team?.pre_sales_id || 0,
        pre_sales_leads: team?.pre_sales_leads || 0,
      }));
      const leadData = {
        launch_sales: launch_sales,
      };
      updateLaunchLead(id, leadData)
        .then((el) => {
          notification.success({
            message: 'Success',
            description: el?.message,
          });
          setSubmitionLoading(false);
        })
        .catch((error) => {
          notification.error({
            message: 'Error',
            description: error?.response?.data?.message,
          });
          setSubmitionLoading(false);
        });
    }
  };

  // Fix Issue 1: reload Pre/Field Sales dropdowns when reporting manager filter is established (e.g. on initial page load)
  useEffect(() => {
    if (preAndFieldReportingManagerId) {
      preSalesRef.current?.reload({ reporting_manager_id: preAndFieldReportingManagerId });
      fieSalesRef.current?.reload({ reporting_manager_id: preAndFieldReportingManagerId });
    }
  }, [preAndFieldReportingManagerId]);

  const handleOpenModal = () => {
    // Fix Issue 2: capture current outside selections so the popup can pre-populate them
    const preId = preSaleUser.value || 0;
    const fieldId = fieldSaleUser.value || 0;
    const preLeads = pairForm.getFieldValue('pre_sales_leads');
    const fieldLeads = pairForm.getFieldValue('field_sales_leads');
    setPendingInitialValues(
      preId || fieldId
        ? {
            pre_sales_id: preId || undefined,
            pre_sales_name: preSaleUser.label || undefined,
            pre_sales_leads: preLeads ? Number(preLeads) : undefined,
            field_sales_id: fieldId || undefined,
            field_sales_name: fieldSaleUser.label || undefined,
            field_sales_leads: fieldLeads ? Number(fieldLeads) : undefined,
          }
        : null
    );
    setIsModalOpen(true);
    setEditValue(null);
  };
  const handleCloseModal = () => {
    setIsModalOpen(false);
    setEditValue(null);
    setPendingInitialValues(null);
  };

  type DropdownChainItem = {
    id: number;
    filter: {
      city_id?: string | number;
      role_id?: number;
      reporting_manager_id?: number;
      status?: string;
    };
    selectedUser: { id: number; label: React.ReactNode; role: string; role_id: number } | null;
  };

  const [dropdownChain, setDropdownChain] = useState<DropdownChainItem[]>([
    {
      id: 1,
      filter: {
        city_id: storeData.city_id,
        role_id: getRoleByName('city_head')?.id, // starting point
        status: 'active',
      },
      selectedUser: null,
    },
  ]);
  

const handleSelect = async (value: any, selectedUser: any, index: number) => {
  const newSelectedUser = {
    id: value,
    label: selectedUser?.label ?? String(value),
    role: selectedUser?.role ?? '',
    role_id: selectedUser?.role_id ?? 0,
  };

  // Truncate chain
  const updatedChain = dropdownChain.slice(0, index + 1);
  updatedChain[index] = {
    ...updatedChain[index],
    selectedUser: newSelectedUser,
  };

  // Clear form values for all fields after current index
  const resetFields: string[] = [];
  for (let i = index + 1; i < dropdownChain.length; i++) {
    resetFields.push(`dynamic_user_${i}`);
  }
  form.resetFields(resetFields);

  if (Number(newSelectedUser.role_id) !== getRoleByName('team_lead')?.id) {
    updatedChain.push({
      id: Date.now(),
      filter: {
        reporting_manager_id: value,
        city_id: storeData.city_id,
        status: 'active',
      },
      selectedUser: null,
    });
  } else {
    const selectedIds = updatedChain && updatedChain.length>2 ?updatedChain.slice(-2)
      .map(item => item.selectedUser ? item.selectedUser.id : null)
      .filter((id): id is number => id !== null).join(',') : value
    setPreAndFieldReportingManagerId(selectedIds); // Set the reporting manager ID for the last dropdown
    teamHeadRef.current?.reload({ reporting_manager_id: value });
    preSalesRef.current?.reload({ reporting_manager_id: selectedIds });
    fieSalesRef.current?.reload({ reporting_manager_id: selectedIds });
    handleClearPair(true);
  }
setRandomKey(Math.random())
  setDropdownChain(updatedChain);
};

const handleClear = (index: number) => {
  const updatedChain = dropdownChain.slice(0, index + 1);
  updatedChain[index].selectedUser = null;

  // Reset form values for fields after this index
  const resetFields: string[] = [];
  for (let i = index + 1; i <= dropdownChain.length; i++) {
    resetFields.push(`dynamic_user_${i}`);
  }
  form.resetFields(resetFields);

  setDropdownChain(updatedChain);
  setPreAndFieldReportingManagerId(null); // Clear the reporting manager ID when clearing the dropdown

};
const refs = useRef<Array<any>>([]);

// 1. Setup the dropdownChain from the managers array (new approach — no reporting_manager_ids)
useEffect(() => {
  if (managers && managers.length > 0) {
    // When the chain has more than 2 managers the last two are the team lead
    // and cluster manager whose IDs gate the pre/field-sales dropdowns below.
    if (managers.length > 2) {
      const lastTwo = managers.slice(-2).map(m => m.user_id).join(',');
      setPreAndFieldReportingManagerId(lastTwo);
      setStoreData({ ...storeData, team_lead_id: managers[managers.length - 1].user_id });
    }

    const updatedChain = managers.map((m, index) => ({
      id: index,
      filter: {
        city_id: storeData.city_id,
        role_id: m.role_id,
        status: 'active',
        // Filter each level by the previous level's selected manager, same as
        // handleSelect does when pushing a new chain entry interactively — the
        // currently selected user still renders via `defaultOption` below, so
        // this doesn't affect the initial label.
        ...(index > 0 ? { reporting_manager_id: managers[index - 1].user_id } : {}),
      },
      selectedUser: {
        id: Number(m.user_id),
        label: (
          <EmployeeStatusName
            name={m.user_name && m.role_name ? `${m.user_name} (${m.role_name})` : (m.user_name ?? m.role_name)}
            status={m.status}
            isBlocked={m.is_blocked}
          />
        ),
        role: m.role_name,
        role_id: m.role_id,
      },
    }));

    setDropdownChain(updatedChain);

    const dynamicManagerValues = updatedChain.reduce((acc, item, index) => {
      if (item.selectedUser) {
        acc[`dynamic_user_${index}`] = {
          value: item.selectedUser.id,
          label: item.selectedUser.label,
        };
      }
      return acc;
    }, {} as Record<string, { value: number; label: React.ReactNode }>);

    form.setFieldsValue(dynamicManagerValues);
  }
}, []);

  return (
    <>
      <Form layout="vertical" form={form} onFinish={onFinish}>
        <Row gutter={16}>
          {dropdownChain && dropdownChain.map((item, index) => (
            <Col span={24} sm={7} md={7} lg={6} xl={5} key={item.id}>
              <CommonEmployees
                ref={(el: any) => (refs.current[index] = el)} //  save the ref
                name={`dynamic_user_${index}`}
                label="Select Manager"
                placeholder="Select User"
                filter={item.filter}
                defaultOption={
                  item.selectedUser
                    ? {
                        value: item.selectedUser.id,
                        label: item.selectedUser.label,
                      }
                    : null
                }
                value={item.selectedUser?.id}
                onSelect={(value: string | number, selectedItem: any) => {
                  if (value === null || value === undefined || value === '') handleClear(index);
                  else handleSelect(value, selectedItem, index);
                }}
                onClear={() => handleClear(index)}
                rules={[{ required: true, message: 'Please select a Manager' }]}
              />
            </Col>
          ))}
          <Col span={24} sm={4} md={4} lg={4} xl={4}>
            <InputSelect
              label="Status"
              name="status"
              placeholder="Status"
              options={statusOptions}
              onSelect={(value) => {
                setStoreData({ ...storeData, status: value });
              }}
              rules={[
                {
                  required: true,
                  message: 'Please Select a Status',
                },
              ]}
            />
          </Col>
        </Row>
      </Form>
      <Form form={pairForm}>
        <div>
          <div className="responsive-custom-table">
            <table
              cellPadding={0}
              cellSpacing={0}
              className="custom-table fixed-table column-vertical-top">
              <thead>
                <tr>
                  <th colSpan={2}>
                    <Title level={5} className="launch-block-heading">
                      Pre Sales
                    </Title>
                    <Paragraph className="launch-sub-heading">
                      Select Pre Sales user for team, you may pair one user
                      with multiple Field Sales user{' '}
                    </Paragraph>
                  </th>
                  <th colSpan={2}>
                    <Title level={5} className="launch-block-heading">
                      Field Sales
                    </Title>
                    <Paragraph className="launch-sub-heading">
                      Select Field Sales user to map with selected Pre Sales
                    </Paragraph>
                  </th>
                  <th className="action-col">&nbsp;</th>
                </tr>
                <tr>
                  <th className="user-col">User</th>
                  <th className="leads-col">Leads</th>
                  <th className="user-col">
                    User <span className="asterisk">*</span>
                  </th>
                  <th className="leads-col">
                    Leads <span className="asterisk">*</span>
                  </th>
                  <th className="action-col">&nbsp;</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td className="user-col">
                    <MasterEmployees
                      forwardRef={preSalesRef}
                      label=""
                      placeholder="Select User"
                      name="pre_sales_id"
                      filter={{
                        role_id: getRoleByName('pre_sales')?.id,
                        city_id: storeData?.city_id,
                        status: 'active',
                        reporting_manager_id: preAndFieldReportingManagerId || '',
                      }}
                      onChange={(value, items: any) => {
                        if (items) {
                          setPreSaleUser({
                            label: items.label,
                            value: items.value,
                          });
                        }
                      }}
                      onClear={() => {
                        setPreSaleUser({
                          label: '',
                          value: 0,
                        });
                        pairForm.setFieldValue('pre_sales_leads', null);
                      }}
                      rules={[preSalesIsRequiredValidator]}
                      disabled={
                        storeData?.lead_count
                          ? storeData?.lead_count !== 0
                          : false
                      }
                    />
                  </td>
                  <td className="leads-col">
                    <Form.Item
                      name="pre_sales_leads"
                      label=""
                      rules={[
                        ({ getFieldValue }) => ({
                          async validator(_: unknown, value: string | undefined) {
                            if (
                              getFieldValue('pre_sales_id') !== undefined &&
                              getFieldValue('pre_sales_id') !== null
                            ) {
                              if (value === undefined || value === null || value === '') {
                                return Promise.reject(new Error('Please Enter Pre Sales Leads'));
                              }

                              // Convert value to string for validation
                              const valueString = String(value);

                              // Check if the value contains only digits
                              if (!/^\d+$/.test(valueString)) {
                                return Promise.reject(new Error('Please enter a valid number. No letters or symbols allowed.'));
                              }

                              // Check if the number has more than 2 digits
                              if (valueString.length > 2) {
                                return Promise.reject(new Error('Maximum 2 Digits Allowed'));
                              }
                            }

                            return Promise.resolve();
                          },
                        }),
                      ]}
                    >
                      <Input
                        placeholder="Enter Pre Sales Lead"
                        disabled={!preSaleUser.value}
                        maxLength={3}
                      />
                    </Form.Item>
                  </td>
                  <td className="user-col">
                    <MasterEmployees
                    key={`dynamic_user_field_${randomKey}_${teamHeadId || 0}`}
                      forwardRef={fieSalesRef}
                      label=""
                      placeholder="Select User"
                      name="field_sales_id"
                      filter={{
                        role_id: `${getRoleByName('field_sales')?.id}, ${getRoleByName('team_lead')?.id}`,
                        city_id: storeData?.city_id,
                        status: 'active',
                        reporting_manager_id: preAndFieldReportingManagerId || '',
                      }}
                      localExclude={(data: { id: number; role_id: number }[]) =>
                        teamHeadId
                          ? data?.filter(
                            (d) =>
                              d.role_id !== getRoleByName('team_lead')?.id ||
                              teamHeadId == String(d.id)
                          )
                          : data
                      }
                      rules={[
                        {
                          required: true,
                          message: 'Please Select Field Sales',
                        },
                      ]}
                      onChange={(value, items: any) => {
                        if (items) {
                          setFieldSaleUser({
                            label: items.label,
                            value: items.value,
                          });
                        }
                      }}
                      onClear={() => {
                        setFieldSaleUser({
                          label: '',
                          value: 0,
                        });
                      }}
                      disabled={
                        storeData?.lead_count
                          ? storeData?.lead_count !== 0
                          : false
                      }
                    />
                  </td>
                  <td className="leads-col">
                    <Form.Item
                      name="field_sales_leads"
                      label=""
                      rules={[
                        {
                          required: true,
                          validator: leadsValidator,
                        },
                      ]}>
                      <Input
                        placeholder="Enter Field Sales Lead"
                        maxLength={3}
                        disabled={
                          storeData?.lead_count
                            ? storeData?.lead_count !== 0
                            : false
                        }
                      />
                    </Form.Item>
                  </td>
                  <td className="action-col">
                    <Button
                      icon={<PlusOutlined />}
                      onClick={() => handleOpenModal()}
                      type={'primary'}

                      className="add-pair-btn">
                      Add Pair
                    </Button>
                  </td>
                </tr>

                <TeamAddModal
                  key={'edit'}
                  isModalOpen={isModalOpen}
                  data={EditValue}
                  handleOk={handleCloseModal}
                  handleClose={handleCloseModal}
                  id={id}
                  storeData={storeData}
                  reporting_manager_id={preAndFieldReportingManagerId}
                  check={'edit'}
                  setStoreData={setStoreData}
                  teamHeadId={teamHeadId}
                  clusterManagerId={clusterManagerId}
                  initialValues={pendingInitialValues}
                />

                {id === undefined || id === null
                  ? storeData.launch_sales?.map((config, index) => (
                    <tr key={index}>
                      <td className="user-col">
                        <Text>{config.pre_sales_name}</Text>
                      </td>
                      <td className="leads-col">
                        <Text>{config?.pre_sales_leads}</Text>
                      </td>
                      <td className="user-col">
                        <Text>{config.field_sales_name}</Text>
                      </td>
                      <td className="leads-col">
                        <Text>{config?.field_sales_leads}</Text>
                      </td>
                      <td className="action-col">
                        <Popconfirm
                          title="Are you sure you want to delete this pair?"
                          onConfirm={() =>
                            deleteDataEntry(index)
                          }
                          placement="topRight">
                          <Button
                            icon={<DeleteOutlined />}
                            type={'primary'}
                            danger
                            className="add-delete-btn">
                            Delete Pair
                          </Button>
                        </Popconfirm>
                      </td>
                    </tr>
                  ))
                  : storeData.launch_sales?.map((config, index) => (
                    <tr key={index}>
                      <td className="user-col">
                        <Text>
                          <EmployeeStatusName
                            name={config.pre_sales_name}
                            status={config.pre_sales_status}
                            isBlocked={config.pre_sales_is_blocked}
                          />
                        </Text>
                      </td>
                      <td className="leads-col">
                        {config.pre_sales_id !== 0 &&
                          config.pre_sales_id !== '0' &&
                          (editIndex === index &&
                            editingField === 'preSalesLeads' ? (
                            <Input
                              ref={inputRef}
                              value={preSalesLeads ?? ''}
                              onChange={(e) => {
                                const value = Number(
                                  e.target.value
                                );
                                if (!isNaN(value)) {
                                  setPreSalesLeads(value);
                                }
                              }}
                              onBlur={() =>
                                handleSaveLaunchSales(
                                  index,
                                  config
                                )
                              }
                              maxLength={2}
                            />
                                                        ) :  (config.pre_sales_leads != null ? (
                            <div
                              style={{
                                display: 'flex',
                                justifyContent: 'space-between',
                              }}
                              onClick={() => handleEditClick(
                                index,
                                config.pre_sales_leads,
                                config.field_sales_leads,
                                'preSalesLeads'
                              )}
                            >
                              <Text>
                                {config.pre_sales_leads}
                              </Text>
                              <EditOutlined />
                            </div>
                          ) : null))}
                      </td>
                      <td className="user-col">
                        <Text>
                          <EmployeeStatusName
                            name={config.field_sales_name}
                            status={config.field_sales_status}
                            isBlocked={config.field_sales_is_blocked}
                          />
                        </Text>
                      </td>
                      <td className="leads-col">
                        {config.field_sales_id !== 0 && (editIndex === index &&
                          editingField === 'fieldSalesLeads' ? (
                          <Input
                            ref={inputRef}
                            value={fieldSalesLeads ?? ''}
                            onChange={(e) => {
                              const value = Number(e.target.value);
                              if (!isNaN(value)) {
                                setFieldSalesLeads(value);
                              }
                            }}
                            onBlur={() =>
                              handleSaveLaunchSales(index, config)
                            }
                            maxLength={2}
                          />
                        ) : (
                          <div
                            style={{
                              display: 'flex',
                              justifyContent: 'space-between',
                            }}
                            onClick={() =>
                              handleEditClick(
                                index,
                                config.pre_sales_leads,
                                config.field_sales_leads,
                                'fieldSalesLeads'
                              )
                            }>
                            <Text>
                              {config.field_sales_leads}
                            </Text>
                            <EditOutlined />
                          </div>
                        ))}
                      </td>
                      <td className="action-col ">

                        {storeData?.lead_count !== 0 ? (
                          null
                        ) : (
                          <Popconfirm
                            title="Are you sure you want to delete this pair?"
                            onConfirm={() =>
                              deleteDataEntry(index)
                            }
                            placement="topRight">
                            <Button
                              icon={<DeleteOutlined />}
                              type={'primary'}
                              danger
                              className="add-delete-btn"
                              disabled={
                                storeData?.lead_count
                                  ? storeData.lead_count !== 0
                                  : false
                              }
                            >
                              Delete Pair
                            </Button>
                          </Popconfirm>
                        )}
                      </td>
                    </tr>
                  ))}
              </tbody>
            </table>
          </div>
        </div>
      </Form>
      {id !== undefined && id !== null && storeData.lead_count != 0 ? (
        <Row justify="end" style={{ marginTop: '30px' }}>
          <Button
            type="primary"
            onClick={handleUpdateLaunchSales}
            loading={submitionLoading}
            disabled={storeData?.lead_count ? storeData.lead_count == 0 : true}>
            Update Pair Count
          </Button>
        </Row>
      ) : (
        ''
      )}

      <Row justify="end" style={{ marginTop: '30px' }}>
        <Button
          style={{ marginRight: '8px' }}
          onClick={() => {
            router.push('/launches');
          }}>
          Cancel
        </Button>
        <Button
          type="primary"
          onClick={handleSave}
          loading={submitionLoading}>
          {id !== undefined && id !== null ? 'Update' : 'Save & Create'}
        </Button>
      </Row>
    </>
  );
};

export default TeamAssociation;