import { test, expect } from '@playwright/test';
import {
  userCredentials,
  loginAsUser,
} from './fixtures';

// Navigate to profile page helper
async function goToUserProfile(page) {
  await page.click('a[href="/user/profile"]');
  await expect(page).toHaveURL('/user/profile');
}

// Helper to expand a category section by clicking its header
async function expandCategory(page, categoryText: string) {
  const categoryHeader = page.locator('.card-header').filter({ hasText: categoryText }).first();
  await categoryHeader.click();
  // Wait for expansion animation
  await page.waitForTimeout(200);
}

// Security section display tests
test('[PROFILE][User][Security] should display security section', async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);
  
  // Should display the security section header
  await expect(page.locator('.card-header').filter({ hasText: 'Sikkerhed' }).first()).toBeVisible();
});

test('[PROFILE][User][Security] should display email field', async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);
  
  // Expand the security section
  await expandCategory(page, 'Sikkerhed');
  
  // Email field should be visible (look for the edit icon inside expanded content)
  await expect(page.locator('.card-content i.fas.fa-edit').first()).toBeVisible();
});

test('[PROFILE][User][Security] should display edit email button', async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);
  
  // Expand the security section
  await expandCategory(page, 'Sikkerhed');
  
  // Edit email button should be visible (Danish: "Rediger e-mail")
  const editEmailButton = page.locator('button').filter({ hasText: 'Rediger e-mail' }).first();
  await expect(editEmailButton).toBeVisible();
});

test('[PROFILE][User][Security] should display phone number field', async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);
  
  // Expand the security section
  await expandCategory(page, 'Sikkerhed');
  
  // Phone number section should be visible
  await expect(page.getByText('Telefonnummer', { exact: true }).first()).toBeVisible();
});

test('[PROFILE][User][Security] should display edit phone number button', async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);
  
  // Expand the security section
  await expandCategory(page, 'Sikkerhed');
  
  // Edit phone button should be visible (first one, in Security section)
  const editPhoneButton = page.locator('button').filter({ hasText: /^Rediger telefonnummer$/ }).first();
  await expect(editPhoneButton).toBeVisible();
});

test('[PROFILE][User][Security] should display change password button', async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);
  
  // Expand the security section
  await expandCategory(page, 'Sikkerhed');
  
  // Change password button should be visible
  const changePasswordButton = page.locator('button:has-text("Skift adgangskode")');
  await expect(changePasswordButton).toBeVisible();
});

test('[PROFILE][User][Security] should display logout button', async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);
  
  // Expand the security section
  await expandCategory(page, 'Sikkerhed');
  
  // Logout button should be visible
  const logoutButton = page.locator('button:has-text("Log ud")');
  await expect(logoutButton).toBeVisible();
});

// Security button functionality tests
test('[PROFILE][User][Security] should open edit email dialog when clicking edit email button', async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);
  
  // Expand the security section
  await expandCategory(page, 'Sikkerhed');
  
  // Click edit email button (Danish: "Rediger e-mail")
  const editEmailButton = page.locator('button').filter({ hasText: 'Rediger e-mail' }).first();
  await editEmailButton.click();
  
  // Should show password prompt dialog (SweetAlert)
  await expect(page.locator('.swal2-popup')).toBeVisible();
  await expect(page.locator('.swal2-title')).toBeVisible();
});

test('[PROFILE][User][Security] should open change phone number dialog when clicking edit phone button', async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);
  
  // Expand the security section
  await expandCategory(page, 'Sikkerhed');
  
  // Click edit phone button (first one, in Security section)
  const editPhoneButton = page.locator('button').filter({ hasText: /^Rediger telefonnummer$/ }).first();
  await editPhoneButton.click();
  
  // Should show phone number dialog (SweetAlert)
  await expect(page.locator('.swal2-popup')).toBeVisible();
  await expect(page.locator('.swal2-title')).toContainText('telefonnummer');
});

test('[PROFILE][User][Security] should open change password dialog when clicking change password button', async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);
  
  // Expand the security section
  await expandCategory(page, 'Sikkerhed');
  
  // Click change password button
  const changePasswordButton = page.locator('button:has-text("Skift adgangskode")');
  await changePasswordButton.click();
  
  // Should show change password dialog (SweetAlert)
  await expect(page.locator('.swal2-popup')).toBeVisible();
  await expect(page.locator('.swal2-title')).toContainText('adgangskode');
});

