/**
 * Desktop Layout Tests
 *
 * Comprehensive tests to verify the desktop sidebar layout works correctly
 * and doesn't overlap with the main content at various viewport sizes.
 *
 * Coverage:
 * - Main pages with sidebar (Research, History, Settings, News, Library, Metrics)
 * - Metrics sub-pages (Costs, Star Reviews, Context Overflow, Links)
 * - News sub-pages (Subscriptions, New Subscription)
 * - Library sub-pages (Collections, Create Collection, Download Manager, Embedding Settings)
 * - Auth pages (Login, Register - no sidebar, Change Password - with sidebar)
 * - Benchmark page
 *
 * Breakpoints tested:
 * - 768px-991px: Collapsed sidebar (60px)
 * - 992px-1199px: Full sidebar (240px)
 * - 1200px+: Large desktop with max-width constraints
 * - 1600px+: Extra large desktop
 * - 1920px+: Ultra-wide screens
 */

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

// ============================================
// HELPER FUNCTIONS
// ============================================

/**
 * Verify sidebar doesn't overlap main content
 */
async function verifySidebarNoOverlap(page, expectedSidebarWidth = null) {
  const sidebar = page.locator('.ldr-sidebar');
  const mainContent = page.locator('.ldr-main-content');

  const sidebarBox = await sidebar.boundingBox();
  const mainContentBox = await mainContent.boundingBox();

  expect(sidebarBox).not.toBeNull();
  expect(mainContentBox).not.toBeNull();

  if (sidebarBox && mainContentBox) {
    // Verify sidebar width if expected
    if (expectedSidebarWidth) {
      expect(sidebarBox.width).toBeGreaterThanOrEqual(expectedSidebarWidth - 5);
      expect(sidebarBox.width).toBeLessThanOrEqual(expectedSidebarWidth + 5);
    }

    // Main content should start after sidebar ends (no overlap)
    const sidebarRightEdge = sidebarBox.x + sidebarBox.width;
    expect(mainContentBox.x).toBeGreaterThanOrEqual(sidebarRightEdge - 1);
  }
}

/**
 * Standard page setup for desktop tests
 */
async function setupDesktopPage(page, path, width = 1200, height = 800) {
  await page.setViewportSize({ width, height });
  await page.goto(path);
  await page.waitForLoadState('domcontentloaded');
}

/**
 * Check if page has sidebar (some pages like auth don't have sidebar)
 */
async function hasSidebar(page) {
  const sidebar = page.locator('.ldr-sidebar');
  const count = await sidebar.count();
  if (count === 0) return false;
  const isVisible = await sidebar.first().isVisible().catch(() => false);
  return isVisible;
}

// ============================================
// CORE SIDEBAR LAYOUT TESTS (Multiple Viewports)
// ============================================

test.describe('Desktop Sidebar Layout - Viewport Tests', () => {
  test('Sidebar does not overlap main content at 1200px width', async ({ page, isMobile }) => {
    if (isMobile) { test.skip(); return; }

    await setupDesktopPage(page, '/settings/', 1200, 800);
    await verifySidebarNoOverlap(page, 240);
  });

  test('Sidebar does not overlap main content at 1400px width', async ({ page, isMobile }) => {
    if (isMobile) { test.skip(); return; }

    await setupDesktopPage(page, '/settings/', 1400, 900);
    await verifySidebarNoOverlap(page, 240);
  });

  test('Sidebar does not overlap main content at 1600px width', async ({ page, isMobile }) => {
    if (isMobile) { test.skip(); return; }

    await setupDesktopPage(page, '/settings/', 1600, 900);
    await verifySidebarNoOverlap(page, 240);
  });

  test('Sidebar does not overlap main content at 1920px width', async ({ page, isMobile }) => {
    if (isMobile) { test.skip(); return; }

    await setupDesktopPage(page, '/settings/', 1920, 1080);
    await verifySidebarNoOverlap(page, 240);
  });

  test('Collapsed sidebar (60px) at 900px width', async ({ page, isMobile }) => {
    if (isMobile) { test.skip(); return; }

    await setupDesktopPage(page, '/settings/', 900, 700);
    await verifySidebarNoOverlap(page, 60);
  });

  test('Full sidebar (240px) at 1000px width', async ({ page, isMobile }) => {
    if (isMobile) { test.skip(); return; }

    await setupDesktopPage(page, '/settings/', 1000, 700);
    await verifySidebarNoOverlap(page, 240);
  });
});

// ============================================
// MAIN PAGES - SIDEBAR NO OVERLAP TESTS
// ============================================

