/**
 * Research Page Mobile Layout Tests
 *
 * Page-specific tests for the Research page (home page) on mobile devices.
 * These tests focus on element spacing, mobile nav clearance, and
 * advanced options interactions that are unique to this page.
 *
 * Note: Generic tests for visual regression, touch targets, and scrollability
 * are covered by all-pages-mobile.spec.js with better device coverage.
 *
 * Key areas tested:
 * 1. Element spacing - adequate gaps between form elements
 * 2. Mobile nav clearance - content not hidden behind bottom nav
 * 3. Advanced options - panel expand/collapse interactions
 *
 * Note: Authentication is handled by auth.setup.js via storageState
 */

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

// Additional constants specific to this page
const MIN_NAV_CLEARANCE = 16;

// ============================================
// ELEMENT SPACING TESTS
// ============================================

test.describe('Research Page - Element Spacing', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');
  });

  test('adequate spacing between form elements', async ({ page }) => {
    // Get positions of key elements
    const elements = await page.evaluate(() => {
      const getRect = (selector) => {
        const el = document.querySelector(selector);
        if (!el) return null;
        const style = window.getComputedStyle(el);
        if (style.display === 'none' || style.visibility === 'hidden') return null;
        const rect = el.getBoundingClientRect();
        if (rect.height === 0 || rect.width === 0) return null;
        return { top: rect.top, bottom: rect.bottom, height: rect.height };
      };

      return {
        queryTextarea: getRect('#query'),
        modeSelection: getRect('.ldr-mode-selection'),
        advancedToggle: getRect('.ldr-advanced-options-toggle'),
        formActions: getRect('.ldr-form-actions'),
        formOptions: getRect('.ldr-form-options'),
      };
    });

    // Check spacing between consecutive elements (only visible ones)
    const orderedElements = [
      { name: 'queryTextarea', data: elements.queryTextarea },
      { name: 'modeSelection', data: elements.modeSelection },
      { name: 'advancedToggle', data: elements.advancedToggle },
      { name: 'formActions', data: elements.formActions },
      { name: 'formOptions', data: elements.formOptions },
    ].filter(e => e.data !== null);

    // Need at least 2 elements to check spacing
    if (orderedElements.length < 2) {
      // Skip if not enough elements visible
      return;
    }

    for (let i = 1; i < orderedElements.length; i++) {
      const prev = orderedElements[i - 1];
      const curr = orderedElements[i];

      if (prev.data && curr.data) {
        const spacing = curr.data.top - prev.data.bottom;
        // Allow for negative spacing as elements may overlap visually by design
        // Just ensure no extreme negative spacing (overlapping completely)
        expect(spacing, `Spacing between ${prev.name} and ${curr.name}`).toBeGreaterThanOrEqual(-10);
      }
    }
  });

  test('no overlapping interactive elements', async ({ page }) => {
    const overlaps = await page.evaluate(() => {
      const elements = [
        document.querySelector('#start-research-btn'),
        document.querySelector('#notification-toggle'),
        document.querySelector('.ldr-advanced-options-toggle'),
      ].filter(el => {
        if (!el) return false;
        const style = window.getComputedStyle(el);
        if (style.display === 'none' || style.visibility === 'hidden') return false;
        const rect = el.getBoundingClientRect();
        return rect.width > 0 && rect.height > 0;
      });

      // Need at least 2 elements to check overlap
      if (elements.length < 2) return [];

      const rects = elements.map(el => el.getBoundingClientRect());
      const overlapping = [];

      for (let i = 0; i < rects.length; i++) {
        for (let j = i + 1; j < rects.length; j++) {
          const r1 = rects[i];
          const r2 = rects[j];

          // Allow small overlap (up to 5px) for design purposes
          const overlap = !(r1.right < r2.left + 5 ||
                          r1.left > r2.right - 5 ||
                          r1.bottom < r2.top + 5 ||
                          r1.top > r2.bottom - 5);

          if (overlap) {
            overlapping.push(`Element ${i} overlaps with element ${j}`);
          }
        }
      }

      return overlapping;
    });

    expect(overlaps, 'No elements should overlap').toHaveLength(0);
  });
});

// ============================================
// MOBILE NAVIGATION CLEARANCE TESTS
// ============================================

