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 { ReasonHoverHint } from 'dbaas/components/HoverHint/ReasonHoverHint'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'

import { useGetDisableReason } from '../Dedicated/AuditLogV1/helper'

interface ConfigLayoutProps {
  cluster: SharedCluster
  loading: boolean
  enabled: boolean
  docLink?: string
  onSettingClick: () => void
  onConfigureClick: () => void
  onDisableClick: () => void
  onEnableClick: () => void
}

export const ConfigLayout = ({
  cluster,
  loading,
  enabled,
  docLink,
  onSettingClick,
  onConfigureClick,
  onDisableClick,
  onEnableClick
}: ConfigLayoutProps) => {
  const { accessDeniedReason, invalidReason, isInvalid, accessible } = 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>
            {!loading && <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={docLink ?? '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>

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

        {!loading && (
          <>
            {enabled && (
              <Flex gap={8}>
                <ReasonHoverHint reasons={[accessDeniedReason, invalidReason]}>
                  {({ matched }) => (
                    <Button
                      size="sm"
                      variant="outline"
                      data-mp-event="DB Audit Logging Edit Config Button Clicked"
                      data-testid="audit-log-settings"
                      onClick={onSettingClick}
                      disabled={matched}
                    >
                      Settings
                    </Button>
                  )}
                </ReasonHoverHint>

                <Menu>
                  <Menu.Target>
                    <Button variant="outline" size="sm" data-testid="audit-log-actions">
                      <Box c="carbon.8" component={IconDotsHorizontal} size={20} />
                    </Button>
                  </Menu.Target>
                  <Menu.Dropdown>
                    <Menu.Item
                      data-mp-event="DB Audit Logging Storage Configuration Button Clicked"
                      data-testid="audit-log-storage-configuration"
                      disabled={isInvalid || !accessible}
                      onClick={onConfigureClick}
                    >
                      Storage Configuration
                    </Menu.Item>

                    <Menu.Item
                      c="red"
                      data-mp-event="DB Audit Logging Disable Config Button Click"
                      data-testid="audit-log-disable"
                      disabled={isInvalid || !accessible}
                      onClick={onDisableClick}
                    >
                      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"
                    data-testid="audit-log-enable"
                    onClick={onEnableClick}
                  >
                    Enable
                  </Button>
                )}
              </ReasonHoverHint>
            )}
          </>
        )}
      </Group>
    </Card>
  )
}