import {
  Accordion,
  Badge,
  Button,
  Card,
  Code,
  Divider,
  Grid,
  Group,
  Loader,
  Select,
  Stack,
  Text,
  Title,
  notifier,
  Modal
} from '@tidbcloud/uikit'
import {
  CodeBlock,
  DEFAULT_TIME_RANGE,
  fromTimeRangeValue,
  TimeRange,
  toTimeRangeValue
} from '@tidbcloud/uikit/biz'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import type { AxiosError } from 'axios'
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import type { QueryConfig } from 'metrics-chart'
import { SyncChartPointer as MetricsChartSyncProvider } from 'metrics-chart'
import { TransformNullValue } from 'metrics-chart'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { useParams } from 'react-router-dom'

import {
  useGuardianCreateAnalysis,
  useGuardianGetInsight,
  useGuardianListAnalyses,
  useGuardianListMetricsMetadata
} from 'apiClient/services/aiops'
import type {
  AnalysisBasic,
  EvidenceDetail,
  DirectCauseReport,
  GuardianGetInsight200,
  InsightMetadata,
  MetricsMetadata,
  MetricsStatus,
  PerformanceReport,
  Sql
} from 'apiClient/services/aiops/interface'
import ChartCard from 'components/ChartCard'
import { MetricInfo, getNewTimeRange } from 'components/ChartCard/helpers'

import TimeRangePicker from './TimeRange'

dayjs.extend(utc)

const EMPTY_METADATA_ITEMS: MetricsMetadata[] = []
const EMPTY_ANALYSES: AnalysisBasic[] = []

type MetricSection = 'CRITICAL' | 'WARNING' | 'NORMAL'
type MetricDetail = MetricsStatus
type DiagnosticDetail = PerformanceReport
type GuardianDirectCause = DirectCauseReport & {
  related_sql?: Sql | null
}
type DiagnosticReport = {
  direct_cause?: GuardianDirectCause | null
  detail?: DiagnosticDetail | null
  metadata: InsightMetadata
}

const STATUS_ORDER: MetricSection[] = ['CRITICAL', 'WARNING', 'NORMAL']
const DEFAULT_EXPANDED_STATUSES = new Set<MetricSection>(['CRITICAL'])
const WAITING_STATUSES = new Set(['QUEUED', 'PROCESSING'])
const ANALYSIS_STATUS_COLOR: Record<string, string> = {
  COMPLETED: 'green.6',
  FAILED: 'red.6',
  PROCESSING: 'blue.6',
  QUEUED: 'orange.6'
}
const EVIDENCE_SOURCE_META: Record<string, { label: string; color: string }> = {
  metrics: { label: 'Metrics', color: 'blue.6' },
  top_cpu_time_sqls: { label: 'Top CPU Time SQLs', color: 'violet.6' },
  top_slow_queries: { label: 'Top Slow Queries', color: 'grape.6' },
  events: { label: 'Events', color: 'green.6' }
}
const statusBadgeColor: Record<MetricSection, string> = {
  CRITICAL: 'red.6',
  WARNING: 'orange.6',
  NORMAL: 'green.6'
}
const statusLabel: Record<MetricSection, string> = {
  CRITICAL: 'Critical',
  WARNING: 'Warning',
  NORMAL: 'Normal'
}
const GUARDIAN_ANALYSIS_PAGE_SIZE = 50
const MAX_ANALYSIS_DURATION_MINUTES = 120
const DEFAULT_ANALYSIS_LOOKBACK_MINUTES = 30
const CREATE_ANALYSIS_QUICK_RANGES = [15 * 60, 30 * 60, 60 * 60, 120 * 60]
const DEFAULT_ANALYSIS_LOOKBACK_SECONDS = DEFAULT_ANALYSIS_LOOKBACK_MINUTES * 60

const normalizeStatus = (status?: string): MetricSection => {
  if (status === 'CRITICAL' || status === 'WARNING') {
    return status
  }
  return 'NORMAL'
}

const toUnixSeconds = (
  value?: string | number | Date | null
): number | null => {
  if (value === null || value === undefined) {
    return null
  }
  if (value instanceof Date) {
    return dayjs(value).unix()
  }
  if (typeof value === 'number') {
    return normalizeUnixTimestamp(value)
  }
  if (typeof value === 'string') {
    const numeric = Number(value)
    if (!Number.isNaN(numeric)) {
      return normalizeUnixTimestamp(numeric)
    }
    const parsed = dayjs(value)
    if (parsed.isValid()) {
      return parsed.unix()
    }
  }
  return null
}

const buildIssueCreatedTimeRange = (
  issueCreatedAtSeconds: number | null
): TimeRange => {
  if (issueCreatedAtSeconds === null) {
    return DEFAULT_TIME_RANGE
  }
  const end = issueCreatedAtSeconds
  const start = Math.max(end - DEFAULT_ANALYSIS_LOOKBACK_SECONDS, 0)
  return fromTimeRangeValue([start, end])
}

