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

import { assertAssetsLoadedCleanly, collectConsoleErrors } from '../fixtures/helpers';

/**
 * Golden-path spec for Marketing/Comparison.tsx (/vs/:competitor)
 *
 * Regression guard for cb6917fa — Comparison.tsx consumed camelCase
 * canLogin/canRegister but every marketing controller passes snake_case
 * can_login/can_register (Inertia does not camelize). The CTAs were silently
 * hidden on all /vs/* pages. This spec asserts they are now rendered.
 *
 * Generated / updated by v-workflow-verifier (session 368b6cbe-4c57-4d85-bb17-129b87b0043c, run 2).
 * Scope derived from diff — no SUCCESS_CRITERIA file was present at dispatch.
 */
test.describe('Comparison page /vs/searchatlas-otto', () => {
  test.beforeEach(async ({ context }) => {
    await context.addCookies([
      {
        name: 'cookie_consent',
        value: 'accepted',
        domain: '127.0.0.1',
        path: '/',
        sameSite: 'Lax',
        httpOnly: false,
        secure: false,
      },
    ]);
  });

  // ---------------------------------------------------------------------------
  // Golden path — assets load cleanly
  // ---------------------------------------------------------------------------

  test('loads without console errors', async ({ page }) => {
    const errors = collectConsoleErrors(page);
    await page.goto('/vs/searchatlas-otto');
    await page.waitForLoadState('networkidle');
    await assertAssetsLoadedCleanly(page, errors);
  });

  // ---------------------------------------------------------------------------
  // Regression guard — cb6917fa (can_login / can_register snake_case fix)
  // The nav Log-in CTA and bottom register CTA must render when the controller
  // supplies can_login=true / can_register=true.
  // ---------------------------------------------------------------------------

  test('nav Log-in CTA is visible (can_login prop renders)', async ({ page }, testInfo) => {
    test.skip(testInfo.project.name !== 'chromium-desktop', 'Desktop only');

    await page.goto('/vs/searchatlas-otto');
    await page.waitForLoadState('networkidle');

    const loginLink = page.getByRole('link', { name: /log in/i }).first();
    await expect(loginLink).toBeVisible();
    const href = await loginLink.getAttribute('href');
    expect(href).toContain('/login');
  });

  test('nav Register CTA is visible (can_register prop renders)', async ({ page }, testInfo) => {
    test.skip(testInfo.project.name !== 'chromium-desktop', 'Desktop only');

    await page.goto('/vs/searchatlas-otto');
    await page.waitForLoadState('networkidle');

    // There may be multiple "Get started" / "Start free" links in the nav and the
    // page body. We just need the nav to surface at least one Register-pointing link.
    const registerLinks = page.getByRole('link', { name: /get started|start free|register/i });
    await expect(registerLinks.first()).toBeVisible();
    const href = await registerLinks.first().getAttribute('href');
    expect(href).toContain('/register');
  });

  test('bottom CTA "Start Free Analysis" register link renders', async ({ page }, testInfo) => {
    test.skip(testInfo.project.name !== 'chromium-desktop', 'Desktop only');

    await page.goto('/vs/searchatlas-otto');
    await page.waitForLoadState('networkidle');

    // Bottom CTA section — only shown when can_register=true
    const bottomCta = page.getByRole('link', { name: /start free analysis/i });
    await expect(bottomCta).toBeVisible();
    const href = await bottomCta.getAttribute('href');
    expect(href).toContain('/register');
  });

  // ---------------------------------------------------------------------------
  // Golden path — page structure
  // ---------------------------------------------------------------------------

  test('renders h1 with competitor name', async ({ page }, testInfo) => {
    test.skip(testInfo.project.name !== 'chromium-desktop', 'Desktop only');

    await page.goto('/vs/searchatlas-otto');
    await page.waitForLoadState('networkidle');

    await expect(page.getByRole('heading', { level: 1 })).toContainText('SearchAtlas');
  });

  test('comparison feature table is visible', async ({ page }, testInfo) => {
    test.skip(testInfo.project.name !== 'chromium-desktop', 'Desktop only');

    await page.goto('/vs/searchatlas-otto');
    await page.waitForLoadState('networkidle');

    // The comparison table heading should be on screen
    await expect(page.getByRole('heading', { name: /feature comparison/i })).toBeVisible();
  });

  test('breadcrumb shows Home > Compare > vs SearchAtlas', async ({ page }, testInfo) => {
    test.skip(testInfo.project.name !== 'chromium-desktop', 'Desktop only');

    await page.goto('/vs/searchatlas-otto');
    await page.waitForLoadState('networkidle');

    const breadcrumb = page.getByRole('navigation', { name: /breadcrumb/i });
    await expect(breadcrumb.getByRole('link', { name: 'Home' })).toBeVisible();
    await expect(breadcrumb.getByRole('link', { name: 'Compare' })).toBeVisible();
    await expect(breadcrumb.getByText(/searchatlas/i)).toBeVisible();
  });

  test('footer is present', async ({ page }, testInfo) => {
    test.skip(testInfo.project.name !== 'chromium-desktop', 'Desktop only');

    await page.goto('/vs/searchatlas-otto');
    await page.waitForLoadState('networkidle');

    await expect(page.getByRole('contentinfo')).toBeVisible();
  });

  // ---------------------------------------------------------------------------
  // Mobile — hero and nav visible
  // ---------------------------------------------------------------------------

  test('renders on mobile with heading visible', async ({ page }, testInfo) => {
    test.skip(testInfo.project.name !== 'chromium-mobile', 'Mobile only');

    await page.goto('/vs/searchatlas-otto');
    await page.waitForLoadState('networkidle');

    await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
    await expect(page.getByRole('heading', { level: 1 })).toContainText('SearchAtlas');
  });
});