import { Button, Card, Group, Stack, Typography } from '@tidbcloud/uikit'
import { Link } from 'react-router-dom'

import { useGetExpWhiteList } from 'dbaas/services/api'
import { Commonv1beta1ServicePlan } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'
import { useGetMetricsQueryRangeURL } from 'dbaas/services/useO11YQuery'
import { ExpFeatHashmap } from 'dbaas/stores/localStorage'
import useStores from 'dbaas/stores/useStores'
import { MixpanelEvents } from 'dbaas/utils/tracking'

import { SharedTiDB } from '../../../shared/model/shared-tidb-state'

import { ChartPanel } from './chart'

export const MetricsPanel = ({ tidb }: { tidb: SharedTiDB }) => {
  const {
    store: {
      tenantData: { id: orgId }
    }
  } = useStores()
  const {
    data: metricsURL,
    isLoading: isLoadingMetricsURL,
    metricRequestOptions
  } = useGetMetricsQueryRangeURL(orgId, tidb)
  const { data: whiteList } = useGetExpWhiteList(orgId, undefined, {
    query: { enabled: !!orgId, refetchOnMount: false, refetchOnWindowFocus: false }
  })
  const isTieredStorageEnabled =
    whiteList?.exp_names?.includes(ExpFeatHashmap.TieredStorageBYOCPremiumWhitelist) ?? false

  return (
    <Card p="xl">
      <Stack gap="xl">
        <Group justify="space-between">
          <Typography variant="headline-sm" fw={500}>
            Core Metrics
          </Typography>
          <Button
            variant="default"
            size="xs"
            component={Link}
            to={`/tidbs/${tidb.tidbId}/metrics`}
            sx={(theme) => ({
              '&:hover': {
                textDecoration: 'none',
                color: theme.colors.carbon[8]
              }
            })}
            data-mp-event={MixpanelEvents.TidbMetrics.View.EnterClicked}
            data-mp-service-plan={Commonv1beta1ServicePlan.Premium}
          >
            More Metrics
          </Button>
        </Group>

        <ChartPanel
          metricsURL={metricsURL ?? ''}
          isLoadingMetricsURL={isLoadingMetricsURL}
          metricRequestOptions={metricRequestOptions}
          isTieredStorageEnabled={isTieredStorageEnabled}
        />
      </Stack>
    </Card>
  )
}