import { describe, it, expect } from 'vitest'
import { mountSuspended } from '@nuxt/test-utils/runtime'
import CameraViewer from '../../app/components/CameraViewer.vue'

describe('CameraViewer (device stream)', () => {
  it('renders device name and close button', async () => {
    const camera = {
      id: 't1',
      name: 'Test Camera',
      streamUrl: 'https://example.com/stream.mjpg',
      sourceType: 'mjpeg',
    }
    const wrapper = await mountSuspended(CameraViewer, {
      props: { camera },
    })
    expect(wrapper.text()).toContain('Test Camera')
    expect(wrapper.find('button[aria-label="Close panel"]').exists()).toBe(true)
  })

  it('does not set img src for non-http streamUrl', async () => {
    const camera = {
      id: 't2',
      name: 'Bad',
      streamUrl: 'javascript:alert(1)',
      sourceType: 'mjpeg',
    }
    const wrapper = await mountSuspended(CameraViewer, {
      props: { camera },
    })
    const img = wrapper.find('img')
    expect(img.exists()).toBe(false)
  })

  it('uses safe http streamUrl for img', async () => {
    const camera = {
      id: 't3',
      name: 'OK',
      streamUrl: 'https://example.com/cam.mjpg',
      sourceType: 'mjpeg',
    }
    const wrapper = await mountSuspended(CameraViewer, {
      props: { camera },
    })
    const img = wrapper.find('img')
    expect(img.exists()).toBe(true)
    expect(img.attributes('src')).toBe('https://example.com/cam.mjpg')
  })

  it('emits close when close button clicked', async () => {
    const camera = {
      id: 't5',
      name: 'Close me',
      streamUrl: '',
      sourceType: 'mjpeg',
    }
    const wrapper = await mountSuspended(CameraViewer, { props: { camera } })
    await wrapper.find('button[aria-label="Close panel"]').trigger('click')
    expect(wrapper.emitted('close')).toHaveLength(1)
  })

  it('shows stream unavailable when img errors', async () => {
    const camera = {
      id: 't6',
      name: 'Broken',
      streamUrl: 'https://example.com/bad.mjpg',
      sourceType: 'mjpeg',
    }
    const wrapper = await mountSuspended(CameraViewer, { props: { camera } })
    const img = wrapper.find('img')
    await img.trigger('error')
    await wrapper.vm.$nextTick()
    expect(wrapper.text()).toContain('Stream unavailable')
  })

  it('renders video element for hls sourceType', async () => {
    const camera = {
      id: 't7',
      name: 'HLS Camera',
      streamUrl: 'https://example.com/stream.m3u8',
      sourceType: 'hls',
    }
    const wrapper = await mountSuspended(CameraViewer, { props: { camera } })
    expect(wrapper.find('video').exists()).toBe(true)
  })
})