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

test('comparison pages use the shared FAQ and concise comparison layout', async ({ page }) => {
  await page.goto('/compare');
  await expect(page.getByRole('heading', { level: 1, name: 'Compare LaTeX editors' })).toBeVisible();
  await expect(page.getByRole('heading', { name: 'Your local first workspace for research' })).toBeVisible();
  await expect(page.getByText('Different editors optimize different workflows')).toHaveCount(0);

  await page.goto('/compare/bibby');
  await expect(page.getByRole('heading', { level: 1, name: 'Learnitive vs Bibby AI' })).toBeVisible();
  await expect(page.locator('.interactive-faq-list')).toHaveCount(1);
  await expect(page.locator('.interactive-public-faq-list')).toHaveCount(0);
  await expect(page.getByText(/^Source:/u)).toHaveCount(0);
  await expect(page.getByText('Choose Learnitive if…')).toHaveCount(0);
  await expect(page.getByText('Choose Bibby AI if…')).toHaveCount(0);
  await expect(page.getByRole('heading', { name: 'You want one research workspace' })).toHaveCount(0);
  await expect(page.getByRole('heading', { name: "You prefer Bibby AI's approach" })).toHaveCount(0);

  const back = page.getByRole('link', { name: '← Compare editors' });
  const eyebrow = page.getByText('AI-first research writing', { exact: true });
  const backBox = await back.boundingBox();
  const eyebrowBox = await eyebrow.boundingBox();
  expect(backBox).not.toBeNull();
  expect(eyebrowBox).not.toBeNull();
  expect((eyebrowBox?.y ?? 0)).toBeGreaterThanOrEqual((backBox?.y ?? 0) + (backBox?.height ?? 0));

  const freeProjectRow = page.getByRole('row').filter({ hasText: 'Free project allowance' });
  await expect(freeProjectRow).toContainText('5');

  const learnitiveTick = page.locator('.interactive-compare-learnitive .interactive-compare-tick').first();
  await expect(learnitiveTick).toBeVisible();
  const background = await learnitiveTick.evaluate((node) => getComputedStyle(node).backgroundColor);
  expect(background).not.toBe('rgba(0, 0, 0, 0)');
  expect(background).not.toBe('transparent');

  await page.goto('/compare/local-latex-editors');
  await expect(page.getByRole('heading', { name: 'Best fit by workflow' })).toBeVisible();
  await expect(page.getByRole('heading', { name: 'Dated source checks' })).toHaveCount(0);
  await expect(page.getByRole('heading', { name: 'Start with your must-have' })).toHaveCount(0);
  const fitLabel = page.getByText('Integrated local-first web workflow', { exact: true });
  await expect(fitLabel).toHaveClass(/interactive-compare-fit-label/u);
  await expect(fitLabel).not.toHaveClass(/interactive-eyebrow/u);
});

test('Ollama documentation presents the official download as a button', async ({ page }) => {
  const docs = [{ id: 1, slug: 'ollama', title: 'Ollama', category: 'AI', excerpt: 'Use Ollama with Learnitive.' }];
  await page.route('**/api/docs', async (route) => {
    await route.fulfill({ contentType: 'application/json', body: JSON.stringify({ items: docs }) });
  });
  await page.route('**/api/docs/ollama', async (route) => {
    await route.fulfill({
      contentType: 'application/json',
      body: JSON.stringify({
        item: {
          ...docs[0],
          content_html: '<h2>Step 1: Install Ollama</h2><p>Download and install Ollama for your operating system:</p><p><a href="https://ollama.com/download" rel="noopener noreferrer">Download Ollama</a></p><p>Follow the installation instructions for your OS. Once installed, you can run Ollama from your terminal.</p>',
          next: null,
          previous: null,
        },
      }),
    });
  });

  await page.goto('/docs/ollama');
  await expect(page.getByRole('heading', { name: 'Step 1: Install Ollama' })).toBeVisible();
  const download = page.getByRole('link', { name: 'Download Ollama' });
  await expect(download).toHaveAttribute('href', 'https://ollama.com/download');
  const background = await download.evaluate((node) => getComputedStyle(node).backgroundColor);
  expect(background).not.toBe('rgba(0, 0, 0, 0)');
  expect(background).not.toBe('transparent');
});