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

test.describe('Login Page Core Functionality', () => {
  test('should load the login page with core elements', async ({ page }) => {
    await page.goto('http://localhost:3001/auth/login');

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

    // Check that the page has essential structure
    const h1Element = page.locator('h1');
    await expect(h1Element).toBeVisible();

    // Check for a login-related paragraph
    const loginParagraph = page.getByText(/Sign in to your account|Welcome back!/);
    await expect(loginParagraph).toBeVisible();

    // Check for form elements
    const emailInput = page.locator('input[name="email"]');
    const passwordInput = page.locator('input[name="password"]');
    const submitButton = page.locator('button[type="submit"]');

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

    // Check for links
    const signupLink = page.getByRole('link', { name: /Don't have an account|Create account/ });
    const forgotPasswordLink = page.getByRole('link', { name: /Forgot your password/ });

    await expect(signupLink).toBeVisible();
    await expect(forgotPasswordLink).toBeVisible();

    console.log('✅ Login page loaded successfully with core elements');
  });

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

    // Check that the page has basic styling structure
    const body = page.locator('body');
    await expect(body).toBeVisible();

    // Check for main wrapper div that should have Tailwind classes
    const mainWrapper = page.locator('[class*="min-h-screen"]');
    await expect(mainWrapper).toBeVisible();

    console.log('✅ Basic CSS structure verified');
  });
});