import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import {
  ceilMilliToCore,
  parseQuantityToGi,
  parseQuantityToNumber
} from '@/pages/gpu-service/utils';
import { PlusOutlined } from '@ant-design/icons';
import {
  CheckboxField,
  Input as CInput,
  CollapsePanel,
  IconFont,
  MultipleSelect,
  ScrollSpyTabs,
  useAppUtils,
  useFinishFailed,
  useScrollActiveChange,
  useWrapperContext
} from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Button, Flex, Form } from 'antd';
import _ from 'lodash';
import {
  forwardRef,
  useEffect,
  useImperativeHandle,
  useMemo,
  useRef,
  useState
} from 'react';
import { FormData as PublicKeyFormData } from '../../public-keys/config/types';
import useQuerySshkeys from '../../public-keys/services/use-query-sshkeys';
import { DefaultImagePullPolicy } from '../../templates/config';
import TemplateBasicForm, {
  BasicResourceMax
} from '../../templates/forms/basic';
import { pickCandidateForAccelerator, StorageModeValueMap } from '../config';
import { FormData, InstanceTypeItem, ListItem } from '../config/types';
import instanceStyles from '../styles/instances.module.less';
import Basic from './basic';
import InstanceTypeFormItem from './instance-type';
import PublicKeyOverlay from './public-key-overlay';
import StorageVolume from './storage-volume';

const SSH_PORT = 22;

type InstanceFormValues = FormData & {
  // ssh holder
  enable_ssh?: boolean;
};

interface InstanceFormProps {
  ref?: any;
  open: boolean;
  action: PageActionType;
  realAction?: PageActionType | string;
  currentData?: ListItem | null;
  namespace?: string;
  instanceTypeList?: InstanceTypeItem[];
  disabled?: boolean;
  onFinish: (values: FormData) => Promise<void>;
}

const TABKeysMap = {
  BASIC: 'basic',
  INSTANCE_TYPE: 'instanceType',
  TEMPLATE: 'template',
  STORAGE: 'storage'
};

const requiredFields = {
  [TABKeysMap.BASIC]: {
    sort: 1,
    fields: ['name']
  },
  [TABKeysMap.INSTANCE_TYPE]: {
    sort: 2,
    fields: ['spec.type', 'spec.resources.accelerator']
  },
  [TABKeysMap.TEMPLATE]: {
    sort: 3,
    fields: ['spec.image', 'spec.ports', 'spec.env']
  },
  [TABKeysMap.STORAGE]: {
    sort: 4,
    fields: [
      'spec.volume.persistent.name',
      'spec.volume.ephemeral.capacity',
      'spec.sshPublicKeys'
    ]
  }
};

