import {
  Card,
  Typography,
  Flex,
  Button,
  Box,
  Menu,
  ActionIcon
} from '@tidbcloud/uikit'
import { MRT_ColumnDef, ProTable } from '@tidbcloud/uikit/biz'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import { IconDotsHorizontal, IconRefreshCcw01 } from '@tidbcloud/uikit/icons'
import { useState } from 'react'
import { useParams } from 'react-router-dom'

import { useListByocRegions } from 'apiClient/services/devops'
import { TenantRegion } from 'apiClient/services/devops/interface'

import { AuditlogDisabledModal } from './settings/DisableModal'
import AuditLogEditModal from './settings/EditModal'
import { LogSettingsModal } from './settings/LogSettings'

interface LogActionsProps {
  tenantId: string
  regionLogicalName: string
  config?: TenantRegion
  enabled?: boolean
}

export const LogActions = ({
  tenantId,
  regionLogicalName,
  config,
  enabled = false
}: LogActionsProps) => {
  const [disableModalOpened, disableModalHandlers] = useDisclosure(false)
  const [logSettingsModalOpened, logSettingsModalHandlers] =
    useDisclosure(false)
  const [editModalOpened, editModalHandlers] = useDisclosure(false)
  return (
    <>
      {enabled && (
        <Flex gap={8}>
          <Button
            size="sm"
            variant="outline"
            disabled={false}
            data-mp-event="DB Audit Logging Edit Config Button Clicked"
            onClick={() => {
              logSettingsModalHandlers.open()
            }}
          >
            Settings
          </Button>
          <Menu>
            <Menu.Target>
              <Button variant="outline" size="sm">
                <Box c="carbon.8" component={IconDotsHorizontal} size={20} />
              </Button>
            </Menu.Target>
            <Menu.Dropdown>
              <Menu.Item
                disabled={false}
                data-mp-event="DB Audit Logging Storage Configuration Button Clicked"
                onClick={() => {
                  editModalHandlers.open()
                }}
              >
                Storage Configuration
              </Menu.Item>

              <Menu.Item
                c="red"
                disabled={false}
                data-mp-event="DB Audit Logging Disable Config Button Click"
                onClick={() => {
                  disableModalHandlers.open()
                }}
              >
                Disable
              </Menu.Item>
            </Menu.Dropdown>
          </Menu>
        </Flex>
      )}
      {!enabled && (
        <Button
          size="sm"
          disabled={false}
          data-mp-event="DB Audit Logging Enable Entrance Button Clicked"
          onClick={() => {
            editModalHandlers.open()
          }}
        >
          Enable
        </Button>
      )}
      <AuditLogEditModal
        opened={editModalOpened}
        onClose={() => {
          editModalHandlers.close()
        }}
        tenantId={tenantId}
        regionLogicalName={regionLogicalName}
        config={config}
      />
      <AuditlogDisabledModal
        tenantId={tenantId}
        config={config}
        opened={disableModalOpened}
        onClose={disableModalHandlers.close}
      />
      <LogSettingsModal
        opened={logSettingsModalOpened}
        onCancel={logSettingsModalHandlers.close}
        isUpdate={true}
        onConfirm={async () => {
          logSettingsModalHandlers.close()
        }}
        tenantId={tenantId}
        regionLogicalName={regionLogicalName}
        config={config}
      />
    </>
  )
}

export const BYOCOpsAuditLog = () => {
  const { org_id: tenantId } = useParams<{ org_id: string }>()
  const columns: MRT_ColumnDef<TenantRegion>[] = [
    {
      header: 'Region ID',
      accessorKey: 'display_name'
    },

    {
      header: 'Status',
      accessorKey: 'status',
      Cell: ({ row }) => {
        if (!row.original.ops_audit_log_setting) {
          return 'Not set'
        }
        return row.original.ops_audit_log_setting?.enabled
          ? 'Enabled'
          : 'Disabled'
      }
    },
    {
      header: 'S3 address',
      Cell: ({ row }) => {
        return (
          row.original.ops_audit_log_setting?.log_location?.bucket_uri || '-'
        )
      }
    },
    {
      header: 'Action',
      accessorKey: 'action',
      size: 40,
      maxSize: 40,
      Cell: ({ row }) => {
        return (
          <LogActions
            tenantId={tenantId}
            regionLogicalName={row.original.logical_name || ''}
            config={row.original}
            enabled={row.original.ops_audit_log_setting?.enabled}
          />
        )
      }
    }
  ]
  const [isRefreshing, setIsRefreshing] = useState(false)

  const {
    data: regionsData,
    refetch: refetchRegions,
    isLoading
  } = useListByocRegions(tenantId, {
    query: {
      enabled: !!tenantId,
      onSuccess: () => {
        setIsRefreshing(false)
      },
      onError: (error) => {
        setIsRefreshing(false)
      }
    }
  })

  return (
    <div>
      <Card mt={24}>
        <Flex justify="space-between">
          <Typography variant="title-lg">
            Audit Log S3 Locations by Region
          </Typography>
          <ActionIcon
            variant="subtle"
            onClick={() => {
              setIsRefreshing(true)
              refetchRegions()
            }}
          >
            <IconRefreshCcw01 />
          </ActionIcon>
        </Flex>
        <ProTable
          columns={columns}
          data={regionsData?.data.regions || []}
          mantinePaperProps={{ mt: 16 }}
          enablePagination={false}
          loading={isLoading || isRefreshing}
        />
      </Card>
    </div>
  )
}

export default BYOCOpsAuditLog