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

async function clickToolbarItem(toolbar: Locator, key: string) {
  const direct = toolbar.locator(`[data-toolbar-item="${key}"]`);
  if (await direct.isVisible().catch(() => false)) {
    await direct.click();
    return;
  }
  await toolbar.getByRole('button', { name: 'More editor commands' }).click();
  await toolbar.locator(`[data-toolbar-item="${key}"]`).click();
}

test('R2 uses one keyboard-accessible 8x8 picker for canonical Source table insertion', async ({ page }) => {
  const workspaceName = `latex-table-r2-${Date.now()}`;
  await createBrowserWorkspace(page, { workspaceName });

  const source = page.getByLabel('LaTeX source editor');
  await source.fill('\\documentclass{article}\n\\begin{document}\n');

  const toolbar = page.getByTestId('latex-plugin-toolbar');
  await clickToolbarItem(toolbar, 'table');

  const pickerDialog = page.getByTestId('latex-source-table-picker-dialog');
  const picker = pickerDialog.getByTestId('latex-table-grid-picker');
  await expect(picker).toBeVisible();
  await expect(picker.locator('[data-table-grid-row][data-table-grid-column]')).toHaveCount(64);

  const first = picker.locator('[data-table-grid-row="1"][data-table-grid-column="1"]');
  await first.focus();
  await page.keyboard.press('ArrowRight');
  await page.keyboard.press('ArrowRight');
  await page.keyboard.press('ArrowRight');
  await page.keyboard.press('ArrowDown');
  await page.keyboard.press('ArrowDown');
  await expect(picker.getByText('3 × 4', { exact: true })).toBeVisible();
  await expect(picker.locator('[data-table-grid-row="3"][data-table-grid-column="4"]')).toBeFocused();
  await page.keyboard.press('Enter');

  await expect(pickerDialog).toHaveCount(0);
  await expect(source).toContainText('\\begin{tabular}{|l|l|l|l|}');
  await expect(source).toContainText('\\hline');
  await expect(source).toContainText('\\end{tabular}');
});