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

const saveShortcut = process.platform === 'darwin' ? 'Meta+s' : 'Control+s';

test('R14.22 Visual accepts native mouse/keyboard editing without rebuilding the ProseMirror surface', async ({ page }) => {
  const workspaceName = `visual-r14-22-${Date.now()}`;
  await createBrowserWorkspace(page, { workspaceName });

  const source = page.getByLabel('LaTeX source editor');
  await source.fill([
    '\\documentclass{article}',
    '\\begin{document}',
    '\\section{Heading}',
    'Editable paragraph.',
    '\\begin{itemize}',
    '\\item First item',
    '\\end{itemize}',
    '\\begin{table}',
    '\\begin{tabular}{cc}',
    'A & B \\\\',
    '\\end{tabular}',
    '\\end{table}',
    '\\end{document}',
    '',
  ].join('\n'));
  await source.press(saveShortcut);

  await page.getByRole('button', { name: 'Visual' }).click();
  const visual = page.locator('.interactive-latex-visual-editor');
  await expect(visual).toBeVisible();
  await visual.evaluate((element) => {
    (window as typeof window & { __learnitiveVisualRoot?: Element }).__learnitiveVisualRoot = element;
  });

  const paragraph = visual.locator('.interactive-visual-paragraph').filter({ hasText: 'Editable paragraph.' }).first();
  await paragraph.click();
  await page.keyboard.press('End');
  await page.keyboard.type(' Native typing');
  await expect(paragraph).toContainText('Editable paragraph. Native typing');
  await page.keyboard.press('Backspace');
  await expect(paragraph).toContainText('Editable paragraph. Native typin');

  const heading = visual.locator('.interactive-visual-heading').filter({ hasText: 'Heading' }).first();
  await heading.click();
  await page.keyboard.press('End');
  await page.keyboard.type(' edited');
  await expect(heading).toContainText('Heading edited');

  const listText = visual.locator('.interactive-visual-list-item').first();
  await listText.click();
  await page.keyboard.press('End');
  await page.keyboard.type(' edited');
  await expect(listText).toContainText('First item edited');

  const firstCell = visual.locator('.interactive-visual-table td').first();
  await firstCell.click();
  await page.keyboard.press('End');
  await page.keyboard.type('lpha');
  await expect(firstCell).toContainText('Alpha');

  const sameRoot = await visual.evaluate((element) =>
    (window as typeof window & { __learnitiveVisualRoot?: Element }).__learnitiveVisualRoot === element,
  );
  expect(sameRoot).toBe(true);

  await paragraph.click();
  await page.keyboard.press('End');
  await page.keyboard.press('/');
  await page.keyboard.type('sec');
  await expect(page.getByTestId('latex-visual-slash-menu')).toBeVisible();
  await page.keyboard.press('Escape');

  await page.getByRole('button', { name: 'Source' }).click();
  await expect(source).toContainText('\\section{Heading edited}');
  await expect(source).toContainText('Editable paragraph. Native typin');
  await expect(source).toContainText('\\item First item edited');
  await expect(source).toContainText('Alpha & B');
});