import { Alert, Card, Divider, List, Typography } from '@tidbcloud/uikit'
import { useOs } from '@tidbcloud/uikit/hooks'
import { IconAlertCircle } from '@tidbcloud/uikit/icons'
import { useState } from 'react'
import { matchPath, useLocation } from 'react-router-dom'

import { AiPowerPrivacy } from 'dbaas/screens/Account/AIPrivacy'
import { useGetAIUserSetting } from 'dbaas/services'
import useStores from 'dbaas/stores/useStores'

import { CodeSnippet, CodeSnippetProps } from '../../components/PasteIntoEditor'
import { useStepActions } from '../../helpers'

const Chat2queryStep = ({ name, data }: { name: string; data: CodeSnippetProps['data'] }) => {
  const {
    store: { tenantData, activeProjectId }
  } = useStores()
  const { tutorial } = useStepActions(name)
  const [showAiPrivacy, setShowAiPrivacy] = useState<boolean | undefined>(undefined)
  const os = useOs()
  const location = useLocation()
  const isChat2query = !!matchPath(location.pathname, {
    path: `/clusters/${data[0].clusterId}/sqleditor`
  })

  const { data: userSetting } = useGetAIUserSetting(tenantData.id, activeProjectId, {
    query: {
      enabled: !!tenantData.id && !!activeProjectId && tutorial.step === 3,
      refetchInterval: false,
      refetchOnWindowFocus: false,
      onSuccess: (res) => {
        if (!res.data?.is_privacy_allowed && showAiPrivacy === undefined) {
          setShowAiPrivacy(true)
        }
      }
    }
  })

  return (
    <div>
      <Typography variant="headline-md" mt={16}>
        Leverage AI to generate SQL
      </Typography>
      <Typography variant="body-lg" mt={8} mb={16}>
        Discover the power of AI to accelerate data exploration by generate SQL from natural language.
      </Typography>

      {showAiPrivacy && <AiPowerPrivacy styleBold />}

      <Card.Section>
        <Divider my={16} />
      </Card.Section>

      <CodeSnippet
        mt={16}
        mb={12}
        withDivider={false}
        disabled={false}
        data={data}
        hasPasteButton={!isChat2query}
        pasteButtonText="Go to SQL Editor"
        pasteValue=""
        enableCopyButtonPaste={true}
        othersInfo={
          <Alert
            icon={<IconAlertCircle size={14} />}
            color="peacock"
            mt={16}
            styles={{
              icon: {
                marginRight: 8
              }
            }}
          >
            <List
              type="ordered"
              size="sm"
              c="carbon.8"
              styles={() => ({
                itemWrapper: {
                  paddingRight: 16
                }
              })}
            >
              <List.Item>Press the "Copy" button located above.</List.Item>
              <List.Item>Activate Chat2Query by pressing '{os === 'macos' ? 'Command' : 'Ctrl'}' + 'I'.</List.Item>
              <List.Item>Paste the previously copied question text.</List.Item>
              <List.Item>Complete the process by following the on-screen instructions.</List.Item>
            </List>
          </Alert>
        }
      >
        {userSetting?.data?.is_privacy_allowed && (
          <div>
            <Typography c="green.9" variant="label-lg">
              After pasted the question
            </Typography>
            <List type="ordered" size="sm" c="green.9">
              <List.Item>Submit your question to AI by pressing "Enter" at the end of the question.</List.Item>
              <List.Item>Wait AI to generate SQL and press "Tab" to accept the SQL suggestion.</List.Item>
              <List.Item>Click ▶ Run ({os === 'macos' ? '⌘' : 'Ctrl'} + Enter) to see the result.</List.Item>
            </List>
          </div>
        )}
      </CodeSnippet>
    </div>
  )
}

export default Chat2queryStep