test('[PROFILE][User][Security] should open logout confirmation dialog when clicking logout button', async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);
  
  // Expand the security section
  await expandCategory(page, 'Sikkerhed');
  
  // Click logout button
  const logoutButton = page.locator('button:has-text("Log ud")');
  await logoutButton.click();
  
  // Should show confirmation dialog (SweetAlert)
  await expect(page.locator('.swal2-popup')).toBeVisible();
});

/** Password Change Validation Tests */

test('[PROFILE][User][Security] should show validation error when passwords do not match', async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);
  
  // Expand the security section
  await expandCategory(page, 'Sikkerhed');
  
  // Click change password button
  const changePasswordButton = page.locator('button:has-text("Skift adgangskode")');
  await changePasswordButton.click();
  
  // Fill in mismatched passwords
  await page.fill('#swal-input1', 'currentpass');
  await page.fill('#swal-input2', 'newpassword1');
  await page.fill('#swal-input3', 'newpassword2');
  
  // Click confirm
  await page.click('.swal2-confirm');
  
  // Should show validation error
  await expect(page.locator('.swal2-validation-message')).toBeVisible();
});

test('[PROFILE][User][Security] should show validation error when password is too short', async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);
  
  // Expand the security section
  await expandCategory(page, 'Sikkerhed');
  
  // Click change password button
  const changePasswordButton = page.locator('button:has-text("Skift adgangskode")');
  await changePasswordButton.click();
  
  // Fill in short password
  await page.fill('#swal-input1', 'currentpass');
  await page.fill('#swal-input2', '123');
  await page.fill('#swal-input3', '123');
  
  // Click confirm
  await page.click('.swal2-confirm');
  
  // Should show validation error about password length
  await expect(page.locator('.swal2-validation-message')).toBeVisible();
});

test('[PROFILE][User][Security] should show validation error when fields are empty', async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);
  
  // Expand the security section
  await expandCategory(page, 'Sikkerhed');
  
  // Click change password button
  const changePasswordButton = page.locator('button:has-text("Skift adgangskode")');
  await changePasswordButton.click();
  
  // Click confirm without filling fields
  await page.click('.swal2-confirm');
  
  // Should show validation error
  await expect(page.locator('.swal2-validation-message')).toBeVisible();
});

/** Phone Number Validation Tests */

test('[PROFILE][User][Security] should show validation error when phone number is empty', async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);
  
  // Expand the security section
  await expandCategory(page, 'Sikkerhed');
  
  // Click edit phone button (first one, in Security section)
  const editPhoneButton = page.locator('button').filter({ hasText: /^Rediger telefonnummer$/ }).first();
  await editPhoneButton.click();
  
  // Click confirm without filling phone number
  await page.click('.swal2-confirm');
  
  // Should show validation error
  await expect(page.locator('.swal2-validation-message')).toBeVisible();
});

test('[PROFILE][User][Security] should show validation error when country code is empty', async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);
  
  // Expand the security section
  await expandCategory(page, 'Sikkerhed');
  
  // Click edit phone button (first one, in Security section)
  const editPhoneButton = page.locator('button').filter({ hasText: /^Rediger telefonnummer$/ }).first();
  await editPhoneButton.click();
  
  // Fill in phone number but not country code
  await page.fill('#swal-input1', '12345678');
  
  // Click confirm
  await page.click('.swal2-confirm');
  
  // Should show validation error
  await expect(page.locator('.swal2-validation-message')).toBeVisible();
});

/** Dialog Cancel Tests */

test('[PROFILE][User][Security] should close dialog when cancel is clicked on password change', async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);
  
  // Expand the security section
  await expandCategory(page, 'Sikkerhed');
  
  // Click change password button
  const changePasswordButton = page.locator('button:has-text("Skift adgangskode")');
  await changePasswordButton.click();
  
  // Verify dialog is open
  await expect(page.locator('.swal2-popup')).toBeVisible();
  
  // Click cancel
  await page.click('.swal2-cancel');
  
  // Dialog should be closed
  await expect(page.locator('.swal2-popup')).not.toBeVisible();
});

test('[PROFILE][User][Security] should close dialog when cancel is clicked on phone number change', async ({ page }) => {
  await loginAsUser(page);
  await goToUserProfile(page);
  
  // Expand the security section
  await expandCategory(page, 'Sikkerhed');
  
  // Click edit phone button (first one, in Security section)
  const editPhoneButton = page.locator('button').filter({ hasText: /^Rediger telefonnummer$/ }).first();
  await editPhoneButton.click();
  
  // Verify dialog is open
  await expect(page.locator('.swal2-popup')).toBeVisible();
  
  // Click cancel
  await page.click('.swal2-cancel');
  
  // Dialog should be closed
  await expect(page.locator('.swal2-popup')).not.toBeVisible();
});