/**
 * Mobile Component Screenshot Tests
 *
 * Component-level visual regression tests for isolated UI elements.
 * These capture specific components in various states to detect
 * regressions more precisely than full-page screenshots.
 *
 * Components tested:
 * - Mobile navigation (closed and open states)
 * - Form elements (textarea, buttons, inputs)
 * - Cards and containers
 * - Interactive states (expanded/collapsed)
 */

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

// ============================================
// MOBILE NAVIGATION COMPONENT TESTS
// ============================================

test.describe('Mobile Navigation Components', () => {
  test('Mobile nav - closed state', async ({ page, isMobile, browserName }, testInfo) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    // Skip on tablets (iPad) and landscape devices - they use sidebar navigation
    const isTablet = testInfo.project.name.includes('iPad');
    const isLandscape = testInfo.project.name.includes('Landscape');
    if (isTablet || isLandscape) {
      test.skip();
      return;
    }

    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');
    await ensureSheetsClosed(page, { preserveMobileNav: true });

    const nav = page.locator('.ldr-mobile-bottom-nav');
    await expect(nav).toBeVisible();
    await expect(nav).toHaveScreenshot('mobile-nav-closed.png', {
      maxDiffPixelRatio: 0.02,
    });
  });

  test('Mobile nav - More menu open', async ({ page, isMobile }, testInfo) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    // Skip on tablets (iPad) and landscape devices - they use sidebar navigation
    const isTablet = testInfo.project.name.includes('iPad');
    const isLandscape = testInfo.project.name.includes('Landscape');
    if (isTablet || isLandscape) {
      test.skip();
      return;
    }

    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');
    await ensureSheetsClosed(page, { preserveMobileNav: true });

    // Find and click the More button
    const moreBtn = page.locator('[data-nav="more"], .ldr-nav-more-btn, .ldr-mobile-bottom-nav button:has-text("More")');
    if (await moreBtn.count() > 0) {
      await moreBtn.first().click();

      // Take screenshot of the sheet
      const sheet = page.locator('.ldr-mobile-sheet');
      await sheet.waitFor({ state: 'visible', timeout: 5000 }).catch(() => {});
      if (await sheet.isVisible()) {
        await expect(sheet).toHaveScreenshot('mobile-nav-more-open.png', {
          maxDiffPixelRatio: 0.02,
        });
      } else {
        // If no sheet, skip this test
        test.skip();
      }
    } else {
      test.skip();
    }
  });

  test('Mobile nav items have correct sizing', async ({ page, isMobile }, testInfo) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    // Skip on tablets (iPad) and landscape devices - they use sidebar navigation
    const isTablet = testInfo.project.name.includes('iPad');
    const isLandscape = testInfo.project.name.includes('Landscape');
    if (isTablet || isLandscape) {
      test.skip();
      return;
    }

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

    const navItems = page.locator('.ldr-mobile-bottom-nav a, .ldr-mobile-bottom-nav button');
    const count = await navItems.count();

    expect(count).toBeGreaterThan(0);

    for (let i = 0; i < count; i++) {
      const item = navItems.nth(i);
      const box = await item.boundingBox();
      expect(box).toBeTruthy();
      expect(box.width).toBeGreaterThanOrEqual(44);
      expect(box.height).toBeGreaterThanOrEqual(44);
    }
  });
});

// ============================================
// FORM COMPONENT TESTS
// ============================================

