import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { SpreadUI } from './spread-ui'

describe('<SpreadUI>', () => {
  it('renders a single min/max pair', () => {
    render(<SpreadUI items={[{ min: 10, max: 100 }]} />)
    expect(screen.getByText('10')).toBeTruthy()
    expect(screen.getByText('100')).toBeTruthy()
    expect(screen.getByText('-')).toBeTruthy()
  })

  it('applies the formatter to both bounds', () => {
    render(
      <SpreadUI
        items={[{ min: 1234, max: 9876 }]}
        formatter={(n) => n.toLocaleString('en-US')}
      />,
    )
    expect(screen.getByText('1,234')).toBeTruthy()
    expect(screen.getByText('9,876')).toBeTruthy()
  })

  it('renders prefix and suffix when provided', () => {
    render(
      <SpreadUI
        items={[{ min: 5, max: 95, prefix: 'Range', suffix: 'kWh' }]}
      />,
    )
    expect(screen.getByText('Range')).toBeTruthy()
    expect(screen.getByText('kWh')).toBeTruthy()
  })

  it('renders multiple items as separate rows', () => {
    render(
      <SpreadUI
        items={[
          { min: 0, max: 100, prefix: 'Q1' },
          { min: 50, max: 200, prefix: 'Q2' },
          { min: 100, max: 300, prefix: 'Q3' },
        ]}
      />,
    )
    expect(screen.getByText('Q1')).toBeTruthy()
    expect(screen.getByText('Q2')).toBeTruthy()
    expect(screen.getByText('Q3')).toBeTruthy()
    // One separator dash per item.
    expect(screen.getAllByText('-')).toHaveLength(3)
  })

  it('renders nothing visible when items is empty', () => {
    const { container } = render(<SpreadUI items={[]} />)
    expect(container.querySelectorAll('h5').length).toBe(0)
  })

  it('renders a series avatar with the first letter of the name', () => {
    render(
      <SpreadUI
        items={[
          { min: 1, max: 9, series: { name: 'Revenue', color: '#1E5BB5' } },
        ]}
      />,
    )
    expect(screen.getByLabelText('Revenue').textContent).toBe('R')
  })

  it('renders the note when provided', () => {
    render(<SpreadUI items={[{ min: 1, max: 9, note: 'Last 7 days' }]} />)
    expect(screen.getByText('Last 7 days')).toBeTruthy()
  })

  it('omits series / note when fields are absent', () => {
    const { container } = render(<SpreadUI items={[{ min: 1, max: 2 }]} />)
    expect(container.querySelector('.MuiAvatar-root')).toBeNull()
    expect(container.querySelector('p')).toBeNull()
  })

  it('renders the row in order: Series → Prefix → Min → — → Max → Suffix', () => {
    const { container } = render(
      <SpreadUI
        items={[
          {
            min: 10,
            max: 20,
            prefix: '$',
            suffix: 'USD',
            series: { name: 'Revenue' },
          },
        ]}
      />,
    )
    // h5 / h6 / caption typography variants cover prefix, value, separator, suffix.
    const typographies = Array.from(
      container.querySelectorAll('.MuiTypography-root'),
    ).map((el) => el.textContent ?? '')
    // The Series avatar is not Typography; we look at the inline-row text.
    expect(typographies).toEqual(['$', '10', '-', '20', 'USD'])
  })

  it('still renders both bounds when a per-item color is supplied', () => {
    // Color threading goes through MUI's `sx` so the runtime inline style
    // isn't populated in JSDOM — we just check that both bounds render
    // normally with the color prop set.
    render(<SpreadUI items={[{ min: 1, max: 2, color: 'success.main' }]} />)
    expect(screen.getByText('1')).toBeTruthy()
    expect(screen.getByText('2')).toBeTruthy()
  })
})