const areTimeRangesEqual = (
  left?: TimeRange | null,
  right?: TimeRange | null
) => {
  if (left === right) {
    return true
  }
  if (!left || !right) {
    return false
  }
  if (left.type !== right.type) {
    return false
  }
  if (left.type === 'relative' && right.type === 'relative') {
    return (
      left.value === right.value &&
      left.isFuture === right.isFuture &&
      left.utcOffset === right.utcOffset
    )
  }
  if (left.type === 'absolute' && right.type === 'absolute') {
    return left.value[0] === right.value[0] && left.value[1] === right.value[1]
  }
  return false
}

const normalizeUnixTimestamp = (value: number): number => {
  if (!Number.isFinite(value)) {
    return value
  }
  if (value > 1e12) {
    return Math.round(value / 1000)
  }
  return Math.round(value)
}

const formatTimestamp = (value?: number | string | null) => {
  if (value === null || value === undefined) return '-'
  if (typeof value === 'number') {
    return dayjs(normalizeUnixTimestamp(value) * 1000)
      .utc()
      .format('YYYY-MM-DD HH:mm:ssZ')
  }
  if (typeof value === 'string') {
    const numeric = Number(value)
    if (!Number.isNaN(numeric)) {
      return dayjs(normalizeUnixTimestamp(numeric) * 1000)
        .utc()
        .format('YYYY-MM-DD HH:mm:ssZ')
    }
    const parsed = dayjs(value)
    if (parsed.isValid()) {
      return parsed.utc().format('YYYY-MM-DD HH:mm:ssZ')
    }
  }
  return '-'
}

const describeAnalysisStatus = (status?: string) => {
  if (!status) return 'Unknown'
  const normalized = status.toLowerCase()
  return normalized.charAt(0).toUpperCase() + normalized.slice(1)
}

const getAnalysisStatusColor = (status?: string) => {
  if (!status) return 'gray.6'
  return ANALYSIS_STATUS_COLOR[status] ?? 'gray.6'
}

const formatAnalysisOptionLabel = (analysis: AnalysisBasic) => {
  const createdAt = formatTimestamp(analysis.created_at)
  const statusLabelText = describeAnalysisStatus(analysis.status)
  return `${createdAt} · ${statusLabelText} · ${analysis.analysis_uuid}`
}

const isPerformanceReportDetail = (
  detail: unknown
): detail is DiagnosticDetail => {
  if (!detail || typeof detail !== 'object') {
    return false
  }
  const candidate = detail as Partial<DiagnosticDetail>
  return (
    typeof candidate.cluster_topology === 'string' &&
    Array.isArray(candidate.workload) &&
    Array.isArray(candidate.resource) &&
    Array.isArray(candidate.latency)
  )
}

const toDiagnosticReport = (
  payload?: GuardianGetInsight200
): DiagnosticReport | null => {
  if (!payload || typeof payload !== 'object') {
    return null
  }
  const detail = (payload as any).detail
  if (!isPerformanceReportDetail(detail)) {
    return null
  }
  return {
    direct_cause: (payload as any).direct_cause ?? null,
    detail,
    metadata: (payload as any).metadata
  }
}

const buildInitialExpanded = (detail?: DiagnosticDetail | null) => {
  if (!detail) {
    return []
  }
  const expanded = new Set<string>()
  Object.entries(detail).forEach(([segmentKey, value]) => {
    if (!Array.isArray(value) || segmentKey === 'events') {
      return
    }
    const seen = new Set<MetricSection>()
    ;(value as MetricDetail[]).forEach((metric) => {
      const normalized = normalizeStatus(metric.status)
      if (DEFAULT_EXPANDED_STATUSES.has(normalized)) {
        seen.add(normalized)
      }
    })
    seen.forEach((status) => expanded.add(`${segmentKey}:${status}`))
  })
  return Array.from(expanded)
}

const normalizeSeriesType = (value?: string): QueryConfig['type'] => {
  if (!value) return 'line'
  const normalized = value.toLowerCase()
  if (['line', 'area', 'bar_stacked', 'area_stack'].includes(normalized)) {
    return normalized as QueryConfig['type']
  }
  return 'line'
}

const buildMetricQueries = (
  fallbackName: string,
  metadataEntry?: MetricsMetadata
): MetricInfo['queries'] => {
  if (!metadataEntry?.queries?.length) {
    return []
  }
  return metadataEntry.queries.map((query, index) => ({
    promql: query.metrics_profile_name,
    name: query.legend || `${fallbackName}-${index + 1}`,
    type: normalizeSeriesType(query.series_type)
  }))
}

