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

/**
 * Login Test Suite for SAWIS Business Intelligence Dashboard
 * Tests the login modal and authentication functionality
 */
test.describe('SAWIS Login', () => {
  
  test.beforeEach(async ({ page }) => {
    // Navigate to the homepage before each test
    await page.goto('/');
    await page.waitForLoadState('networkidle');
  });

  test('should open login modal when login button is clicked', async ({ page }) => {
    // Click the login button
    await page.getByRole('button', { name: 'Login' }).click();
    
    // Verify login modal appears
    await expect(page.getByRole('dialog')).toBeVisible();
    await expect(page.getByRole('heading', { name: 'Sign In' })).toBeVisible();
    
    // Verify login form elements
    await expect(page.getByRole('textbox').first()).toBeVisible(); // Username field
    await expect(page.getByRole('textbox').nth(1)).toBeVisible(); // Password field
    await expect(page.getByRole('button', { name: 'Sign In' })).toBeVisible();
    await expect(page.getByRole('button', { name: 'Cancel' })).toBeVisible();
  });

  test('should have proper form validation', async ({ page }) => {
    // Open login modal
    await page.getByRole('button', { name: 'Login' }).click();
    
    // Verify form fields are present
    const usernameField = page.getByRole('textbox').first();
    const passwordField = page.getByRole('textbox').nth(1);
    const signInButton = page.getByRole('button', { name: 'Sign In' });
    
    await expect(usernameField).toBeVisible();
    await expect(passwordField).toBeVisible();
    
    // Check initial state - Sign In button should be disabled
    await expect(signInButton).toBeDisabled();
    
    // Test with empty fields
    await usernameField.click();
    await passwordField.click();
    await expect(signInButton).toBeDisabled();
  });

  test('should have reCAPTCHA integration', async ({ page }) => {
    // Open login modal
    await page.getByRole('button', { name: 'Login' }).click();
    
    // Verify reCAPTCHA is present
    await expect(page.locator('iframe[title*="reCAPTCHA"]')).toBeVisible();
    
    // Check for reCAPTCHA checkbox
    const recaptchaFrame = page.frameLocator('iframe[title*="reCAPTCHA"]');
    await expect(recaptchaFrame.locator('text="I\'m not a robot"')).toBeVisible();
  });

  test('should have forgot password link', async ({ page }) => {
    // Open login modal
    await page.getByRole('button', { name: 'Login' }).click();
    
    // Verify forgot password link
    const forgotPasswordLink = page.getByRole('link', { name: 'Forgot Password?' });
    await expect(forgotPasswordLink).toBeVisible();
    await expect(forgotPasswordLink).toHaveAttribute('href', 'https://www.sawis.co.za/index.php');
  });

  test('should have create account link', async ({ page }) => {
    // Open login modal
    await page.getByRole('button', { name: 'Login' }).click();
    
    // Verify create account section
    await expect(page.getByText("Don't have an account?")).toBeVisible();
    
    const createAccountLink = page.getByRole('link', { name: 'Create One' });
    await expect(createAccountLink).toBeVisible();
    await expect(createAccountLink).toHaveAttribute('href', 'https://www.sawis.co.za/register.php?l=en');
  });

  test('should close modal when cancel button is clicked', async ({ page }) => {
    // Open login modal
    await page.getByRole('button', { name: 'Login' }).click();
    
    // Verify modal is open
    await expect(page.getByRole('dialog')).toBeVisible();
    
    // Click cancel button
    await page.getByRole('button', { name: 'Cancel' }).click();
    
    // Verify modal is closed
    await expect(page.getByRole('dialog')).not.toBeVisible();
  });

  test('should close modal when clicking outside', async ({ page }) => {
    // Open login modal
    await page.getByRole('button', { name: 'Login' }).click();
    
    // Verify modal is open
    await expect(page.getByRole('dialog')).toBeVisible();
    
    // Click outside the modal (on the main content area)
    await page.locator('main').click();
    
    // Verify modal is closed
    await expect(page.getByRole('dialog')).not.toBeVisible();
  });

  test('should handle keyboard navigation', async ({ page }) => {
    // Open login modal
    await page.getByRole('button', { name: 'Login' }).click();
    
    // Focus on username field
    await page.getByRole('textbox').first().focus();
    
    // Test tab navigation
    await page.keyboard.press('Tab');
    await expect(page.getByRole('textbox').nth(1)).toBeFocused(); // Password field
    
    await page.keyboard.press('Tab');
    await expect(page.getByRole('button', { name: 'Sign In' })).toBeFocused();
    
    await page.keyboard.press('Tab');
    await expect(page.getByRole('button', { name: 'Cancel' })).toBeFocused();
  });

  test('should handle escape key to close modal', async ({ page }) => {
    // Open login modal
    await page.getByRole('button', { name: 'Login' }).click();
    
    // Verify modal is open
    await expect(page.getByRole('dialog')).toBeVisible();
    
    // Press escape key
    await page.keyboard.press('Escape');
    
    // Verify modal is closed
    await expect(page.getByRole('dialog')).not.toBeVisible();
  });

  test('should maintain focus management', async ({ page }) => {
    // Open login modal
    await page.getByRole('button', { name: 'Login' }).click();
    
    // Verify focus is trapped within modal
    const dialog = page.getByRole('dialog');
    await expect(dialog).toBeVisible();
    
    // Focus should be on first input field
    await expect(page.getByRole('textbox').first()).toBeFocused();
  });

  test('should have proper form labels and placeholders', async ({ page }) => {
    // Open login modal
    await page.getByRole('button', { name: 'Login' }).click();
    
    // Check for proper form structure
    const usernameField = page.getByRole('textbox').first();
    const passwordField = page.getByRole('textbox').nth(1);
    
    // Verify fields are properly labeled
    await expect(usernameField).toBeVisible();
    await expect(passwordField).toBeVisible();
    
    // Check password field type
    await expect(passwordField).toHaveAttribute('type', 'password');
  });

  test('should handle form submission with valid data', async ({ page }) => {
    // Open login modal
    await page.getByRole('button', { name: 'Login' }).click();
    
    // Fill in form fields
    await page.getByRole('textbox').first().fill('testuser@example.com');
    await page.getByRole('textbox').nth(1).fill('testpassword123');
    
    // Note: We can't actually submit due to reCAPTCHA requirement
    // This test verifies the form can be filled and the submit button becomes enabled
    
    // Verify form fields are filled
    await expect(page.getByRole('textbox').first()).toHaveValue('testuser@example.com');
    await expect(page.getByRole('textbox').nth(1)).toHaveValue('testpassword123');
  });

  test('should have proper accessibility attributes', async ({ page }) => {
    // Open login modal
    await page.getByRole('button', { name: 'Login' }).click();
    
    // Check for proper ARIA attributes
    const dialog = page.getByRole('dialog');
    await expect(dialog).toBeVisible();
    
    // Check for proper heading structure
    await expect(page.getByRole('heading', { name: 'Sign In' })).toBeVisible();
    
    // Check for proper form labels
    const usernameField = page.getByRole('textbox').first();
    const passwordField = page.getByRole('textbox').nth(1);
    
    await expect(usernameField).toBeVisible();
    await expect(passwordField).toBeVisible();
  });
});