import { App, createApp, h, nextTick } from 'vue'
import { afterEach, beforeAll, describe, expect, it } from 'vitest'

let InfoPanel: any

interface RenderResult {
    app: App
    el: HTMLDivElement
}

const renderedApps: RenderResult[] = []

beforeAll(async () => {
    InfoPanel = (await import('../../../components/infoPanel/index.vue')).default
})

const renderPanel = async (
    props: Record<string, any> = {},
    slots: Record<string, () => any> = {
        default: () => h('div', { class: 'panel-slot' }, 'Test content')
    }
) => {
    const el = document.createElement('div')
    document.body.appendChild(el)

    const app = createApp({
        render () {
            return h(InfoPanel, props, slots)
        }
    })

    app.mount(el)
    await nextTick()

    const result = { app, el }
    renderedApps.push(result)
    return result
}

const getPanel = () => {
    const panel = document.body.querySelector('.boardPanel') as HTMLElement | null
    expect(panel).not.toBeNull()
    return panel!
}

afterEach(() => {
    while (renderedApps.length) {
        const current = renderedApps.pop()!
        current.app.unmount()
        current.el.remove()
    }
    document.body.innerHTML = ''
})

describe('components/infoPanel', () => {
    it('正常挂载并渲染默认插槽内容', async () => {
        await renderPanel({
            config: {
                card: true
            }
        })

        const panel = getPanel()
        expect(panel.textContent).toContain('Test content')
    })

    it('config.card 为 true 时应用卡片默认样式', async () => {
        await renderPanel({
            config: {
                card: true
            }
        })

        const panel = getPanel()
        expect(panel.style.margin).toBe('20px')
        expect(panel.style.borderRadius).toBe('4px')
        expect(panel.style.boxShadow).not.toBe('')
    })

    it('未传 config 时正常渲染且不附加卡片内联样式', async () => {
        await renderPanel()

        const panel = getPanel()
        expect(panel.textContent).toContain('Test content')
        expect(panel.getAttribute('style') || '').toBe('')
        expect(panel.style.margin).toBe('')
        expect(panel.style.borderRadius).toBe('')
    })

    it('config.customStyle 存在时应用自定义样式', async () => {
        await renderPanel({
            config: {
                customStyle: {
                    margin: '8px',
                    borderRadius: '12px',
                    background: 'rgb(255, 0, 0)'
                }
            }
        })

        const panel = getPanel()
        expect(panel.style.margin).toBe('8px')
        expect(panel.style.borderRadius).toBe('12px')
        expect(panel.style.background).toBe('rgb(255, 0, 0)')
    })

    it('config.card 与 customStyle 同时存在时优先使用 card 样式', async () => {
        await renderPanel({
            config: {
                card: true,
                customStyle: {
                    margin: '8px',
                    borderRadius: '12px'
                }
            }
        })

        const panel = getPanel()
        expect(panel.style.margin).toBe('20px')
        expect(panel.style.borderRadius).toBe('4px')
    })
})