import {fireEvent, render, screen} from '@testing-library/react'
import {expect, test} from 'vitest'
import {MetricChart} from './MetricChart'

const series = {label: 'Errors', statistic: 'Sum', periodSeconds: 60, points: [
    {timestamp: '2026-10-25T10:00:00Z', value: 3},
    {timestamp: '2026-10-25T10:01:00Z', value: 7},
]}

test('draws the line, labels the latest value and the threshold, and tabulates the points', () => {
    const {container} = render(<MetricChart series={series} threshold={5}/>)

    expect(container.querySelector('.metric-chart-line')?.getAttribute('d')).toMatch(/^M[\d.]+,[\d.]+ L[\d.]+,[\d.]+$/)
    expect(screen.getByText('Threshold 5')).toBeInTheDocument()
    expect(screen.getByRole('img', {name: /Errors \(Sum\), 2 points; latest 7 .*threshold 5/})).toBeInTheDocument()
    expect(screen.getByText('Data table (2 points)')).toBeInTheDocument()
    expect(container.querySelectorAll('.metric-chart-table tbody tr')).toHaveLength(2)
})

test('shows the tooltip from the keyboard, value first', () => {
    render(<MetricChart series={series}/>)
    const chart = screen.getByRole('img')

    fireEvent.focus(chart)
    expect(screen.getByRole('status')).toHaveTextContent(/^7Errors · Sum/)
    fireEvent.keyDown(chart, {key: 'ArrowLeft'})
    expect(screen.getByRole('status')).toHaveTextContent(/^3/)
    fireEvent.keyDown(chart, {key: 'Escape'})
    expect(screen.queryByRole('status')).not.toBeInTheDocument()
})

test('says when there is no data', () => {
    render(<MetricChart series={{...series, points: []}}/>)
    expect(screen.getByText('No data points in this time range.')).toBeInTheDocument()
})