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

test.describe('Login Page Structure and Tailwind Debug', () => {
  test('should display login page with proper structure', async ({ page }) => {
    await page.goto('http://localhost:3000/auth/login');
    
    // Verify main layout structure
    await expect(page.locator('div.min-h-screen.bg-gray-50')).toBeVisible();
    await expect(page.locator('div.flex.flex-col.items-center.justify-center.min-h-screen.py-12.px-4.sm:px-6.lg:px-8')).toBeVisible();
    
    // Check header elements
    await expect(page.locator('h1.text-3xl.font-bold.text-gray-900')).toBeVisible();
    await expect(page.locator('p.mt-2.text-gray-600')).toContainText('Sign in to your account');
    
    // Check form structure
    await expect(page.locator('form')).toBeVisible();
    await expect(page.locator('div.max-w-md.w-full.space-y-8.bg-white.rounded-xl.shadow-lg.p-8')).toBeVisible();
    
    // Check input fields
    await expect(page.locator('#email-address')).toBeVisible();
    await expect(page.locator('#password')).toBeVisible();
    
    // Check for submit button
    await expect(page.locator('button[type="submit"]')).toBeVisible();
    
    // Check links
    await expect(page.locator('a[href="/auth/signup"]')).toBeVisible();
    await expect(page.locator('a[href="/auth/forgot-password"]')).toBeVisible();
  });

  test('should have proper Tailwind CSS classes applied', async ({ page }) => {
    await page.goto('http://localhost:3000/auth/login');
    
    // Test that the page uses Tailwind utility classes appropriately
    const pageBody = await page.evaluate(() => {
      const body = document.querySelector('body');
      return body?.className || '';
    });
    
    // Check for essential Tailwind classes
    expect(pageBody).toContain('min-h-screen');
    expect(pageBody).toContain('bg-gray-50');
    
    // Check form container classes
    const formContainer = await page.evaluate(() => {
      const container = document.querySelector('.max-w-md.w-full.space-y-8.bg-white.rounded-xl.shadow-lg.p-8');
      return container?.className || '';
    });
    
    expect(formContainer).toContain('max-w-md');
    expect(formContainer).toContain('bg-white');
    expect(formContainer).toContain('rounded-xl');
    expect(formContainer).toContain('shadow-lg');
    expect(formContainer).toContain('p-8');
  });

  test('should have interactive elements working', async ({ page }) => {
    await page.goto('http://localhost:3000/auth/login');
    
    // Test password visibility toggle
    const passwordField = page.locator('#password');
    const toggleButton = page.locator('button:has-text("Toggle password visibility")');
    
    // Check initial state
    const initialType = await passwordField.getAttribute('type');
    expect(initialType).toBe('password');
    
    // If toggle exists, test it
    if (await toggleButton.isVisible()) {
      await toggleButton.click();
      
      const toggledType = await passwordField.getAttribute('type');
      expect(toggledType).toBe('text');
      
      await toggleButton.click();
      const finalType = await passwordField.getAttribute('type');
      expect(finalType).toBe('password');
    }
  });
});