/**
 * Smoke test for the iOS/PWA fullscreen-button fix (Task #52).
 *
 * Bug: on an iPhone running the installed PWA in portrait (standalone
 * display-mode), tapping the fullscreen button did nothing. Root cause: iOS
 * Safari does not implement the standard Fullscreen API
 * (Element.requestFullscreen) for arbitrary elements — even in a standalone
 * PWA — so `stage.requestFullscreen?.()` silently no-ops. WebKit instead
 * exposes a video-only, non-standard fallback,
 * HTMLVideoElement.webkitEnterFullscreen/webkitExitFullscreen, which does
 * work in standalone mode.
 *
 * Playwright/Chromium implements the standard Fullscreen API, so to exercise
 * the WebKit fallback branch we delete `requestFullscreen` from the stage
 * element (simulating iOS Safari) and stub `webkitEnterFullscreen` /
 * `webkitExitFullscreen` on the <video> element, then confirm the fallback
 * is invoked instead of the button doing nothing.
 */
const { test, expect } = require('@playwright/test');

test.describe('Fullscreen button — iOS WebKit fallback', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/');
    await page.waitForSelector('.app', { state: 'attached' });
  });

  test('falls back to webkitEnterFullscreen when requestFullscreen is unavailable (iOS Safari/PWA)', async ({ page }) => {
    const result = await page.evaluate(() => {
      const video = document.getElementById('video');
      const stage = video.parentElement;

      // Simulate iOS Safari: no standard Fullscreen API on the stage element.
      delete stage.requestFullscreen;

      let entered = false;
      video.webkitEnterFullscreen = () => { entered = true; };

      // Make sure we're not in audio-only mode so the fallback proceeds.
      Player.mode = 'progressive';

      document.getElementById('fsBtn').click();

      return { entered };
    });
    expect(result.entered).toBe(true);
  });

  test('exits via webkitExitFullscreen when webkitDisplayingFullscreen is true', async ({ page }) => {
    const result = await page.evaluate(() => {
      const video = document.getElementById('video');
      const stage = video.parentElement;

      delete stage.requestFullscreen;
      // No document.exitFullscreen available either, mirroring iOS.
      Object.defineProperty(document, 'exitFullscreen', { value: undefined, configurable: true });
      Object.defineProperty(video, 'webkitDisplayingFullscreen', { value: true, configurable: true });

      let exited = false;
      video.webkitExitFullscreen = () => { exited = true; };

      document.getElementById('fsBtn').click();

      return { exited };
    });
    expect(result.exited).toBe(true);
  });

  test('shows a toast instead of a silent no-op in audio-only mode', async ({ page }) => {
    const toastText = await page.evaluate(() => {
      const video = document.getElementById('video');
      const stage = video.parentElement;

      delete stage.requestFullscreen;
      video.webkitEnterFullscreen = () => {};
      Player.mode = 'audio';

      document.getElementById('fsBtn').click();

      const el = document.querySelector('.toast-container .toast, .toast');
      return el ? el.textContent : null;
    });
    expect(toastText).toContain('audio-only');
  });

  test('no JS errors are thrown when the fullscreen button is clicked', async ({ page }) => {
    const errors = [];
    page.on('pageerror', (e) => errors.push(e.message));

    // The fsBtn is only visible once a video is loaded (.player-pane loses
    // its .empty state) — dispatch the click via JS as the other tests in
    // this file do, rather than requiring a real video load in this smoke
    // test.
    await page.evaluate(() => document.getElementById('fsBtn').click());
    await page.waitForTimeout(100);

    expect(errors).toEqual([]);
  });
});