/**
 * Empty States Mobile Tests
 *
 * Visual regression tests for empty states across all pages.
 * Empty states are important UX elements that guide users when no data exists.
 *
 * Covers:
 * - History empty state (no research history)
 * - Library empty state (no collections)
 * - News empty state (no subscriptions/feed items)
 * - Metrics empty states (no data)
 */

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

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

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

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

    // Check for empty state indicator
    const emptyIndicator = page.locator('text=/no.*research|no.*history|empty/i');
    const hasEmpty = await emptyIndicator.first().isVisible().catch(() => false);

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

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

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

    const contentArea = page.locator('.ldr-history-content, .ldr-content, main').first();

    if (await contentArea.isVisible()) {
      await expect(contentArea).toHaveScreenshot('empty-state-history-content.png', {
        maxDiffPixelRatio: 0.02,
      });
    }
  });
});

// ============================================
// LIBRARY EMPTY STATES
// ============================================

test.describe('Empty States - Library', () => {
  test('library main page empty state screenshot', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

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

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

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

    // Check for empty collections indicator
    const emptyIndicator = page.locator('text=/no.*collection|empty|create.*first/i');
    const hasEmpty = await emptyIndicator.first().isVisible().catch(() => false);

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

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

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

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

// ============================================
// NEWS EMPTY STATES
// ============================================

test.describe('Empty States - News', () => {
  test('news feed empty state screenshot', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    await expect(page).toHaveScreenshot('empty-state-news-feed.png', {
      fullPage: false,
      maxDiffPixelRatio: 0.03, // Slightly higher tolerance for dynamic content
    });
  });

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

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

    // Check for empty subscriptions indicator
    const emptyIndicator = page.locator('text=/no.*subscription|empty|create.*first/i');
    const hasEmpty = await emptyIndicator.first().isVisible().catch(() => false);

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

// ============================================
// METRICS EMPTY STATES
// ============================================

test.describe('Empty States - Metrics', () => {
  test('metrics dashboard empty state screenshot', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// ============================================
// EMPTY STATE STYLING VERIFICATION
// ============================================

test.describe('Empty States - Styling Verification', () => {
  const pagesToCheck = [
    { path: '/history/', name: 'History' },
    { path: '/library/collections', name: 'Collections' },
    { path: '/news/subscriptions', name: 'Subscriptions' },
  ];

  for (const pageInfo of pagesToCheck) {
    test(`${pageInfo.name} empty state is centered and readable`, async ({ page, isMobile }) => {
      if (!isMobile) {
        test.skip();
        return;
      }

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

      // Look for empty state text
      const emptyText = page.locator('text=/no.*found|empty|create.*first|get.*started/i');

      if (await emptyText.first().isVisible().catch(() => false)) {
        const box = await emptyText.first().boundingBox();
        const viewportWidth = page.viewportSize().width;

        if (box) {
          // Check text is reasonably centered
          const leftMargin = box.x;
          const rightMargin = viewportWidth - (box.x + box.width);
          const marginDiff = Math.abs(leftMargin - rightMargin);

          // Should be within 30% of viewport width difference
          expect(
            marginDiff < viewportWidth * 0.35,
            `${pageInfo.name} empty state should be reasonably centered`
          ).toBe(true);
        }
      }
    });

    test(`${pageInfo.name} empty state has readable font size`, async ({ page, isMobile }) => {
      if (!isMobile) {
        test.skip();
        return;
      }

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

      // Look for empty state text
      const emptyText = page.locator('text=/no.*found|empty|create.*first|get.*started/i');

      if (await emptyText.first().isVisible().catch(() => false)) {
        const fontSize = await emptyText.first().evaluate((el) => {
          return parseFloat(window.getComputedStyle(el).fontSize);
        });

        // Font should be at least 14px for readability
        expect(fontSize).toBeGreaterThanOrEqual(14);
      }
    });
  }
});

// ============================================
// EMPTY STATE CALL-TO-ACTION BUTTONS
// ============================================

test.describe('Empty States - Call to Action', () => {
  test('collections page screenshot shows create option', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    // Take screenshot to verify create button is present visually
    await expect(page).toHaveScreenshot('collections-page-with-create.png', {
      fullPage: false,
      maxDiffPixelRatio: 0.02,
    });
  });

  test('subscriptions page screenshot shows create option', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    // Take screenshot to verify create button is present visually
    await expect(page).toHaveScreenshot('subscriptions-page-with-create.png', {
      fullPage: false,
      maxDiffPixelRatio: 0.02,
    });
  });

  test('news feed has create subscription link', async ({ page, isMobile }) => {
    if (!isMobile) {
      test.skip();
      return;
    }

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

    // Look for create subscription link
    const createLink = page.locator('a, button').filter({ hasText: /create.*subscription|new.*subscription|subscribe/i });
    const hasLink = await createLink.first().isVisible().catch(() => false);

    expect(hasLink).toBe(true);
  });
});
