import * as React from 'react'
import { render, screen, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import { CStepper } from '../index'

const stepsMock = [
  { label: 'Step 1', content: <div>Content 1</div> },
  { label: 'Step 2', content: <div>Content 2</div> },
  { label: 'Step 3', content: <div>Content 3</div> },
]

test('loads and displays CStepper component', async () => {
  const { container } = render(<CStepper steps={stepsMock} />)
  expect(container).toMatchSnapshot()
})

test('CStepper renders vertical layout', async () => {
  const { container } = render(<CStepper steps={stepsMock} layout="vertical" />)
  expect(container).toMatchSnapshot()
})

test('CStepper disables future steps in linear mode', async () => {
  render(<CStepper steps={stepsMock} linear={true} />)

  const buttons = screen.getAllByRole('tab')
  expect(buttons[0]).toBeEnabled()
  expect(buttons[1]).toBeEnabled() // next step is enabled
  expect(buttons[2]).toBeDisabled() // steps beyond next are disabled
})

test('CStepper allows all steps in non-linear mode', async () => {
  render(<CStepper steps={stepsMock} linear={false} />)

  const buttons = screen.getAllByRole('tab')
  expect(buttons[0]).toBeEnabled()
  expect(buttons[1]).toBeEnabled()
  expect(buttons[2]).toBeEnabled()
})

test('CStepper calls onStepChange when step is clicked', async () => {
  const handleStepChange = jest.fn()
  render(<CStepper steps={stepsMock} linear={false} onStepChange={handleStepChange} />)

  const buttons = screen.getAllByRole('tab')
  fireEvent.click(buttons[2])

  expect(handleStepChange).toHaveBeenCalledWith(3) // stepNumber = index + 1
})

test('CStepper renders active step content in horizontal layout', async () => {
  const { container } = render(<CStepper steps={stepsMock} layout="horizontal" />)

  expect(screen.getByText('Content 1')).toBeVisible()
  const panels = container.querySelectorAll('[role="tabpanel"]')
  expect(panels[0]).toHaveClass('active')
  expect(panels[1]).not.toHaveClass('active')
  expect(panels[2]).not.toHaveClass('active')
})

test('CStepper calls onStepChange when navigating to last step', async () => {
  const handleStepChange = jest.fn()
  render(<CStepper steps={stepsMock} onStepChange={handleStepChange} linear={false} />)

  const buttons = screen.getAllByRole('tab')
  fireEvent.click(buttons[2])

  expect(handleStepChange).toHaveBeenCalledWith(3)
})

test('CStepper resets correctly', async () => {
  const handleReset = jest.fn()
  const stepperRef = React.createRef<any>()

  render(<CStepper ref={stepperRef} steps={stepsMock} onReset={handleReset} />)

  stepperRef.current?.next()
  stepperRef.current?.reset()

  expect(handleReset).toHaveBeenCalled()
})

test('CStepper works in uncontrolled mode with defaultActiveStepIndex', async () => {
  const { container } = render(<CStepper steps={stepsMock} defaultActiveStepIndex={1} />)

  const panels = container.querySelectorAll('[role="tabpanel"]')
  expect(panels[1]).toHaveClass('active')
  expect(panels[0]).not.toHaveClass('active')
})

test('CStepper works in controlled mode with activeStepIndex', async () => {
  const { container, rerender } = render(<CStepper steps={stepsMock} activeStepIndex={0} />)

  let panels = container.querySelectorAll('[role="tabpanel"]')
  expect(panels[0]).toHaveClass('active')

  rerender(<CStepper steps={stepsMock} activeStepIndex={2} />)

  panels = container.querySelectorAll('[role="tabpanel"]')
  expect(panels[2]).toHaveClass('active')
  expect(panels[0]).not.toHaveClass('active')
})