test.describe('Form Components', () => {
  test('Research textarea component', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    const textarea = page.locator('#query, textarea[name="query"], .ldr-research-textarea');
    if (await textarea.count() > 0) {
      await expect(textarea.first()).toHaveScreenshot('research-textarea.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Start Research button component', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    const startBtn = page.locator('#start-research-btn, button:has-text("Start Research")');
    if (await startBtn.count() > 0) {
      await expect(startBtn.first()).toHaveScreenshot('start-research-button.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Mode selection component', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    const modeSelection = page.locator('.ldr-mode-selection');
    if (await modeSelection.count() > 0) {
      await modeSelection.first().scrollIntoViewIfNeeded();
      await page.waitForTimeout(200);
      await expect(modeSelection.first()).toHaveScreenshot('mode-selection.png', {
        maxDiffPixelRatio: 0.02,
        timeout: 10000,
      });
    }
  });

  test('Settings checkbox with label', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/settings/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('.ldr-loading-spinner', { state: 'hidden', timeout: 10000 }).catch(() => {});

    // Find a settings item with a checkbox
    const settingItem = page.locator('.ldr-settings-item').filter({
      has: page.locator('input[type="checkbox"]'),
    }).first();

    if (await settingItem.isVisible()) {
      await expect(settingItem).toHaveScreenshot('settings-checkbox-item.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Settings dropdown/select', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/settings/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('.ldr-loading-spinner', { state: 'hidden', timeout: 10000 }).catch(() => {});

    // Find a settings item with a select dropdown
    const settingItem = page.locator('.ldr-settings-item').filter({
      has: page.locator('select'),
    }).first();

    if (await settingItem.isVisible()) {
      await expect(settingItem).toHaveScreenshot('settings-dropdown-item.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Settings text input', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/settings/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('.ldr-loading-spinner', { state: 'hidden', timeout: 10000 }).catch(() => {});

    // Find a settings item with a text input
    const settingItem = page.locator('.ldr-settings-item').filter({
      has: page.locator('input[type="text"], input[type="number"]'),
    }).first();

    if (await settingItem.isVisible()) {
      await expect(settingItem).toHaveScreenshot('settings-text-input-item.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// CARD COMPONENT TESTS
// ============================================

test.describe('Card Components', () => {
  test('History card (empty state)', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    // Look for empty state message or card container
    const emptyState = page.locator('.ldr-empty-state, [class*="empty"], :text("No research history")');
    const historyList = page.locator('.ldr-history-list, [class*="history"]');

    if (await emptyState.count() > 0 && await emptyState.first().isVisible()) {
      await expect(emptyState.first()).toHaveScreenshot('history-empty-state.png', {
        maxDiffPixelRatio: 0.02,
      });
    } else if (await historyList.count() > 0) {
      // If there are history items, capture the first card
      const firstCard = historyList.locator('.ldr-history-item, .ldr-card').first();
      if (await firstCard.isVisible()) {
        await expect(firstCard).toHaveScreenshot('history-card.png', {
          maxDiffPixelRatio: 0.02,
        });
      }
    }
  });

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

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

    // Look for empty state or document list
    const emptyState = page.locator('.ldr-empty-state, [class*="empty"], :text("No documents")');
    const docList = page.locator('.ldr-document-list, [class*="library"]');

    if (await emptyState.count() > 0 && await emptyState.first().isVisible()) {
      await expect(emptyState.first()).toHaveScreenshot('library-empty-state.png', {
        maxDiffPixelRatio: 0.02,
      });
    } else if (await docList.count() > 0) {
      const firstCard = docList.locator('.ldr-document-card, .ldr-card').first();
      if (await firstCard.isVisible()) {
        await expect(firstCard).toHaveScreenshot('library-card.png', {
          maxDiffPixelRatio: 0.02,
        });
      }
    }
  });

  test('Metrics link card', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    const metricLink = page.locator('.ldr-metric-link').first();
    if (await metricLink.isVisible()) {
      await expect(metricLink).toHaveScreenshot('metric-link-card.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// NEWS PAGE COMPONENT TESTS
// ============================================

test.describe('News Page Components', () => {
  test('News subscription template', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    // Look for template cards
    const template = page.locator('[class*="template"], .news-template, .ldr-subscription-template').first();
    if (await template.isVisible()) {
      await expect(template).toHaveScreenshot('news-template.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Create Subscription button', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    const createBtn = page.locator('button, a').filter({
      hasText: /Create.*Subscription/i,
    }).first();

    if (await createBtn.isVisible()) {
      await expect(createBtn).toHaveScreenshot('news-create-subscription-btn.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// INTERACTION STATE TESTS
// ============================================

test.describe('Interaction States', () => {
  test('Research - Advanced options collapsed', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    const toggle = page.locator('.ldr-advanced-options-toggle').first();
    if ((await toggle.count()) === 0 || !(await toggle.isVisible())) {
      test.skip();
      return;
    }

    // Ensure panel is collapsed
    const panel = page.locator('.ldr-advanced-options-panel');
    if (await panel.isVisible()) {
      await toggle.click();
      await panel.waitFor({ state: 'hidden' });
    }

    await expect(toggle).toHaveScreenshot('advanced-options-collapsed.png', {
      maxDiffPixelRatio: 0.02,
    });
  });

  test('Research - Advanced options expanded', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    const toggle = page.locator('.ldr-advanced-options-toggle').first();
    if ((await toggle.count()) === 0 || !(await toggle.isVisible())) {
      test.skip();
      return;
    }

    // Expand the panel
    const panel = page.locator('.ldr-advanced-options-panel');
    if (!(await panel.isVisible())) {
      await toggle.click();
      await panel.waitFor({ state: 'visible' });
    }

    if (!(await panel.isVisible())) {
      test.skip();
      return;
    }

    await ensureSheetsClosed(page);
    await expect(panel).toHaveScreenshot('advanced-options-expanded.png', {
      maxDiffPixelRatio: 0.02,
    });
  });

  test('Settings tabs - Tab navigation', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/settings/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('.ldr-loading-spinner', { state: 'hidden', timeout: 10000 }).catch(() => {});

    const tabNav = page.locator('.ldr-settings-tabs, .ldr-tab-navigation, [role="tablist"]').first();
    if ((await tabNav.count()) === 0 || !(await tabNav.isVisible())) {
      test.skip();
      return;
    }

    await expect(tabNav).toHaveScreenshot('settings-tab-navigation.png', {
      maxDiffPixelRatio: 0.02,
    });
  });

  test('Research textarea - with text entered', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    const textarea = page.locator('#query, textarea[name="query"], .ldr-research-textarea').first();
    if (await textarea.isVisible()) {
      // Type sample text
      await textarea.fill('What are the latest advancements in quantum computing?');
      await page.waitForTimeout(200);

      await expect(textarea).toHaveScreenshot('research-textarea-with-text.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Mobile nav - active state highlighting', async ({ page, isMobile }, testInfo) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    // Skip on tablets (iPad) and landscape devices - they use sidebar navigation
    const isTablet = testInfo.project.name.includes('iPad');
    const isLandscape = testInfo.project.name.includes('Landscape');
    if (isTablet || isLandscape) {
      test.skip();
      return;
    }

    // Navigate to different pages to see active state
    // Note: Settings is accessed via the "More" menu on mobile, so it won't show
    // as a highlighted tab in the bottom nav. Only test pages with visible tabs.
    const pages = [
      { path: '/', expected: 'Research' },
      { path: '/history/', expected: 'History' },
    ];

    for (const pageInfo of pages) {
      await page.goto(pageInfo.path);
      await page.waitForLoadState('domcontentloaded');
      await ensureSheetsClosed(page, { preserveMobileNav: true });

      const nav = page.locator('.ldr-mobile-bottom-nav');
      if (await nav.isVisible()) {
        const safeName = pageInfo.expected.toLowerCase();
        await expect(nav).toHaveScreenshot(`mobile-nav-active-${safeName}.png`, {
          maxDiffPixelRatio: 0.02,
        });
      }
    }
  });
});

// ============================================
// LOADING AND ERROR STATES
// ============================================

test.describe('Loading and Error States', () => {
  test('Settings - Loading spinner', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    // Block the settings API to capture loading state
    await page.route('**/api/settings**', (route) => {
      // Delay the response to capture loading state
      setTimeout(() => route.continue(), 5000);
    });

    await page.goto('/settings/');

    // Capture the loading spinner immediately
    const spinner = page.locator('.ldr-loading-spinner, .spinner, [class*="loading"]');
    if (await spinner.first().isVisible({ timeout: 2000 }).catch(() => false)) {
      await expect(spinner.first()).toHaveScreenshot('settings-loading-spinner.png', {
        maxDiffPixelRatio: 0.1, // Allow more variance for animations
      });
    }
  });

  test('Research page - Error message display', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    // Inject an error message element for testing
    await page.evaluate(() => {
      const errorDiv = document.createElement('div');
      errorDiv.className = 'ldr-error-message ldr-test-error';
      errorDiv.style.cssText = 'display: block; padding: 1rem; background: #fee; border: 1px solid #fcc; border-radius: 4px; color: #c00; margin: 1rem;';
      errorDiv.innerHTML = '<strong>Error:</strong> Failed to start research. Please try again.';
      const main = document.querySelector('main, .ldr-page, #content');
      if (main) {
        main.insertBefore(errorDiv, main.firstChild);
      }
    });

    const errorMsg = page.locator('.ldr-test-error');
    if (await errorMsg.isVisible()) {
      await expect(errorMsg).toHaveScreenshot('error-message-display.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Empty state - History page', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    // Check for empty state message
    const emptyState = page.locator(':text("No research history"), :text("no history"), .ldr-empty-state').first();
    if (await emptyState.isVisible()) {
      const container = emptyState.locator('..').locator('..');
      await expect(container).toHaveScreenshot('history-empty-state-container.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Empty state - Library page', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/library/');
    await page.waitForLoadState('domcontentloaded');
    await ensureSheetsClosed(page);

    // Check for empty state message
    const emptyState = page.locator(':text("No documents"), :text("no library"), .ldr-empty-state').first();
    if (await emptyState.isVisible()) {
      const container = emptyState.locator('..').locator('..');
      await expect(container).toHaveScreenshot('library-empty-state-container.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// METRICS PAGE SECTION TESTS
// ============================================

test.describe('Metrics Page Sections', () => {
  /**
   * The Metrics page is very tall (9543px+) which causes screenshot reliability issues.
   * These tests capture specific sections instead of the full page.
   */

  test('Metrics - System Overview section', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/metrics/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('#metrics-content', { state: 'visible', timeout: 15000 }).catch(() => {});

    // Find the System Overview header section
    const overviewSection = page.locator('.ldr-metrics-grid').first();
    if (await overviewSection.isVisible()) {
      await ensureSheetsClosed(page);
      await expect(overviewSection).toHaveScreenshot('metrics-system-overview.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Metrics - Token consumption chart section', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/metrics/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('#metrics-content', { state: 'visible', timeout: 15000 }).catch(() => {});

    // Find the token chart container
    const chartContainer = page.locator('#time-series-chart').locator('..');
    if (await chartContainer.isVisible()) {
      await ensureSheetsClosed(page);
      await expect(chartContainer).toHaveScreenshot('metrics-token-chart-section.png', {
        maxDiffPixelRatio: 0.05, // Charts may have some dynamic variance
      });
    }
  });

  test('Metrics - Search activity chart section', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/metrics/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('#metrics-content', { state: 'visible', timeout: 15000 }).catch(() => {});

    // Find the search activity chart
    const chartContainer = page.locator('#search-activity-chart').locator('..');
    if (await chartContainer.isVisible()) {
      await ensureSheetsClosed(page);
      await expect(chartContainer).toHaveScreenshot('metrics-search-activity-section.png', {
        maxDiffPixelRatio: 0.05,
      });
    }
  });

  test('Metrics - Model usage section', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/metrics/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('#metrics-content', { state: 'visible', timeout: 15000 }).catch(() => {});

    // Find the model usage list
    const modelUsageList = page.locator('#model-usage-list');
    if (await modelUsageList.isVisible()) {
      await ensureSheetsClosed(page);
      await expect(modelUsageList).toHaveScreenshot('metrics-model-usage-section.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Metrics - Research analytics section', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/metrics/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('#metrics-content', { state: 'visible', timeout: 15000 }).catch(() => {});

    // Find research analytics section
    const analyticsSection = page.locator('#mode-breakdown').locator('..').locator('..');
    if (await analyticsSection.isVisible()) {
      await ensureSheetsClosed(page);
      await expect(analyticsSection).toHaveScreenshot('metrics-research-analytics-section.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Metrics - Rate limiting section', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/metrics/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('#metrics-content', { state: 'visible', timeout: 15000 }).catch(() => {});

    // Scroll to rate limiting section
    const rateLimitSection = page.locator('#rate-limit-success-rate').locator('..').locator('..');
    if (await rateLimitSection.count() > 0) {
      await rateLimitSection.scrollIntoViewIfNeeded();
      await page.waitForTimeout(200);

      if (await rateLimitSection.isVisible()) {
        await ensureSheetsClosed(page);
        await expect(rateLimitSection).toHaveScreenshot('metrics-rate-limiting-section.png', {
          maxDiffPixelRatio: 0.02,
        });
      }
    }
  });

  test('Metrics - Viewport-only screenshot (no fullPage)', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/metrics/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('#metrics-content', { state: 'visible', timeout: 15000 }).catch(() => {});
    await ensureSheetsClosed(page);

    // Take a viewport-only screenshot (not fullPage) for reliable baseline
    await expect(page).toHaveScreenshot('metrics-viewport-only.png', {
      fullPage: false,
      maxDiffPixelRatio: 0.02,
    });
  });
});

// ============================================
// FULL PAGE MOBILE LAYOUTS
// ============================================

test.describe('Full Page Mobile Layouts', () => {
  // Note: Settings page is excluded as it's too tall (>32767 pixels) for fullPage screenshots
  // Note: News page is excluded as it has dynamic content that causes flaky screenshots
  const pages = [
    { path: '/', name: 'research' },
    { path: '/history/', name: 'history' },
    { path: '/library/', name: 'library' },
  ];

  for (const pageInfo of pages) {
    test(`${pageInfo.name} page - full mobile layout`, async ({ page, isMobile }, testInfo) => {
      if (!isMobile) {
        test.skip();
        return;
      }

      // Skip tablets for this test - they have different layouts
      const isTablet = testInfo.project.name.includes('iPad');
      if (isTablet) {
        test.skip();
        return;
      }

      await page.goto(pageInfo.path);
      await page.waitForLoadState('domcontentloaded');
      await ensureSheetsClosed(page, { preserveMobileNav: true });

      await expect(page).toHaveScreenshot(`${pageInfo.name}-full-mobile.png`, {
        fullPage: true,
        maxDiffPixelRatio: 0.02,
      });
    });
  }
});

// ============================================
// TABLET/SIDEBAR NAVIGATION TESTS
// ============================================

test.describe('Tablet Sidebar Navigation', () => {
  test('iPad sidebar - collapsed state', async ({ page, isMobile }, testInfo) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    // Only run on tablets
    const isTablet = testInfo.project.name.includes('iPad');
    if (!isTablet) {
      test.skip();
      return;
    }

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

    const sidebar = page.locator('.ldr-sidebar, nav[class*="sidebar"], aside');
    if (await sidebar.first().isVisible()) {
      await expect(sidebar.first()).toHaveScreenshot('tablet-sidebar.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('iPad research page layout', async ({ page, isMobile }, testInfo) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

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

    await expect(page).toHaveScreenshot('tablet-research-layout.png', {
      fullPage: false,
      maxDiffPixelRatio: 0.02,
    });
  });
});

// ============================================
// BUTTON STATE TESTS
// ============================================

test.describe('Button States', () => {
  test('Start Research button - disabled state', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    // Clear the textarea to trigger disabled state
    const textarea = page.locator('#query, textarea[name="query"]');
    if (await textarea.isVisible()) {
      await textarea.clear();
      await page.locator('#start-research-btn, button:has-text("Start Research")').waitFor({ state: 'visible' });
    }

    const startBtn = page.locator('#start-research-btn, button:has-text("Start Research")');
    if (await startBtn.isVisible()) {
      // Wait for element to be stable
      await startBtn.scrollIntoViewIfNeeded();
      await page.waitForTimeout(200);
      await expect(startBtn).toHaveScreenshot('start-research-btn-disabled.png', {
        maxDiffPixelRatio: 0.02,
        timeout: 10000,
      });
    }
  });

  test('Start Research button - enabled state with text', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    // Fill textarea to enable the button
    const textarea = page.locator('#query, textarea[name="query"]');
    if (await textarea.isVisible()) {
      await textarea.fill('Test research query');
      await page.locator('#start-research-btn, button:has-text("Start Research")').waitFor({ state: 'visible' });
    }

    const startBtn = page.locator('#start-research-btn, button:has-text("Start Research")');
    if (await startBtn.isVisible()) {
      await startBtn.scrollIntoViewIfNeeded();
      await page.waitForTimeout(200);
      await expect(startBtn).toHaveScreenshot('start-research-btn-enabled.png', {
        maxDiffPixelRatio: 0.02,
        timeout: 10000,
      });
    }
  });

  test('Settings save button', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/settings/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('.ldr-loading-spinner', { state: 'hidden', timeout: 10000 }).catch(() => {});
    await ensureSheetsClosed(page);

    const saveBtn = page.locator('button:has-text("Save"), button[type="submit"], .ldr-save-btn').first();
    if (await saveBtn.isVisible()) {
      await saveBtn.scrollIntoViewIfNeeded();
      await page.waitForTimeout(200);
      await expect(saveBtn).toHaveScreenshot('settings-save-button.png', {
        maxDiffPixelRatio: 0.02,
        timeout: 10000,
      });
    }
  });
});

// ============================================
// MODAL AND SHEET COMPONENTS
// ============================================

test.describe('Modal and Sheet Components', () => {
  test('Mobile sheet backdrop', async ({ page, isMobile }, testInfo) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

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

    // Open the More menu to show a sheet
    const moreBtn = page.locator('[data-nav="more"], .ldr-nav-more-btn, .ldr-mobile-bottom-nav button:has-text("More")');
    if (await moreBtn.count() > 0) {
      await moreBtn.first().click();
      // Wait for sheet to appear
      const sheet = page.locator('.ldr-mobile-sheet');
      await sheet.waitFor({ state: 'visible', timeout: 5000 }).catch(() => {});

      // Capture the sheet element instead of full page for stability
      if (await sheet.isVisible()) {
        await expect(sheet).toHaveScreenshot('mobile-sheet-with-backdrop.png', {
          maxDiffPixelRatio: 0.02,
          timeout: 10000,
        });
      }
    }
  });

  test('Confirmation dialog (if available)', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    // Look for delete buttons that might trigger a confirmation
    const deleteBtn = page.locator('button:has-text("Delete"), [aria-label*="delete"], .ldr-delete-btn').first();
    if (await deleteBtn.isVisible()) {
      await deleteBtn.click();

      // Check for confirmation dialog
      const dialog = page.locator('[role="dialog"], .ldr-modal, .ldr-confirm-dialog');
      await dialog.first().waitFor({ state: 'visible', timeout: 3000 }).catch(() => {});
      if (await dialog.first().isVisible()) {
        await expect(dialog.first()).toHaveScreenshot('confirmation-dialog.png', {
          maxDiffPixelRatio: 0.02,
        });
      }
    }
  });
});

// ============================================
// SETTINGS PAGE SECTIONS
// ============================================

test.describe('Settings Page Sections', () => {
  test('Settings - General section', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/settings/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('.ldr-loading-spinner', { state: 'hidden', timeout: 10000 }).catch(() => {});

    // Click on General tab if tabs exist
    const generalTab = page.locator('[data-tab="general"], button:has-text("General"), a:has-text("General")').first();
    if (await generalTab.isVisible()) {
      await generalTab.click();
      await page.locator('.ldr-settings-content, .ldr-tab-content, [role="tabpanel"]').first().waitFor({ state: 'visible', timeout: 5000 }).catch(() => {});
    }

    const settingsContent = page.locator('.ldr-settings-content, .ldr-tab-content, [role="tabpanel"]').first();
    if (await settingsContent.isVisible()) {
      await expect(settingsContent).toHaveScreenshot('settings-general-section.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Settings - LLM section', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/settings/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('.ldr-loading-spinner', { state: 'hidden', timeout: 10000 }).catch(() => {});

    // Click on LLM tab
    const llmTab = page.locator('[data-tab="llm"], button:has-text("LLM"), a:has-text("LLM")').first();
    if (await llmTab.isVisible()) {
      await llmTab.click();
      await page.locator('.ldr-settings-content, .ldr-tab-content, [role="tabpanel"]').first().waitFor({ state: 'visible', timeout: 5000 }).catch(() => {});

      const settingsContent = page.locator('.ldr-settings-content, .ldr-tab-content, [role="tabpanel"]').first();
      if (await settingsContent.isVisible()) {
        await expect(settingsContent).toHaveScreenshot('settings-llm-section.png', {
          maxDiffPixelRatio: 0.02,
        });
      }
    }
  });

  test('Settings - Search section', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/settings/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('.ldr-loading-spinner', { state: 'hidden', timeout: 10000 }).catch(() => {});

    // Click on Search tab
    const searchTab = page.locator('[data-tab="search"], button:has-text("Search"), a:has-text("Search")').first();
    if (await searchTab.isVisible()) {
      await searchTab.click();
      await page.locator('.ldr-settings-content, .ldr-tab-content, [role="tabpanel"]').first().waitFor({ state: 'visible', timeout: 5000 }).catch(() => {});

      const settingsContent = page.locator('.ldr-settings-content, .ldr-tab-content, [role="tabpanel"]').first();
      if (await settingsContent.isVisible()) {
        await expect(settingsContent).toHaveScreenshot('settings-search-section.png', {
          maxDiffPixelRatio: 0.02,
        });
      }
    }
  });

  test('Settings - Reporting section', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/settings/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('.ldr-loading-spinner', { state: 'hidden', timeout: 10000 }).catch(() => {});

    // Click on Reporting tab
    const reportingTab = page.locator('[data-tab="reporting"], button:has-text("Reporting"), a:has-text("Reporting")').first();
    if (await reportingTab.isVisible()) {
      await reportingTab.click();
      await page.locator('.ldr-settings-content, .ldr-tab-content, [role="tabpanel"]').first().waitFor({ state: 'visible', timeout: 5000 }).catch(() => {});

      const settingsContent = page.locator('.ldr-settings-content, .ldr-tab-content, [role="tabpanel"]').first();
      if (await settingsContent.isVisible()) {
        await expect(settingsContent).toHaveScreenshot('settings-reporting-section.png', {
          maxDiffPixelRatio: 0.02,
        });
      }
    }
  });
});

// ============================================
// NEWS PAGE ADDITIONAL TESTS
// ============================================

test.describe('News Page Additional', () => {
  test('News subscription list (if has subscriptions)', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    const subscriptionList = page.locator('.ldr-subscription-list, [class*="subscription"]');
    if (await subscriptionList.count() > 0 && await subscriptionList.first().isVisible()) {
      await expect(subscriptionList.first()).toHaveScreenshot('news-subscription-list.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });

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

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

    const emptyState = page.locator('.ldr-empty-state, :text("No subscriptions"), :text("no news")').first();
    if (await emptyState.isVisible()) {
      await expect(emptyState).toHaveScreenshot('news-empty-state.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('News page header with actions', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    // Capture the header area with any action buttons
    const headerArea = page.locator('.ldr-page-header, header, .ldr-news-header').first();
    if (await headerArea.isVisible()) {
      await expect(headerArea).toHaveScreenshot('news-header-with-actions.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// LIBRARY PAGE ADDITIONAL TESTS
// ============================================

test.describe('Library Page Additional', () => {
  test('Library file upload area', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    const uploadArea = page.locator('.ldr-upload-area, [class*="upload"], .ldr-dropzone').first();
    if (await uploadArea.isVisible()) {
      await expect(uploadArea).toHaveScreenshot('library-upload-area.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Library page header with actions', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    const headerArea = page.locator('.ldr-page-header, header, .ldr-library-header').first();
    if (await headerArea.isVisible()) {
      await expect(headerArea).toHaveScreenshot('library-header-with-actions.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Library search/filter bar', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    const searchBar = page.locator('.ldr-search-bar, input[type="search"], .ldr-filter-bar').first();
    if (await searchBar.isVisible()) {
      await expect(searchBar).toHaveScreenshot('library-search-bar.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// HISTORY PAGE ADDITIONAL TESTS
// ============================================

test.describe('History Page Additional', () => {
  test('History page header with filters', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    const headerArea = page.locator('.ldr-page-header, header, .ldr-history-header').first();
    if (await headerArea.isVisible()) {
      await expect(headerArea).toHaveScreenshot('history-header-with-filters.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('History search/filter bar', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    const filterBar = page.locator('.ldr-search-bar, .ldr-filter-bar, [class*="filter"]').first();
    if (await filterBar.isVisible()) {
      await expect(filterBar).toHaveScreenshot('history-filter-bar.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// RESEARCH PAGE ADDITIONAL TESTS
// ============================================

test.describe('Research Page Additional', () => {
  test('Research form complete view', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');
    await ensureSheetsClosed(page, { preserveMobileNav: true });

    // Capture the entire research form area
    const formArea = page.locator('.ldr-research-form, form, .ldr-research-container').first();
    if (await formArea.isVisible()) {
      await expect(formArea).toHaveScreenshot('research-form-complete.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Research mode option', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    // Find the first mode option (radio button label)
    const modeOption = page.locator('.ldr-mode-selection label, .ldr-mode-option').first();
    if (await modeOption.isVisible()) {
      await modeOption.scrollIntoViewIfNeeded();
      await page.waitForTimeout(200);
      await expect(modeOption).toHaveScreenshot('research-mode-option.png', {
        maxDiffPixelRatio: 0.02,
        timeout: 10000,
      });
    }
  });

  test('Research quick actions', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    const quickActions = page.locator('.ldr-quick-actions, .ldr-action-bar, [class*="quick-action"]');
    if (await quickActions.count() > 0 && await quickActions.first().isVisible()) {
      await expect(quickActions.first()).toHaveScreenshot('research-quick-actions.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// RESPONSIVE HEADER/TITLE TESTS
// ============================================

test.describe('Page Headers', () => {
  const pages = [
    { path: '/', name: 'research' },
    { path: '/history/', name: 'history' },
    { path: '/settings/', name: 'settings' },
    { path: '/news/', name: 'news' },
    { path: '/library/', name: 'library' },
    { path: '/metrics/', name: 'metrics' },
  ];

  for (const pageInfo of pages) {
    test(`${pageInfo.name} page header`, async ({ page, isMobile }) => {
      if (!isMobile) {
        test.skip();
        return;
      }

      await page.goto(pageInfo.path);
      await page.waitForLoadState('domcontentloaded');
      await ensureSheetsClosed(page);

      // Find the main header/title area
      const header = page.locator('h1, .page-title, .ldr-page-header, header').first();
      if (await header.isVisible()) {
        await expect(header).toHaveScreenshot(`${pageInfo.name}-page-header.png`, {
          maxDiffPixelRatio: 0.02,
        });
      }
    });
  }
});

// ============================================
// AUTH PAGES (Login/Register)
// ============================================

test.describe('Auth Pages', () => {
  test('Login page layout', async ({ page, isMobile, context }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    // Clear cookies to ensure we see login page
    await context.clearCookies();

    await page.goto('/auth/login');
    await page.waitForLoadState('domcontentloaded');

    // Check if we're on a login page
    const loginForm = page.locator('form, .ldr-login-form, [class*="login"]');
    if (await loginForm.count() > 0 && await loginForm.first().isVisible()) {
      await expect(page).toHaveScreenshot('auth-login-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Register page layout', async ({ page, isMobile, context }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    // Clear cookies to ensure we see register page
    await context.clearCookies();

    await page.goto('/auth/register');
    await page.waitForLoadState('domcontentloaded');

    // Check if we're on a register page
    const registerForm = page.locator('form, .ldr-register-form, [class*="register"]');
    if (await registerForm.count() > 0 && await registerForm.first().isVisible()) {
      await expect(page).toHaveScreenshot('auth-register-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// COLLECTIONS/LIBRARY MANAGEMENT PAGES
// ============================================

test.describe('Collections Pages', () => {
  test('Collections list page', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/library/collections/');
    await page.waitForLoadState('domcontentloaded');
    await ensureSheetsClosed(page);

    // Check if collections page loaded (may redirect or show list)
    const pageContent = page.locator('main, .ldr-page, .ldr-collections');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('collections-list-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Create collection page', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/library/collections/create/');
    await page.waitForLoadState('domcontentloaded');
    await ensureSheetsClosed(page);

    const createForm = page.locator('form, .ldr-create-collection-form');
    if (await createForm.count() > 0 && await createForm.first().isVisible()) {
      await expect(page).toHaveScreenshot('collection-create-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// NEWS SUBSCRIPTION FORM
// ============================================

test.describe('News Subscription Form', () => {
  test('News subscription form page', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    // Try different possible URLs for the subscription form
    const urls = ['/news/subscription/create/', '/news/create/', '/subscriptions/create/'];

    for (const url of urls) {
      await page.goto(url);
      await page.waitForLoadState('domcontentloaded');

      const form = page.locator('form, .ldr-subscription-form');
      if (await form.count() > 0 && await form.first().isVisible()) {
        await ensureSheetsClosed(page);
        await expect(page).toHaveScreenshot('news-subscription-form-page.png', {
          fullPage: false,
          maxDiffPixelRatio: 0.02,
        });
        return; // Found the form, exit
      }
    }
  });
});

// ============================================
// ANALYTICS PAGES
// ============================================

test.describe('Analytics Pages', () => {
  test('Cost analytics page', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/cost-analytics/');
    await page.waitForLoadState('domcontentloaded');
    await ensureSheetsClosed(page);

    const pageContent = page.locator('main, .ldr-page, .ldr-cost-analytics');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('cost-analytics-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Link analytics page', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/link-analytics/');
    await page.waitForLoadState('domcontentloaded');
    await ensureSheetsClosed(page);

    const pageContent = page.locator('main, .ldr-page, .ldr-link-analytics');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('link-analytics-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// BENCHMARK PAGE
// ============================================

test.describe('Benchmark Page', () => {
  test('Benchmark page layout', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/benchmark/');
    await page.waitForLoadState('domcontentloaded');
    await ensureSheetsClosed(page);

    const pageContent = page.locator('main, .ldr-page, .ldr-benchmark');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('benchmark-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// STAR REVIEWS PAGE
// ============================================

test.describe('Star Reviews Page', () => {
  test('Star reviews page layout', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/star-reviews/');
    await page.waitForLoadState('domcontentloaded');
    await ensureSheetsClosed(page);

    const pageContent = page.locator('main, .ldr-page, .ldr-star-reviews');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('star-reviews-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// SUBSCRIPTIONS PAGE
// ============================================

test.describe('Subscriptions Page', () => {
  test('Subscriptions management page', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/subscriptions/');
    await page.waitForLoadState('domcontentloaded');
    await ensureSheetsClosed(page);

    const pageContent = page.locator('main, .ldr-page, .ldr-subscriptions');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('subscriptions-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// EMBEDDING SETTINGS PAGE
// ============================================

test.describe('Embedding Settings Page', () => {
  test('Embedding settings page layout', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/embedding-settings/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('.ldr-loading-spinner', { state: 'hidden', timeout: 10000 }).catch(() => {});
    await ensureSheetsClosed(page);

    const pageContent = page.locator('main, .ldr-page, .ldr-embedding-settings');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('embedding-settings-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// DOWNLOAD MANAGER PAGE
// ============================================

test.describe('Download Manager Page', () => {
  test('Download manager page layout', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/download-manager/');
    await page.waitForLoadState('domcontentloaded');
    await ensureSheetsClosed(page);

    const pageContent = page.locator('main, .ldr-page, .ldr-download-manager');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('download-manager-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// NEWS SUB-PAGES
// ============================================

test.describe('News Sub-Pages', () => {
  test('News subscriptions list page', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/news/subscriptions');
    await page.waitForLoadState('domcontentloaded');
    await ensureSheetsClosed(page);

    const pageContent = page.locator('main, .ldr-page, .ldr-subscriptions');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('news-subscriptions-list-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('News new subscription page', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/news/subscriptions/new');
    await page.waitForLoadState('domcontentloaded');
    await ensureSheetsClosed(page);

    const pageContent = page.locator('main, .ldr-page, form');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('news-new-subscription-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// METRICS SUB-PAGES
// ============================================

test.describe('Metrics Sub-Pages', () => {
  test('Context overflow page', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/metrics/context-overflow');
    await page.waitForLoadState('domcontentloaded');
    await ensureSheetsClosed(page);

    const pageContent = page.locator('main, .ldr-page, .ldr-context-overflow');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('metrics-context-overflow-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });

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

    await page.goto('/metrics/costs');
    await page.waitForLoadState('domcontentloaded');
    await ensureSheetsClosed(page);

    const pageContent = page.locator('main, .ldr-page, .ldr-costs');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('metrics-costs-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// AUTH CHANGE PASSWORD PAGE
// ============================================

test.describe('Auth Change Password', () => {
  test('Change password page layout', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/auth/change-password');
    await page.waitForLoadState('domcontentloaded');

    const pageContent = page.locator('main, .ldr-page, form');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('auth-change-password-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// SETTINGS SUB-PAGES
// ============================================

test.describe('Settings Sub-Pages', () => {
  test('Settings main page', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/settings/main');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('.ldr-loading-spinner', { state: 'hidden', timeout: 10000 }).catch(() => {});
    await ensureSheetsClosed(page);

    const pageContent = page.locator('main, .ldr-page, .ldr-settings');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('settings-main-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Settings collections page', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/settings/collections');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('.ldr-loading-spinner', { state: 'hidden', timeout: 10000 }).catch(() => {});
    await ensureSheetsClosed(page);

    const pageContent = page.locator('main, .ldr-page, .ldr-settings');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('settings-collections-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Settings API keys page', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/settings/api_keys');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('.ldr-loading-spinner', { state: 'hidden', timeout: 10000 }).catch(() => {});
    await ensureSheetsClosed(page);

    const pageContent = page.locator('main, .ldr-page, .ldr-settings');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('settings-api-keys-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Settings search engines page', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/settings/search_engines');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('.ldr-loading-spinner', { state: 'hidden', timeout: 10000 }).catch(() => {});
    await ensureSheetsClosed(page);

    const pageContent = page.locator('main, .ldr-page, .ldr-settings');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('settings-search-engines-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Settings LLM page', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/settings/llm');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('.ldr-loading-spinner', { state: 'hidden', timeout: 10000 }).catch(() => {});
    await ensureSheetsClosed(page);

    const pageContent = page.locator('main, .ldr-page, .ldr-settings');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('settings-llm-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// LIBRARY SUB-PAGES
// ============================================

test.describe('Library Sub-Pages', () => {
  test('Library download manager page', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/library/download-manager');
    await page.waitForLoadState('domcontentloaded');
    await ensureSheetsClosed(page);

    const pageContent = page.locator('main, .ldr-page, .ldr-download-manager');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('library-download-manager-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Library embedding settings page', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/library/embedding-settings');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForSelector('.ldr-loading-spinner', { state: 'hidden', timeout: 10000 }).catch(() => {});
    await ensureSheetsClosed(page);

    const pageContent = page.locator('main, .ldr-page, .ldr-embedding-settings');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('library-embedding-settings-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Library collections page', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/library/collections');
    await page.waitForLoadState('domcontentloaded');
    await ensureSheetsClosed(page);

    const pageContent = page.locator('main, .ldr-page, .ldr-collections');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('library-collections-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });

  test('Library create collection page', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    await page.goto('/library/collections/create');
    await page.waitForLoadState('domcontentloaded');
    await ensureSheetsClosed(page);

    const pageContent = page.locator('main, .ldr-page, form');
    if (await pageContent.first().isVisible()) {
      await expect(page).toHaveScreenshot('library-create-collection-page.png', {
        fullPage: false,
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});
