import { test, expect } from "@playwright/test";
import { userCredentials, loginAsSubuserByPhone } from "./fixtures";

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

// Subuser contact information display tests
test("[PROFILE][Subuser][Contact] should display contact information section", async ({ page }) => {
  await loginAsSubuserByPhone(page);
  await goToUserProfile(page);

  // Should display the contact information section header (look for the address-card icon section)
  await expect(page.locator(".card-header .fa-address-card")).toBeVisible();
});

test("[PROFILE][Subuser][Contact] should display email field", async ({ page }) => {
  await loginAsSubuserByPhone(page);
  await goToUserProfile(page);

  // Expand contact section (second Chauffør section with address-card icon)
  const contactHeader = page.locator(".card-header").filter({ has: page.locator(".fa-address-card") });
  await contactHeader.click();
  await page.waitForTimeout(200);

  // Email field should be visible
  await expect(page.getByText("E-mail", { exact: true })).toBeVisible();
});

test("[PROFILE][Subuser][Contact] should display edit email button", async ({ page }) => {
  await loginAsSubuserByPhone(page);
  await goToUserProfile(page);

  // Expand contact section
  const contactHeader = page.locator(".card-header").filter({ has: page.locator(".fa-address-card") });
  await contactHeader.click();
  await page.waitForTimeout(200);

  // Edit email button should be visible for subuser
  const editEmailButton = page.locator('button:has-text("Rediger e-mail")');
  await expect(editEmailButton).toBeVisible();
});

test("[PROFILE][Subuser][Contact] should open edit email dialog when clicking edit email button", async ({ page }) => {
  await loginAsSubuserByPhone(page);
  await goToUserProfile(page);

  // Expand contact section
  const contactHeader = page.locator(".card-header").filter({ has: page.locator(".fa-address-card") });
  await contactHeader.click();
  await page.waitForTimeout(200);

  // Click edit email button
  const editEmailButton = page.locator('button:has-text("Rediger e-mail")');
  await editEmailButton.click();

  // Should show email dialog (SweetAlert)
  await expect(page.locator(".swal2-popup")).toBeVisible();
  await expect(page.locator(".swal2-title")).toContainText("e-mailadresse");
});

test("[PROFILE][Subuser][Contact] should display phone number field (read-only)", async ({ page }) => {
  await loginAsSubuserByPhone(page);
  await goToUserProfile(page);

  // Expand contact section
  const contactHeader = page.locator(".card-header").filter({ has: page.locator(".fa-address-card") });
  await contactHeader.click();
  await page.waitForTimeout(200);

  // Phone number field should be visible
  await expect(page.getByText("Telefonnummer", { exact: true }).first()).toBeVisible();
});

test("[PROFILE][Subuser][Contact] should display country code field (read-only)", async ({ page }) => {
  await loginAsSubuserByPhone(page);
  await goToUserProfile(page);

  // Expand contact section
  const contactHeader = page.locator(".card-header").filter({ has: page.locator(".fa-address-card") });
  await contactHeader.click();
  await page.waitForTimeout(200);

  // Country code field should be visible
  await expect(page.getByText("Landekode", { exact: true })).toBeVisible();
});

/** Subuser Email Validation Tests */

test("[PROFILE][Subuser][Contact] should show validation error when email is empty", async ({ page }) => {
  await loginAsSubuserByPhone(page);
  await goToUserProfile(page);

  // Expand contact section
  const contactHeader = page.locator(".card-header").filter({ has: page.locator(".fa-address-card") });
  await contactHeader.click();
  await page.waitForTimeout(200);

  // Click edit email button
  const editEmailButton = page.locator('button:has-text("Rediger e-mail")');
  await editEmailButton.click();

  // Clear the input and click confirm
  await page.fill(".swal2-input", "");
  await page.click(".swal2-confirm");

  // Should show validation error
  await expect(page.locator(".swal2-validation-message")).toBeVisible();
});

test("[PROFILE][Subuser][Contact] should show validation error for invalid email format", async ({ page }) => {
  await loginAsSubuserByPhone(page);
  await goToUserProfile(page);

  // Expand contact section
  const contactHeader = page.locator(".card-header").filter({ has: page.locator(".fa-address-card") });
  await contactHeader.click();
  await page.waitForTimeout(200);

  // Click edit email button
  const editEmailButton = page.locator('button:has-text("Rediger e-mail")');
  await editEmailButton.click();

  // Fill in invalid email
  await page.fill(".swal2-input", "invalid-email-format");
  await page.click(".swal2-confirm");

  // Should show validation error
  await expect(page.locator(".swal2-validation-message")).toBeVisible();
});