import { Anchor, Box, Modal, Typography } from '@tidbcloud/uikit'
import { Form, FormCheckbox } from '@tidbcloud/uikit/biz'
import { useState } from 'react'

import { useHelpCenterContext } from 'dbaas/screens/HelpCenter/context'
import { updateAIUserSetting } from 'dbaas/services'
import useStores from 'dbaas/stores/useStores'

const AIAggModal = (props: {
  showCloseButton?: boolean
  onReset: (isAccept: boolean, datasetChanged?: boolean) => void
}) => {
  const {
    store: { activeProjectId, tenantData }
  } = useStores()

  const { dataServiceGuideStep } = useHelpCenterContext()

  const [isPrivacyAllow, setIsPrivacyAllow] = useState(false)
  const [isAggVisible, setIsAggVisible] = useState(true)

  const userAggreementCancel = async () => {
    await updateAIUserSetting(tenantData.id, activeProjectId, {
      chat2query_init: true
    })
    setIsAggVisible(false)
    props.onReset && props.onReset(false)
  }

  const saveEditorSetting = async (values: { is_privacy_allowed: boolean }) => {
    const changeItems = {
      chat2query_init: true,
      is_privacy_allowed: values.is_privacy_allowed,
      privacy_box_count: 1
    }

    await updateAIUserSetting(tenantData.id, activeProjectId, changeItems)
    props.onReset && props.onReset(true)
  }

  return (
    <Modal
      opened={isAggVisible && dataServiceGuideStep <= 1}
      centered
      size={740}
      closeOnClickOutside={false}
      closeOnEscape={false}
      trapFocus={false}
      title="Maximize Your Data Value with AI"
      withCloseButton={props.showCloseButton !== false}
      onClose={userAggreementCancel}
    >
      <Box>
        <Typography variant="body-lg">
          Welcome to the Chat2Query Feature in TiDB Cloud! Chat2Query enhances your experience both within the SQL
          Editor and through our accessible APIs. This AI-powered tool allows you to enter natural language requests to
          automatically generate, rewrite, and optimize SQL queries. To enable Chat2Query, please review and accept our
          Privacy Policy:
        </Typography>

        <Form
          actionsProps={{
            cancelText: '',
            confirmText: 'Save and Get Started',
            disabled: !isPrivacyAllow
          }}
          defaultValues={{
            is_privacy_allowed: false
          }}
          layout="none"
          onSubmit={(values) => saveEditorSetting(values)}
        >
          <FormCheckbox
            mt={24}
            name="is_privacy_allowed"
            label={
              <Typography variant="label-lg" fw={600}>
                We use AI to improve your experience. By continuing, you consent to PingCAP's use of AI to process your
                code snippets via our AI-powered functions to improve our Services.
              </Typography>
            }
            styles={() => ({
              label: {
                cursor: 'pointer'
              },
              inner: {
                marginTop: 0
              },
              input: {
                cursor: 'pointer'
              }
            })}
            onChange={(e) => setIsPrivacyAllow(e.target.checked)}
          />

          <Typography variant="label-lg" ml={32} mt={4}>
            Learn more in our
            <Anchor
              ml={4}
              c="peacock.7"
              fw={500}
              href="https://www.pingcap.com/legal/ai-powered-functions-privacy-statement/"
              target="_blank"
              rel="noreferrer"
            >
              AI-Powered Functions Privacy Statement
            </Anchor>
            .
          </Typography>
        </Form>
      </Box>
    </Modal>
  )
}

export default AIAggModal