import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { KpiStrip } from './KpiStrip'
import type { KpiItem } from './KpiStrip'

const sampleItems: KpiItem[] = [
  { label: 'Total', value: 42 },
  { label: 'Active', value: '18', trend: { label: '+3', variant: 'success' } },
  { label: 'Errors', value: 5, subtitle: 'last 24h', sparkline: [1, 3, 2, 5, 4] },
]

describe('KpiStrip', () => {
  it('renders all items', () => {
    const { container } = render(<KpiStrip items={sampleItems} />)
    const cards = container.querySelectorAll('[class*="kpiCard"]')
    expect(cards).toHaveLength(3)
  })

  it('renders labels and values', () => {
    render(<KpiStrip items={sampleItems} />)
    expect(screen.getByText('Total')).toBeInTheDocument()
    expect(screen.getByText('42')).toBeInTheDocument()
    expect(screen.getByText('Active')).toBeInTheDocument()
    expect(screen.getByText('18')).toBeInTheDocument()
  })

  it('renders trend with correct text', () => {
    render(<KpiStrip items={sampleItems} />)
    expect(screen.getByText('+3')).toBeInTheDocument()
  })

  it('applies variant class to trend (trendSuccess)', () => {
    render(<KpiStrip items={sampleItems} />)
    const trend = screen.getByText('+3')
    expect(trend.className).toContain('trendSuccess')
  })

  it('hides trend when omitted', () => {
    render(<KpiStrip items={[{ label: 'No Trend', value: 10 }]} />)
    const { container } = render(<KpiStrip items={[{ label: 'No Trend2', value: 10 }]} />)
    const trends = container.querySelectorAll('[class*="trend"]')
    expect(trends).toHaveLength(0)
  })

  it('renders subtitle', () => {
    render(<KpiStrip items={sampleItems} />)
    expect(screen.getByText('last 24h')).toBeInTheDocument()
  })

  it('renders sparkline when data provided', () => {
    const { container } = render(<KpiStrip items={sampleItems} />)
    const svgs = container.querySelectorAll('svg')
    expect(svgs.length).toBeGreaterThanOrEqual(1)
  })

  it('accepts className prop', () => {
    const { container } = render(<KpiStrip items={sampleItems} className="custom" />)
    expect(container.firstChild).toHaveClass('custom')
  })

  it('handles empty items array', () => {
    const { container } = render(<KpiStrip items={[]} />)
    const cards = container.querySelectorAll('[class*="kpiCard"]')
    expect(cards).toHaveLength(0)
  })

  it('uses default border color (--amber) when borderColor omitted', () => {
    const { container } = render(<KpiStrip items={[{ label: 'Default', value: 1 }]} />)
    const card = container.querySelector('[class*="kpiCard"]') as HTMLElement
    expect(card.style.getPropertyValue('--kpi-border-color')).toBe('var(--amber)')
  })

  it('applies custom borderColor', () => {
    const items: KpiItem[] = [{ label: 'Custom', value: 1, borderColor: 'var(--teal)' }]
    const { container } = render(<KpiStrip items={items} />)
    const card = container.querySelector('[class*="kpiCard"]') as HTMLElement
    expect(card.style.getPropertyValue('--kpi-border-color')).toBe('var(--teal)')
  })

  it('renders trend with muted variant by default', () => {
    const items: KpiItem[] = [{ label: 'Muted', value: 1, trend: { label: '0%' } }]
    render(<KpiStrip items={items} />)
    const trend = screen.getByText('0%')
    expect(trend.className).toContain('trendMuted')
  })
})
