import { test, expect } from '@playwright/test';
import {
  launchApp,
  resetWorkspace,
  type LaunchedApp,
  openNote,
} from './appFixture';

const popup = '.cm-tooltip-autocomplete';

async function focusEndOfDoc(
  window: Awaited<ReturnType<typeof launchApp>>['window'],
) {
  await window.locator('.cm-content').first().click();
  await window.keyboard.press(
    process.platform === 'darwin' ? 'Meta+End' : 'Control+End',
  );
  await window.keyboard.press('Enter');
}

test.describe('[[ completion popup', () => {
  let app: LaunchedApp;
  let window: LaunchedApp['window'];

  test.beforeAll(async () => {
    app = await launchApp();
    window = app.window;
  });
  test.afterAll(async () => {
    await app.close();
  });
  test.beforeEach(async () => {
    await resetWorkspace(app);
  });

  test('offers note names, in the app font rather than monospace', async () => {
    await openNote(window, 'Other.md');
    await focusEndOfDoc(window);
    await window.keyboard.type('[[');

    await expect(window.locator(popup)).toBeVisible();
    await expect(window.locator(`${popup} li`).first()).toBeVisible();
    await expect(window.locator(popup)).toContainText('Target');

    // CM's base theme hardcodes monospace here; our override has to out-specify it.
    const fontFamily = await window
      .locator(`${popup} > ul`)
      .evaluate((el) => getComputedStyle(el).fontFamily);
    expect(fontFamily.toLowerCase()).not.toContain('monospace');
  });

  test('shows the modifier hints pinned below the option list', async () => {
    await openNote(window, 'Other.md');
    await focusEndOfDoc(window);
    await window.keyboard.type('[[');

    const footer = window.locator('.cm-wikilink-completion-footer');
    await expect(footer).toBeVisible();
    await expect(footer).toContainText('heading');
    await expect(footer).toContainText('display text');

    // CM re-appends the <ul> after the footer in DOM order, so assert geometry.
    await window.keyboard.type('T');
    const listBox = await window.locator(`${popup} > ul`).boundingBox();
    const footerBox = await footer.boundingBox();
    expect(listBox).not.toBeNull();
    expect(footerBox).not.toBeNull();
    expect(footerBox!.y).toBeGreaterThanOrEqual(
      listBox!.y + listBox!.height - 1,
    );
  });

  test('completes headings after `#`, labelled with their level', async () => {
    await openNote(window, 'Other.md');
    await focusEndOfDoc(window);
    await window.keyboard.type('[[Target#');

    await expect(window.locator(popup)).toBeVisible();
    await expect(window.locator(popup)).toContainText('Middle Section');
    await expect(window.locator(popup)).toContainText('Later Section');

    const badges = window.locator('.cm-wikilink-level');
    await expect(badges.first()).toBeVisible();
    const levels = await badges.allTextContents();
    expect(levels).toContain('H1');
    expect(levels).toContain('H2');
  });

  test('completes the current document’s headings after `[[#`', async () => {
    await openNote(window, 'Target.md');
    await focusEndOfDoc(window);
    await window.keyboard.type('[[#');

    await expect(window.locator(popup)).toBeVisible();
    await expect(window.locator(popup)).toContainText('Middle Section');
  });

  test('closes once a `|` alias is started', async () => {
    await openNote(window, 'Other.md');
    await focusEndOfDoc(window);
    await window.keyboard.type('[[Target');
    await expect(window.locator(popup)).toBeVisible();
    await window.keyboard.type('|');
    await expect(window.locator(popup)).toBeHidden();
  });

  test('`#` accepts the highlighted note and goes straight to headings', async () => {
    await openNote(window, 'Other.md');
    await focusEndOfDoc(window);
    await window.keyboard.type('[[Targ');
    await expect(window.locator(popup)).toBeVisible();

    await window.keyboard.type('#');

    await expect(window.locator('.cm-content').first()).toContainText(
      '[[Target#',
    );
    await expect(window.locator(popup)).toContainText('Middle Section');
  });

  test('Enter after choosing a heading writes the whole link', async () => {
    await openNote(window, 'Other.md');
    await focusEndOfDoc(window);
    await window.keyboard.type('[[Targ');
    await expect(window.locator(popup)).toBeVisible();
    await window.keyboard.type('#Middle');
    // Highlighted, not merely present: the heading list loads asynchronously.
    await expect(window.locator(`${popup} li[aria-selected]`)).toContainText(
      'Middle Section',
    );
    // Past CM's 75ms `interactionDelay`, which refuses a just-opened popup.
    // Synthetic input lands inside that window; a human does not.
    await window.waitForTimeout(150);

    await window.keyboard.press('Enter');

    await expect(window.locator('.cm-content').first()).toContainText(
      '[[Target#Middle Section]]',
    );
    await expect(window.locator(popup)).toBeHidden();
  });

  test('`#` is ordinary text when no option is highlighted', async () => {
    await openNote(window, 'Other.md');
    await focusEndOfDoc(window);
    await window.keyboard.type('plain # text');
    await expect(window.locator('.cm-content').first()).toContainText(
      'plain # text',
    );
  });
});