/*
 * @Author: ZhaoYing 
 * @Date: 2026-03-05 
 * @Last Modified by: ZhaoYing
 * @Last Modified time: 2026-04-13 15:13:36
 */
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Button, Form, Input, Flex, App } from 'antd';
import { useTranslation } from 'react-i18next';

import RbModal from '@/components/RbModal';
import type { FeaturesConfigForm } from '../../types'
import type { Variable } from '../VariableList/types'
import Tag from '@/components/Tag'
import type { Application } from '@/views/ApplicationManagement/types';
import Editor from '@/views/Workflow/components/Editor';

export interface OpenStatementSettingModalRef {
  handleOpen: (values?: FeaturesConfigForm['opening_statement']) => void;
  handleClose: () => void;
}

interface OpenStatementSettingModalProps {
  onSave: (values: FeaturesConfigForm['opening_statement']) => void;
  chatVariables?: Variable[];
  source?: Application['type'];
}

const OpenStatementSettingModal = forwardRef<OpenStatementSettingModalRef, OpenStatementSettingModalProps>(({
  onSave,
  chatVariables = [],
  source
}, ref) => {
  const { t } = useTranslation();
  const { modal } = App.useApp()
  const [visible, setVisible] = useState(false);
  const [form] = Form.useForm<FeaturesConfigForm['opening_statement']>();

  const handleClose = () => {
    setVisible(false);
    form.resetFields();
  };

  const handleOpen = (values?: FeaturesConfigForm['opening_statement']) => {
    setVisible(true);
    form.setFieldsValue(values || {});
  };

  const handleSave = async () => {
    form.validateFields().then(values => {
      const { suggested_questions, ...rest } = values
      const filterSuggestedQuestions = suggested_questions?.filter(vo => vo && vo.trim() !== '' && vo !== null)
      if (values?.enabled && values?.statement && values?.statement?.trim() !== '') {
        const usedVars = [...new Set([...values.statement?.matchAll(/\{\{(\w+)\}\}/g)].map(m => m[1]))]

        console.log('usedVars', usedVars, chatVariables)
        const validNames = new Set(chatVariables.map(v => v.name))
        const invalid = usedVars.filter(v => !validNames.has(v))
        if (invalid.length > 0) {
          modal.confirm({
            title: t('application.invalidVariablesTitle'),
            content: invalid.map((vo, index) => <Tag key={index}>{'{{'}{vo}{'}}'}</Tag>),
            okText: t('common.confirm'),
            cancelText: t('common.cancel'),
            onOk: () => {
              onSave({
                ...rest,
                suggested_questions: filterSuggestedQuestions
              });
              handleClose();
            },
          })
        } else {
          onSave({
            ...rest,
            suggested_questions: filterSuggestedQuestions
          });
          handleClose();
        }
      } else {
        onSave({
          ...rest,
          suggested_questions: filterSuggestedQuestions
        });
        handleClose();
      }
    });
  };

  useImperativeHandle(ref, () => ({
    handleOpen,
    handleClose
  }));

  return (
    <RbModal
      title={t('application.settings')}
      open={visible}
      onCancel={handleClose}
      onOk={handleSave}
    >
      <Form form={form} layout="vertical">
        <Form.Item name="enabled" hidden />
        <Form.Item
          label={t('application.opening_statement')}
          name="statement"
        >
          {source === 'workflow'
            ? <Editor options={chatVariables as any} variant="outlined" />
            : <Input.TextArea
              placeholder={t('common.pleaseEnter')}
            />  
          }
        </Form.Item>

        <Form.List name="suggested_questions">
          {(fields, { add, remove }) => (
            <Form.Item label={t('application.suggested_questions')}>
              <Flex vertical gap={4}>
              {fields.map((field, index) => (
                <Flex key={field.key} align="center" justify="space-between" gap={4}>
                  <Form.Item name={field.name} noStyle>
                    <Input
                      placeholder={t('common.pleaseEnter')}
                    />
                  </Form.Item>
                  <div
                    className="rb:size-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/workflow/deleteBg.svg')] rb:hover:bg-[url('@/assets/images/workflow/deleteBg_hover.svg')]"
                    onClick={() => remove(index)}
                  ></div>
                </Flex>
              ))}
              <Button type="dashed" block onClick={() => add()}>
                + {t('common.addOption')}
              </Button>
              </Flex>
            </Form.Item>
          )}
        </Form.List>

      </Form>
    </RbModal>
  );
});

export default OpenStatementSettingModal;