import { forwardRef, memo, useEffect, useImperativeHandle, useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import { PlusOutlined as PlusOutlinedIcon, RightOutlined as RightOutlinedIcon } from "@ant-design/icons";
import { Alert, Button, Form, type FormInstance, Input, Select } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";

import AccessEditModal from "@/components/access/AccessEditModal";
import AccessSelect from "@/components/access/AccessSelect";
import NotifyProviderSelect from "@/components/provider/NotifyProviderSelect";
import { ACCESS_USAGES, accessProvidersMap, notifyProvidersMap } from "@/domain/provider";
import { notifyChannelsMap } from "@/domain/settings";
import { type WorkflowNodeConfigForNotify } from "@/domain/workflow";
import { useAntdForm, useZustandShallowSelector } from "@/hooks";
import { useAccessesStore } from "@/stores/access";
import { useNotifyChannelsStore } from "@/stores/notify";

type NotifyNodeConfigFormFieldValues = Partial<WorkflowNodeConfigForNotify>;

export type NotifyNodeConfigFormProps = {
  className?: string;
  style?: React.CSSProperties;
  disabled?: boolean;
  initialValues?: NotifyNodeConfigFormFieldValues;
  onValuesChange?: (values: NotifyNodeConfigFormFieldValues) => void;
};

export type NotifyNodeConfigFormInstance = {
  getFieldsValue: () => ReturnType<FormInstance<NotifyNodeConfigFormFieldValues>["getFieldsValue"]>;
  resetFields: FormInstance<NotifyNodeConfigFormFieldValues>["resetFields"];
  validateFields: FormInstance<NotifyNodeConfigFormFieldValues>["validateFields"];
};

const initFormModel = (): NotifyNodeConfigFormFieldValues => {
  return {};
};

const NotifyNodeConfigForm = forwardRef<NotifyNodeConfigFormInstance, NotifyNodeConfigFormProps>(
  ({ className, style, disabled, initialValues, onValuesChange }, ref) => {
    const { t } = useTranslation();

    const { accesses } = useAccessesStore(useZustandShallowSelector("accesses"));

    const {
      channels,
      loadedAtOnce: channelsLoadedAtOnce,
      fetchChannels,
    } = useNotifyChannelsStore(useZustandShallowSelector(["channels", "loadedAtOnce", "fetchChannels"]));
    useEffect(() => {
      fetchChannels();
    }, []);

    const formSchema = z.object({
      subject: z
        .string({ message: t("workflow_node.notify.form.subject.placeholder") })
        .min(1, t("workflow_node.notify.form.subject.placeholder"))
        .max(1000, t("common.errmsg.string_max", { max: 1000 })),
      message: z
        .string({ message: t("workflow_node.notify.form.message.placeholder") })
        .min(1, t("workflow_node.notify.form.message.placeholder"))
        .max(1000, t("common.errmsg.string_max", { max: 1000 })),
      channel: z.string().nullish(),
      provider: z.string({ message: t("workflow_node.notify.form.provider.placeholder") }).nonempty(t("workflow_node.notify.form.provider.placeholder")),
      providerAccessId: z
        .string({ message: t("workflow_node.notify.form.provider_access.placeholder") })
        .nonempty(t("workflow_node.notify.form.provider_access.placeholder")),
    });
    const formRule = createSchemaFieldRule(formSchema);
    const { form: formInst, formProps } = useAntdForm({
      name: "workflowNodeNotifyConfigForm",
      initialValues: initialValues ?? initFormModel(),
    });

    const fieldProvider = Form.useWatch<string>("provider", { form: formInst, preserve: true });
    const fieldProviderAccessId = Form.useWatch<string>("providerAccessId", formInst);

    const [showProvider, setShowProvider] = useState(false);
    useEffect(() => {
      // 通常情况下每个授权信息只对应一个消息通知提供商，此时无需显示消息通知提供商字段；
      // 如果对应多个，则显示。
      if (fieldProviderAccessId) {
        const access = accesses.find((e) => e.id === fieldProviderAccessId);
        const providers = Array.from(notifyProvidersMap.values()).filter((e) => e.provider === access?.provider);
        setShowProvider(providers.length > 1);
      } else {
        setShowProvider(false);
      }
    }, [accesses, fieldProviderAccessId]);

    const handleProviderSelect = (value: string) => {
      if (fieldProvider === value) return;

      // 切换消息通知提供商时联动授权信息
      if (initialValues?.provider === value) {
        formInst.setFieldValue("providerAccessId", initialValues?.providerAccessId);
        onValuesChange?.(formInst.getFieldsValue(true));
      } else {
        if (notifyProvidersMap.get(fieldProvider)?.provider !== notifyProvidersMap.get(value)?.provider) {
          formInst.setFieldValue("providerAccessId", undefined);
          onValuesChange?.(formInst.getFieldsValue(true));
        }
      }
    };

    const handleProviderAccessSelect = (value: string) => {
      if (fieldProviderAccessId === value) return;

      // 切换授权信息时联动消息通知提供商
      const access = accesses.find((access) => access.id === value);
      const provider = Array.from(notifyProvidersMap.values()).find((provider) => provider.provider === access?.provider);
      if (fieldProvider !== provider?.type) {
        formInst.setFieldValue("provider", provider?.type);
        onValuesChange?.(formInst.getFieldsValue(true));
      }
    };

    const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
      onValuesChange?.(values as NotifyNodeConfigFormFieldValues);
    };

    useImperativeHandle(ref, () => {
      return {
        getFieldsValue: () => {
          return formInst.getFieldsValue(true);
        },
        resetFields: (fields) => {
          return formInst.resetFields(fields as (keyof NotifyNodeConfigFormFieldValues)[]);
        },
        validateFields: (nameList, config) => {
          return formInst.validateFields(nameList, config);
        },
      } as NotifyNodeConfigFormInstance;
    });

    return (
      <Form className={className} style={style} {...formProps} disabled={disabled} layout="vertical" scrollToFirstError onValuesChange={handleFormChange}>
        <Form.Item name="subject" label={t("workflow_node.notify.form.subject.label")} rules={[formRule]}>
          <Input placeholder={t("workflow_node.notify.form.subject.placeholder")} />
        </Form.Item>

        <Form.Item name="message" label={t("workflow_node.notify.form.message.label")} rules={[formRule]}>
          <Input.TextArea autoSize={{ minRows: 3, maxRows: 5 }} placeholder={t("workflow_node.notify.form.message.placeholder")} />
        </Form.Item>

        <Form.Item className="mb-0">
          <label className="mb-1 block">
            <div className="flex w-full items-center justify-between gap-4">
              <div className="max-w-full grow truncate line-through">{t("workflow_node.notify.form.channel.label")}</div>
              <div className="text-right">
                <Link className="ant-typography" to="/settings/notification" target="_blank">
                  <Button size="small" type="link">
                    {t("workflow_node.notify.form.channel.button")}
                    <RightOutlinedIcon className="text-xs" />
                  </Button>
                </Link>
              </div>
            </div>
          </label>
          <Form.Item name="channel" rules={[formRule]}>
            <Select
              loading={!channelsLoadedAtOnce}
              options={Object.entries(channels)
                .filter(([_, v]) => v?.enabled)
                .map(([k, _]) => ({
                  label: t(notifyChannelsMap.get(k)?.name ?? k),
                  value: k,
                }))}
              placeholder={t("workflow_node.notify.form.channel.placeholder")}
            />
          </Form.Item>
        </Form.Item>

        <Form.Item name="provider" label={t("workflow_node.notify.form.provider.label")} hidden={!showProvider} rules={[formRule]}>
          <NotifyProviderSelect
            disabled={!showProvider}
            filter={(record) => {
              if (fieldProviderAccessId) {
                return accesses.find((e) => e.id === fieldProviderAccessId)?.provider === record.provider;
              }

              return true;
            }}
            placeholder={t("workflow_node.notify.form.provider.placeholder")}
            showSearch
            onSelect={handleProviderSelect}
          />
        </Form.Item>

        <Form.Item className="mb-0">
          <label className="mb-1 block">
            <div className="flex w-full items-center justify-between gap-4">
              <div className="max-w-full grow truncate">
                <span>{t("workflow_node.notify.form.provider_access.label")}</span>
              </div>
              <div className="text-right">
                <AccessEditModal
                  range="notify-only"
                  scene="add"
                  trigger={
                    <Button size="small" type="link">
                      {t("workflow_node.notify.form.provider_access.button")}
                      <PlusOutlinedIcon className="text-xs" />
                    </Button>
                  }
                  afterSubmit={(record) => {
                    const provider = accessProvidersMap.get(record.provider);
                    if (provider?.usages?.includes(ACCESS_USAGES.NOTIFICATION)) {
                      formInst.setFieldValue("providerAccessId", record.id);
                    }
                  }}
                />
              </div>
            </div>
          </label>
          <Form.Item name="providerAccessId" rules={[formRule]}>
            <AccessSelect
              filter={(record) => {
                const provider = accessProvidersMap.get(record.provider);
                return !!provider?.usages?.includes(ACCESS_USAGES.NOTIFICATION);
              }}
              placeholder={t("workflow_node.notify.form.provider_access.placeholder")}
              onChange={handleProviderAccessSelect}
            />
          </Form.Item>
        </Form.Item>
      </Form>
    );
  }
);

export default memo(NotifyNodeConfigForm);