import React, { useState, useEffect, useRef } from 'react';
import { usePathname, useRouter } from 'next/navigation';
import {
  Form,
  Button,
  Spin,
  Card,
  Row,
  Col,
  notification,
  Typography,
  Popconfirm,
  InputNumber,
} from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import InputText from '@/components/form/InputText';
import ModalBox from '@/app/builders/component/modal';
import { getProject, updateProjectData, addProject } from '../service';
import MasterRegions from '@/components/masterDropdowns/MasterRegions';
import MasterBuilders from '@/components/masterDropdowns/MasterBuilders';
import { launchLocationValidator, projectNameValidator } from '../validator';
import MasterConfigurations from '@/components/masterDropdowns/MasterConfigurations';
import type { ConfigurationDropdownProps, Configurations, ProjectFormDataI } from '../interface';
import MasterCities from '@/components/masterDropdowns/MasterCities';
import { useSession } from 'next-auth/react';
import { convertToShorthand, getRoleIdMap } from '@/utills/helper';
import { DataType } from '@/app/designations/interface';
import { useSelector, useDispatch } from 'react-redux';
import { RootState, AppDispatch } from '@/store/store';
import { fetchRoles } from '@/app/role/slice';
const { Title } = Typography;

interface IAddEditUserProps {
    projectID?: number | string
    id?: number | undefined | string
    onNext?: (id?: number) => void
    cancelEditProjectDetails?: (data: boolean) => void
    refreshProjectInfo?: () => void
}

