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

const YT_URL = 'https://www.youtube.com/watch?v=vz7F8bc1QQ0'
const YT_ID = 'vz7F8bc1QQ0'
const IG_URL = 'https://www.instagram.com/p/AbCdEfGhIjK/'

describe('LiteMediaEmbed — YouTube facade', () => {
  it('renders the poster (thumbnail + play button) and NO iframe initially', () => {
    const wrapper = mount(LiteMediaEmbed, {
      props: { url: YT_URL, type: 'youtube', alt: 'Reindeer Dash 2025' },
    })

    // No heavy iframe until the user asks for it.
    expect(wrapper.find('iframe').exists()).toBe(false)

    // Poster = the documented YouTube thumbnail for the video id.
    const poster = wrapper.find('img.dcs-lite-embed__poster')
    expect(poster.exists()).toBe(true)
    expect(poster.attributes('src')).toBe(
      `https://img.youtube.com/vi/${YT_ID}/hqdefault.jpg`,
    )
    expect(poster.attributes('loading')).toBe('lazy')

    // Accessible, keyboard-operable play affordance.
    const button = wrapper.find('button.dcs-lite-embed__button')
    expect(button.exists()).toBe(true)
    expect(button.attributes('type')).toBe('button')
    expect(button.attributes('aria-label')).toBe('Play video: Reindeer Dash 2025')
  })

  it('injects the real nocookie autoplay iframe on click and drops the poster button', async () => {
    const wrapper = mount(LiteMediaEmbed, {
      props: { url: YT_URL, type: 'youtube', alt: 'Reindeer Dash 2025' },
    })

    await wrapper.find('button.dcs-lite-embed__button').trigger('click')

    const iframe = wrapper.find('iframe.dcs-lite-embed__frame')
    expect(iframe.exists()).toBe(true)
    expect(iframe.attributes('src')).toBe(
      `https://www.youtube-nocookie.com/embed/${YT_ID}?rel=0&autoplay=1&playsinline=1`,
    )
    expect(iframe.attributes('allow')).toContain('autoplay')
    expect(iframe.attributes('title')).toBe('Reindeer Dash 2025')

    // The poster button is gone once the iframe is live.
    expect(wrapper.find('button.dcs-lite-embed__button').exists()).toBe(false)
  })

  it('activates via keyboard (Enter on the play button)', async () => {
    const wrapper = mount(LiteMediaEmbed, {
      props: { url: YT_URL, type: 'youtube', alt: 'Reindeer Dash 2025' },
    })

    expect(wrapper.find('iframe').exists()).toBe(false)

    await wrapper.find('button.dcs-lite-embed__button').trigger('keydown.enter')

    expect(wrapper.find('iframe.dcs-lite-embed__frame').exists()).toBe(true)
  })

  it('activates via keyboard (Space on the play button)', async () => {
    const wrapper = mount(LiteMediaEmbed, {
      props: { url: YT_URL, type: 'youtube' },
    })

    await wrapper.find('button.dcs-lite-embed__button').trigger('keydown.space')

    expect(wrapper.find('iframe.dcs-lite-embed__frame').exists()).toBe(true)
  })

  it('accepts a bare 11-char video id', () => {
    const wrapper = mount(LiteMediaEmbed, {
      props: { url: YT_ID, type: 'youtube' },
    })

    expect(wrapper.find('img.dcs-lite-embed__poster').attributes('src')).toBe(
      `https://img.youtube.com/vi/${YT_ID}/hqdefault.jpg`,
    )
  })
})

describe('LiteMediaEmbed — Instagram facade', () => {
  it('renders a branded glyph poster (no hotlinked thumbnail) and no iframe initially', () => {
    const wrapper = mount(LiteMediaEmbed, {
      props: { url: IG_URL, type: 'instagram', alt: 'Latest reel' },
    })

    expect(wrapper.find('iframe').exists()).toBe(false)
    // No image is hotlinked; a branded poster stands in.
    expect(wrapper.find('img.dcs-lite-embed__poster').exists()).toBe(false)
    expect(wrapper.find('.dcs-lite-embed__poster--brand').exists()).toBe(true)
    expect(wrapper.find('button.dcs-lite-embed__button').attributes('aria-label')).toBe(
      'Load Instagram post: Latest reel',
    )
  })

  it('uses a caller-supplied poster override when present', () => {
    const wrapper = mount(LiteMediaEmbed, {
      props: {
        url: IG_URL,
        type: 'instagram',
        poster: 'https://files.duffcloudservices.com/kdh/assets/ig-cover.webp',
      },
    })

    const poster = wrapper.find('img.dcs-lite-embed__poster')
    expect(poster.exists()).toBe(true)
    expect(poster.attributes('src')).toBe(
      'https://files.duffcloudservices.com/kdh/assets/ig-cover.webp',
    )
  })

  it('injects the /embed/ iframe on activation', async () => {
    const wrapper = mount(LiteMediaEmbed, {
      props: { url: IG_URL, type: 'instagram' },
    })

    await wrapper.find('button.dcs-lite-embed__button').trigger('click')

    const iframe = wrapper.find('iframe.dcs-lite-embed__frame')
    expect(iframe.exists()).toBe(true)
    expect(iframe.attributes('src')).toBe('https://www.instagram.com/p/AbCdEfGhIjK/embed/')
  })
})

