'use client';
import React, { useEffect, useState } from 'react';
import {
  Form,
  Button,
  Select,
  Row,
  Col,
  Card,
  notification,
  Table,
  TableProps,
  Input,
  Checkbox,
  Typography,
} from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import MasterRoles from '@/components/masterDropdowns/MasterRoles';
import MasterCities from '@/components/masterDropdowns/MasterCities';
import { AppDispatch } from '@/store/store';
import { fetchExistingUsers, fetchLaunch, fetchNewUsers, fetchNewUserLaunches } from './slice';
import { getLeads, updateLeadTransfer } from './service';
import { allowedStatusIds } from '@/utills/constant';
import { useRoles } from '@/hooks/useRoles';

const { Option } = Select;
interface Lead {
  id: number;
  customer_name: string;
  lead_status_name: string;
  field_sales_name: string;
  pre_sales_name: string;
  stage: string;
  remark: string;
}

const LeadTransferPage: React.FC = () => {
  const [form] = Form.useForm();
  const dispatch = useDispatch<AppDispatch>();
  const { getRoleByName } = useRoles();
  const isSelectAllProcessing = React.useRef(false);

  // Get users data from Redux store
  const existingUsers = useSelector(
    (state: any) => state.lead_transfer.existingUsers,
  );
  const newUsers = useSelector((state: any) => state.lead_transfer.newUsers);
  const launchList = useSelector(
    (state: any) => state.lead_transfer.launchList,
  );
  const newUserLaunchList = useSelector(
    (state: any) => state.lead_transfer.newUserLaunchList,
  );
  const [submitionLoading, setSubmitionLoading] = useState<boolean>(false);

  const [roleId, setRoleId] = useState<string | number | undefined>();
  const [cityId, setCityId] = useState<string | number | undefined>();
  const [existingUserId, setExistingUserId] = useState<number | undefined>();
  const [reportingManagerId, setReportingManagerId] = useState<
    number | undefined
  >();
  const [status, setStatus] = useState<string[] | undefined>();
  const [leadCurrentStatus, setLeadCurrentStatus] = useState<number | string | undefined>();
  const [launchId, setLaunchId] = useState<React.Key[] | undefined>();
  const [newUserId, setNewUserId] = useState<number | undefined>();
  const [transferLaunchId, setTransferLaunchId] = useState<number | undefined>();
  const [searchKey, setSearchKey] = useState<string>('');
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [isSelectAll, setIsSelectAll] = useState<boolean>(false);
  const [selectAllLoading, setSelectAllLoading] = useState<boolean>(false);

  const [leadsData, setLeadsData] = useState([]); // State for fetched leads
  const [currentPage, setCurrentPage] = useState<number>(1); // State for current page
  const [pageSize, setPageSize] = useState<number>(10);
  const [totalLeads, setTotalLeads] = useState<number>(0);
  const isPreSales = Number(roleId) === getRoleByName('pre_sales')?.id;
  // Dead leads (Not Interested/Broker/Fake/Booking Cancelled/Dead) are only
  // eligible for transfer when it's a launch-only move (same employee on both
  // sides) — see transferLeads on the backend. Booked and Visited leads keep
  // their original behavior always (never eligible for transfer).
  const isSameUser =
    existingUserId !== undefined &&
    newUserId !== undefined &&
    Number(existingUserId) === Number(newUserId);
  const statusOptions = [
    { label: 'Fresh Lead', value: 'fresh_lead' },
    { label: 'Active', value: 'active' },
    { label: 'Scheduled', value: 'scheduled' },
    ...(!isPreSales ? [{ label: 'Visited', value: 'visited' }] : []),
    { label: `Today's Follow Up`, value: 'today_follow_up' },
    { label: 'Overdue', value: 'overdue' },
    ...(isSameUser ? [{ label: 'Dead', value: 'dead' }] : []),
  ];
  // Current Status options mirror allowedStatusIds, plus the dead statuses when
  // same-employee (so "Select All" / manual picks here don't silently conflict
  // with the "Dead" Tab Status and zero out results for a launch-only move).
  const currentStatusOptions = isSameUser
    ? [
        ...allowedStatusIds,
        { id: 20, name: 'Dead' },
        { id: 19, name: 'Booking Cancelled' },
        { id: 11, name: 'Not Interested' },
        { id: 12, name: 'Broker' },
        { id: 13, name: 'Fake' },
      ]
    : allowedStatusIds;
  const columns = [
    {
      title: 'Lead Name',
      dataIndex: 'customer_name',
      key: 'customer_name',
      width: 150,
    },
    {
      title: 'Current Status',
      dataIndex: 'lead_status_name',
      key: 'lead_status_name',
      width: 150,
    },
    {
      title: 'Field Sales',
      dataIndex: 'field_sales_name',
      key: 'field_sales_name',
      width: 150,
    },
    {
      title: 'Pre Sales',
      dataIndex: 'pre_sales_name',
      key: 'pre_sales_name',
      width: 150,
    },
    {
      title: 'Stage',
      dataIndex: 'stage',
      key: 'stage',
      width: 150,
    },
    {
      title: 'Remark',
      dataIndex: 'remark',
      key: 'remark',
      width: 200,
    },
  ];

  useEffect(() => {
    if (roleId && existingUserId && launchId && status && status.length > 0) {
      fetchLeads();
    }
  }, [
    roleId,
    existingUserId,
    launchId,
    status,
    leadCurrentStatus,
    currentPage,
    pageSize,
    searchKey,
  ]);

  useEffect(() => {
    if (roleId && cityId) {
      dispatch(
        fetchExistingUsers({
          city_id: cityId,
          role_id: roleId,
          is_default: true,
        }),
      );
    }
  }, [roleId, cityId, dispatch]);

  useEffect(() => {
    if (roleId && cityId && existingUserId && reportingManagerId) {
      dispatch(
        fetchNewUsers({
          city_id: cityId,
          role_id: roleId,
          is_default: true,
          reporting_manager_id: reportingManagerId,
          user_id: existingUserId,
          // Allow picking the same employee back, for launch-only transfers
          // (moving their leads to a different launch without changing owner).
          include_self: true,
        }),
      );
    }
  }, [roleId, cityId, existingUserId, reportingManagerId, dispatch]);

  useEffect(() => {
    if (existingUserId) {
      dispatch(fetchLaunch({ user_id: existingUserId }));
    }
  }, [existingUserId, dispatch]);

  useEffect(() => {
    if (newUserId) {
      dispatch(fetchNewUserLaunches({ user_id: newUserId }));
    }
  }, [newUserId, dispatch]);

  // Auto-select transfer launch when new user launches load (only when a single source launch is selected)
  useEffect(() => {
    if (newUserLaunchList?.length > 0 && launchId?.length === 1) {
      const matchingLaunch = newUserLaunchList.find(
        (l: { id: number }) => Number(l.id) === Number(launchId[0]),
      );
      if (matchingLaunch) {
        setTransferLaunchId(Number(matchingLaunch.id));
        form.setFieldsValue({ transfer_launch: Number(matchingLaunch.id) });
      } else {
        setTransferLaunchId(undefined);
        form.setFieldsValue({ transfer_launch: undefined });
      }
    }
  }, [newUserLaunchList, launchId]);

  const fetchLeads = async () => {
    const leadType = Number(roleId) === getRoleByName('pre_sales')?.id ? 'pre_sales_id' : 'field_sales_id';
    try {
      const params = {
        tab_key: status?.join(','),
        lead_type: leadType,
        old_user: existingUserId,
        launch_id: launchId?.map(String).join(','),
        current_status: leadCurrentStatus,
        page: currentPage,
        pageSize: pageSize,
        search: searchKey,
      };
      const leadsResponse = await getLeads(params);
      if (leadsResponse) {
        // Normalize IDs to numbers to ensure consistency with selection
        const normalizedData = (leadsResponse?.data || []).map((lead: any) => ({
          ...lead,
          id: Number(lead.id),
        }));
        setLeadsData(normalizedData);
        setTotalLeads(leadsResponse?.meta?.total);
        if (leadsResponse?.data?.length === 0) {
          notification.info({
            message: 'Info',
            description: searchKey
              ? `No leads found matching "${searchKey}".`
              : 'The selected tab and launch have no leads available. Please choose another tab.',
          });
        }
      }
    } catch (error) {
      notification.error({
        message: 'Error fetching leads',
        description: 'Unable to fetch leads at this moment',
      });
    }
  };

  const rowSelection: TableProps<Lead>['rowSelection'] = {
    selectedRowKeys,
    onChange: (selectedRowKeys: React.Key[], _selectedRows: Lead[]) => {
      if (!isSelectAllProcessing.current) {
        // Ensure all keys are numbers
        const numericKeys = selectedRowKeys.map((key) => Number(key));
        setSelectedRowKeys(numericKeys);
        setIsSelectAll(false);
      }
    },
  };

  // const clearSelection = () => {
  //   setSelectedRowKeys([]);
  //   setIsSelectAll(false);
  // };

  const handleSelectAll = async (checked: boolean) => {
    if (checked) {
      const leadType = Number(roleId) === getRoleByName('pre_sales')?.id ? 'pre_sales_id' : 'field_sales_id';
      isSelectAllProcessing.current = true;
      setSelectAllLoading(true);
      try {
        const params = {
          tab_key: status?.join(','),
          lead_type: leadType,
          old_user: existingUserId,
          launch_id: launchId?.map(String).join(','),
          current_status: leadCurrentStatus,
          search: searchKey,
          getAllIds: true,
        };
        const response = await getLeads(params);
        if (response && Array.isArray(response.data)) {
          const allIds = response.data.map((id: any) => Number(id));
          setSelectedRowKeys(allIds);
          setIsSelectAll(true);
        }
      } catch (error) {
        notification.error({
          message: 'Error',
          description: 'Failed to select all leads. Please try again.',
        });
      } finally {
        setSelectAllLoading(false);
        setTimeout(() => {
          isSelectAllProcessing.current = false;
        }, 100);
      }
    } else {
      setSelectedRowKeys([]);
      setIsSelectAll(false);
    }
  };

  // Function to handle form submission
  const handleSubmit = (values: {
    launch: React.Key[];
    old_user: number;
    new_user: number;
    role_id: number;
    city_id: number;
  }) => {
    if (selectedRowKeys.length === 0) {
      notification.error({
        message: 'Error',
        description: 'Please select leads.',
      });
      return; // Early return to prevent further execution
    }
    const leadType = Number(roleId) === getRoleByName('pre_sales')?.id ? 'pre_sales_id' : 'field_sales_id';
    setSubmitionLoading(true);
    updateLeadTransfer({
      launch_id: launchId?.map(String).join(',') ?? '',
      transfer_launch_id: transferLaunchId,
      old_user: values.old_user,
      new_user: values.new_user,
      role_id: values.role_id,
      city_id: values.city_id,
      leads_id: selectedRowKeys,
      lead_type: leadType,
    })
      .then((response) => {
        if (response && response.message) {
          notification.success({
            message: 'Success',
            description: (
              <div>
                <div>{response.message}</div>
                {response.transferredCount !== undefined && response.notTransferredCount !== undefined && (
                  <div style={{ marginTop: 8 }}>
                    <div><strong>Transferred:</strong> {response.transferredCount}</div>
                    <div><strong>Not Transferred:</strong> {response.notTransferredCount}</div>
                  </div>
                )}
              </div>
            ),
          });
        }
        form.resetFields();
        // Reset states after successful update
        setRoleId(undefined);
        setCityId(undefined);
        setExistingUserId(undefined);
        setReportingManagerId(undefined);
        setNewUserId(undefined);
        setTransferLaunchId(undefined);
        setLeadsData([]);
        setSelectedRowKeys([]);
        setIsSelectAll(false);
        setStatus(undefined);
        setLaunchId(undefined);
        setCurrentPage(1);
        setPageSize(10);
        setTotalLeads(0);
        setSearchKey('');
      })
      .catch((error) => {
        const errorMessage = error?.response?.data?.message;
        notification.error({
          message: 'Error',
          description: errorMessage,
        });
      })
      .finally(() => {
        setSubmitionLoading(false);
      });
  };

  // Function to handle form cancellation
  const handleCancel = () => {
    form.resetFields();
    setRoleId(undefined);
    setCityId(undefined);
    setExistingUserId(undefined);
    setReportingManagerId(undefined);
    setNewUserId(undefined);
    setTransferLaunchId(undefined);
    setLeadsData([]);
    setSelectedRowKeys([]);
    setIsSelectAll(false);
    setLaunchId(undefined);
    setStatus(undefined);
    setCurrentPage(1);
    setPageSize(10);
    setTotalLeads(0);
    setSearchKey('');
  };

  const handleExistingUserChange = (userId: number) => {
    const selectedUser = existingUsers.find(
      (user: { id: number }) => user.id === userId,
    );
    if (selectedUser) {
      setExistingUserId(userId);
      setReportingManagerId(selectedUser.reporting_manager_id);
      form.setFieldsValue({
        new_user: undefined,
        launch: undefined,
        transfer_launch: undefined,
      });
      setNewUserId(undefined);
      setTransferLaunchId(undefined);
      setLeadsData([]);
      setSelectedRowKeys([]);
      setLaunchId(undefined);
      setCurrentPage(1);
      setPageSize(10);
      setTotalLeads(0);
      setSearchKey('');
    }
  };
  const handleTableChange = (pagination: any) => {
    setCurrentPage(pagination.current);
    setPageSize(pagination.pageSize);
  };

  const onSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setSearchKey(value);
    setCurrentPage(1);
  };

  return (
    <Card title={'Lead Transfer'}>
      <Form form={form} onFinish={handleSubmit} layout="vertical">
        <Row gutter={16}>
          <Col xs={24} md={12}>
            <MasterRoles
              name="role_id"
              label="Role"
              rules={[{ required: true, message: 'Please Select Role' }]}
              onChange={(value) => {
                form.setFieldsValue({
                  role_id: value,
                  city_id: undefined,
                  old_user: undefined,
                  new_user: undefined,
                  launch: undefined,
                  transfer_launch: undefined,
                });
                setRoleId(value);
                setCityId(undefined);
                setExistingUserId(undefined);
                setReportingManagerId(undefined);
                setNewUserId(undefined);
                setTransferLaunchId(undefined);
                setLeadsData([]);
                setSelectedRowKeys([]);
                setLaunchId(undefined);
                setCurrentPage(1);
                setPageSize(10);
                setTotalLeads(0);
                setSearchKey('');
              }}
              onClear={() => {
                form.setFieldsValue({
                  role_id: undefined,
                  old_user: undefined,
                  new_user: undefined,
                  transfer_launch: undefined,
                });
                setRoleId(undefined);
                setCityId(undefined);
                setExistingUserId(undefined);
                setReportingManagerId(undefined);
                setNewUserId(undefined);
                setTransferLaunchId(undefined);
                setLeadsData([]);
                setSelectedRowKeys([]);
                setCurrentPage(1);
                setPageSize(10);
                setTotalLeads(0);
                setSearchKey('');
              }}
              exclude={[
                getRoleByName('human_resources')?.id,
                getRoleByName('city_head')?.id,
                getRoleByName('super_admin')?.id,
                getRoleByName('team_head')?.id,
                getRoleByName('cluster_manager')?.id,
              ].filter((id): id is number => id !== undefined)}
              keyProp="lead-transfer"
            />
          </Col>

          <Col xs={24} md={12}>
            <MasterCities
              name="city_id"
              label="City"
              rules={[{ required: true, message: 'Please Select City' }]}
              filter={{ status: 'active' }}
              onChange={(value) => {
                form.setFieldsValue({
                  city_id: value,
                  old_user: undefined,
                  new_user: undefined,
                  launch: undefined,
                  transfer_launch: undefined,
                });
                setCityId(value);
                setExistingUserId(undefined);
                setReportingManagerId(undefined);
                setNewUserId(undefined);
                setTransferLaunchId(undefined);
                setLeadsData([]);
                setSelectedRowKeys([]);
                setLaunchId(undefined);
                setCurrentPage(1);
                setPageSize(10);
                setTotalLeads(0);
                setSearchKey('');
              }}
              onClear={() => {
                form.setFieldsValue({
                  city_id: undefined,
                  old_user: undefined,
                  new_user: undefined,
                  transfer_launch: undefined,
                });
                setCityId(undefined);
                setExistingUserId(undefined);
                setReportingManagerId(undefined);
                setNewUserId(undefined);
                setTransferLaunchId(undefined);
                setLeadsData([]);
                setSelectedRowKeys([]);
                setCurrentPage(1);
                setPageSize(10);
                setTotalLeads(0);
                setSearchKey('');
              }}
            />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col xs={24} md={12}>
            <Form.Item
              name="old_user"
              label="From Employee"
              rules={[
                { required: true, message: 'Please Select an From Employee' },
              ]}
            >
              <Select
                showSearch
                optionFilterProp="children"
                onChange={handleExistingUserChange}
                onClear={() => {
                  form.setFieldsValue({
                    old_user: undefined,
                    new_user: undefined,
                    launch: undefined,
                    transfer_launch: undefined,
                  });
                  setNewUserId(undefined);
                  setTransferLaunchId(undefined);
                  setLeadsData([]);
                  setSelectedRowKeys([]);
                  setLaunchId(undefined);
                  setCurrentPage(1);
                  setPageSize(10);
                  setTotalLeads(0);
                  setSearchKey('');
                }}
                placeholder="Select an From Employee"
                disabled={!roleId || !cityId}
                allowClear
              >
                {existingUsers?.map(
                  (user: {
                    id: React.Key | null | undefined;
                    first_name: string;
                    last_name: string;
                  }) => (
                    <Option key={user.id} value={user.id}>
                      {user.first_name} {user.last_name}
                    </Option>
                  ),
                )}
              </Select>
            </Form.Item>
          </Col>
          <Col xs={24} md={12}>
            <Form.Item
              name="new_user"
              label="To Employee"
              rules={[
                { required: true, message: 'Please Select a To Employee' },
              ]}
            >
              <Select
                showSearch
                optionFilterProp="children"
                onChange={(value) => {
                  // Which statuses/leads are eligible can differ depending on whether
                  // the same employee was picked (launch-only move), so reset the
                  // tab/current status filters and the fetched leads too.
                  form.setFieldsValue({
                    new_user: value,
                    launch: undefined,
                    transfer_launch: undefined,
                    status: undefined,
                    lead_status: undefined,
                  });
                  setNewUserId(value);
                  setTransferLaunchId(undefined);
                  setStatus(undefined);
                  setLeadCurrentStatus(undefined);
                  setLeadsData([]);
                  setSelectedRowKeys([]);
                  setLaunchId(undefined);
                  setCurrentPage(1);
                  setPageSize(10);
                  setTotalLeads(0);
                  setSearchKey('');
                }}
                onClear={() => {
                  form.setFieldsValue({
                    new_user: undefined,
                    transfer_launch: undefined,
                    status: undefined,
                    lead_status: undefined,
                  });
                  setNewUserId(undefined);
                  setTransferLaunchId(undefined);
                  setStatus(undefined);
                  setLeadCurrentStatus(undefined);
                  setLeadsData([]);
                  setSelectedRowKeys([]);
                  setCurrentPage(1);
                  setPageSize(10);
                  setTotalLeads(0);
                  setSearchKey('');
                }}
                placeholder="Select a To Employee"
                disabled={!existingUserId}
                allowClear
              >
                {newUsers?.map(
                  (user: {
                    id: React.Key | null | undefined;
                    first_name: string;
                    last_name: string;
                  }) => (
                    <Option key={user.id} value={user.id}>
                      {user.first_name} {user.last_name}
                    </Option>
                  ),
                )}
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col xs={24} md={12}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 2 }}>
              <Typography.Text style={{ fontSize: 13 }}>
                Tab Status <span style={{ color: 'red' }}>*</span>
              </Typography.Text>
              <Typography.Link
                style={{ fontSize: 12 }}
                onClick={() => {
                  const allValues = statusOptions.map((s) => s.value);
                  form.setFieldsValue({ status: allValues });
                  setStatus(allValues);
                  setLeadsData([]);
                  setSelectedRowKeys([]);
                  setCurrentPage(1);
                  setTotalLeads(0);
                }}
              >
                Select All
              </Typography.Link>
            </div>
            <Form.Item
              name="status"
              rules={[{ required: true, message: 'Please Select Tab Status' }]}
            >
              <Select
                mode="multiple"
                showSearch
                optionFilterProp="children"
                onChange={(value: string[]) => {
                  form.setFieldsValue({ status: value.length ? value : undefined });
                  setStatus(value.length ? value : undefined);
                  setLeadsData([]);
                  setSelectedRowKeys([]);
                  setCurrentPage(1);
                }}
                onClear={() => {
                  form.setFieldsValue({ status: undefined });
                  setStatus(undefined);
                  setLeadsData([]);
                  setSelectedRowKeys([]);
                }}
                placeholder="Select Tab Status"
                allowClear
              >
                {statusOptions.map((opt) => (
                  <Option key={opt.value} value={opt.value}>
                    {opt.label}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>

          <Col xs={24} md={12}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 2 }}>
              <Typography.Text style={{ fontSize: 13 }}>Current Status</Typography.Text>
              <Typography.Link
                style={{ fontSize: 12 }}
                onClick={() => {
                  const allIds = currentStatusOptions.map((item) => item.id);
                  form.setFieldsValue({ lead_status: allIds });
                  setLeadCurrentStatus(allIds.join(','));
                  setLeadsData([]);
                  setSelectedRowKeys([]);
                  setCurrentPage(1);
                }}
              >
                Select All
              </Typography.Link>
            </div>
            <Form.Item name="lead_status">
              <Select
                mode="multiple"
                showSearch
                optionFilterProp="children"
                onChange={(value) => {
                  form.setFieldsValue({ lead_status: value });
                  setLeadCurrentStatus(value.length > 0 ? value.join(',') : undefined);
                  setLeadsData([]);
                  setSelectedRowKeys([]);
                  setCurrentPage(1);
                }}
                onClear={() => {
                  form.setFieldsValue({ lead_status: undefined });
                  setLeadCurrentStatus(undefined);
                }}
                placeholder="Select Current Status"
                allowClear
              >
                {currentStatusOptions.map((item: { id: number; name: string }) => (
                  <Option key={item.id} value={item.id}>
                    {item.name}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col xs={24} md={12}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 2 }}>
              <Typography.Text style={{ fontSize: 13 }}>
                Launch <span style={{ color: 'red' }}>*</span>
              </Typography.Text>
              <Typography.Link
                style={{ fontSize: 12 }}
                onClick={() => {
                  if (!existingUserId) return;
                  const allIds = (launchList || []).map((l: { id: React.Key }) => l.id);
                  form.setFieldsValue({ launch: allIds, transfer_launch: undefined });
                  setLaunchId(allIds);
                  setTransferLaunchId(undefined);
                  setLeadsData([]);
                  setSelectedRowKeys([]);
                  setCurrentPage(1);
                  setPageSize(10);
                  setTotalLeads(0);
                  setSearchKey('');
                }}
              >
                Select All
              </Typography.Link>
            </div>
            <Form.Item
              name="launch"
              rules={[{ required: true, message: 'Please Select Launch' }]}
            >
              <Select
                mode="multiple"
                showSearch
                optionFilterProp="children"
                onChange={(value: React.Key[]) => {
                  form.setFieldsValue({ launch: value.length ? value : undefined, transfer_launch: undefined });
                  setLaunchId(value.length ? value : undefined);
                  setTransferLaunchId(undefined);
                  setSelectedRowKeys([]);
                  setCurrentPage(1);
                  setPageSize(10);
                  setTotalLeads(0);
                  setSearchKey('');
                }}
                onClear={() => {
                  form.setFieldsValue({ launch: undefined, transfer_launch: undefined });
                  setLeadsData([]);
                  setLaunchId(undefined);
                  setTransferLaunchId(undefined);
                  setCurrentPage(1);
                  setPageSize(10);
                  setTotalLeads(0);
                  setSearchKey('');
                }}
                placeholder="Select Launch"
                disabled={!existingUserId}
                allowClear
              >
                {launchList?.map(
                  (status: {
                    id: React.Key | null | undefined;
                    name: string;
                  }) => (
                    <Option key={status.id} value={status.id}>
                      {status.name}
                    </Option>
                  ),
                )}
              </Select>
            </Form.Item>
          </Col>
          <Col xs={24} md={12}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 2 }}>
              <Typography.Text style={{ fontSize: 13 }}>
                Transfer to Launch <span style={{ color: 'red' }}>*</span>
              </Typography.Text>
            </div>
            <Form.Item
              name="transfer_launch"
              rules={[{ required: true, message: 'Please Select Transfer Launch' }]}
            >
              <Select
                showSearch
                optionFilterProp="children"
                onChange={(value: number) => {
                  form.setFieldsValue({ transfer_launch: value });
                  setTransferLaunchId(value);
                }}
                onClear={() => {
                  form.setFieldsValue({ transfer_launch: undefined });
                  setTransferLaunchId(undefined);
                }}
                placeholder="Select Transfer Launch"
                disabled={!newUserId}
                allowClear
              >
                {newUserLaunchList?.map(
                  (launch: {
                    id: React.Key | null | undefined;
                    name: string;
                  }) => (
                    <Option key={launch.id} value={launch.id}>
                      {launch.name}
                    </Option>
                  ),
                )}
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row justify="end" style={{ marginBottom: '16px' }}>
          <Col xs={24} md={8} style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            <Input.Search
              placeholder="Search Leads"
              value={searchKey}
              onChange={onSearchChange}
              allowClear
              disabled={!launchId || launchId.length === 0}
              style={{ flex: 1 }}
            />
            <Checkbox
              checked={isSelectAll}
              onChange={(e) => handleSelectAll(e.target.checked)}
              disabled={!launchId || !launchId.length || !leadsData.length || selectAllLoading}
            >
              <strong>{selectAllLoading ? 'Loading...' : 'Select All'}</strong>
            </Checkbox>
          </Col>
        </Row>
        <Table
          columns={columns}
          dataSource={leadsData}
          style={{ marginTop: 16 }}
          onChange={handleTableChange}
          pagination={{
            current: currentPage,
            pageSize: pageSize,
            total: totalLeads,
            showSizeChanger: true,
            pageSizeOptions: [10, 20, 50, 100],
            showTotal: (total, range) =>
              `${range[0]}-${range[1]} of ${total} entries`,
          }}
          rowSelection={rowSelection}
          rowKey="id"
        />

        <Form.Item
          style={{ marginTop: 16, display: 'flex', justifyContent: 'end' }}
        >
          <Button type="primary" htmlType="submit" loading={submitionLoading}>
            Submit
          </Button>
          <Button style={{ marginLeft: '8px' }} onClick={handleCancel}>
            Cancel
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default LeadTransferPage;