const AddEditProject: React.FC<IAddEditUserProps> = ({
  id,
  onNext,
  cancelEditProjectDetails,
  refreshProjectInfo,
}) => {
  const router = useRouter();
  const { data: session } = useSession();
  const user = session?.user;
  const cityId: number[] | undefined = session?.user.cities?.map((city) => city?.city_id);
  const [form] = Form.useForm();
  const dispatch: AppDispatch = useDispatch();

  const [roleFilters, setRoleFilters] = useState<any>({
      page: 1,
      sortColumn: 'sort_order',
    });
  const pathName = usePathname();
  const designationRef = useRef<any>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
  const [selectedConfigurations, setSelectedConfigurations] = useState<Configurations[]>([]);
  const [projectCityId, setProjectCityID] = useState(null);
  const [ticketSizes, setTicketSizes] = useState<any>({});
  const [selectedCityId, setSelectedCityId] = useState<string | number>(0);
  const regionsRef = useRef<any>(null);
  const [isProjectEditable, setIsProjectEditable] = useState<boolean>(false);
  const { roles } = useSelector((state: RootState) => state.roles);
  useEffect(() => {
      if(roles?.length === 0) {
        dispatch(fetchRoles(roleFilters));
      }
    }, [roles]);
  const allRoles = getRoleIdMap(roles);

  useEffect(() => {
    // Fetch project data if ID exists for editing
    if (id !== undefined) {
      setLoading(true);
      getProject(id)
        .then((res) => {
          // Extract configurations and set initial form values
          const configName = res?.data?.configuration?.map(
            (config: Configurations) => config.configuration_name
          );
          const selectedConfigs: ConfigurationDropdownProps[] = [];
          const configurations: Configurations[] = [];
          const formConfigValues: DataType = {};
          const shorthandTicketSizes: any = [];
          res?.data?.configuration?.map((config: Configurations, index: number) => {
            selectedConfigs.push({
              label: config.configuration_name,
              value: config.configuration_id,
            });
            configurations.push({
              configuration_id: config.configuration_id,
              configuration_name: configName[index],
              ticket_size: config.ticket_size,
            });
            shorthandTicketSizes[config.configuration_id] = convertToShorthand(
              Number(config.ticket_size) || 0
            );
            const valueKEy = `ticket_size_${config.configuration_id}`;
            formConfigValues[valueKEy] = config.ticket_size;
          });
          setTicketSizes(shorthandTicketSizes);
          // Set form values and state variables
          const editData = {
            name: res?.data?.name,
            location: res?.data?.location,
            builder_name: res?.data?.builder_id,
            region: res?.data?.region_id,
            city: res?.data?.city_id,
            location1: res?.data?.localities[0],
            location2: res?.data?.localities[1],
            location3: res?.data?.localities[2],
            location4: res?.data?.localities[3],
            selectedConfigurations: selectedConfigs,
            configurations,
            ...formConfigValues,
          };

          form.setFieldsValue(editData);
          setSelectedConfigurations(configurations);
          setProjectCityID(editData?.city);
          setSelectedCityId(editData?.city);
          setLoading(false);
          setIsProjectEditable(res?.data?.lead_count != 0);
        })
        .catch((error) => {
          console.error('Error while fetching project data:', error);
          setLoading(false);
        });
    }
  }, [form, id]);

  const onFinish = (formData: ProjectFormDataI): void => {
    setIsSubmitting(true);
    // Extract configuration data from form
    const configuration = selectedConfigurations?.map((config: Configurations) => ({
      configuration_id: config.configuration_id,
      configuration_name: config.configuration_name,
      ticket_size: formData[`ticket_size_${config.configuration_id}`],
    }));
    // Extract locality data from form
    const localities = [
      formData.location1,
      formData?.location2,
      formData?.location3,
      formData?.location4,
    ];
    const validLocalities = localities?.filter(
      (location) => location !== null && location !== undefined && location !== ''
    );

    // Prepare request data
    const requestData = {
      name: formData.name,
      location: formData.location,
      builder_id: formData.builder_name,
      region_id: formData.region,
      city_id:
                user?.role?.id === allRoles?.super_admin ? formData.city : projectCityId,
      localities: validLocalities,
      status: 'active',
      configuration,
    };
    if (id !== undefined && id !== null) {
      updateProjectData(id, requestData)
        .then((el) => {
          // Show success notification and reset form on successful submission
          notification.success({
            message: 'Success',
            description: el?.message,
          });
          setIsSubmitting(false);
          form.resetFields();
          if (pathName === '/launches/edit-project') {
            onNext && onNext();
          } else {
            cancelEditProjectDetails?.(false);
            refreshProjectInfo?.();
          }
        })
        .catch((error) => {
          notification.error({
            message: 'Error',
            description: error?.response?.data?.message,
          });
          setIsSubmitting(false);
        });
    } else {
      // Add new project
      const addRequestData = {
        name: formData.name,
        location: formData.location,
        builder_id: formData.builder_name,
        region_id: formData.region,
        city_id:
                    user?.role?.id === allRoles?.super_admin ? formData.city : cityId?.[0],
        localities: validLocalities,
        status: 'active',
        configuration,
      };
      addProject(addRequestData)
        .then((el) => {
          notification.success({
            message: 'Success',
            description: el?.message,
          });
          const projectId = el.data.id;
          setIsSubmitting(false);
          form.resetFields();
          onNext && onNext(projectId);
        })
        .catch((error) => {
          notification.error({
            message: 'Error',
            description: error?.response?.data?.message,
          });
          setIsSubmitting(false);
        });
    }
  };

  const handleConfigurationsChange = (
    value: number | string,
    items:
            | Array<{ value: number | string; label: string }>
            | { value: number | string; label: string }
  ): void => {
    const selectedItemValues = Array.isArray(items) ? items.map((item) => item.value) : [];

    const newSelectedConfigurations = Array.isArray(items)
      ? items.map((config): Configurations => {
        return {
          configuration_id: config.value as string,
          configuration_name: config.label,
          ticket_size: '',
        };
      })
      : [];

    // Create a map from configuration ID to ticket size value
    const ticketSizeMap = new Map(
      selectedConfigurations?.map((config) => [config.configuration_id, config.ticket_size])
    );

    // Update the ticket sizes for existing configurations and initialize new ones with ''
    const newTicketSizes = newSelectedConfigurations?.map((config) =>
      ticketSizeMap.has(config.configuration_id)
        ? convertToShorthand(Number(ticketSizeMap.get(config.configuration_id)))
        : ''
    );
    console.log(newTicketSizes)
    const KT: DataType = {};
    selectedItemValues.map((x) => {
      KT[x] = ticketSizes[x] ? ticketSizes[x] : convertToShorthand(0);
    });
    setSelectedConfigurations(newSelectedConfigurations);
    setTicketSizes(KT);

    // Reset the form values for deselected configurations
    const resetFieldsValues = selectedConfigurations
      .filter((config) => !selectedItemValues.includes(config.configuration_id))
      .reduce(
        (acc, config) => ({
          ...acc,
          [`ticket_size_${config.configuration_id}`]: '',
        }),
        {}
      );
    form.setFieldsValue(resetFieldsValues);
  };

  const handleAddDesignationClick = (): void => {
    setIsModalOpen(true);
  };
  const handleOk = (): void => {
    setIsModalOpen(false);
    designationRef.current.reload();
  };
  const handleCloseModal = (): void => {
    setIsModalOpen(false);
  };

  const handleTicketSizeChange = (value: number, id: number) => {
    const shorthandFormat = convertToShorthand(value);
    const newTicketSizes = { ...ticketSizes };
    newTicketSizes[id] = shorthandFormat;
    setTicketSizes(newTicketSizes);
  };

  const handleDeleteRow = (index: number, id: number): void => {
    const updatedConfigurations = [...selectedConfigurations];
    updatedConfigurations.splice(index, 1);

    const updatedTicketSizes = { ...ticketSizes };
    delete updatedTicketSizes[id];

    setSelectedConfigurations(updatedConfigurations);
    setTicketSizes(updatedTicketSizes);

    form.setFieldsValue({
      selectedConfigurations: updatedConfigurations.map((config) => config.configuration_id),
      [`ticket_size_${selectedConfigurations[index].configuration_id}`]: null,
    });
  };

  return (
    <div>
      {loading ? (
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100vh',
          }}>
          <Spin size="large" />
        </div>
      ) : (
        <Card title={'Project Details'}>
          <Form
            form={form}
            name="validateOnly"
            layout="vertical"
            autoComplete="off"
            onFinish={onFinish}>
            <Row gutter={[16, 0]}>
              <Col span={24} md={12}>
                <InputText
                  name="name"
                  label="Project Name"
                  rules={[{ required: true, validator: projectNameValidator }]}
                  placeholder="Project Name"
                />
              </Col>
              <Col span={24} md={12}>
                <InputText
                  name="location"
                  label="Location"
                  rules={[
                    { required: true, validator: launchLocationValidator() },
                  ]}
                  placeholder="Location"
                />
              </Col>
            </Row>
            <Title level={5}>Nearby Localities</Title>
            <Row gutter={[16, 0]}>
              <Col span={24} md={12}>
                <InputText
                  name="location1"
                  label="Location 1"
                  rules={[
                    { required: true, validator: launchLocationValidator() },
                  ]}
                  placeholder="Location 1"
                />
              </Col>
              <Col span={24} md={12}>
                <InputText
                  name="location2"
                  label="Location 2"
                  placeholder="Location 2"
                  rules={[{ validator: launchLocationValidator(false) }]}
                />
              </Col>
            </Row>
            <Row gutter={[16, 0]}>
              <Col span={24} md={12}>
                <InputText
                  name="location3"
                  label="Location 3"
                  placeholder="Location 3"
                  rules={[{ validator: launchLocationValidator(false) }]}
                />
              </Col>
              <Col span={24} md={12}>
                <InputText
                  name="location4"
                  label="Location 4"
                  placeholder="Location 4"
                  rules={[{ validator: launchLocationValidator(false) }]}
                />
              </Col>
            </Row>{' '}
            <Row gutter={[16, 0]}>
              <Col span={24} md={12}>
                <MasterBuilders
                  filter={{
                    status: 'active',
                  }}
                  name="builder_name"
                  label="Builder Name"
                  rules={[
                    { required: true, message: 'Please Select Builder Name' },
                  ]}
                  onSelect={(value) => {
                    form.setFieldsValue({ builder_name: value });
                  }}
                  forwardRef={designationRef}
                  extra={
                    id === undefined && (
                      <>
                        {user?.role?.id ===
                                                allRoles?.cluster_manager ? (
                            ''
                          ) : (
                            <>
                              <span>Builder not found? </span>
                              <Typography.Link
                                onClick={handleAddDesignationClick}>
                                                            Click here to add new
                              </Typography.Link>
                            </>
                          )}
                      </>
                    )
                  }
                />
              </Col>
              <ModalBox
                isModalOpen={isModalOpen}
                data={null}
                handleOk={handleOk}
                handleClose={handleCloseModal}
              />
              {user?.role?.id === allRoles?.super_admin && (
                <Col span={24} md={12}>
                  <MasterCities
                    name="city"
                    label="City"
                    rules={[{ required: true, message: 'Please Select City' }]}
                    filter={{
                      status: 'active',
                    }}
                    onChange={(value) => {
                      form.setFieldsValue({ city: value });
                      setSelectedCityId(value);

                      form.setFieldsValue({ region: null });
                      regionsRef?.current?.reload({
                        city_id: value,
                      });
                    }}
                  />
                </Col>
              )}
              <Col span={24} md={12}>
                {' '}
                <MasterRegions
                  filter={{
                    city_id:
                                            user?.role?.id === allRoles?.super_admin
                                              ? `${selectedCityId}`
                                              : cityId?.[0],
                  }}
                  name="region"
                  label="Region"
                  forwardRef={regionsRef}
                  rules={[{ required: true, message: 'Please Select Region' }]}
                  onSelect={(value) => {
                    form.setFieldsValue({ region: value });
                  }}
                />
              </Col>
            </Row>
            <Row gutter={[16, 0]}>
              <Col span={24} md={12}>
                <MasterConfigurations
                  name="selectedConfigurations"
                  label="Configurations"
                  mode="multiple"
                  rules={[
                    { required: true, message: 'Please Select Configurations' },
                  ]}
                  onChange={handleConfigurationsChange}
                />
              </Col>
              {selectedConfigurations?.length > 0 && (
                <Col span={24}>
                  <div className="responsive-custom-table">
                    <table
                      cellSpacing={0}
                      cellPadding={0}
                      className="custom-table table table-bordered">
                      <thead>
                        <tr>
                          <th style={{ width: '30%' }}>
                                                        Configuration Name
                          </th>
                          <th style={{ width: '50%', minWidth: '260px' }}>
                                                        Ticket Size{' '}
                            <span className="asterisk">*</span>
                          </th>
                          <th className="w-1 nowrap">Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        {selectedConfigurations?.map(
                          (config: Configurations, index) => (
                            <tr
                              key={`${index}-${config.configuration_id}`}>
                              <td>{config.configuration_name}</td>
                              <td>
                                <Form.Item
                                  key={config.configuration_id}
                                  name={`ticket_size_${config.configuration_id}`}
                                  label={''}
                                  rules={[
                                    {
                                      required: true,
                                      message:
                                                                                'Please Enter Ticket Size',
                                    },
                                  ]}
                                  className="mb-0 w-100 flex-1"
                                  style={{ minWidth: '100%' }}>
                                  <InputNumber
                                    defaultValue={
                                      Number(
                                        config.ticket_size
                                      ) || undefined
                                    }
                                    min={1}
                                    precision={2}
                                    max={999999999999999}
                                    style={{ width: '100%' }}
                                    placeholder="Ticket Size"
                                    addonAfter={
                                      ticketSizes[
                                        config
                                          .configuration_id
                                      ]
                                    }
                                    onChange={(value) => {
                                      handleTicketSizeChange(
                                        Number(value),
                                        Number(
                                          config.configuration_id
                                        )
                                      );
                                    }}
                                  />
                                </Form.Item>
                              </td>
                              <td className="w-1 nowrap text-center">
                                <Popconfirm
                                  title="Are you sure you want to delete this pair?"
                                  onConfirm={() => {
                                    handleDeleteRow(
                                      index,
                                      Number(
                                        config.configuration_id
                                      )
                                    );
                                  }}
                                  okText="Yes"
                                  cancelText="No"
                                  placement="topRight">
                                  <Button
                                    type="primary"
                                    shape="circle"
                                    icon={<DeleteOutlined />}
                                    size="middle"
                                    danger
                                  />
                                </Popconfirm>
                              </td>
                            </tr>
                          )
                        )}
                      </tbody>
                    </table>
                  </div>
                </Col>
              )}
            </Row>
            <div className="d-flex justify-content-end mt-5">
              <Button
                type="default"
                onClick={() => {
                  pathName === '/launches/edit-project' ||
                                    pathName === '/launches/add-projects'
                    ? router.push('/launches?Projects=1')
                    : cancelEditProjectDetails?.(false);
                }}>
                                Cancel
              </Button>
              {id !== undefined && id !== null ? (
                <Button
                  className="ml-3"
                  type="primary"
                  htmlType="submit"
                  disabled={isProjectEditable}
                  loading={isSubmitting}>
                                    Update
                </Button>
              ) : (
                <Button
                  className="ml-3"
                  type="primary"
                  htmlType="submit"
                  loading={isSubmitting}>
                                    Save & Next
                </Button>
              )}
            </div>
          </Form>
        </Card>
      )}
    </div>
  );
};

export default AddEditProject;