/**
 * History Page Mobile Tests
 *
 * Tests for the history page on mobile devices:
 * - Page load and error detection
 * - History list rendering
 * - Search functionality
 * - Empty state handling
 * - Visual regression screenshots
 * - Touch targets and mobile nav
 */

import { test, expect } from '@playwright/test';
const {
  ensureSheetsClosed,
  MIN_TOUCH_TARGET,
  MOBILE_NAV_SELECTOR,
} = require('./helpers/mobile-utils');

// ============================================
// PAGE LOAD AND ERROR DETECTION
// ============================================

test.describe('History Page - Load Tests', () => {
  test('page loads without errors', async ({ page }) => {
    const errors = [];
    page.on('console', (msg) => {
      if (msg.type() === 'error') {
        errors.push(msg.text());
      }
    });

    const pageErrors = [];
    page.on('pageerror', (error) => {
      pageErrors.push(error.message);
    });

    await page.goto('/history/');
    await page.waitForLoadState('domcontentloaded');

    const criticalErrors = errors.filter(
      (err) =>
        !err.includes('favicon') &&
        !err.includes('404') &&
        !err.includes('Failed to load resource')
    );

    expect(pageErrors.length, 'History should have no page errors').toBe(0);
    expect(
      criticalErrors.length,
      `History should have no critical console errors: ${criticalErrors.join(', ')}`
    ).toBe(0);
  });

  test('has no horizontal overflow', async ({ page }) => {
    await page.goto('/history/');
    await page.waitForLoadState('domcontentloaded');

    const hasOverflow = await page.evaluate(() =>
      document.documentElement.scrollWidth > window.innerWidth
    );

    expect(hasOverflow, 'History should have no horizontal overflow').toBe(false);
  });

  test('shows mobile nav on phone', async ({ page, isMobile }, testInfo) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    const isTablet = testInfo.project.name.includes('iPad');
    if (isTablet) {
      test.skip();
      return;
    }

    await page.goto('/history/');
    await page.waitForLoadState('domcontentloaded');

    const mobileNav = page.locator(MOBILE_NAV_SELECTOR);
    await expect(mobileNav).toBeVisible();
  });
});

// ============================================
// HISTORY PAGE CONTENT TESTS
// ============================================

test.describe('History Page - Content', () => {
  test('shows page heading', async ({ page }) => {
    await page.goto('/history/');
    await page.waitForLoadState('domcontentloaded');

    // Check for Research History heading
    const heading = page.locator('h1, h2, .ldr-page-title').filter({ hasText: /history/i });
    await expect(heading.first()).toBeVisible();
  });

  test('shows search input', async ({ page }) => {
    await page.goto('/history/');
    await page.waitForLoadState('domcontentloaded');

    // Check for search input
    const searchInput = page.locator('input[type="search"], input[placeholder*="search" i], input[placeholder*="Search" i]');
    await expect(searchInput.first()).toBeVisible();
  });

  test('search input has proper touch target size', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/history/');
    await page.waitForLoadState('domcontentloaded');

    const searchInput = page.locator('input[type="search"], input[placeholder*="search" i], input[placeholder*="Search" i]').first();

    if (await searchInput.isVisible()) {
      const box = await searchInput.boundingBox();
      expect(box.height).toBeGreaterThanOrEqual(MIN_TOUCH_TARGET);
    }
  });

  test('shows empty state or history items', async ({ page }) => {
    await page.goto('/history/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('.ldr-content, main, .ldr-history-list', { timeout: 5000 });

    // Either shows empty state message or history items
    const emptyState = page.locator('text=/no.*history.*found|no.*research.*found|empty/i');
    const historyItems = page.locator('.ldr-history-item, .ldr-research-card, [data-testid="history-item"]');
    const contentArea = page.locator('.ldr-content, main, .ldr-history-list');

    const hasEmptyState = await emptyState.first().isVisible().catch(() => false);
    const hasHistoryItems = await historyItems.first().isVisible().catch(() => false);
    const hasContentArea = await contentArea.first().isVisible().catch(() => false);

    // Should show empty state, history items, or at least a content area
    expect(hasEmptyState || hasHistoryItems || hasContentArea, 'History page should show empty state or history items').toBe(true);
  });
});

// ============================================
// HISTORY EMPTY STATE TESTS
// ============================================

test.describe('History Page - Empty State', () => {
  test('empty state is properly styled', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/history/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('.ldr-content, main, .ldr-history-list', { timeout: 5000 });

    const emptyState = page.locator('text=/no.*history|no.*research|empty/i');

    if (await emptyState.first().isVisible().catch(() => false)) {
      // Empty state should be centered and readable
      const emptyStateBox = await emptyState.first().boundingBox();
      const viewportWidth = page.viewportSize().width;

      // Check it's reasonably centered (within middle 80% of viewport)
      const leftMargin = emptyStateBox.x;
      const rightMargin = viewportWidth - (emptyStateBox.x + emptyStateBox.width);

      expect(Math.abs(leftMargin - rightMargin)).toBeLessThan(viewportWidth * 0.3);
    }
  });

  test('empty state screenshot', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/history/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForTimeout(200);
    await ensureSheetsClosed(page);

    await expect(page).toHaveScreenshot('history-empty-state.png', {
      fullPage: false,
      maxDiffPixelRatio: 0.02,
    });
  });
});

