/*
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:56:54 
 * @Last Modified by: ZhaoYing
 * @Last Modified time: 2026-03-25 18:28:18
 */
/**
 * Emotion Engine Configuration Page
 * Configures emotion analysis settings for memory system
 * Includes model selection, intensity threshold, and feature toggles
 */

import React, { useState, useEffect } from 'react';
import { Row, Col, Form, Button, App, Space, Flex, Tooltip } from 'antd';
import { useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import clsx from 'clsx';

import RbCard from '@/components/RbCard/Card';
import { getMemoryEmotionConfig, updateMemoryEmotionConfig } from '@/api/memory'
import type { ConfigForm } from './types'
import SwitchFormItem from '@/components/FormItem/SwitchFormItem'
import LabelWrapper from '@/components/FormItem/LabelWrapper'
import DescWrapper from '@/components/FormItem/DescWrapper'
import RbSlider from '@/components/RbSlider';
import RbAlert from '@/components/RbAlert';
import ModelSelect from '@/components/ModelSelect';

/**
 * Configuration field definitions
 */
const configList = [
  {
    key: 'emotion_enabled',
    type: 'switch',
  },
  {
    key: 'emotion_model_id',
    type: 'modelSelect',
    params: { type: 'chat,llm' }, // chat,llm
  },
  {
    key: 'emotion_min_intensity',
    type: 'decimal',
    min: 0,
    max: 1,
    step: 0.05,
    range: [0, 1],
  },
  {
    key: 'emotion_extract_keywords',
    type: 'switch',
    hasSubTitle: true
  },
  {
    key: 'emotion_enable_subject',
    type: 'switch',
    hasSubTitle: true
  },
]

/**
 * Emotion engine configuration component
 */
const EmotionEngine: React.FC = () => {
  const { t } = useTranslation();
  const { id } = useParams();
  const [configData, setConfigData] = useState<ConfigForm>({} as ConfigForm);
  const [form] = Form.useForm<ConfigForm>();
  const { message: messageApi } = App.useApp();
  const [loading, setLoading] = useState(false)

  const values = Form.useWatch([], form);

  useEffect(() => {
    getConfigData()
  }, [id])

  /** Fetch emotion engine configuration */
  const getConfigData = () => {
    if (!id) {
      return
    }
    getMemoryEmotionConfig(id)
      .then((res) => {
        const response = res as ConfigForm
        const initialValues = {
          ...response,
        }
        setConfigData(initialValues);
        form.setFieldsValue(initialValues);
      })
      .catch(() => {
        console.error('Failed to load data');
      })
  }
  /** Reset form to saved configuration */
  const handleReset = () => {
    form.setFieldsValue(configData);
  }
  /** Save emotion engine configuration */
  const handleSave = () => {
    if (!id) {
      return
    }
    setLoading(true)
    updateMemoryEmotionConfig({
      ...values,
      config_id: id
    })
      .then(() => {
        messageApi.success(t('common.saveSuccess'))
        setConfigData({...(values || {})})
      })
      .finally(() => {
        setLoading(false)
      })
  }

  return (
    <Row gutter={[16, 16]}>
      <Col span={12}>
        <RbCard 
          title={t('emotionEngine.emotionEngineConfig')}
          headerType="borderless"
          headerClassName="rb:min-h-[54px]! rb:font-[MiSans-Bold] rb:font-bold"
          extra={<Space>
            <Button block onClick={handleReset}>{t('common.reset')}</Button>
            <Button type="primary" loading={loading} block onClick={handleSave}>{t('common.save')}</Button>
          </Space>}
          className="rb:h-[calc(100vh-76px)]!"
          bodyClassName="rb:h-[calc(100%-54px)] rb:overflow-y-auto! rb:p-3! rb:pt-0!"
        >
          <Form 
            form={form}
            layout="vertical"
            initialValues={{
              offset: 0,
              lambda_time: 0.03,
              lambda_mem: 0.03,
            }}
          >
            <Flex vertical gap={12}>
              {configList.map(config => {
                if (config.type === 'decimal') {
                  return (
                    <div key={config.key} className="rb:bg-[#F6F6F6] rb:rounded-xl rb:p-3">
                      <Flex align="center" gap={4} className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mb-2">
                        {t(`emotionEngine.${config.key}`)}
                        <Tooltip title={t(`emotionEngine.${config.key}_desc`)}>
                          <div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/question.svg')]"></div>
                        </Tooltip>
                      </Flex>
                      <Form.Item
                        name={config.key}
                        extra={<DescWrapper
                          desc={<>
                            <span className="rb:text-[12px]">{t(`forgettingEngine.range`)}: {config.range?.join('-')}</span> | <span>{t(`forgettingEngine.type`)}: {config.type}</span>
                          </>}
                        />}
                        className="rb:mb-0!"
                      >
                        <RbSlider
                          max={config.max}
                          min={config.min}
                          step={config.step}
                          isInput={true}
                          prefix={<span className="rb:text-[#5B6167]">{t('emotionEngine.currentValue')}:</span>}
                          inputClassName="rb:w-[155px]!"
                        />
                      </Form.Item>
                    </div>
                  )
                }
                if (config.type === 'modelSelect') {
                  return (
                    <div key={config.key} className="rb:bg-[#F6F6F6] rb:rounded-xl rb:p-3">
                      <LabelWrapper title={t(`emotionEngine.${config.key}`)} className="rb:mb-3">
                        <DescWrapper desc={t(`emotionEngine.${config.key}_desc`)} className="rb:mt-1" />
                      </LabelWrapper>
                      <Form.Item
                        name={config.key}
                        className="rb:mb-0!"
                      >
                        <ModelSelect
                          params={config.params}
                          disabled={!values?.emotion_enabled && config.key !== 'emotion_enabled'}
                        />
                      </Form.Item>
                    </div>
                  )
                }
                return (
                  <SwitchFormItem
                    title={t(`emotionEngine.${config.key}`)}
                    name={config.key}
                    desc={<>
                      {config.hasSubTitle && <div className="rb:mt-1 rb:text-[#5B6167] rb:font-regular rb:leading-4">{t(`emotionEngine.${config.key}_subTitle`)}</div>}
                      <div className="rb:mt-1  rb:text-[#5B6167] rb:font-regular rb:leading-4">{t(`emotionEngine.${config.key}_desc`)}</div>
                    </>}
                    disabled={!values?.emotion_enabled && config.key !== 'emotion_enabled'}
                    className="rb:bg-[#F6F6F6] rb:rounded-xl rb:p-3!"
                  />
                )
              })}
            </Flex>
          </Form>
        </RbCard>
      </Col>
      <Col span={12}>
        <RbCard
          title={t('emotionEngine.emotionEngineConfig')}
          headerType="borderless"
          headerClassName="rb:min-h-[54px]! rb:font-[MiSans-Bold] rb:font-bold"
          className="rb:h-[calc(100vh-76px)]!"
          bodyClassName="rb:h-[calc(100%-54px)] rb:overflow-y-auto! rb:p-3! rb:pt-0!"
        >
          <Flex vertical gap={24} className="rb:text-[#212332]">
            <div>
              <div className="rb:font-medium rb:leading-5 rb:px-1 rb:mb-2.5">{t('emotionEngine.question')}</div>
              <div className="rb:text-[#5B6167] rb:bg-[#F6F6F6] rb:px-3 rb:py-2.5 rb:font-regular rb:leading-5 rb:rounded-xl">
                {t('emotionEngine.answer')}
              </div>
            </div>

            <div>
              <div className="rb:font-medium rb:leading-5 rb:px-1 rb:mb-2.5">{t('emotionEngine.differentTitle')}</div>

              <Flex gap={10} vertical>
                {['low', 'middle', 'high'].map((key, index) => (
                  <RbAlert
                    key={key}
                    color={(['orange', 'blue', 'green'] as const)[index] as 'orange' | 'blue' | 'green'}
                  >
                    <Flex gap={10} vertical className=" rb:text-[#5B6167] rb:text-[14px] rb:font-regular rb:leading-5">
                      <Flex align="center" gap={8}>
                        <span className="rb:font-medium rb:text-[#212332]">{t(`emotionEngine.${key}_title`)}</span>

                        <span className={clsx("rb:px-1 rb:rounded-sm rb:text-white rb:leading-4.5", ['rb:bg-[#FF5D34]', 'rb:bg-[#155EEF]', 'rb:bg-[#369F21]'][index])}>
                          {t(`emotionEngine.${key}_tag`)}
                        </span>
                      </Flex>
                      <div><span className="rb:font-medium rb:text-[#212332]">{t('emotionEngine.advantage')}: </span>{t(`emotionEngine.${key}_advantage`)}</div>
                      <div><span className="rb:font-medium rb:text-[#212332]">{t('emotionEngine.shortcoming')}: </span>{t(`emotionEngine.${key}_shortcoming`)}</div>
                      <div><span className="rb:font-medium rb:text-[#212332]">{t('emotionEngine.scene')}: </span>{t(`emotionEngine.${key}_scene`)}</div>
                    </Flex>
                  </RbAlert>
                ))}
              </Flex>
            </div>

            <div>
              <div className="rb:font-medium rb:leading-5 rb:px-1 rb:mb-2.5">{t('emotionEngine.configSuggest')}</div>
              <Flex gap={10} vertical>
                {['first', 'customer_service', 'data_analysis', 'risk_warning'].map(key => (
                  <div className="rb:bg-[#F6F6F6] rb:px-3 rb:py-2.5 rb:rounded-xl">{t(`emotionEngine.${key}`)}: {t(`emotionEngine.${key}_desc`)}</div>
                ))}
              </Flex>
            </div>

            <div>
              <div className="rb:font-medium rb:leading-5 rb:px-1 rb:mb-2.5">{t('emotionEngine.actual_case')}</div>

              <div className="rb:bg-[#F6F6F6] rb:px-3 rb:py-2.5 rb:font-regular rb:leading-5 rb:rounded-xl">
                <div className="rb:mb-2.5">
                  <span className="rb:font-medium">{t('emotionEngine.user_input')}: </span>
                  {t('emotionEngine.user_input_message')}
                </div>

                <Flex vertical gap={4}>
                  {['neutral_emotion', 'minor_dissatisfaction', 'expect_improvement'].map((key, index) => (
                    <Flex gap={28} align="center" justify="space-between" className="rb:bg-white rb:px-3! rb:py-2! rb:rounded-lg">
                      <Flex align="center" justify="space-between" className="rb:w-[55%]!">
                        <span className="rb:font-medium">{t(`emotionEngine.${key}`)}</span>
                        <span>{t('emotionEngine.confidence')}: {key === 'neutral_emotion' ? 0.85 : key === 'minor_dissatisfaction' ? 0.45 : 0.32}</span>
                      </Flex>

                      <span className={clsx('rb:text-right rb:wrap-break-word rb:flex-1', ['rb:text-[#369F21]', 'rb:text-[#FF5D34]', 'rb:text-[#155EEF]'][index])}>{t(`emotionEngine.${key}_tag`)}</span>
                    </Flex>
                  ))}
                </Flex>
              </div>
            </div>
          </Flex>
        </RbCard>
      </Col>
    </Row>
  );
};

export default EmotionEngine;
