/**
 * Integrated Frontend Visual Check
 * Tests the integrated frontend with Tailwind CDN styling
 */

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

test.describe('Integrated Frontend Visual Check', () => {
  test('should display styled login page', async ({ page }) => {
    // Navigate to platform subdomain on port 5174
    await page.goto('http://platform.lvh.me:5174/');

    // Wait for page to load
    await page.waitForLoadState('networkidle');

    // Should see login heading
    const heading = page.getByRole('heading', { name: /sign in/i });
    await expect(heading).toBeVisible();

    // Take screenshot
    await page.screenshot({ path: 'tests/e2e/integrated-login.png', fullPage: true });

    // Check that body has gray background (Tailwind classes working)
    const body = page.locator('body');
    const bgColor = await body.evaluate(el => {
      return window.getComputedStyle(el).backgroundColor;
    });

    console.log('Body background color:', bgColor);

    // Should NOT be transparent white - should have gray background
    expect(bgColor).not.toBe('rgba(0, 0, 0, 0)');
    expect(bgColor).not.toBe('rgb(255, 255, 255)');
  });

  test('should display styled dashboard after login', async ({ page }) => {
    // Navigate and login
    await page.goto('http://platform.lvh.me:5174/');
    await page.fill('input[name="username"]', 'poduck');
    await page.fill('input[name="password"]', 'starry12');
    await page.click('button[type="submit"]');

    // Wait for navigation
    await page.waitForTimeout(3000);
    await page.waitForLoadState('networkidle');

    // Take screenshot
    await page.screenshot({ path: 'tests/e2e/integrated-dashboard.png', fullPage: true });

    // Should have sidebar
    const sidebar = page.locator('aside, nav').first();
    await expect(sidebar).toBeVisible();

    console.log('Dashboard loaded successfully');
  });
});