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

// Test to verify CSS styling is working in your application
test.describe('CSS Debugging Tests', () => {
  test('should load with proper CSS styling', async ({ page }) => {
    await page.goto('http://localhost:3000');
    
    // Verify main page elements have proper styling
    const mainHeader = page.getByText('My Weekly To Do List');
    await expect(mainHeader).toBeVisible();
    
    // Check for CSS classes that indicate styling is applied
    const taskItem = page.locator('.task-item');
    await expect(taskItem).toBeVisible();
    
    // Verify basic CSS properties are applied
    const taskItemStyles = await taskItem.evaluate(element => {
      const computedStyle = window.getComputedStyle(element);
      return {
        backgroundColor: computedStyle.backgroundColor,
        borderRadius: computedStyle.borderRadius,
        boxShadow: computedStyle.boxShadow
      };
    });
    
    console.log('Task item CSS properties:', taskItemStyles);
    expect(taskItemStyles.backgroundColor).toBeTruthy();
  });

  test('should have proper auth form styling', async ({ page }) => {
    await page.goto('http://localhost:3000/auth/login');
    
    // Check that auth form has proper styling
    const authForm = page.locator('.auth-form');
    await expect(authForm).toBeVisible();
    
    // Verify CSS properties on auth form
    const formStyles = await authForm.evaluate(element => {
      const computedStyle = window.getComputedStyle(element);
      return {
        backgroundColor: computedStyle.backgroundColor,
        borderRadius: computedStyle.borderRadius,
        boxShadow: computedStyle.boxShadow
      };
    });
    
    console.log('Auth form CSS properties:', formStyles);
    expect(formStyles.backgroundColor).toBeTruthy();
  });
});