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

test.describe('Personal Information Edit', () => {
  test('can edit personal information fields', async ({ page }) => {
    await page.goto('/hr-manager/employees/list');

    await page.waitForSelector('table tbody tr:not([aria-hidden="true"])', { timeout: 20000 });

    const rowCount = await page.locator('table tbody tr:not([aria-hidden="true"])').count();
    if (rowCount === 0) {
      test.skip(true, 'No employees available for testing');
    }

    const viewButton = page
      .locator('table tbody tr:not([aria-hidden="true"])')
      .first()
      .locator('button[aria-label="View"]');
    await viewButton.click();

    await page.waitForURL('**/employees/view/**', { timeout: 10000 });

    await page.getByRole('tab', { name: /personal & contact/i }).click();

    await expect(page.getByText('Personal Information')).toBeVisible({ timeout: 10000 });

    const genderLabel = page.getByText('Gender', { exact: false });
    await expect(genderLabel).not.toBeVisible();

    const personalInfoCard = page.locator('.ant-pro-card').filter({ hasText: 'Personal Information' });
    const editButton = personalInfoCard.locator('button:has-text("Edit")');
    await editButton.click();

    await expect(page.getByText('Edit Personal Information')).toBeVisible({ timeout: 5000 });

    await page.getByLabel('Religion').fill('Christian');
    await page.getByLabel('Ethnicity').fill('Akan');
    await page.getByLabel('Nationality').fill('Ghanaian');
    await page.getByLabel('Blood Group').fill('O+');
    await page.getByLabel('Disability Status').fill('None');

    await page.getByRole('button', { name: /ok/i }).click();

    await expect(
      page.getByText(/successfully updated personal information/i),
    ).toBeVisible({ timeout: 10000 });

    await expect(page.getByText('Edit Personal Information')).not.toBeVisible();

    await expect(page.getByText('Christian')).toBeVisible();
    await expect(page.getByText('Akan')).toBeVisible();
  });
});