import { Box, Button, Card, Flex, Group, Loader, Menu, Stack, Typography } from '@tidbcloud/uikit'
import { DotBadge } from '@tidbcloud/uikit/biz'
import { IconDotsHorizontal } from '@tidbcloud/uikit/icons'
import { observer } from 'mobx-react'
import { useState } from 'react'

import { ReasonHoverHint } from 'dbaas/components/HoverHint/ReasonHoverHint'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import useStores from 'dbaas/stores/useStores'

import { useDedicatedDBAuditLogContext } from '../../context/dedicated-context'
import { useGetDisableReason } from '../AuditLogV1/helper'

import AuditLogDisableModal from './AuditLogDisableModal'
import AuditLogEditModal from './AuditLogEditModal'
import { LogSettingsModal } from './LogSettingsModal'

export const LogSwitch = observer(({ cluster }: { cluster: SharedCluster }) => {
  const [enableAuditLogModalOpened, setEnableAuditLogModalOpened] = useState(false)
  const [disableLogModalOpened, setDisableLogModalOpened] = useState(false)
  const [logsSettingsModalOpend, setLogSettingsModalOpened] = useState(false)
  const {
    store: { tenantData, activeProjectId }
  } = useStores()

  const { config, isLoadingConfig } = useDedicatedDBAuditLogContext()

  const enabled = config?.enabled
  const { accessDeniedReason, invalidReason, accessible, isInvalid } = useGetDisableReason(
    cluster,
    'ClusterAuditSwitch'
  )

  return (
    <>
      <Card p="xl">
        <Group justify="space-between" gap={48}>
          <Stack gap={4} sx={{ flex: 1 }}>
            <Group gap="md">
              <Typography variant="title-lg">Database Audit Logging</Typography>
              {!isLoadingConfig && (
                <DotBadge color={enabled ? 'green' : 'gray'}>{enabled ? 'Enabled' : 'Disabled'}</DotBadge>
              )}
            </Group>
            <Flex gap={4}>
              <Typography variant="body-lg" c="carbon.7">
                Track various behaviors and operations of database users.{' '}
                <a
                  href="https://docs.pingcap.com/tidbcloud/tidb-cloud-auditing"
                  target="_blank"
                  rel="noreferrer"
                  data-mp-event="Documentation Link Clicked"
                  data-mp-source="Audit Log"
                  data-mp-content="about user access and history"
                >
                  Learn more
                </a>
                .
              </Typography>
            </Flex>
          </Stack>

          {isLoadingConfig && <Loader size="sm" />}

          {!isLoadingConfig && (
            <>
              {enabled && (
                <Flex gap={8}>
                  <ReasonHoverHint reasons={[accessDeniedReason, invalidReason]}>
                    {({ matched }) => (
                      <Button
                        size="sm"
                        variant="outline"
                        disabled={matched}
                        data-mp-event="DB Audit Logging Edit Config Button Clicked"
                        onClick={() => setLogSettingsModalOpened(true)}
                      >
                        Settings
                      </Button>
                    )}
                  </ReasonHoverHint>
                  <Menu>
                    <Menu.Target>
                      <Button variant="outline" size="sm">
                        <Box c="carbon.8" component={IconDotsHorizontal} size={20} />
                      </Button>
                    </Menu.Target>
                    <Menu.Dropdown>
                      <Menu.Item
                        disabled={isInvalid || !accessible}
                        data-mp-event="DB Audit Logging Storage Configuration Button Clicked"
                        onClick={() => setEnableAuditLogModalOpened(true)}
                      >
                        Storage Configuration
                      </Menu.Item>

                      <Menu.Item
                        c="red"
                        disabled={isInvalid || !accessible}
                        data-mp-event="DB Audit Logging Disable Config Button Click"
                        onClick={() => setDisableLogModalOpened(true)}
                      >
                        Disable
                      </Menu.Item>
                    </Menu.Dropdown>
                  </Menu>
                </Flex>
              )}

              {!enabled && (
                <>
                  <ReasonHoverHint reasons={[accessDeniedReason, invalidReason]}>
                    {({ matched }) => (
                      <Button
                        size="sm"
                        disabled={matched}
                        data-mp-event="DB Audit Logging Enable Entrance Button Clicked"
                        onClick={() => setEnableAuditLogModalOpened(true)}
                      >
                        Enable
                      </Button>
                    )}
                  </ReasonHoverHint>
                </>
              )}
            </>
          )}
        </Group>

        <AuditLogEditModal
          opened={enableAuditLogModalOpened}
          cluster={cluster}
          orgId={tenantData.id}
          projectId={activeProjectId}
          config={config}
          onClose={() => setEnableAuditLogModalOpened(false)}
        />

        <AuditLogDisableModal
          opened={disableLogModalOpened}
          cluster={cluster}
          config={config}
          orgId={tenantData.id}
          projectId={activeProjectId}
          onClose={() => setDisableLogModalOpened(false)}
        />

        <LogSettingsModal
          opened={logsSettingsModalOpend}
          config={config}
          clusterId={cluster.id}
          cluster={cluster}
          orgId={tenantData.id}
          projectId={activeProjectId}
          onCancel={() => setLogSettingsModalOpened(false)}
        />
      </Card>
    </>
  )
})