test.describe('Main Pages - Sidebar No Overlap', () => {
  const mainPages = [
    { 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 { path, name } of mainPages) {
    test(`${name} page - no sidebar overlap at 1200px`, async ({ page, isMobile }) => {
      if (isMobile) { test.skip(); return; }

      await setupDesktopPage(page, path, 1200, 800);
      await verifySidebarNoOverlap(page, 240);
    });
  }
});

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

test.describe('Metrics Sub-Pages - Sidebar No Overlap', () => {
  const metricsPages = [
    { path: '/metrics/', name: 'Metrics Dashboard' },
    { path: '/metrics/costs', name: 'Metrics Costs' },
    { path: '/metrics/star-reviews', name: 'Metrics Star Reviews' },
    { path: '/metrics/context-overflow', name: 'Metrics Context Overflow' },
    { path: '/metrics/links', name: 'Metrics Links' },
  ];

  for (const { path, name } of metricsPages) {
    test(`${name} - no sidebar overlap`, async ({ page, isMobile }) => {
      if (isMobile) { test.skip(); return; }

      await setupDesktopPage(page, path, 1200, 800);
      await verifySidebarNoOverlap(page, 240);
    });
  }
});

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

test.describe('News Sub-Pages - Sidebar No Overlap', () => {
  const newsPages = [
    { path: '/news/', name: 'News Main' },
    { path: '/news/subscriptions', name: 'News Subscriptions List' },
    { path: '/news/subscriptions/new', name: 'News New Subscription' },
  ];

  for (const { path, name } of newsPages) {
    test(`${name} - no sidebar overlap`, async ({ page, isMobile }) => {
      if (isMobile) { test.skip(); return; }

      await setupDesktopPage(page, path, 1200, 800);
      await verifySidebarNoOverlap(page, 240);
    });
  }
});

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

test.describe('Library Sub-Pages - Sidebar No Overlap', () => {
  const libraryPages = [
    { path: '/library/', name: 'Library Main' },
    { path: '/library/collections', name: 'Library Collections' },
    { path: '/library/collections/create', name: 'Library Create Collection' },
    { path: '/library/download-manager', name: 'Library Download Manager' },
    { path: '/library/embedding-settings', name: 'Library Embedding Settings' },
  ];

  for (const { path, name } of libraryPages) {
    test(`${name} - no sidebar overlap`, async ({ page, isMobile }) => {
      if (isMobile) { test.skip(); return; }

      await setupDesktopPage(page, path, 1200, 800);
      await verifySidebarNoOverlap(page, 240);
    });
  }
});

// ============================================
// AUTH PAGES
// Note: When authenticated (via auth file), login/register pages
// may redirect or show different content
// ============================================

test.describe('Auth Pages - Desktop Layout', () => {
  test('Login page - proper desktop layout', async ({ page, isMobile }) => {
    if (isMobile) { test.skip(); return; }

    await page.setViewportSize({ width: 1200, height: 800 });
    await page.goto('/auth/login');
    await page.waitForLoadState('domcontentloaded');

    // When authenticated, may redirect to main page or show sidebar
    // Just verify page loads and check sidebar if present
    if (await hasSidebar(page)) {
      await verifySidebarNoOverlap(page, 240);
    } else {
      // If not authenticated (no sidebar), verify form is visible
      const form = page.locator('form');
      if (await form.count() > 0) {
        await expect(form.first()).toBeVisible();
      }
    }
  });

  test('Register page - proper desktop layout', async ({ page, isMobile }) => {
    if (isMobile) { test.skip(); return; }

    await page.setViewportSize({ width: 1200, height: 800 });
    await page.goto('/auth/register');
    await page.waitForLoadState('domcontentloaded');

    // When authenticated, may redirect or show different content
    if (await hasSidebar(page)) {
      await verifySidebarNoOverlap(page, 240);
    } else {
      const form = page.locator('form');
      if (await form.count() > 0) {
        await expect(form.first()).toBeVisible();
      }
    }
  });

  test('Change Password page - no sidebar overlap', async ({ page, isMobile }) => {
    if (isMobile) { test.skip(); return; }

    await setupDesktopPage(page, '/auth/change-password', 1200, 800);

    // Change password page should have sidebar (user is authenticated)
    if (await hasSidebar(page)) {
      await verifySidebarNoOverlap(page, 240);
    } else {
      // If no sidebar, just verify page loads
      const body = page.locator('body');
      await expect(body).toBeVisible();
    }
  });
});

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

test.describe('Benchmark Page - Sidebar No Overlap', () => {
  test('Benchmark page - no sidebar overlap', async ({ page, isMobile }) => {
    if (isMobile) { test.skip(); return; }

    await setupDesktopPage(page, '/benchmark/', 1200, 800);
    await verifySidebarNoOverlap(page, 240);
  });
});
