import { expect, test } from './fixtures';

// The shared fixture already neutralises the real telegram-web-app.js, so these
// specs control window.Telegram deterministically (injected below) with no network.

// A minimal valid-looking Telegram WebApp stub: non-empty initData triggers the Mini
// App launch path (the mock gateway accepts any initData and returns a durable
// session); themeParams override the design tokens.
function webAppStub(startParam = '') {
  return {
    Telegram: {
      WebApp: {
        initData: 'query_id=test&user=%7B%22id%22%3A1%7D&auth_date=1&hash=deadbeef',
        initDataUnsafe: startParam ? { start_param: startParam } : {},
        themeParams: { bg_color: '#101418', text_color: '#ffffff' },
        ready() {},
        expand() {},
      },
    },
  };
}

test('Telegram launch auto-authenticates into the lobby and applies the theme', async ({ page }) => {
  await page.addInitScript((stub) => {
    Object.assign(window, stub);
  }, webAppStub());
  await page.goto('/');

  // No guest-login click: the Mini App authenticates from initData and lands on the lobby.
  await expect(page.getByText('Your turn')).toBeVisible();

  // The Telegram themeParams override the background token at runtime.
  await expect
    .poll(() => page.evaluate(() => getComputedStyle(document.documentElement).getPropertyValue('--bg').trim()))
    .toBe('#101418');
});

test('tg-fullscreen header keeps a constant native-nav gap as the font scales', async ({ page }) => {
  await page.goto('/');
  await page.getByRole('button', { name: /guest/i }).click();
  await expect(page.getByText('Your turn')).toBeVisible(); // the lobby header is present + settled

  // Emulate Telegram fullscreen: the class + safe-area vars our header positions against.
  await page.evaluate(() => {
    const h = document.documentElement;
    h.classList.add('tg-fullscreen');
    h.style.setProperty('--tg-safe-top', '47px');
    h.style.setProperty('--tg-content-top', '50px');
  });
  const probe = () =>
    page.evaluate(() => {
      const bar = document.querySelector('.bar')!.getBoundingClientRect();
      const h1 = document.querySelector('.bar h1')!.getBoundingClientRect();
      return { h1Top: Math.round(h1.top), overflows: h1.bottom > bar.bottom + 0.5 };
    });

  const normal = await probe();
  // Scale the root font up (an OS / Telegram "larger text" setting scales rem-based text).
  await page.evaluate(() => (document.documentElement.style.fontSize = '28px'));
  const large = await probe();

  // The gap to Telegram's native controls is a fixed px, so the title's top does not move…
  expect(large.h1Top).toBe(normal.h1Top);
  // …the title grows downward inside the bar (which grows with it), never overflowing it.
  expect(normal.overflows).toBe(false);
  expect(large.overflows).toBe(false);
});

test('outside Telegram, the /telegram/ entry redirects to the site root', async ({ page }) => {
  await page.goto('/telegram/');

  // The guard sends a non-Telegram visitor back to the root, where the normal
  // (guest / email) login is shown.
  await expect(page.getByRole('button', { name: /guest/i })).toBeVisible();
  await expect(page).not.toHaveURL(/\/telegram\//);
});