// ============================================
// HISTORY SEARCH TESTS
// ============================================

test.describe('History Page - Search Functionality', () => {
  test('search input is focusable', async ({ page }) => {
    await page.goto('/history/');
    await page.waitForLoadState('domcontentloaded');

    const searchInput = page.locator('input[type="search"], input[placeholder*="search" i]').first();

    if (await searchInput.isVisible()) {
      await searchInput.click();
      await expect(searchInput).toBeFocused();
    }
  });

  test('search input accepts text', async ({ page }) => {
    await page.goto('/history/');
    await page.waitForLoadState('domcontentloaded');

    const searchInput = page.locator('input[type="search"], input[placeholder*="search" i]').first();

    if (await searchInput.isVisible()) {
      await searchInput.fill('test query');
      await expect(searchInput).toHaveValue('test query');
    }
  });

  test('search with text screenshot', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/history/');
    await page.waitForLoadState('domcontentloaded');

    const searchInput = page.locator('input[type="search"], input[placeholder*="search" i]').first();

    if (await searchInput.isVisible()) {
      await searchInput.fill('climate change');
      await page.waitForTimeout(200);
      await ensureSheetsClosed(page);

      await expect(page).toHaveScreenshot('history-search-active.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.03,
      });
    }
  });
});

// ============================================
// VISUAL REGRESSION SCREENSHOTS
// ============================================

test.describe('History Page - Visual Regression', () => {
  test('full page screenshot', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/history/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForTimeout(200);
    await ensureSheetsClosed(page);

    await expect(page).toHaveScreenshot('history-page-full.png', {
      fullPage: true,
      maxDiffPixelRatio: 0.02,
    });
  });

  test('header section screenshot', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/history/');
    await page.waitForLoadState('domcontentloaded');

    // Scroll to top to capture header
    await page.evaluate(() => window.scrollTo(0, 0));
    await page.waitForTimeout(200);
    await ensureSheetsClosed(page);

    await expect(page).toHaveScreenshot('history-header-section.png', {
      fullPage: false,
      maxDiffPixelRatio: 0.02,
    });
  });

  test('mobile nav highlighted screenshot', async ({ page, isMobile }, testInfo) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    const isTablet = testInfo.project.name.includes('iPad');
    if (isTablet) {
      test.skip();
      return;
    }

    await page.goto('/history/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForTimeout(200);
    await ensureSheetsClosed(page);

    // Capture mobile nav area to verify History is highlighted
    const mobileNav = page.locator(MOBILE_NAV_SELECTOR);
    if (await mobileNav.isVisible()) {
      await expect(mobileNav).toHaveScreenshot('history-mobile-nav-active.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// TOUCH TARGET TESTS
// ============================================

test.describe('History Page - Touch Targets', () => {
  test('all interactive elements have proper touch targets', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/history/');
    await page.waitForLoadState('domcontentloaded');

    // Check buttons
    const buttons = page.locator('button:visible');
    const buttonCount = await buttons.count();

    for (let i = 0; i < Math.min(buttonCount, 10); i++) {
      const button = buttons.nth(i);
      const box = await button.boundingBox();
      if (box) {
        expect(
          box.height >= MIN_TOUCH_TARGET || box.width >= MIN_TOUCH_TARGET,
          `Button ${i} should have at least ${MIN_TOUCH_TARGET}px touch target`
        ).toBe(true);
      }
    }

    // Check links
    const links = page.locator('a:visible');
    const linkCount = await links.count();

    for (let i = 0; i < Math.min(linkCount, 10); i++) {
      const link = links.nth(i);
      const box = await link.boundingBox();
      if (box) {
        expect(
          box.height >= MIN_TOUCH_TARGET || box.width >= MIN_TOUCH_TARGET,
          `Link ${i} should have at least ${MIN_TOUCH_TARGET}px touch target`
        ).toBe(true);
      }
    }
  });
});

// ============================================
// CONTENT NOT HIDDEN BEHIND NAV
// ============================================

test.describe('History Page - Content Visibility', () => {
  test('content is not hidden behind mobile nav', async ({ page, isMobile }, testInfo) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    const isTablet = testInfo.project.name.includes('iPad');
    if (isTablet) {
      test.skip();
      return;
    }

    await page.goto('/history/');
    await page.waitForLoadState('domcontentloaded');

    // Scroll to bottom
    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
    await page.waitForTimeout(200);

    const mobileNav = page.locator(MOBILE_NAV_SELECTOR);
    const navBox = await mobileNav.boundingBox();

    if (navBox) {
      // Get last visible content element
      const contentElements = page.locator('main *:visible, .ldr-content *:visible');
      const count = await contentElements.count();

      if (count > 0) {
        const lastElement = contentElements.last();
        const lastBox = await lastElement.boundingBox().catch(() => null);

        if (lastBox) {
          // Content bottom should be above nav top (with some margin)
          expect(
            lastBox.y + lastBox.height <= navBox.y + 10,
            'Content should not be hidden behind mobile nav'
          ).toBe(true);
        }
      }
    }
  });
});
