/**
 * Visual Check Test
 * Ensures pages load with proper styling (not blank white pages)
 */

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

test.describe('Visual Check', () => {
  test('should display login page with styling', async ({ page }) => {
    // Navigate to platform subdomain
    await page.goto('http://platform.lvh.me:5173/');

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

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

    // Check that page has background color (not blank white)
    const body = page.locator('body');
    const bgColor = await body.evaluate(el => {
      return window.getComputedStyle(el).backgroundColor;
    });

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

    // Should have some background color set (Tailwind should be working)
    expect(bgColor).not.toBe('rgba(0, 0, 0, 0)');
    expect(bgColor).not.toBe('');

    // Check that the form has styling
    const form = page.locator('form').first();
    const formDisplay = await form.evaluate(el => {
      const styles = window.getComputedStyle(el);
      return {
        padding: styles.padding,
        backgroundColor: styles.backgroundColor,
        borderRadius: styles.borderRadius,
      };
    });

    console.log('Form styles:', formDisplay);

    // Form should have some padding/styling
    expect(formDisplay.padding).not.toBe('0px');
  });

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

    // Wait for navigation/login to complete
    await page.waitForTimeout(3000);

    // Should be on dashboard
    await page.waitForLoadState('networkidle');

    // Check that we see content (not blank page)
    const hasContent = await page.locator('body *').count();
    expect(hasContent).toBeGreaterThan(10); // Should have multiple elements

    // Check for sidebar (part of layout)
    const sidebar = page.locator('aside, nav').first();
    await expect(sidebar).toBeVisible();

    // Check sidebar has styling
    const sidebarBg = await sidebar.evaluate(el => {
      return window.getComputedStyle(el).backgroundColor;
    });

    console.log('Sidebar background color:', sidebarBg);
    expect(sidebarBg).not.toBe('rgba(0, 0, 0, 0)');

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