import { describe, it, expect, beforeEach, afterEach } from 'vitest'
import { fireEvent, render, screen } from '@testing-library/react'
import { Provider } from '../provider/widget-provider'
import {
  clearAllWidgetStores,
  useTransformEnabled,
  useWidgetId,
} from '../stores'
import { Category } from './category'
import { StackToggle } from '../actions/stack-toggle/stack-toggle'
import type { CategoryWidgetData } from './types'

beforeEach(() => clearAllWidgetStores())
afterEach(() => clearAllWidgetStores())

// Replicates the stack-toggle branch of `CategoryActionWiring` from the
// storybook composer. The composer-level wiring isn't testable in
// `apps/storybook` (no vitest infra), so we re-implement just the
// stack-toggle branch here and assert the action → bridge → UI path
// end-to-end through Provider → action → bridge → UI.
function Wired() {
  const id = useWidgetId()
  const stacked = useTransformEnabled(id, 'stack-toggle')
  return (
    <Category series={[{ name: 'Women' }, { name: 'Men' }]} stacked={stacked} />
  )
}

const DATA: CategoryWidgetData = [
  [
    { name: 'A', value: 45 },
    { name: 'B', value: 30 },
  ],
  [
    { name: 'A', value: 32 },
    { name: 'B', value: 18 },
  ],
]

describe('Category + StackToggle composer wiring', () => {
  it('default (StackToggle off) → multi-series renders one bar per series per row', () => {
    const { container } = render(
      <Provider id='cat-stack-off' data={DATA}>
        <StackToggle />
        <Wired />
      </Provider>,
    )
    // CategoryRowMulti renders one track per series per row → 2 rows × 2 = 4.
    expect(container.querySelectorAll('[data-size]').length).toBe(4)
    // No breakdown text from the stacked row.
    expect(screen.queryByText(/Women: 45/)).toBeNull()
  })

  it('clicking the stack action flips multi-series rendering to stacked rows', () => {
    const { container } = render(
      <Provider id='cat-stack-on' data={DATA}>
        <StackToggle />
        <Wired />
      </Provider>,
    )
    fireEvent.click(screen.getByRole('button', { name: /stack|unstack/i }))
    // Stacked rendering: one track per row → 2 tracks total.
    expect(container.querySelectorAll('[data-size]').length).toBe(2)
    // Breakdown text appears.
    expect(screen.getByText('Women: 45')).toBeTruthy()
    expect(screen.getByText('Men: 32')).toBeTruthy()
    // Totals show in the header.
    expect(screen.getByText('77')).toBeTruthy() // A: 45 + 32
    expect(screen.getByText('48')).toBeTruthy() // B: 30 + 18
  })

  it('toggling off again restores CategoryRowMulti rendering', () => {
    const { container } = render(
      <Provider id='cat-stack-restore' data={DATA}>
        <StackToggle />
        <Wired />
      </Provider>,
    )
    const button = screen.getByRole('button', { name: /stack|unstack/i })
    fireEvent.click(button) // on
    fireEvent.click(button) // off
    expect(container.querySelectorAll('[data-size]').length).toBe(4)
    expect(screen.queryByText(/Women: 45/)).toBeNull()
  })
})