'use client';

import { Metric } from '@/lib/types';
import MetricChart from './MetricChart';
import { generateMockChartDataWithInstances } from '@/lib/mockChartData';
import { Card, Stack, Text, Badge, Group, Box } from '@tidbcloud/uikit';
import { useTranslation } from '@/lib/i18n';

interface MetricCardProps {
  metric: Metric;
  startTs: number;
  endTs: number;
}

export default function MetricCard({ metric, startTs, endTs }: MetricCardProps) {
  const { t } = useTranslation();
  const chartData = generateMockChartDataWithInstances(metric, startTs, endTs);

  return (
    <Stack gap="sm">
      <MetricChart
        data={chartData}
        metricName={metric.name}
        title={metric.name}
        timeRange={[startTs, endTs]}
      />

      {metric.temporal?.description && (
        <Stack gap={4}>
          <Text size="xs" fw={600} c="carbon.5">
            {t('insight.metric.temporal')}
          </Text>
          <Text size="sm" c="carbon.5">
            {metric.temporal.description}
          </Text>
          {metric.temporal.baseline_deviation && (
            <Text size="xs" c="carbon.5">
              {t('insight.metric.baselineDeviation', { value: metric.temporal.baseline_deviation })}
            </Text>
          )}
        </Stack>
      )}

      {metric.spatial?.description && (
        <Stack gap={4}>
          <Text size="xs" fw={600} c="carbon.5">
            {t('insight.metric.spatial')}
          </Text>
          <Text size="sm" c="carbon.5">
            {metric.spatial.description}
          </Text>
          <Group gap="xs">
            {metric.spatial.is_imbalanced && (
              <Badge variant="filled" size="sm" color="yellow.6">
                {t('insight.metric.imbalance')}
              </Badge>
            )}
            {metric.spatial.outlier_instances?.length
              ? metric.spatial.outlier_instances.map((instance) => (
                  <Badge
                    key={instance}
                    size="sm"
                    color="gray.6"
                    variant="outline"
                  >
                    {instance}
                  </Badge>
                ))
              : null}
          </Group>
        </Stack>
      )}

      {metric.capacity?.limit_info && (
        <Stack gap={4}>
          <Text size="xs" fw={600} c="carbon.5">
            {t('insight.metric.capacity')}
          </Text>
          <Text size="sm" c="carbon.5">
            {metric.capacity.limit_info}
          </Text>
        </Stack>
      )}
    </Stack>
  );
}