const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
  (props, ref) => {
    const {
      action,
      realAction,
      currentData,
      disabled,
      open,
      instanceTypeList = [],
      onFinish
    } = props;
    const intl = useIntl();
    const { getRuleMessage } = useAppUtils();
    const [form] = Form.useForm<InstanceFormValues>();
    const scrollTabsRef = useRef<any>(null);
    const formAction =
      realAction === PageAction.CREATE ? PageAction.CREATE : action;
    const sshEnabled = Form.useWatch('enable_ssh', form);
    const { sshkeyOptions, fetchData: fetchSSHData } = useQuerySshkeys();
    const [sshOverlayOpen, setSshOverlayOpen] = useState(false);
    const { getScrollElementScrollableHeight } = useWrapperContext();
    const {
      activeKey,
      collapseKeys,
      handleActiveChange,
      handleOnCollapseChange,
      updateActiveKey
    } = useScrollActiveChange({
      initalActiveKeys: [TABKeysMap.BASIC],
      initialCollapseKeys:
        action === PageAction.EDIT
          ? []
          : [TABKeysMap.INSTANCE_TYPE, TABKeysMap.TEMPLATE, TABKeysMap.STORAGE]
    });

    useEffect(() => {
      if (open) {
        fetchSSHData({ page: 1, perPage: 100 });
      }
    }, [open, action]);

    const ports = Form.useWatch(['spec', 'ports'], form) || [];

    const hasSSHPort = useMemo(
      () =>
        ports.some(
          (item: any) => item?.protocol === 'TCP' && item?.port === SSH_PORT
        ),
      [ports]
    );

    useEffect(() => {
      if (
        hasSSHPort &&
        !form.getFieldValue('enable_ssh') &&
        action === PageAction.CREATE
      ) {
        form.setFieldValue('enable_ssh', true);
      }
    }, [hasSSHPort, form, action]);

    const segmentOptions = useMemo(
      () => [
        {
          value: TABKeysMap.BASIC,
          label: intl.formatMessage({
            id: 'common.title.basicInfo'
          }),
          icon: <IconFont type="icon-basic" />,
          field: 'name'
        },
        {
          value: TABKeysMap.INSTANCE_TYPE,
          label: intl.formatMessage({ id: 'gpuservice.instance.section.type' }),
          icon: <IconFont type="icon-gpu1" />,
          field: 'instanceType'
        },
        {
          value: TABKeysMap.TEMPLATE,
          label: intl.formatMessage({
            id: 'gpuservice.instance.section.template'
          }),
          icon: <IconFont type="icon-model" />,
          field: 'template'
        },
        {
          value: TABKeysMap.STORAGE,
          label: intl.formatMessage({
            id: 'gpuservice.instance.section.storage'
          }),
          icon: <IconFont type="icon-storage-outlined" />,
          field: 'storage'
        }
      ],
      [intl]
    );

    const [selectedInstanceType, setSelectedInstanceType] = useState<
      InstanceTypeItem | undefined
    >(undefined);
    const [onceMaxRequest, setOnceMaxRequest] = useState<BasicResourceMax>({
      cpu: null,
      memory: null,
      localStorage: null
    });

    const resolveAndApply = (
      instanceType: InstanceTypeItem | undefined,
      count: number,
      options: { writeAccelerator?: boolean } = {}
    ) => {
      if (!instanceType) {
        setSelectedInstanceType(undefined);
        setOnceMaxRequest({ cpu: null, memory: null, localStorage: null });
        return;
      }
      const candidate = pickCandidateForAccelerator(
        instanceType.status?.acceleratorTiers,
        count
      );

      setSelectedInstanceType(instanceType);

      setOnceMaxRequest({
        cpu: ceilMilliToCore(candidate?.cpu?.onceMaxRequest),
        memory: parseQuantityToGi(candidate?.ram?.onceMaxRequest),
        localStorage: parseQuantityToGi(candidate?.localStorage?.onceMaxRequest)
      });

      const unitResources = instanceType.spec?.unitResources;
      const unitCpu = parseQuantityToNumber(unitResources?.cpu);
      const unitRam = parseQuantityToNumber(unitResources?.ram);
      const acceleratable = instanceType.spec?.acceleratable;
      const cpuCores =
        unitCpu != null ? ceilMilliToCore(`${count * unitCpu}m`) : null;
      const ramGi =
        unitRam != null ? parseQuantityToGi(`${count * unitRam}Mi`) : null;

      form.setFieldsValue({
        clusterId: candidate?.cluster ? _.toNumber(candidate.cluster) : null,
        spec: {
          type: candidate?.name || '',
          ...(options.writeAccelerator
            ? { resources: { accelerator: _.toString(count) } }
            : {}),
          ...(acceleratable
            ? {
                resources: {
                  ...(options.writeAccelerator
                    ? { accelerator: _.toString(count) }
                    : {}),
                  ...(cpuCores != null ? { cpu: cpuCores } : {}),
                  ...(ramGi != null ? { ram: `${ramGi}Gi` } : {})
                }
              }
            : {})
        } as any
      });
    };

    const handleAcceleratorChange = (count: number) => {
      resolveAndApply(selectedInstanceType, count);
    };

    const onTargetChange = (key: string) => {
      scrollTabsRef.current?.handleTargetChange(key);
    };

    const { handleOnFinishFailed: rawHandleOnFinishFailed } = useFinishFailed({
      requiredFields,
      onTargetChange,
      updateActiveKey
    });

    const handleOnFinishFailed = (errorInfo: any) => {
      const errorFields = (errorInfo?.errorFields || []).map((field: any) => ({
        ...field,
        name: [
          Array.isArray(field.name) ? field.name.join('.') : String(field.name)
        ]
      }));
      rawHandleOnFinishFailed({ ...errorInfo, errorFields });
    };
    const detectMode = (volume?: FormData['spec']['volume']) => {
      if (volume?.persistent?.name || volume?.persistentTemplate?.name) {
        return StorageModeValueMap.Persistent;
      }
      return StorageModeValueMap.Temporary;
    };

    useEffect(() => {
      if (!open) {
        form.resetFields();
        return;
      }

      if (
        action === PageAction.EDIT ||
        action === PageAction.VIEW ||
        realAction === PageAction.CREATE
      ) {
        form.setFieldsValue({
          ...currentData,
          enable_ssh: !!currentData?.spec?.sshPublicKeys?.length,
          storageMode: detectMode(currentData?.spec?.volume)
        });
      }
    }, [action, currentData, form, open, realAction, instanceTypeList]);

    const getUnitResources = () => {
      if (selectedInstanceType?.spec?.unitResources) {
        return selectedInstanceType.spec.unitResources;
      }
      try {
        return (
          JSON.parse(currentData?.description || '{}')?.spec?.unitResources ??
          undefined
        );
      } catch {
        return undefined;
      }
    };

    const handleFinish = async (values: InstanceFormValues) => {
      const submittedPorts = [...(values.spec?.ports ?? [])];
      const submittedHasSSHPort = submittedPorts.some(
        (item: any) => item?.protocol === 'TCP' && item?.port === SSH_PORT
      );

      if (!submittedHasSSHPort) {
        submittedPorts.push({
          protocol: 'TCP',
          port: SSH_PORT,
          name: 'SSH'
        });
      }

      const accelerator = _.toNumber(values.spec?.resources?.accelerator);
      const submittedResources = { ...(values.spec?.resources ?? {}) };
      if (accelerator > 0) {
        const unitResources = getUnitResources();
        const unitCpu = parseQuantityToNumber(unitResources?.cpu);
        const unitRam = parseQuantityToNumber(unitResources?.ram);
        if (unitCpu != null) {
          submittedResources.cpu = `${accelerator * unitCpu}m`;
        }
        if (unitRam != null) {
          submittedResources.ram = `${accelerator * unitRam}Mi`;
        }
      }

      await onFinish({
        ..._.omit(values, ['enable_ssh']),
        spec: {
          ...values.spec,
          ports: submittedPorts,
          resources: submittedResources
        }
      });
    };

    const segmentedTop =
      action === PageAction.EDIT
        ? {
            top: 0,
            offsetTop: 100
          }
        : {
            top: 40,
            offsetTop: 130
          };

    useImperativeHandle(ref, () => ({
      submit: () => {
        form.submit();
      },
      resetFields: () => {
        form.resetFields();
      },
      setFieldsValue: (values: Partial<InstanceFormValues>) => {
        form.setFieldsValue(values as any);
      },
      getFieldsValue: () => form.getFieldsValue(),
      applyInstanceType: (instanceType: InstanceTypeItem) => {
        const count = instanceType.spec?.acceleratable ? 1 : 0;
        resolveAndApply(instanceType, count, { writeAccelerator: true });
      }
    }));

    const handleAddSSHKey = () => {
      setSshOverlayOpen(true);
    };

    const handleCreateSSHKey = async (values: PublicKeyFormData) => {
      try {
        await fetchSSHData({ page: -1 });
        const current: Array<{ name: string } | string> =
          form.getFieldValue(['spec', 'sshPublicKeys']) || [];
        form.setFieldValue(
          ['spec', 'sshPublicKeys'],
          [...current, { name: values.name }]
        );

        setSshOverlayOpen(false);
      } catch (error) {
        // it's handled in interceptor
      }
    };

    const handleOnEnableSSHChange = (e: any) => {
      const checked = e.target.checked;
      console.log('enable ssh change', checked);
      if (!checked) {
        form.setFieldValue(['spec', 'sshPublicKeys'], []);
      }
    };

    return (
      <ScrollSpyTabs
        ref={scrollTabsRef}
        defaultTarget={TABKeysMap.BASIC}
        segmentOptions={segmentOptions}
        activeKey={activeKey}
        setActiveKey={handleActiveChange}
        segmentedTop={segmentedTop}
        getScrollElementScrollableHeight={getScrollElementScrollableHeight}
      >
        <Form
          name="gpuServiceInstanceForm"
          form={form}
          disabled={disabled}
          onFinish={handleFinish}
          onFinishFailed={handleOnFinishFailed}
          preserve={false}
          initialValues={{
            spec: {
              description: '',
              displayName: '',
              image: '',
              imagePullPolicy: DefaultImagePullPolicy,
              command: [],
              ports: [],
              env: [],
              volumeMount: '',
              resources: {
                accelerator: 1
              },
              volume: {
                ephemeral: {
                  capacity: '50Gi'
                },
                persistent: {
                  name: ''
                }
              }
            },
            enable_ssh: false,
            storageMode: StorageModeValueMap.Temporary
          }}
        >
          <Basic action={formAction} disabled={disabled} />
          <Form.Item name="clusterId" hidden>
            <CInput.Input />
          </Form.Item>
          <CollapsePanel
            activeKey={collapseKeys}
            accordion={false}
            onChange={handleOnCollapseChange}
            items={[
              {
                key: TABKeysMap.INSTANCE_TYPE,
                label: intl.formatMessage({
                  id: 'gpuservice.instance.section.type'
                }),
                forceRender: true,
                children: (
                  <InstanceTypeFormItem
                    action={formAction}
                    disabled={disabled}
                    selectedInstanceType={selectedInstanceType}
                    currentData={currentData as any}
                    onceMaxRequest={onceMaxRequest}
                    onGPUCountChange={handleAcceleratorChange}
                  />
                )
              },
              {
                key: TABKeysMap.TEMPLATE,
                label: intl.formatMessage({
                  id: 'gpuservice.instance.section.template'
                }),
                forceRender: true,
                children: (
                  <TemplateBasicForm
                    page="instance"
                    disabled={disabled || formAction === PageAction.EDIT}
                    onceMaxRequest={onceMaxRequest}
                  />
                )
              },
              {
                key: TABKeysMap.STORAGE,
                label: intl.formatMessage({
                  id: 'gpuservice.instance.section.storage'
                }),
                forceRender: true,
                children: (
                  <StorageVolume
                    disabled={disabled || formAction === PageAction.EDIT}
                    action={formAction}
                  />
                )
              }
            ]}
          />

          <Flex align="center" justify="space-between">
            <Form.Item<FormData>
              name="enable_ssh"
              valuePropName="checked"
              style={{ marginBottom: 8 }}
            >
              <CheckboxField
                onChange={handleOnEnableSSHChange}
                disabled={disabled}
                label={intl.formatMessage({
                  id: 'gpuservice.instance.ssh.enable'
                })}
              ></CheckboxField>
            </Form.Item>
            <Button
              size="small"
              type="link"
              icon={<PlusOutlined />}
              onClick={handleAddSSHKey}
            >
              {intl.formatMessage({
                id: 'gpuservice.instance.ssh.addKey'
              })}
            </Button>
          </Flex>

          <div className={instanceStyles.sshkeySelection}>
            <Form.Item<FormData>
              name={['spec', 'sshPublicKeys']}
              style={{
                marginBottom: 12
              }}
              hidden={!sshEnabled}
              normalize={(value) =>
                Array.isArray(value)
                  ? value?.map((item) => ({ name: item }))
                  : []
              }
              getValueProps={(value) => ({
                value: Array.isArray(value)
                  ? value.map((item) => item?.name ?? item)
                  : []
              })}
              rules={[
                {
                  required: sshEnabled,
                  message: getRuleMessage('select', 'gpuservice.publicKey')
                }
              ]}
            >
              <MultipleSelect
                required
                disabled={disabled}
                mode="multiple"
                maxTagCount={1}
                label={intl.formatMessage({
                  id: 'gpuservice.instance.ssh.assignKey'
                })}
                styles={{
                  wrapper: {
                    width: '100%'
                  }
                }}
                options={sshkeyOptions}
              ></MultipleSelect>
            </Form.Item>
          </div>
        </Form>
        <PublicKeyOverlay
          open={sshOverlayOpen}
          onCancel={() => setSshOverlayOpen(false)}
          onSubmit={handleCreateSSHKey}
        />
      </ScrollSpyTabs>
    );
  }
);

export default GPUServiceInstanceForm;
