import { Modal } from '@tidbcloud/uikit'
import { useToggle } from '@tidbcloud/uikit/hooks'
import { observer } from 'mobx-react'

import { ModalCodeTitle } from 'dbaas/components'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'

import { McpConfigModalBody } from './ModalBody'
import { ContentType } from './types'

interface McpConfigModalProps {
  cluster: SharedCluster
  opened: boolean
  onClose: () => void
}

export const McpConfigModal = observer(({ cluster, opened, onClose }: McpConfigModalProps) => {
  const [bodyType, toggleBodyType] = useToggle<ContentType>([ContentType.McpConfig, ContentType.Reset])
  const closable = bodyType === ContentType.McpConfig

  const mcpConfigTitle = (
    <>
      Access <ModalCodeTitle maxWidth={480}>{cluster.displayName}</ModalCodeTitle> with AI tools
    </>
  )
  const resetTitle = 'Reset Root Password'
  const title = bodyType === ContentType.McpConfig ? mcpConfigTitle : resetTitle

  const closeModal = () => {
    toggleBodyType(ContentType.McpConfig)
    onClose()
  }

  return (
    <Modal
      size={720}
      centered
      opened={opened}
      closeOnClickOutside={closable}
      closeOnEscape={closable}
      withCloseButton={closable}
      title={title}
      onClose={closeModal}
      styles={() => ({
        modal: { flexShrink: 0 },
        body: { padding: 0 }
      })}
    >
      <McpConfigModalBody clusterId={cluster.id} contentType={bodyType} onToggleContent={toggleBodyType} />
    </Modal>
  )
})