test.describe('Research Page - Mobile Nav Clearance', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');
    // Wait for mobile nav to initialize (if present)
    const mobileNav = page.locator('.ldr-mobile-bottom-nav');
    await mobileNav.or(page.locator('body')).first().waitFor({ state: 'attached' });
  });

  test('last element has clearance above mobile nav', async ({ page, isMobile }, testInfo) => {
    // Skip for desktop
    if (!isMobile) {
      test.skip();
      return;
    }

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

    // Scroll to bottom to bring content elements into view relative to the nav
    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
    await page.locator('.ldr-mobile-bottom-nav').waitFor({ state: 'visible' });

    const result = await page.evaluate(() => {
      const mobileNav = document.querySelector('.ldr-mobile-bottom-nav');
      if (!mobileNav) return { hasNav: false };

      const navStyle = window.getComputedStyle(mobileNav);
      if (navStyle.display === 'none') return { hasNav: false };

      const navRect = mobileNav.getBoundingClientRect();

      // Find the last visible content element
      const contentElements = [
        document.querySelector('.ldr-form-options'),
        document.querySelector('.ldr-form-actions'),
        document.querySelector('#start-research-btn'),
      ].filter(el => {
        if (!el) return false;
        const style = window.getComputedStyle(el);
        return style.display !== 'none' && style.visibility !== 'hidden';
      });

      if (contentElements.length === 0) return { hasNav: true, noContent: true };

      // Find the bottom-most element
      let lastBottom = 0;
      contentElements.forEach(el => {
        const rect = el.getBoundingClientRect();
        if (rect.bottom > lastBottom && rect.height > 0) {
          lastBottom = rect.bottom;
        }
      });

      return {
        hasNav: true,
        navTop: navRect.top,
        lastElementBottom: lastBottom,
        clearance: navRect.top - lastBottom,
      };
    });

    if (result.hasNav && !result.noContent) {
      // Content should end above or near the nav bar (allow some overlap as content scrolls behind)
      // The important thing is that the last interactive element is reachable
      expect(result.clearance, 'Clearance above mobile nav').toBeGreaterThanOrEqual(-20);
    }
  });

  test('page has adequate bottom padding for nav', async ({ page, isMobile }, testInfo) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    // Skip on tablets (iPad) - they use sidebar navigation, not bottom nav
    const isTablet = testInfo.project.name.includes('iPad');
    if (isTablet) {
      test.skip();
      return;
    }

    const result = await page.evaluate(() => {
      // Try multiple selectors for the page container
      const pageContainer = document.querySelector('.ldr-page.active') ||
                           document.querySelector('.ldr-page') ||
                           document.querySelector('.ldr-main-content') ||
                           document.querySelector('main');
      if (!pageContainer) return { found: false, padding: 0 };

      const style = window.getComputedStyle(pageContainer);
      return {
        found: true,
        padding: parseFloat(style.paddingBottom) + parseFloat(style.marginBottom)
      };
    });

    if (!result.found) {
      // Skip if no page container found
      return;
    }

    // Should have at least some bottom padding (nav height is ~60px)
    expect(result.padding, 'Bottom padding for mobile nav').toBeGreaterThanOrEqual(60);
  });
});

// ============================================
// ADVANCED OPTIONS PANEL TESTS
// ============================================

test.describe('Research Page - Advanced Options', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');
  });

  test('advanced options toggle works on mobile', async ({ page }) => {
    const toggle = page.locator('.ldr-advanced-options-toggle');
    const panel = page.locator('.ldr-advanced-options-panel');

    // Skip if toggle doesn't exist
    if (await toggle.count() === 0) {
      return;
    }

    // Panel should be hidden initially
    const isPanelInitiallyVisible = await panel.isVisible().catch(() => false);

    // Click to toggle
    await toggle.click();
    if (isPanelInitiallyVisible) {
      await panel.waitFor({ state: 'hidden' });
    } else {
      await panel.waitFor({ state: 'visible' });
    }

    // Panel visibility should change
    const isPanelNowVisible = await panel.isVisible().catch(() => false);
    expect(isPanelNowVisible).not.toBe(isPanelInitiallyVisible);

    // Check no horizontal overflow after expanding
    const hasHorizontalScroll = await page.evaluate(() => {
      return document.documentElement.scrollWidth > window.innerWidth;
    });
    expect(hasHorizontalScroll, 'No horizontal scroll after toggling').toBe(false);
  });

  test('advanced options panel content is accessible', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

    const toggle = page.locator('.ldr-advanced-options-toggle');
    const panel = page.locator('.ldr-advanced-options-panel');

    // Skip if toggle doesn't exist
    if (await toggle.count() === 0) {
      return;
    }

    // Ensure panel is expanded (may already be open by default)
    const isAlreadyVisible = await panel.isVisible().catch(() => false);
    if (!isAlreadyVisible) {
      await toggle.click();
      await panel.waitFor({ state: 'visible' });
    }

    // Check panel is visible
    const isPanelVisible = await panel.isVisible().catch(() => false);
    if (!isPanelVisible) {
      // Panel might already be visible, just continue
      return;
    }

    // Check that form fields inside panel are usable
    const modelSelect = page.locator('#model_provider');
    if (await modelSelect.count() > 0 && await modelSelect.isVisible()) {
      const box = await modelSelect.boundingBox();
      if (box) {
        expect(box.height, 'Model select height >= 44px').toBeGreaterThanOrEqual(MIN_TOUCH_TARGET);
      }
    }
  });
});