describe('LiteMediaEmbed — hostile url never reaches the iframe src (no CSP backstop on customer sites)', () => {
  // A portal-editable / visual-editor-AI-controlled carousel `url` must never be
  // passed verbatim into <iframe src>. Invalid/hostile urls fall through to the
  // safe default slot rather than rendering a facade over an untrusted iframe.
  // These produce NO renderable embed at all (invalid scheme/host) → the
  // component renders nothing (no facade button, no media <img> carrying the url).
  const inert = [
    { type: 'youtube', url: 'javascript:alert(document.domain)' },
    { type: 'instagram', url: 'javascript:alert(1)//' },
    { type: 'instagram', url: 'https://evil.com/x' },
    { type: 'instagram', url: 'data:text/html,<script>alert(1)</script>' },
    { type: 'instagram', url: 'http://www.instagram.com/p/AbCdEfGhIjK/' }, // non-https
    { type: 'instagram', url: 'https://instagram.com.evil.com/p/x/' }, // lookalike host
  ] as const

  for (const { type, url } of inert) {
    it(`renders nothing (no button, no iframe, no leaked url) for ${type} url ${url}`, () => {
      const wrapper = mount(LiteMediaEmbed, { props: { url, type } })

      expect(wrapper.find('button.dcs-lite-embed__button').exists()).toBe(false)
      expect(wrapper.find('iframe').exists()).toBe(false)
      // The untrusted url is never emitted into any attribute (no broken <img src>).
      expect(wrapper.html()).not.toContain('javascript:')
      expect(wrapper.html()).not.toContain('evil.com')
      expect(wrapper.html()).not.toContain('data:text/html')
    })
  }

  it('extracts an id from a ?v= param on any host but only ever embeds via youtube-nocookie (never the source host)', async () => {
    // extractYouTubeId pulls the sanitised 11-char id; the host is discarded, so
    // the iframe origin is always the hardcoded youtube-nocookie, never evil.com.
    const wrapper = mount(LiteMediaEmbed, {
      props: { url: 'https://evil.com/watch?v=notArealID1', type: 'youtube' },
    })
    await wrapper.find('button.dcs-lite-embed__button').trigger('click')
    const src = wrapper.find('iframe.dcs-lite-embed__frame').attributes('src') ?? ''
    expect(src.startsWith('https://www.youtube-nocookie.com/embed/notArealID1')).toBe(true)
    expect(wrapper.html()).not.toContain('evil.com')
  })

  it('accepts a legitimate www.instagram.com url and rebuilds a clean /embed/ src', async () => {
    const wrapper = mount(LiteMediaEmbed, {
      props: { url: 'https://www.instagram.com/p/AbCdEfGhIjK/?igshid=abc#frag', type: 'instagram' },
    })
    await wrapper.find('button.dcs-lite-embed__button').trigger('click')
    // Query/fragment/userinfo are dropped — only host + path survive the rebuild.
    expect(wrapper.find('iframe.dcs-lite-embed__frame').attributes('src')).toBe(
      'https://www.instagram.com/p/AbCdEfGhIjK/embed/',
    )
  })
})

describe('LiteMediaEmbed — non-embed types fall through to existing behavior', () => {
  it('renders a plain <img> for image type (no facade button, no iframe)', () => {
    const wrapper = mount(LiteMediaEmbed, {
      props: { url: '/images/staff/kim.webp', type: 'image', alt: 'Kim Duff' },
    })

    expect(wrapper.find('button.dcs-lite-embed__button').exists()).toBe(false)
    expect(wrapper.find('iframe').exists()).toBe(false)

    const img = wrapper.find('img.dcs-lite-embed__media')
    expect(img.exists()).toBe(true)
    expect(img.attributes('src')).toBe('/images/staff/kim.webp')
    expect(img.attributes('alt')).toBe('Kim Duff')
  })

  it('renders a <video> for video type', () => {
    const wrapper = mount(LiteMediaEmbed, {
      props: { url: '/videos/intro.mp4', type: 'video', alt: 'Intro' },
    })

    expect(wrapper.find('button.dcs-lite-embed__button').exists()).toBe(false)
    const video = wrapper.find('video.dcs-lite-embed__media')
    expect(video.exists()).toBe(true)
    expect(video.attributes('src')).toBe('/videos/intro.mp4')
    expect(video.attributes('controls')).toBeDefined()
  })

  it('falls through to a plain <img> for an unknown type', () => {
    const wrapper = mount(LiteMediaEmbed, {
      // Deliberately outside the documented union.
      props: { url: '/whatever.png', type: 'gif' as never },
    })

    expect(wrapper.find('button.dcs-lite-embed__button').exists()).toBe(false)
    expect(wrapper.find('iframe').exists()).toBe(false)
    expect(wrapper.find('img.dcs-lite-embed__media').attributes('src')).toBe('/whatever.png')
  })

  it('lets a consumer override non-embed rendering via the default slot', () => {
    const wrapper = mount(LiteMediaEmbed, {
      props: { url: '/images/staff/kim.webp', type: 'image', alt: 'Kim Duff' },
      slots: { default: '<figure class="custom-fallback">custom</figure>' },
    })

    expect(wrapper.find('figure.custom-fallback').exists()).toBe(true)
    // The built-in default is replaced by slot content.
    expect(wrapper.find('img.dcs-lite-embed__media').exists()).toBe(false)
  })
})