import { Badge, Card, Group } from '@tidbcloud/uikit'
import { useEffect } from 'react'

import config from 'config'
import { HeroComponent } from 'dbaas/components/Measurement'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { ClusterPageShell } from 'dbaas/screens/ClusterV2/components'
import { PausedStatus, isClusterInvalid } from 'dbaas/screens/ClusterV2/components/PausedStatus'
import { useClusterDbAuditLogIsLegacy } from 'dbaas/screens/ClusterV2/Container/Navbar/helpers'

import { DedicatedDBAuditLogProvider } from './context/dedicated-provider'
import { EssentialDBAuditLogProvider } from './context/starter-provider'
import DedicatedHome from './Dedicated/Home'
import EssentialHome from './Essential/Home'

const AuditLog = ({ cluster }: { cluster: SharedCluster }) => {
  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}Audit Log`
  }, [])
  const tidbEntityName = cluster.computed.isServerless ? 'TiDB instance' : 'TiDB Cluster'
  const isAuditLogLegacy = useClusterDbAuditLogIsLegacy(cluster)
  const showPreviewBadge = cluster.computed.isEssential || (cluster.computed.isDedicated && !isAuditLogLegacy)

  return (
    <ClusterPageShell
      title={
        <Group gap={8}>
          DB Audit Logging
          {showPreviewBadge ? (
            <Badge variant="outline" size="sm" color="carbon" c="carbon.7" fw={500}>
              Preview
            </Badge>
          ) : null}
        </Group>
      }
      wrapperProps={{
        display: 'flex',
        h: '100%',
        sx: {
          flexDirection: 'column'
        }
      }}
      bodyProps={{ sx: { flex: 'auto' } }}
    >
      {isClusterInvalid(cluster) ? (
        <Card shadow="none" h="calc(100vh - 152px)">
          <HeroComponent />
          <PausedStatus
            cluster={cluster}
            featureName="DB Audit Logging"
            featureDesc={`DB audit logging is used to record various SQL commands executed by users on the ${tidbEntityName}. It supports administrators to audit user behaviors based on log information.`}
          />
        </Card>
      ) : (
        <>
          {cluster.computed.isServerless ? (
            <EssentialDBAuditLogProvider cluster={cluster}>
              <EssentialHome cluster={cluster} />
            </EssentialDBAuditLogProvider>
          ) : (
            <DedicatedDBAuditLogProvider cluster={cluster}>
              <DedicatedHome cluster={cluster} />
            </DedicatedDBAuditLogProvider>
          )}
        </>
      )}
    </ClusterPageShell>
  )
}

export default AuditLog