import { expect, test } from '@playwright/test';
import { createBrowserWorkspace } from './common';

test('R30 keeps Large AI stable and simplifies editor toggle labels', async ({ page }) => {
  const workspaceName = `latex-ui-r30-${Date.now()}`;
  await createBrowserWorkspace(page, { workspaceName });

  await expect(page.getByTestId('latex-soft-wrap-toggle')).toHaveText('Word Wrap');
  await expect(page.getByTestId('track-changes-toggle')).toHaveText(/Track Changes/);
  await expect(page.getByTestId('track-changes-toggle')).not.toContainText(/On|Off/);

  await page.getByRole('button', { name: 'Visual' }).click();
  await expect(page.getByRole('button', { name: 'Comment', exact: true })).toBeVisible();
  await page.getByRole('button', { name: 'Source' }).click();

  await page.getByRole('button', { name: 'Open Learnitive AI' }).click();
  const shell = page.getByTestId('interactive-ai-overlay');
  await expect(shell).toBeVisible();
  await expect(shell.getByRole('button', { name: 'Compact AI' })).toHaveCount(0);

  const before = await shell.boundingBox();
  expect(before).not.toBeNull();
  await shell.getByRole('button', { name: 'Large AI' }).click();
  await expect(shell).toHaveAttribute('data-ai-shell-size', 'large');
  const large = await shell.boundingBox();
  expect(large).not.toBeNull();
  expect(large!.width).toBeGreaterThan(before!.width);
  expect(large!.height).toBeGreaterThanOrEqual(before!.height);

  await page.waitForTimeout(500);
  const settled = await shell.boundingBox();
  expect(settled).not.toBeNull();
  expect(Math.abs(settled!.width - large!.width)).toBeLessThanOrEqual(2);
  expect(Math.abs(settled!.height - large!.height)).toBeLessThanOrEqual(2);
});

test('R31 hides the floating research dock while mobile AI owns the viewport', async ({ page }) => {
  await page.setViewportSize({ width: 390, height: 844 });
  const workspaceName = `latex-ui-r31-mobile-${Date.now()}`;
  await createBrowserWorkspace(page, { workspaceName });

  const launcher = page.getByRole('button', { name: 'Open Learnitive AI' });
  await expect(launcher).toBeVisible();
  await launcher.click();
  await expect(page.getByTestId('interactive-ai-overlay')).toBeVisible();
  await expect(page.getByTestId('interactive-research-dock')).toHaveCount(0);

  const close = page.getByTestId('interactive-ai-overlay').getByRole('button', { name: /close/i }).first();
  await close.click();
  await expect(page.getByRole('button', { name: 'Open Learnitive AI' })).toBeVisible();
});