import { mount } from '@vue/test-utils'
import { beforeEach, describe, expect, it } from 'vitest'
import CollapsiblePanel from './components/CollapsiblePanel.vue'

describe('CollapsiblePanel', () => {
  beforeEach(() => {
    localStorage.clear()
  })

  it('renders the title and slot when open by default', () => {
    const wrapper = mount(CollapsiblePanel, {
      props: { title: 'Strategy' },
      slots: { default: '<p>content</p>' },
    })
    expect(wrapper.text()).toContain('Strategy')
    expect(wrapper.text()).toContain('content')
    expect(wrapper.find('button').attributes('aria-expanded')).toBe('true')
  })

  it('hides the slot after clicking the header', async () => {
    const wrapper = mount(CollapsiblePanel, {
      props: { title: 'Strategy' },
      slots: { default: '<p>content</p>' },
    })
    await wrapper.find('button').trigger('click')
    expect(wrapper.find('button').attributes('aria-expanded')).toBe('false')
    // v-show keeps the node but hides it.
    expect(wrapper.find('div[style*="display: none"]').exists()).toBe(true)
  })

  it('shows the summary only when collapsed', async () => {
    const wrapper = mount(CollapsiblePanel, {
      props: { title: 'Backtest', summary: 'BTC/USDT 5m' },
      slots: { default: '<p>content</p>' },
    })
    expect(wrapper.text()).not.toContain('BTC/USDT 5m')
    await wrapper.find('button').trigger('click')
    expect(wrapper.text()).toContain('BTC/USDT 5m')
  })

  it('persists the collapsed state in localStorage', async () => {
    const wrapper = mount(CollapsiblePanel, {
      props: { title: 'Backtest', storageKey: 'backtest' },
      slots: { default: '<p>content</p>' },
    })
    await wrapper.find('button').trigger('click')
    expect(localStorage.getItem('panel:backtest')).toBe('0')

    // A fresh mount with the same key starts collapsed.
    const remounted = mount(CollapsiblePanel, {
      props: { title: 'Backtest', storageKey: 'backtest' },
      slots: { default: '<p>content</p>' },
    })
    expect(remounted.find('button').attributes('aria-expanded')).toBe('false')
  })

  it('honours defaultOpen when nothing is stored', () => {
    const wrapper = mount(CollapsiblePanel, {
      props: { title: 'Strategy', defaultOpen: false },
      slots: { default: '<p>content</p>' },
    })
    expect(wrapper.find('button').attributes('aria-expanded')).toBe('false')
  })
})