import { Card, Divider, Stack } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'

import { AccessGuard, useAccessCheck } from 'dbaas/contexts/access-control'
import { useGetAIUserSetting } from 'dbaas/services/api'
import useStores from 'dbaas/stores/useStores'

import { BlockHeader } from '../components'

export const Privacy = observer(() => {
  const {
    store: {
      lastVisitLocation: { orgId, projectId }
    }
  } = useStores()
  const aiPrivacyAccessible = useAccessCheck('AccountPrivacyAIGate')
  const aiPrivacyQuery = useGetAIUserSetting(orgId, projectId, {
    query: {
      enabled: aiPrivacyAccessible,
      select: (response) => response?.data?.is_privacy_allowed,
      refetchOnWindowFocus: false
    }
  })
  const aiPrivacyAllowed = !!aiPrivacyQuery.data

  return (
    <Card p="xl">
      <Stack>
        <BlockHeader title="Privacy" />
        <Divider color="carbon.3" />
        <BlockHeader
          title="TiDB Cloud"
          titleProps={{ variant: 'label-lg', fw: 600 }}
          description={
            <>
              More information in{' '}
              <a href="https://www.pingcap.com/privacy-policy/" target="_blank" rel="noreferrer">
                PingCAP Privacy Policy
              </a>
              .
            </>
          }
        />
        <AccessGuard id="AccountPrivacyAIGate">
          {aiPrivacyAllowed && (
            <>
              <Divider color="carbon.3" />
              <BlockHeader
                title="AI-powered Data Exploration"
                titleProps={{ variant: 'label-lg', fw: 600 }}
                description={
                  <>
                    More information in{' '}
                    <a
                      href="https://www.pingcap.com/legal/ai-powered-functions-privacy-statement/"
                      target="_blank"
                      rel="noreferrer"
                    >
                      AI-Powered Functions Privacy Statement
                    </a>
                    .
                  </>
                }
              />
            </>
          )}
        </AccessGuard>
      </Stack>
    </Card>
  )
})