import { useEffect, useState, useRef, forwardRef, useImperativeHandle } from 'react'
import { useTranslation } from 'react-i18next'
import { useParams } from 'react-router-dom';
import Card from './components/Card'
import { Form, Space, Row, Col, Button, Flex, App, Select } from 'antd'
import Tag, { type TagProps } from './components/Tag'
import CustomSelect from '@/components/CustomSelect';
import { getMultiAgentConfig, saveMultiAgentConfig, getApplicationList } from '@/api/application';
import type { 
  Config,
  SubAgentModalRef,
  ChatData,
  SubAgentItem,
  ClusterRef,
  ModelConfigModalRef
} from './types'
import Chat from './components/Chat'
import RbCard from '@/components/RbCard/Card'
import SubAgentModal from './components/SubAgentModal'
import Empty from '@/components/Empty'
import RadioGroupCard from '@/components/RadioGroupCard'
import { getModelListUrl } from '@/api/models'
import ModelConfigModal from './components/ModelConfigModal'
import type { Application } from '@/views/ApplicationManagement/types'


const tagColors = ['processing', 'warning', 'default']
const MAX_LENGTH = 5;
const Cluster = forwardRef<ClusterRef>((_props, ref) => {
  const { t } = useTranslation()
  const { message } = App.useApp()
  const [form] = Form.useForm()
  const { id } = useParams()
  const subAgentModalRef = useRef<SubAgentModalRef>(null)
  const [data, setData] = useState<Config | null>(null)
  const values = Form.useWatch([], form)
  const [subAgents, setSubAgents] = useState<SubAgentItem[]>([])
  const [chatList, setChatList] = useState<ChatData[]>([
    {
      list: []
    },
  ])

  const handleSave = (flag = true) => {
    if (!data) return Promise.resolve()
    if (!values.default_model_config_id && values.orchestration_mode === 'supervisor') {
      message.warning(t('common.selectPlaceholder', { title: t('application.model') }))
      return Promise.resolve()
    }

    const params = {
      id: data.id,
      app_id: data.app_id,
      ...values,
      sub_agents: (subAgents || []).map(item => ({
        ...item,
        priority: 1,
      }))
    }

    return new Promise((resolve, reject) => {
      form.validateFields().then(() => {
        saveMultiAgentConfig(id as string, params)
          .then((res) => {
            if (flag) {
              message.success(t('common.saveSuccess'))
            }
            resolve(res)
          })
          .catch(error => {
            reject(error)
          })
      })
        .catch(error => {
          reject(error)
        })
    })
  }
  useEffect(() => {
    getData()
  }, [id])

  const getData = () => {
    if (!id) {
      return
    }
    getMultiAgentConfig(id as string).then(res => {
      const response = res as Config
      setData(response)
      form.setFieldsValue({
        ...response,
      })
      let sub_agents = response.sub_agents || []
      if (sub_agents.length > 0) {
        console.log({ ids: sub_agents?.map(item => item.agent_id) })
        getApplicationList({ ids: sub_agents?.map(item => item.agent_id).join(',')})
          .then(res => {
            const applicationList = (res as Application[]) || []
            setSubAgents(sub_agents.map(vo => {
              const filterVO = applicationList.find(item => item.id === vo.agent_id)
              if (filterVO) {
                return {
                  ...vo,
                  name: filterVO.name,
                  is_active: filterVO.is_active
                }
              }
              return vo
            }))
          })
      } else {
        setSubAgents(sub_agents)
      }
    })
  }
  const handleSubAgentModal = (agent?: SubAgentItem) => {
    subAgentModalRef.current?.handleOpen(agent)
  }
  const refreshSubAgents = (agent: SubAgentItem) => {
    const index = subAgents.findIndex(item => item.agent_id === agent.agent_id)
      const newSubAgents = [...subAgents]
    if (index === -1) {
      if (subAgents.length >= MAX_LENGTH) {
        message.warning(t('application.subAgentMaxLength', {maxLength: MAX_LENGTH}))
        return
      }
      setSubAgents([...newSubAgents, agent])
    } else {
      newSubAgents[index] = agent
      setSubAgents(newSubAgents)
    }
  }
  const handleDeleteSubAgent = (agent: SubAgentItem) => {
    setSubAgents(prev => prev.filter(item => item.agent_id !== agent.agent_id))
  }
  useImperativeHandle(ref, () => ({
    handleSave
  }))

  const modelConfigModalRef = useRef<ModelConfigModalRef>(null)
  const handleEditModelConfig = () => {
    modelConfigModalRef.current?.handleOpen('multi_agent', values.model_parameters)
  }
  const handleSaveModelConfig = (values: Config['model_parameters']) => {
    form.setFieldsValue({
      model_parameters: values
    })
  }

  return (
    <Row className="rb:h-[calc(100vh-64px)]">
      <Col span={12} className="rb:h-full rb:overflow-x-auto rb:border-r rb:border-[#DFE4ED] rb:p-[20px_16px_24px_16px]">
        <div className="rb:flex rb:items-center rb:justify-end rb:mb-5">
          <Button type="primary" onClick={() => handleSave()}>
            {t('common.save')}
          </Button>
        </div>
        <Form form={form} layout="vertical">
          <Space size={20} direction="vertical" style={{width: '100%'}}>
            <Card title={t('application.collaboration')}>
              <Form.Item
                name="orchestration_mode"
                noStyle
              >
                <RadioGroupCard
                  options={['supervisor', 'collaboration'].map((type) => ({
                    value: type,
                    label: t(`application.${type}`),
                    labelDesc: t(`application.${type}Desc`),
                  }))}
                  allowClear={false}
                />
              </Form.Item>
            </Card>

            <Card title={t('application.subAgentsManagement')}>
              <Flex align="center" justify="space-between">
                <div className="rb:font-regular rb:text-[#5B6167] rb:leading-5">{t('application.added')}: {subAgents.length}/{MAX_LENGTH}</div>
                <Button size="small" disabled={subAgents.length >= MAX_LENGTH} onClick={() => handleSubAgentModal()}>{t('application.addSubAgent')}</Button>
              </Flex>

              {subAgents.length === 0
                ? <Empty size={88} />
                : subAgents.map((agent, index) => (
                  <Flex key={index} align="center" justify="space-between"
                    className="rb:mt-4! rb:w-full! rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:p-[20px_31px_20px_20px]!"
                  >
                    <Flex className="rb:w-[calc(100%-80px)]!">
                      <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
                        {agent.name?.[0]}
                      </div>
                      <div className="rb:flex rb:flex-col rb:justify-center rb:max-w-[calc(100%-60px)]">
                        
                        <div>{agent.name}
                          <Tag color={agent.is_active ? 'success' : 'warning'} className="rb:ml-2">
                            {agent.is_active ? t('common.enable') : t('common.deleted')}
                          </Tag>
                        </div>
                        {agent.role && <div className="rb:font-regular rb:leading-5 rb:text-[#5B6167] rb:mt-1.5">{agent.role || '-'}</div>}
                        {agent.capabilities && <Flex wrap gap={8} className="rb:mt-4">{agent.capabilities.map((tag, tagIndex) => <Tag key={tagIndex} color={tagColors[tagIndex % tagColors.length] as TagProps['color']}>{tag}</Tag>)}</Flex>}
                      </div>
                    </Flex>

                    <Space>
                      <div
                        className="rb:w-8 rb:h-8 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/editBorder.svg')] rb:hover:bg-[url('@/assets/images/editBg.svg')]"
                        onClick={() => handleSubAgentModal(agent)}
                      ></div>
                      <div
                        className="rb:w-8 rb:h-8 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/deleteBorder.svg')] rb:hover:bg-[url('@/assets/images/deleteBg.svg')]"
                        onClick={() => handleDeleteSubAgent(agent)}
                      ></div>
                    </Space>
                  </Flex>
                ))}
            </Card>

            {values?.orchestration_mode !== 'collaboration' && <Card title={t('application.masterConfig')}>
              <Form.Item
                label={t('application.model')}
                required={true}
              >
                <Row gutter={16}>
                  <Col span={16}>
                    <Form.Item name="default_model_config_id" noStyle>
                      <CustomSelect
                        url={getModelListUrl}
                        params={{ type: 'llm,chat', pagesize: 100, is_active: true }}
                        valueKey="id"
                        labelKey="name"
                        hasAll={false}
                        style={{ width: '100%' }}
                      />
                    </Form.Item>
                  </Col>
                  <Col span={8}>
                    <Form.Item name="model_parameters" noStyle>
                      <Button onClick={handleEditModelConfig}>{t('application.modelConfig')}</Button>
                    </Form.Item>
                  </Col>
                </Row>
              </Form.Item>
              <Form.Item
                name={['execution_config',"sub_agent_execution_mode"]}
                label={t('application.orchestrationMode')}
              >
                <Select
                  options={['sequential', 'parallel'].map((type) => ({
                    value: type,
                    label: t(`application.${type}`),
                  }))}
                />
              </Form.Item>
              <Form.Item
                name="aggregation_strategy"
                label={t('application.aggregationStrategy')}
              >
                <Select
                  options={['merge', 'vote', 'priority'].map((type) => ({
                    value: type,
                    label: t(`application.${type}`),
                  }))}
                />
              </Form.Item>
            </Card>}
          </Space>
        </Form>
      </Col>
      <Col span={12} className="rb:h-full rb:overflow-x-hidden rb:p-[20px_16px_24px_16px]">
        <RbCard height="100%" bodyClassName="rb:p-[0]! rb:h-full rb:overflow-hidden">
          <Chat
            data={data as Config}
            chatList={chatList}
            updateChatList={setChatList}
            handleSave={handleSave}
            source="multi_agent"
          />
        </RbCard>
      </Col>

      <SubAgentModal
        ref={subAgentModalRef}
        refresh={refreshSubAgents}
      />
      <ModelConfigModal
        data={values as Config}
        ref={modelConfigModalRef}
        refresh={handleSaveModelConfig}
      />
    </Row>
  )
})

export default Cluster