const buildMetricInfo = (
  metric: MetricDetail,
  metadataEntry?: MetricsMetadata
): MetricInfo => {
  return {
    title: metric.name,
    label: metric.temporal?.description ?? metric.current_value_summary,
    unit: metadataEntry?.unit ?? 'short',
    queries: buildMetricQueries(metric.name, metadataEntry),
    nullValue: TransformNullValue.AS_ZERO
  }
}

const buildMetricInfoForEvidence = (
  metricName: string,
  description?: string,
  metadataEntry?: MetricsMetadata
): MetricInfo => {
  return {
    title: metadataEntry?.name ?? metricName,
    label:
      description?.trim() ||
      metadataEntry?.name ||
      metricName ||
      'Metric Evidence',
    unit: metadataEntry?.unit ?? 'short',
    queries: buildMetricQueries(metricName, metadataEntry),
    nullValue: TransformNullValue.AS_ZERO
  }
}

type GuardianInsightProps = {
  issueKey?: string | null
  issueCreatedAt?: string | number | Date | null
}

const GuardianInsight: React.FC<GuardianInsightProps> = ({
  issueKey: issueKeyFromProps,
  issueCreatedAt
}) => {
  const { issue_key } = useParams<{ issue_key?: string }>()
  const issueKey = issueKeyFromProps ?? issue_key ?? ''

  const issueCreatedAtPrimitive =
    issueCreatedAt instanceof Date
      ? issueCreatedAt.getTime()
      : typeof issueCreatedAt === 'number'
      ? issueCreatedAt
      : typeof issueCreatedAt === 'string'
      ? issueCreatedAt
      : null
  const issueCreatedAtUnix = useMemo(
    () => toUnixSeconds(issueCreatedAtPrimitive),
    [issueCreatedAtPrimitive]
  )
  const issueCreatedDefaultTimeRange = useMemo<TimeRange>(
    () => buildIssueCreatedTimeRange(issueCreatedAtUnix),
    [issueCreatedAtUnix]
  )

  const [selectedAnalysisUuid, setSelectedAnalysisUuid] = useState<
    string | null
  >(null)
  const [
    createModalOpened,
    { open: openCreateModal, close: closeCreateModal }
  ] = useDisclosure(false)
  const [timeRange, setTimeRange] = useState<TimeRange>(
    issueCreatedDefaultTimeRange
  )
  useEffect(() => {
    setTimeRange((current) => {
      if (areTimeRangesEqual(current, issueCreatedDefaultTimeRange)) {
        return current
      }
      return issueCreatedDefaultTimeRange
    })
  }, [issueCreatedDefaultTimeRange])
  const [isRefreshing, setIsRefreshing] = useState(false)

  const analysesQueryEnabled = Boolean(issueKey)

  const {
    data: analysesResponse,
    isLoading: isAnalysesLoading,
    isError: isAnalysesError,
    refetch: refetchAnalyses
  } = useGuardianListAnalyses(
    {
      jira_issue_id: analysesQueryEnabled ? issueKey : null,
      page: 1,
      page_size: GUARDIAN_ANALYSIS_PAGE_SIZE
    },
    {
      query: {
        enabled: analysesQueryEnabled,
        staleTime: 60 * 1000
      }
    }
  )

  const { mutateAsync: createAnalysisMutation, isLoading: isCreatingAnalysis } =
    useGuardianCreateAnalysis()

  const analyses = analysesResponse?.data?.items ?? EMPTY_ANALYSES

  const sortedAnalyses = useMemo(
    () =>
      [...analyses].sort(
        (a, b) => dayjs(b.created_at).valueOf() - dayjs(a.created_at).valueOf()
      ),
    [analyses]
  )

  const preferredAnalysisUuid = useMemo(() => {
    const latestCompleted = sortedAnalyses.find(
      (analysis) => analysis.status?.toUpperCase() === 'COMPLETED'
    )
    return (
      latestCompleted?.analysis_uuid ?? sortedAnalyses[0]?.analysis_uuid ?? null
    )
  }, [sortedAnalyses])

  useEffect(() => {
    if (!sortedAnalyses.length) {
      setSelectedAnalysisUuid(null)
      return
    }
    setSelectedAnalysisUuid((current) => {
      if (
        current &&
        sortedAnalyses.some((analysis) => analysis.analysis_uuid === current)
      ) {
        return current
      }
      return preferredAnalysisUuid
    })
  }, [preferredAnalysisUuid, sortedAnalyses])

  const analysisOptions = useMemo(
    () =>
      sortedAnalyses.map((analysis) => ({
        value: analysis.analysis_uuid,
        label: formatAnalysisOptionLabel(analysis)
      })),
    [sortedAnalyses]
  )

  const selectedAnalysis = useMemo(
    () =>
      sortedAnalyses.find(
        (analysis) => analysis.analysis_uuid === selectedAnalysisUuid
      ) ?? null,
    [sortedAnalyses, selectedAnalysisUuid]
  )

  const normalizedAnalysisStatus =
    selectedAnalysis?.status?.toUpperCase() ?? undefined

  const analysisUuidForQueries = selectedAnalysis?.analysis_uuid ?? ''

  const shouldLoadInsight =
    Boolean(analysisUuidForQueries) && normalizedAnalysisStatus === 'COMPLETED'

  const {
    data: insightResponse,
    isLoading: isInsightLoading,
    isError: isInsightError,
    refetch: refetchInsight
  } = useGuardianGetInsight(analysisUuidForQueries, {
    query: {
      enabled: shouldLoadInsight
    }
  })

  const diagnosticData = useMemo(
    () => toDiagnosticReport(insightResponse?.data),
    [insightResponse]
  )

  const diagnosticDetail = diagnosticData?.detail ?? null
  const metadata = diagnosticData?.metadata

  const chartTimeRange: [number, number] = useMemo(() => {
    const start =
      metadata?.time_range_start_ts ?? selectedAnalysis?.time_range_start_ts
    const end =
      metadata?.time_range_end_ts ?? selectedAnalysis?.time_range_end_ts
    if (typeof start === 'number' && typeof end === 'number' && start < end) {
      return [normalizeUnixTimestamp(start), normalizeUnixTimestamp(end)]
    }
    return getNewTimeRange()
  }, [metadata, selectedAnalysis])

  const {
    data: metricsMetadataResponse,
    isLoading: isMetadataLoading,
    isError: isMetadataError,
    refetch: refetchMetricsMetadata
  } = useGuardianListMetricsMetadata(analysisUuidForQueries, {
    query: {
      enabled: shouldLoadInsight,
      staleTime: 5 * 60 * 1000
    }
  })

  const metricsMetadataItems =
    metricsMetadataResponse?.data?.items ?? EMPTY_METADATA_ITEMS

  const metricMetadataMap = useMemo(() => {
    const map = new Map<string, MetricsMetadata>()
    metricsMetadataItems.forEach((item) => {
      map.set(item.name, item)
    })
    return map
  }, [metricsMetadataItems])

  const [expandedSections, setExpandedSections] = useState<string[]>([])

  useEffect(() => {
    setExpandedSections(buildInitialExpanded(diagnosticDetail))
  }, [diagnosticDetail])

  const handleAccordionChange = useCallback((values: string[]) => {
    setExpandedSections(values)
  }, [])

  const metricSegments = useMemo(() => {
    if (!diagnosticDetail) {
      return []
    }
    return Object.entries(diagnosticDetail).filter(
      ([key, value]) => Array.isArray(value) && key !== 'events'
    ) as [string, MetricDetail[]][]
  }, [diagnosticDetail])

  const handleAnalysisChange = useCallback((value: string | null) => {
    setSelectedAnalysisUuid(value)
  }, [])

  const handleRefresh = useCallback(async () => {
    setIsRefreshing(true)
    try {
      await Promise.all([
        refetchAnalyses(),
        shouldLoadInsight ? refetchInsight() : Promise.resolve(),
        shouldLoadInsight ? refetchMetricsMetadata() : Promise.resolve()
      ])
    } catch (error) {
      notifier.error('Failed to refresh Guardian insight data.', {
        title: 'Refresh Failed'
      })
    } finally {
      setIsRefreshing(false)
    }
  }, [
    refetchAnalyses,
    refetchInsight,
    refetchMetricsMetadata,
    shouldLoadInsight
  ])

  const handleCreateAnalysis = useCallback(async () => {
    if (!issueKey) {
      notifier.error('Empty Issue Key', {
        title: 'Failed to Create Analysis'
      })
      return
    }

    const [startSeconds, endSeconds] = toTimeRangeValue(timeRange!)
    try {
      const response = await createAnalysisMutation({
        data: {
          jira_issue_id: issueKey,
          time_range_start_ts: startSeconds,
          time_range_end_ts: endSeconds
        }
      })

      notifier.success(
        `Please wait a moment while we create the analysis for ${issueKey}.`,
        {
          title: 'Guardian Insight Created'
        }
      )

      const newAnalysisUuid = response?.data?.analysis_uuid
      await refetchAnalyses()

      if (newAnalysisUuid) {
        setSelectedAnalysisUuid(newAnalysisUuid)
      }

      closeCreateModal()
    } catch (error) {
      const axiosError = error as AxiosError<{
        errmsg?: string
        message?: string
      }>
      const description =
        axiosError?.response?.data?.errmsg ??
        axiosError?.message ??
        'Could not create a new Guardian analysis.'

      notifier.error(description, {
        title: 'Create Analysis Failed'
      })
    }
  }, [
    createAnalysisMutation,
    timeRange,
    issueKey,
    refetchAnalyses,
    setSelectedAnalysisUuid,
    closeCreateModal
  ])
  const createAnalysisModal = (
    <Modal
      title="Generate Guardian Insight"
      opened={createModalOpened}
      onClose={closeCreateModal}
      centered={false}
    >
      <Stack gap="sm">
        <Text size="sm" c="carbon.6">
          Please select the time range for the Guardian insight (up to 2 hours).
        </Text>

        <TimeRangePicker
          sx={{ width: '400px !important' }}
          value={timeRange}
          onChange={(v) => {
            setTimeRange(v ?? issueCreatedDefaultTimeRange)
          }}
          minDateTime={() => dayjs().subtract(90, 'day').startOf('d').toDate()}
          maxDateTime={() => dayjs().toDate()}
          maxDuration={MAX_ANALYSIS_DURATION_MINUTES * 60}
          quickRanges={CREATE_ANALYSIS_QUICK_RANGES}
          placeholder="Select time range"
          footer={
            <Stack px={14} pt={8} pb={6} gap={6}>
              <Text size="xs" c="carbon.6">
                Currently used time zone is: UTC
              </Text>
            </Stack>
          }
        />
        <Group justify="flex-end" gap="xs">
          <Button variant="default" size="sm" onClick={closeCreateModal}>
            Cancel
          </Button>
          <Button
            size="sm"
            loading={isCreatingAnalysis}
            onClick={handleCreateAnalysis}
            disabled={!issueKey}
          >
            Generate
          </Button>
        </Group>
      </Stack>
    </Modal>
  )

  const renderMetricContent = useCallback(
    (_segmentKey: string, metric: MetricDetail) => {
      const metadataEntry = metricMetadataMap.get(metric.name)
      const metricInfo = buildMetricInfo(metric, metadataEntry)
      const overlay = (() => {
        if (metadataEntry && metricInfo.queries.length === 0) {
          return (
            <Text size="sm" c="carbon.5">
              No metric queries available for {metric.name}.
            </Text>
          )
        }
        if (metadataEntry) return null
        if (isMetadataLoading && analysisUuidForQueries) {
          return (
            <Text size="sm" c="carbon.5">
              Loading metric metadata…
            </Text>
          )
        }
        if (isMetadataError) {
          return (
            <Text size="sm" c="red.6">
              Failed to load metric metadata.
            </Text>
          )
        }
        if (!analysisUuidForQueries) {
          return (
            <Text size="sm" c="carbon.5">
              Insight metadata unavailable.
            </Text>
          )
        }
        return (
          <Text size="sm" c="carbon.5">
            No metric metadata found for {metric.name}.
          </Text>
        )
      })()

      return (
        <Stack gap="sm">
          <MetricsChartSyncProvider>
            <ChartCard
              title={metadataEntry?.name ?? metric.name}
              label={metricInfo.label}
              timeRange={chartTimeRange}
              metric={metricInfo}
              height={240}
              analysisUuid={analysisUuidForQueries || undefined}
              initialLoading={isMetadataLoading && !metadataEntry}
              pendingOverlay={overlay ?? undefined}
              cardProps={{ shadow: 'xs', withBorder: true }}
            />
          </MetricsChartSyncProvider>

          {metric.temporal?.description && (
            <Stack gap={4}>
              <Text size="xs" fw={600} c="carbon.5">
                TEMPORAL
              </Text>
              <Text size="sm" c="carbon.5">
                {metric.temporal.description}
              </Text>
              {metric.temporal.baseline_deviation && (
                <Text size="xs" c="carbon.5">
                  Baseline Deviation: {metric.temporal.baseline_deviation}
                </Text>
              )}
            </Stack>
          )}

          {metric.spatial?.description && (
            <Stack gap={4}>
              <Text size="xs" fw={600} c="carbon.5">
                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">
                    Imbalance Detected
                  </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">
                CAPACITY
              </Text>
              <Text size="sm" c="carbon.5">
                {metric.capacity.limit_info}
              </Text>
            </Stack>
          )}
        </Stack>
      )
    },
    [
      analysisUuidForQueries,
      chartTimeRange,
      isMetadataError,
      isMetadataLoading,
      metricMetadataMap
    ]
  )

  const renderEvidence = useCallback(
    (evidence: EvidenceDetail, index: number) => {
      if (!evidence) {
        return null
      }

      const sourceType = evidence.source_type ?? 'unknown'
      const meta = EVIDENCE_SOURCE_META[sourceType] ??
        EVIDENCE_SOURCE_META.metrics ?? {
          label: 'Evidence',
          color: 'gray.6'
        }
      const description = evidence.description?.trim()

      const renderMetricsEvidence = () => {
        if (!evidence.metric_name) {
          return (
            <Text size="sm" c="carbon.5">
              Metric identifier unavailable for this evidence.
            </Text>
          )
        }
        const metadataEntry = metricMetadataMap.get(evidence.metric_name)
        const metricInfo = buildMetricInfoForEvidence(
          evidence.metric_name,
          description,
          metadataEntry
        )
        const overlay = (() => {
          if (metadataEntry && metricInfo.queries.length === 0) {
            return (
              <Text size="sm" c="carbon.5">
                No metric queries available for {evidence.metric_name}.
              </Text>
            )
          }
          if (metadataEntry) return null
          if (isMetadataLoading && analysisUuidForQueries) {
            return (
              <Text size="sm" c="carbon.5">
                Loading metric metadata…
              </Text>
            )
          }
          if (isMetadataError) {
            return (
              <Text size="sm" c="red.6">
                Failed to load metric metadata.
              </Text>
            )
          }
          if (!analysisUuidForQueries) {
            return (
              <Text size="sm" c="carbon.5">
                Insight metadata unavailable.
              </Text>
            )
          }
          return (
            <Text size="sm" c="carbon.5">
              No metric metadata found for {evidence.metric_name}.
            </Text>
          )
        })()

        return (
          <MetricsChartSyncProvider>
            <ChartCard
              title={metricInfo.title}
              label={metricInfo.label}
              timeRange={chartTimeRange}
              metric={metricInfo}
              height={240}
              analysisUuid={analysisUuidForQueries || undefined}
              initialLoading={isMetadataLoading && !metadataEntry}
              pendingOverlay={overlay ?? undefined}
              cardProps={{ shadow: 'xs', withBorder: true }}
            />
          </MetricsChartSyncProvider>
        )
      }

      const renderSqlEvidence = () => {
        if (!evidence.sql?.full_sql_text && !evidence.sql?.sql_digest) {
          return (
            <Text size="sm" c="carbon.5">
              SQL payload unavailable for this evidence.
            </Text>
          )
        }
        return (
          <Stack gap="xs">
            {evidence.sql?.sql_digest ? (
              <Group gap="xs">
                <Text size="sm" fw={600}>
                  Digest:
                </Text>
                <Code>{evidence.sql.sql_digest}</Code>
              </Group>
            ) : null}
            {evidence.sql?.full_sql_text ? (
              <CodeBlock language="sql">{evidence.sql.full_sql_text}</CodeBlock>
            ) : null}
          </Stack>
        )
      }

      let detail: React.ReactNode = null
      if (sourceType === 'metrics') {
        detail = renderMetricsEvidence()
      } else if (
        sourceType === 'top_cpu_time_sqls' ||
        sourceType === 'top_slow_queries'
      ) {
        detail = renderSqlEvidence()
      }

      return (
        <Stack
          key={`${sourceType}-${index}-${
            evidence.metric_name ?? evidence.sql?.sql_digest ?? index
          }`}
          gap="xs"
          p="sm"
          style={{
            border: '1px solid var(--mantine-color-gray-3, #dfe3e6)',
            borderRadius: '8px',
            backgroundColor: 'var(--mantine-color-white, #fff)'
          }}
        >
          <Group gap="xs">
            <Badge color={meta.color} variant="outline">
              {meta.label}
            </Badge>
            <Text size="sm" c="carbon.6">
              Evidence #{index + 1}
            </Text>
          </Group>
          {description ? (
            <Text size="sm">{description}</Text>
          ) : (
            <Text size="sm" c="carbon.5">
              No description provided.
            </Text>
          )}
          {detail}
        </Stack>
      )
    },
    [
      analysisUuidForQueries,
      chartTimeRange,
      isMetadataError,
      isMetadataLoading,
      metricMetadataMap
    ]
  )

  const actionButtons = (
    <Group gap="xs" wrap="nowrap">
      <Button
        variant="default"
        size="sm"
        onClick={openCreateModal}
        disabled={!issueKey}
      >
        Generate
      </Button>
      <Button
        variant="light"
        size="sm"
        onClick={handleRefresh}
        loading={isRefreshing}
        disabled={!issueKey}
      >
        Refresh
      </Button>
    </Group>
  )

  const renderAnalysisSelector = () => {
    if (!issueKey) {
      return (
        <Card withBorder shadow="sm">
          <Stack gap="sm">
            <Group justify="space-between" align="flex-start">
              <Title order={4}>Guardian Insight</Title>
              {actionButtons}
            </Group>
            <Text c="carbon.6">
              Unable to determine the current issue key. Open this page from a
              specific Guardian issue to load analyses.
            </Text>
          </Stack>
        </Card>
      )
    }

    return (
      <Card withBorder shadow="sm">
        <Stack gap="md">
          <Group justify="space-between" align="flex-start">
            <Group justify="space-between">
              <Title order={4}>Guardian Insight</Title>
              {selectedAnalysis && (
                <Badge
                  color={getAnalysisStatusColor(normalizedAnalysisStatus)}
                  variant="filled"
                >
                  {describeAnalysisStatus(selectedAnalysis.status)}
                </Badge>
              )}
            </Group>
            {actionButtons}
          </Group>
          {isAnalysesLoading ? (
            <Group gap="sm">
              <Loader size="sm" color="carbon.6" />
              <Text c="carbon.6">Loading available analyses…</Text>
            </Group>
          ) : isAnalysesError ? (
            <Text c="red.6">
              Failed to load Guardian analyses for issue {issueKey}. Please try
              again later.
            </Text>
          ) : !sortedAnalyses.length ? (
            <Text c="carbon.6">
              No Guardian insights were found for issue {issueKey}. Please
              generate a new insight.
            </Text>
          ) : (
            <>
              <Group gap="sm" align="flex-end" wrap="wrap">
                <Select
                  data={analysisOptions}
                  value={selectedAnalysisUuid}
                  onChange={handleAnalysisChange}
                  placeholder="Select an analysis run"
                  searchable
                  style={{ flex: 1, minWidth: '240px' }}
                />
              </Group>
              {selectedAnalysis && (
                <Grid gutter="md">
                  <Grid.Col span={6}>
                    <Stack gap={4}>
                      <Text fw={600}>Insight UUID</Text>
                      <Text>{selectedAnalysis.analysis_uuid}</Text>
                    </Stack>
                  </Grid.Col>
                  <Grid.Col span={6}>
                    <Stack gap={4}>
                      <Text fw={600}>Time Range</Text>
                      <Text>
                        {formatTimestamp(selectedAnalysis.time_range_start_ts)}{' '}
                        → {formatTimestamp(selectedAnalysis.time_range_end_ts)}
                      </Text>
                    </Stack>
                  </Grid.Col>
                  <Grid.Col span={6}>
                    <Stack gap={4}>
                      <Text fw={600}>Cluster ID</Text>
                      <Text>{selectedAnalysis.cluster_id ?? '-'}</Text>
                    </Stack>
                  </Grid.Col>
                  <Grid.Col span={6}>
                    <Stack gap={4}>
                      <Text fw={600}>Tenant ID</Text>
                      <Text>{selectedAnalysis.tenant_id ?? '-'}</Text>
                    </Stack>
                  </Grid.Col>
                  <Grid.Col span={6}>
                    <Stack gap={4}>
                      <Text fw={600}>Created At</Text>
                      <Text>
                        {formatTimestamp(selectedAnalysis.created_at)}
                      </Text>
                    </Stack>
                  </Grid.Col>
                  {diagnosticDetail && (
                    <Grid.Col span={12}>
                      <Stack gap={4}>
                        <Text fw={600}>Cluster Topology</Text>
                        <Text>{diagnosticDetail.cluster_topology}</Text>
                      </Stack>
                    </Grid.Col>
                  )}
                </Grid>
              )}
            </>
          )}
        </Stack>
      </Card>
    )
  }

  const renderStatusContent = () => {
    if (!issueKey) {
      return null
    }

    if (isAnalysesLoading || isAnalysesError) {
      return null
    }

    if (!selectedAnalysis) {
      if (!sortedAnalyses.length) {
        return null
      }
      return (
        <Card withBorder shadow="sm">
          <Text c="carbon.6">Select a version to view its insight.</Text>
        </Card>
      )
    }

    if (WAITING_STATUSES.has(normalizedAnalysisStatus ?? '')) {
      return (
        <Card withBorder shadow="sm">
          <Stack gap="sm">
            <Title order={5}>Insight in progress</Title>
            <Text c="carbon.6">
              Insight {selectedAnalysis.analysis_uuid} is still running. Please
              check back once the status becomes Completed.
            </Text>
          </Stack>
        </Card>
      )
    }

    if (normalizedAnalysisStatus === 'FAILED') {
      return (
        <Card withBorder shadow="sm">
          <Stack gap="sm">
            <Title order={5}>Insight failed</Title>
            <Text c="red.6">
              {selectedAnalysis.error_message ??
                'Guardian reported a failure. Please retry the insight from Guardian.'}
            </Text>
          </Stack>
        </Card>
      )
    }

    if (normalizedAnalysisStatus !== 'COMPLETED') {
      return (
        <Card withBorder shadow="sm">
          <Stack gap="sm">
            <Title order={5}>Insight unavailable</Title>
            <Text c="carbon.6">
              Guardian returned status {normalizedAnalysisStatus ?? 'UNKNOWN'}.
              Please rerun the insight if this persists.
            </Text>
          </Stack>
        </Card>
      )
    }

    if (isInsightLoading) {
      return (
        <Card withBorder shadow="sm">
          <Group gap="sm">
            <Loader size="sm" color="carbon.6" />
            <Text c="carbon.6">Loading insight details…</Text>
          </Group>
        </Card>
      )
    }

    if (isInsightError) {
      return (
        <Card withBorder shadow="sm">
          <Stack gap="sm">
            <Title order={5}>Failed to load insight</Title>
            <Text c="red.6">
              Unable to fetch Guardian insight {selectedAnalysis.analysis_uuid}.
              Please try again later.
            </Text>
          </Stack>
        </Card>
      )
    }

    if (!diagnosticData || !diagnosticDetail || !metadata) {
      return (
        <Card withBorder shadow="sm">
          <Stack gap="sm">
            <Title order={5}>Insight unavailable</Title>
            <Text c="carbon.6">
              Guardian has not generated a performance report for this insight
              yet.
            </Text>
          </Stack>
        </Card>
      )
    }

    return (
      <>
        <Card withBorder shadow="sm">
          <Stack gap="sm">
            <Group gap="xs">
              <Title order={5}>Summary</Title>
            </Group>
            {diagnosticData.direct_cause?.summary ? (
              <Text>{diagnosticData.direct_cause.summary}</Text>
            ) : (
              <Text c="carbon.6">
                Guardian has not provided a direct cause for this insight.
              </Text>
            )}
            {diagnosticData.direct_cause?.evidences?.length ? (
              <>
                <Divider my="sm" />
                <Title order={6}>Evidences</Title>
                <Stack gap="sm">
                  {diagnosticData.direct_cause.evidences.map((evidence, idx) =>
                    renderEvidence(evidence, idx)
                  )}
                </Stack>
              </>
            ) : null}
            {diagnosticData.direct_cause?.related_sql && (
              <>
                <Divider my="sm" />
                <Title order={6}>Related SQL</Title>
                <Stack gap="xs">
                  <Group gap="xs">
                    <Text fw={600}>Digest:</Text>
                    <Code>
                      {diagnosticData.direct_cause.related_sql.sql_digest}
                    </Code>
                  </Group>
                  <CodeBlock language="sql">
                    {diagnosticData.direct_cause.related_sql.full_sql_text}
                  </CodeBlock>
                </Stack>
              </>
            )}
          </Stack>
        </Card>

        {metricSegments.map(([segmentKey, metrics]) => {
          const grouped: Record<MetricSection, MetricDetail[]> = {
            CRITICAL: [],
            WARNING: [],
            NORMAL: []
          }

          metrics.forEach((metric) => {
            const key = normalizeStatus(metric.status)
            grouped[key].push(metric)
          })

          return (
            <Card key={segmentKey} withBorder shadow="sm">
              <Stack gap="md">
                <Group justify="space-between">
                  <Group gap="xs">
                    <Badge color="blue.6" variant="outline">
                      Metrics
                    </Badge>
                    <Title order={5}>{segmentKey.toUpperCase()}</Title>
                  </Group>
                  <Text size="sm" c="carbon.6">
                    {metrics.length} metrics
                  </Text>
                </Group>
                <Accordion
                  multiple
                  value={expandedSections}
                  onChange={handleAccordionChange}
                  chevronPosition="left"
                >
                  {STATUS_ORDER.map((status) => {
                    const statusMetrics = grouped[status]
                    if (!statusMetrics.length) {
                      return null
                    }
                    const sectionKey = `${segmentKey}:${status}`
                    return (
                      <Accordion.Item value={sectionKey} key={sectionKey}>
                        <Accordion.Control>
                          <Group justify="space-between" wrap="nowrap">
                            <Group gap="xs">
                              <Badge
                                color={statusBadgeColor[status]}
                                variant="filled"
                              >
                                {statusLabel[status]}
                              </Badge>
                              <Text size="sm" c="carbon.6">
                                {statusMetrics.length} metrics
                              </Text>
                            </Group>
                          </Group>
                        </Accordion.Control>
                        <Accordion.Panel>
                          <div
                            style={{
                              display: 'grid',
                              gap: '1rem',
                              gridTemplateColumns: 'repeat(2, minmax(0, 1fr))'
                            }}
                          >
                            {statusMetrics.map((metric) => (
                              <div key={`${segmentKey}:${metric.name}`}>
                                {renderMetricContent(segmentKey, metric)}
                              </div>
                            ))}
                          </div>
                        </Accordion.Panel>
                      </Accordion.Item>
                    )
                  })}
                </Accordion>
              </Stack>
            </Card>
          )
        })}

        {diagnosticDetail.events?.length ? (
          <Card withBorder shadow="sm">
            <Stack gap="xs">
              <Group gap="xs">
                <Badge color="green.6" variant="outline">
                  Events
                </Badge>
                <Title order={5}>Recent Events</Title>
              </Group>
              {diagnosticDetail.events.map((event, idx) => (
                <Text key={idx} size="sm">
                  • {event}
                </Text>
              ))}
            </Stack>
          </Card>
        ) : null}
      </>
    )
  }

  return (
    <>
      <Stack gap="lg">
        {renderAnalysisSelector()}
        {renderStatusContent()}
      </Stack>
      {createAnalysisModal}
    </>
  )
}

export default GuardianInsight