import { test, expect } from '@playwright/test';
import { resumeButton, seedStudy } from './helpers.js';

// Fake the free Bible text so the test needs no internet: every translation answers with its own wording.
const WORDING = {
  BSB: { 16: 'For God so loved the world that He gave His one and only Son', 17: 'For God did not send His Son into the world to condemn the world', 18: 'Whoever believes in Him is not condemned' },
  NET: { 16: 'For this is the way God loved the world: He gave his one and only Son', 17: 'For God did not send his Son into the world to condemn the world', 18: 'The one who believes in him is not condemned' },
};

test('compare translations with differences highlighted, a verse note, and the notes boxes', async ({ page }) => {
  await page.route('https://bible.helloao.org/api/**', async (route) => {
    const id = route.request().url().match(/api\/([^/]+)\//)[1].replace('eng_', '').toUpperCase();
    const words = WORDING[id] ?? WORDING.BSB;
    await route.fulfill({ json: { verses: Object.entries(words).map(([number, text]) => ({ number: Number(number), text })) } });
  });
  const { title } = await seedStudy(page);
  await resumeButton(page, title).click();
  await page.getByRole('button', { name: /compare…/i }).click();
  await page.getByRole('tab', { name: 'Translations' }).click();

  const dialog = page.getByRole('dialog', { name: /compare/i });
  await expect(dialog.getByText('Berean Standard Bible')).toBeVisible();
  await expect(dialog.getByText('NET Bible', { exact: true })).toBeVisible();
  await expect(dialog.locator('mark').first()).toBeVisible(); // words that differ are marked
  await dialog.getByLabel(/highlight the words that differ/i).uncheck();
  await expect(dialog.locator('mark')).toHaveCount(0);

  // a note on one verse, and the Observe / Interpret / Apply boxes edit the same notes as the Study page
  await dialog.getByRole('textbox', { name: 'Note on verse 16' }).fill('NET says "the way" where BSB says "so"');
  await expect(dialog.getByRole('textbox', { name: 'Interpret' })).toHaveValue(/not a slogan/);
  await dialog.getByRole('textbox', { name: 'Apply' }).fill('Decide one thing to trust him with.');
  await dialog.getByRole('button', { name: 'Close' }).click();
  await page.getByRole('button', { name: 'Your notes' }).first().click(); // keep both halves tidy
  await page.keyboard.press('3');
  await expect(page.getByRole('textbox', { name: 'Apply' })).toHaveValue('Decide one thing to trust him with.');
  await expect(page.getByRole('textbox', { name: 'Verse 16 note' })).toHaveValue(/the way/);
});