const { chromium } = require('playwright')

;(async () => {
  console.log('E2E: solicitando token al token-server...')
  const tokenRes = await fetch('http://localhost:3010/api/token?room=test&username=Playwright')
  if (!tokenRes.ok) throw new Error('No se pudo obtener token desde http://localhost:3010')
  const tokenData = await tokenRes.json()
  console.log('E2E: token recibido (longitud):', tokenData.token ? tokenData.token.length : 'n/a')

  const shortId = Math.random().toString(36).slice(2, 10)
  const studioUrl = `http://localhost:3020/${shortId}`

  console.log('E2E: lanzando navegador headless...')
  const browser = await chromium.launch({ headless: true })
  const context = await browser.newContext()

  // Abrir una 'broadcast page' (simula origen que realiza window.open y postMessage)
  const broadcastPage = await context.newPage()
  try {
    await broadcastPage.goto('http://localhost:5175', { waitUntil: 'domcontentloaded', timeout: 8000 })
    console.log('E2E: broadcast-page abierta')
  } catch (err) {
    console.warn('E2E: no se pudo cargar broadcast UI, continuamos (no es obligatorio):', err.message)
  }

  // Preparar espera de la nueva página (studio)
  const newPagePromise = context.waitForEvent('page')

  // Desde la broadcastPage crear la ventana y enviar postMessage (imitando el comportamiento de la app)
  await broadcastPage.evaluate(({ studioUrl, tokenData }) => {
    const win = window.open(studioUrl, '_blank')
    // Intentar enviar token repetidamente hasta que la ventana esté lista
    let attempts = 0
    const tryPost = () => {
      attempts++
      try {
        const origin = new URL(studioUrl).origin
        win.postMessage({ type: 'AVANZACAST_TOKEN', token: tokenData.token, serverUrl: tokenData.serverUrl, room: 'test', user: 'Playwright' }, origin)
        // eslint-disable-next-line no-console
        console.log('E2E: postMessage enviado desde broadcast page')
      } catch (e) {
        if (attempts < 15) setTimeout(tryPost, 200)
        else console.error('E2E: no se pudo enviar postMessage a la ventana del studio')
      }
    }
    tryPost()
  }, { studioUrl, tokenData })

  const studioPage = await newPagePromise
  await studioPage.waitForLoadState('domcontentloaded')
  console.log('E2E: studio page abierta, esperando que el banner de DEMO desaparezca si llega...')

  // El componente muestra un banner de modo demo; si recibimos token, ese banner debería desaparecer.
  try {
    // Si existe el banner, esperamos que desaparezca
    const demoLocator = studioPage.locator('text=⚠️ MODO DEMO')
    // Esperar a que sea visible (si no aparece, skip)
    await demoLocator.waitFor({ state: 'visible', timeout: 3000 }).catch(() => {})
    // Ahora esperar a que se oculte tras recibir el token
    await demoLocator.waitFor({ state: 'hidden', timeout: 8000 })
    console.log('E2E: banner de DEMO desapareció -> token aplicado')
  } catch (err) {
    console.warn('E2E: no se pudo confirmar desaparición del banner DEMO (puede que la página ya estuviera en modo no-demo):', err.message)
  }

  // Tomar un snapshot de la página (longitud del HTML)
  const html = await studioPage.content()
  console.log('E2E: longitud del HTML del studio:', html.length)

  await browser.close()
  console.log('E2E: prueba finalizada correctamente')
})().catch(err => {
  console.error('E2E: error en la prueba', err)
  process.exit(1)
})