import { render, screen, fireEvent } from '@testing-library/react'
import { SplitPane } from '../workspace/SplitPane'
import { DualPaneWorkspace } from '../workspace/DualPaneWorkspace'

describe('SplitPane', () => {
  it('renders both panes', () => {
    render(<SplitPane first={<div>LEFT</div>} second={<div>RIGHT</div>} />)
    expect(screen.getByText('LEFT')).toBeInTheDocument()
    expect(screen.getByText('RIGHT')).toBeInTheDocument()
  })

  it('exposes an accessible resizer separator with aria values', () => {
    render(
      <SplitPane
        first={<div>L</div>}
        second={<div>R</div>}
        initialSize={40}
        minSize={20}
        maxSize={80}
      />
    )
    const sep = screen.getByRole('separator')
    expect(sep).toHaveAttribute('aria-orientation', 'vertical')
    expect(sep).toHaveAttribute('aria-valuenow', '40')
    expect(sep).toHaveAttribute('aria-valuemin', '20')
    expect(sep).toHaveAttribute('aria-valuemax', '80')
  })

  it('grows the first pane on ArrowRight and shrinks on ArrowLeft', () => {
    const onResize = jest.fn()
    render(
      <SplitPane first={<div>L</div>} second={<div>R</div>} initialSize={50} onResize={onResize} />
    )
    const sep = screen.getByRole('separator')
    fireEvent.keyDown(sep, { key: 'ArrowRight' })
    expect(Number(sep.getAttribute('aria-valuenow'))).toBeGreaterThan(50)
    fireEvent.keyDown(sep, { key: 'ArrowLeft' })
    fireEvent.keyDown(sep, { key: 'ArrowLeft' })
    expect(Number(sep.getAttribute('aria-valuenow'))).toBeLessThan(50)
    expect(onResize).toHaveBeenCalled()
  })

  it('clamps size to min/max', () => {
    render(<SplitPane first={<div>L</div>} second={<div>R</div>} initialSize={22} minSize={20} maxSize={80} />)
    const sep = screen.getByRole('separator')
    // hammer left many times — must not drop below min
    for (let i = 0; i < 20; i++) fireEvent.keyDown(sep, { key: 'ArrowLeft' })
    expect(Number(sep.getAttribute('aria-valuenow'))).toBe(20)
  })

  it('persists size to localStorage when storageKey is set', () => {
    window.localStorage.clear()
    render(<SplitPane first={<div>L</div>} second={<div>R</div>} initialSize={50} storageKey="sp-test" />)
    const sep = screen.getByRole('separator')
    fireEvent.keyDown(sep, { key: 'ArrowRight' })
    expect(window.localStorage.getItem('sp-test')).not.toBeNull()
  })
})

describe('DualPaneWorkspace', () => {
  it('renders left and right content with labels and an optional toolbar', () => {
    render(
      <DualPaneWorkspace
        leftLabel="Chat"
        rightLabel="Slides"
        toolbar={<div>TOOLBAR</div>}
        left={<div>CHAT_PANE</div>}
        right={<div>SLIDES_PANE</div>}
        layout="split"
      />
    )
    expect(screen.getByText('CHAT_PANE')).toBeInTheDocument()
    expect(screen.getByText('SLIDES_PANE')).toBeInTheDocument()
    expect(screen.getByText('TOOLBAR')).toBeInTheDocument()
  })

  it('stacks panes when layout="stack"', () => {
    const { container } = render(
      <DualPaneWorkspace left={<div>L</div>} right={<div>R</div>} layout="stack" />
    )
    const root = container.querySelector('[data-layout="stack"]')
    expect(root).toBeInTheDocument()
    // both panes still rendered when stacked
    expect(screen.getByText('L')).toBeInTheDocument()
    expect(screen.getByText('R')).toBeInTheDocument()
  })

  it('collapses a pane when collapsible and the collapse control is used', () => {
    render(
      <DualPaneWorkspace
        leftLabel="Chat"
        rightLabel="Slides"
        left={<div>CHAT_PANE</div>}
        right={<div>SLIDES_PANE</div>}
        layout="split"
        collapsible
      />
    )
    const collapseLeft = screen.getByRole('button', { name: /collapse chat/i })
    fireEvent.click(collapseLeft)
    expect(screen.queryByText('CHAT_PANE')).not.toBeInTheDocument()
    // right still visible, and an expand affordance appears
    expect(screen.getByText('SLIDES_PANE')).toBeInTheDocument()
    expect(screen.getByRole('button', { name: /expand chat/i })).toBeInTheDocument()
  })
})