import { describe, it, expect } from 'vitest'
import { render } from '@testing-library/react'

import { MetricsCard } from '../metrics-card'

describe('MetricsCard', () => {
  it('renders title and items', () => {
    const { container, getByText } = render(
      <MetricsCard title="Live" items={[{ label: 'Loss', value: 0.123 }]} />
    )
    expect(getByText('Live')).toBeTruthy()
    expect(getByText('Loss')).toBeTruthy()
    expect(container.querySelector('dl')).toBeTruthy()
  })

  it('formats number values with locale grouping', () => {
    const { getByText } = render(
      <MetricsCard items={[{ label: 'Steps', value: 1234567, format: 'number' }]} />
    )
    expect(getByText('1,234,567')).toBeTruthy()
  })

  it('formats fractional percent (<=1) by multiplying', () => {
    const { getByText } = render(
      <MetricsCard items={[{ label: 'Acc', value: 0.123, format: 'percent' }]} />
    )
    expect(getByText('12.3%')).toBeTruthy()
  })

  it('formats already-percent values (>1) without multiplying', () => {
    const { getByText } = render(
      <MetricsCard items={[{ label: 'Acc', value: 87.5, format: 'percent' }]} />
    )
    expect(getByText('87.5%')).toBeTruthy()
  })

  it('formats expo as exponential to 2 sig figs', () => {
    const { getByText } = render(
      <MetricsCard items={[{ label: 'LR', value: 0.00032, format: 'expo' }]} />
    )
    expect(getByText('3.20e-4')).toBeTruthy()
  })

  it('formats eta seconds into "Hh Mm Ss"', () => {
    const { getByText } = render(
      <MetricsCard items={[{ label: 'ETA', value: 3725, format: 'eta' }]} />
    )
    expect(getByText('1h 2m 5s')).toBeTruthy()
  })

  it('formats duration with no hour when under an hour', () => {
    const { getByText } = render(
      <MetricsCard items={[{ label: 'Took', value: 125, format: 'duration' }]} />
    )
    expect(getByText('2m 5s')).toBeTruthy()
  })

  it('renders em dash for non-finite numeric values', () => {
    const { getByText } = render(
      <MetricsCard items={[{ label: 'X', value: Number.NaN, format: 'number' }]} />
    )
    expect(getByText('—')).toBeTruthy()
  })

  it('passes through string values verbatim', () => {
    const { getByText } = render(<MetricsCard items={[{ label: 'Mode', value: 'training' }]} />)
    expect(getByText('training')).toBeTruthy()
  })

  it('renders progress footer when total > 0', () => {
    const { getByText } = render(
      <MetricsCard items={[{ label: 'Step', value: 1 }]} progress={{ value: 25, total: 100 }} />
    )
    expect(getByText('25 / 100')).toBeTruthy()
  })

  it('omits progress footer when total is 0', () => {
    const { container } = render(
      <MetricsCard items={[{ label: 'Step', value: 1 }]} progress={{ value: 0, total: 0 }} />
    )
    expect(container.textContent).not.toContain('/ 0')
  })

  it('forwards className to the Card', () => {
    const { container } = render(
      <MetricsCard items={[{ label: 'X', value: 1 }]} className="custom-mc" />
    )
    expect(container.querySelector('.custom-mc')).toBeTruthy()
  })
})
