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

test.describe('Login Page Debug - Simplified', () => {
  test('should load login page successfully', async ({ page }) => {
    await page.goto('http://localhost:3001/auth/login');

    // Basic page load verification
    await expect(page).toHaveURL(/login/);
    await expect(page).toHaveTitle(/Weekly To Do List/);

    // Check for key elements that should be present
    await expect(page.locator('h1')).toContainText('Weekly To Do List');
    await expect(page.locator('p')).toContainText('Sign in to your account');

    // Check for form elements
    await expect(page.locator('input[name="email"]')).toBeVisible();
    await expect(page.locator('input[name="password"]')).toBeVisible();
    await expect(page.locator('button[type="submit"]')).toBeVisible();

    // Check for navigation links
    await expect(page.getByRole('link', { name: 'Don\'t have an account?' })).toBeVisible();
    await expect(page.getByRole('link', { name: 'Forgot your password?' })).toBeVisible();
  });

  test('should have Tailwind CSS classes in structure', async ({ page }) => {
    await page.goto('http://localhost:3001/auth/login');

    // Check main container classes
    const container = page.locator('div.min-h-screen.bg-gray-50');
    await expect(container).toBeVisible();

    // Check the form container
    const formContainer = page.locator('div.bg-white.rounded-xl.shadow-lg.p-8');
    await expect(formContainer).toBeVisible();

    // Check for basic Tailwind classes that should be present
    const bodyClass = await page.evaluate(() => document.body.className);
    expect(bodyClass).toContain('min-h-screen');
    expect(bodyClass).toContain('bg-gray-50');
  });

  test('should have functional form elements', async ({ page }) => {
    await page.goto('http://localhost:3001/auth/login');

    // Test that the form exists
    const form = page.locator('form');
    await expect(form).toBeVisible();

    // Test that we can interact with inputs
    const emailInput = page.locator('input[name="email"]');
    const passwordInput = page.locator('input[name="password"]');

    await expect(emailInput).toBeVisible();
    await expect(passwordInput).toBeVisible();

    // Test that submit button exists
    const submitButton = page.locator('button[type="submit"]');
    await expect(submitButton).toBeVisible();
  });
});