import { Button, Checkbox, Group, Modal, notifier, Stack, Typography } from '@tidbcloud/uikit'
import DOMPurify from 'dompurify'
import { observer } from 'mobx-react'
import { useState } from 'react'

import { useUpdateAIUserSetting } from 'dbaas/services/api'
import { getErrorMessage } from 'dbaas/services/errorCodes'
import useStores from 'dbaas/stores/useStores'

interface AIEnablingContentProps {
  onClose: () => void
  onConfirm: () => void
  updating?: boolean
}

const AIEnablingContent = observer(({ onClose, onConfirm, updating }: AIEnablingContentProps) => {
  const {
    store: {
      lastVisitLocation: { orgId, projectId }
    }
  } = useStores()
  const [termsChecked, setTermsChecked] = useState(false)
  const [privacyChecked, setPrivacyChecked] = useState(false)
  const updator = useUpdateAIUserSetting({
    mutation: {
      onSuccess: () => {
        onConfirm()
      },
      onError: (error) => {
        const message = getErrorMessage(error, true)

        notifier.error(<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(message) }} />)
      }
    }
  })
  const enable = () => {
    return updator.mutateAsync({
      orgId,
      projectId,
      data: {
        chat2query_init: true,
        is_privacy_allowed: true
      }
    })
  }

  return (
    <Stack gap="xl">
      <Typography variant="body-lg">
        Al-powered data exploration will 10-times accelerate your journey of data insights. Please acknowledge the
        following terms to enable it.
      </Typography>
      <Checkbox
        label={
          <Typography variant="body-lg">
            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. Learn more in our{' '}
            <a
              href="https://www.pingcap.com/legal/tidb-cloud-services-agreement/#schedule1"
              target="_blank"
              rel="noreferrer"
            >
              AI-Powered Functions Terms
            </a>
            .
          </Typography>
        }
        checked={termsChecked}
        onChange={(e) => setTermsChecked(e.target.checked)}
        size="xs"
        styles={{
          inner: {
            marginTop: 2
          }
        }}
      />
      <Checkbox
        label={
          <Typography variant="body-lg">
            I agree to{' '}
            <a
              href="https://www.pingcap.com/legal/ai-powered-functions-privacy-statement/"
              target="_blank"
              rel="noreferrer"
            >
              AI-Powered Functions Privacy Statement
            </a>
            .
          </Typography>
        }
        checked={privacyChecked}
        onChange={(e) => setPrivacyChecked(e.target.checked)}
        size="xs"
        styles={{
          inner: {
            marginTop: 2
          }
        }}
      />
      <Group justify="flex-end">
        <Button
          variant="default"
          onClick={onClose}
          data-mp-event="Cancel Enabling AI-powered Data Exploration button clicked"
        >
          Cancel
        </Button>
        <Button
          loading={updator.isLoading || updating}
          disabled={!termsChecked || !privacyChecked}
          onClick={enable}
          data-mp-event="Confirm Enabling AI-powered Data Exploration button clicked"
        >
          Enable
        </Button>
      </Group>
    </Stack>
  )
})

interface AIEnablingProps {
  opened: boolean
  onClose: () => void
  onConfirm: () => void
  updating?: boolean
}

export const AIEnabling = ({ opened, onClose, ...restProps }: AIEnablingProps) => {
  return (
    <Modal title="AI-powered Data Exploration" centered size="lg" opened={opened} onClose={onClose}>
      <AIEnablingContent onClose={onClose} {...restProps} />
    </Modal>
  )
}