import { describe, expect, it } from 'vitest'
import { render, screen } from '@testing-library/react'
import { axe } from 'vitest-axe'
import { tabBadgeTone, Tabs, TabsContent, TabsList, TabsTriggerWithBadge } from './Tabs'

describe('tabBadgeTone', () => {
  const warnAt = 5
  const dangerAt = 10

  it('returns neutral below the warning threshold', () => {
    expect(tabBadgeTone(0, warnAt, dangerAt)).toBe('neutral')
    expect(tabBadgeTone(4, warnAt, dangerAt)).toBe('neutral')
  })

  it('returns warning at and above warnAt but below dangerAt', () => {
    expect(tabBadgeTone(5, warnAt, dangerAt)).toBe('warning')
    expect(tabBadgeTone(9, warnAt, dangerAt)).toBe('warning')
  })

  it('returns danger at and above dangerAt (edge: danger wins over warning)', () => {
    expect(tabBadgeTone(10, warnAt, dangerAt)).toBe('danger')
    expect(tabBadgeTone(15, warnAt, dangerAt)).toBe('danger')
  })
})

describe('TabsTriggerWithBadge', () => {
  it('renders a badge when count is greater than zero', () => {
    render(
      <Tabs defaultValue="tab">
        <TabsList>
          <TabsTriggerWithBadge value="tab" count={3} warnAt={5} dangerAt={10}>
            Orders
          </TabsTriggerWithBadge>
        </TabsList>
      </Tabs>,
    )
    expect(screen.getByRole('tab', { name: /Orders/i })).toBeTruthy()
    expect(screen.getByText('3').tagName).toBe('SPAN')
  })

  it('does not render a badge when count is zero or undefined', () => {
    const { rerender } = render(
      <Tabs defaultValue="tab">
        <TabsList>
          <TabsTriggerWithBadge value="tab" count={0}>
            Orders
          </TabsTriggerWithBadge>
        </TabsList>
      </Tabs>,
    )
    expect(screen.queryByText('0')).toBeNull()

    rerender(
      <Tabs defaultValue="tab">
        <TabsList>
          <TabsTriggerWithBadge value="tab">Orders</TabsTriggerWithBadge>
        </TabsList>
      </Tabs>,
    )
    expect(screen.getByRole('tab', { name: 'Orders' })).toBeTruthy()
    expect(screen.getByRole('tab').textContent).toBe('Orders')
  })

  it('applies warning and danger badge tones at thresholds', () => {
    const { rerender } = render(
      <Tabs defaultValue="tab">
        <TabsList>
          <TabsTriggerWithBadge value="tab" count={5} warnAt={5} dangerAt={10}>
            Orders
          </TabsTriggerWithBadge>
        </TabsList>
      </Tabs>,
    )
    expect(screen.getByText('5').className).toContain('bg-warning')

    rerender(
      <Tabs defaultValue="tab">
        <TabsList>
          <TabsTriggerWithBadge value="tab" count={10} warnAt={5} dangerAt={10}>
            Orders
          </TabsTriggerWithBadge>
        </TabsList>
      </Tabs>,
    )
    expect(screen.getByText('10').className).toContain('bg-danger')
  })

  it('uses token-backed selected and focus state classes and stays axe-clean', async () => {
    const { container } = render(
      <Tabs defaultValue="tab">
        <TabsList>
          <TabsTriggerWithBadge value="tab">Orders</TabsTriggerWithBadge>
        </TabsList>
        <TabsContent value="tab">Orders panel</TabsContent>
      </Tabs>,
    )
    const tab = screen.getByRole('tab', { name: 'Orders' })
    expect(tab.className).toContain('data-[state=active]:bg-[var(--mod-color-accent-9)]')
    expect(tab.className).toContain('focus-visible:outline-[var(--mod-focus-ring-color)]')
    await expect(axe(container)).resolves.toHaveNoViolations()
  })
})