import { describe, it, expect, vi } from 'vitest'
import { render, fireEvent } from '@testing-library/react'
import { LayersPanel } from '@/components/wysiwyg/LayersPanel'
import type { Frame } from '@/lib/wysiwyg/schema'

function makeFrame(): Frame {
  return {
    id: 'f1', width: 400, height: 300, background: '#ffffff',
    layers: [
      { id: 'l1', name: 'Base', visible: true, locked: false, objects: [] },
      { id: 'l2', name: 'Text', visible: true, locked: false, objects: [] },
    ],
  }
}

describe('LayersPanel', () => {
  it('reorders layers with up/down buttons', () => {
    const frame = makeFrame()
    const onChange = vi.fn()
    const { getByTestId, getAllByTestId } = render(<LayersPanel frame={frame} onChange={onChange} />)
    const items = getAllByTestId('layer-item')
    expect(items[0]).toHaveTextContent('Base')
    expect(items[1]).toHaveTextContent('Text')

    fireEvent.click(getByTestId('layer-down-l1'))
    expect(onChange).toHaveBeenCalled()
    const next = (onChange.mock.lastCall?.[0]) as Frame
    expect(next.layers[0].id).toBe('l2')
    expect(next.layers[1].id).toBe('l1')
  })

  it('toggles lock and visibility', () => {
    const frame = makeFrame()
    const { getByTestId } = render(<LayersPanel frame={frame} onChange={() => {}} />)
    fireEvent.click(getByTestId('layer-lock-l2'))
    fireEvent.click(getByTestId('layer-hide-l2'))
    // no crash; states toggled reflected in aria-pressed
    expect(getByTestId('layer-lock-l2')).toHaveAttribute('aria-pressed', 'true')
    expect(getByTestId('layer-hide-l2')).toHaveAttribute('aria-pressed', 'true')
  })
})