import { test, expect } from '@playwright/test';
import { loginAsAdmin } from './helpers/employee';

/**
 * Employee View Tests
 *
 * Tests the Employee profile/view page functionality including:
 * - Profile header display
 * - Tab navigation (Overview, Personal, Employment, Attendance, Leave, Timeline)
 * - Tab content loading
 */

// Find the first employee ID from the list to use for testing
async function getFirstEmployeeId(page): Promise<number | null> {
  await page.goto('/employees', { waitUntil: 'networkidle' });
  await page.waitForTimeout(1000);

  // Wait for DataTable to load
  await page.waitForSelector('.datatables-users tbody tr', { timeout: 10000 }).catch(() => null);

  // Try to find a view link in the table
  const viewLink = page.locator('.datatables-users tbody tr:first-child a[href*="employees/view"]').first();

  if (await viewLink.count() > 0) {
    const href = await viewLink.getAttribute('href');
    if (href) {
      const match = href.match(/employees\/view\/(\d+)/);
      if (match) {
        return parseInt(match[1]);
      }
    }
  }

  return null;
}

test.describe('Employee View', () => {
  test.beforeEach(async ({ page }) => {
    await loginAsAdmin(page);
  });

  test('should display employee profile page with header', async ({ page }) => {
    // Get first employee ID
    const employeeId = await getFirstEmployeeId(page);

    if (!employeeId) {
      test.skip();
      return;
    }

    await page.goto(`/employees/view/${employeeId}`, { waitUntil: 'networkidle' });

    // Verify profile header elements
    await expect(page.locator('.card-body').first()).toBeVisible();

    // Verify employee name is displayed (h4 in profile section)
    const nameElement = page.locator('.card-body h4').first();
    await expect(nameElement).toBeVisible();

    // Verify employee info section is visible (card body with profile)
    await expect(page.locator('.card-body').first()).toBeVisible();
  });

  test('should display all navigation tabs', async ({ page }) => {
    const employeeId = await getFirstEmployeeId(page);

    if (!employeeId) {
      test.skip();
      return;
    }

    await page.goto(`/employees/view/${employeeId}`, { waitUntil: 'networkidle' });

    // Verify all tabs are visible
    await expect(page.locator('button[data-bs-target="#tab-overview"]')).toBeVisible();
    await expect(page.locator('button[data-bs-target="#tab-personal"]')).toBeVisible();
    await expect(page.locator('button[data-bs-target="#tab-employment"]')).toBeVisible();
    await expect(page.locator('button[data-bs-target="#tab-attendance"]')).toBeVisible();
    await expect(page.locator('button[data-bs-target="#tab-leave"]')).toBeVisible();
    await expect(page.locator('button[data-bs-target="#tab-timeline"]')).toBeVisible();
  });

  test('should display overview tab content', async ({ page }) => {
    const employeeId = await getFirstEmployeeId(page);

    if (!employeeId) {
      test.skip();
      return;
    }

    await page.goto(`/employees/view/${employeeId}`, { waitUntil: 'networkidle' });

    // Click on overview tab if not already active
    await page.click('button[data-bs-target="#tab-overview"]');
    await page.waitForTimeout(500);

    // Verify overview tab content is visible
    await expect(page.locator('#tab-overview')).toBeVisible();
  });

  test('should switch to personal info tab', async ({ page }) => {
    const employeeId = await getFirstEmployeeId(page);

    if (!employeeId) {
      test.skip();
      return;
    }

    await page.goto(`/employees/view/${employeeId}`, { waitUntil: 'networkidle' });

    // Click on personal tab
    await page.click('button[data-bs-target="#tab-personal"]');
    await page.waitForTimeout(500);

    // Verify personal tab is active and content visible
    await expect(page.locator('#tab-personal')).toBeVisible();
  });

  test('should switch to employment tab', async ({ page }) => {
    const employeeId = await getFirstEmployeeId(page);

    if (!employeeId) {
      test.skip();
      return;
    }

    await page.goto(`/employees/view/${employeeId}`, { waitUntil: 'networkidle' });

    // Click on employment tab
    await page.click('button[data-bs-target="#tab-employment"]');
    await page.waitForTimeout(500);

    // Verify employment tab is visible
    await expect(page.locator('#tab-employment')).toBeVisible();
  });

  test('should switch to attendance tab', async ({ page }) => {
    const employeeId = await getFirstEmployeeId(page);

    if (!employeeId) {
      test.skip();
      return;
    }

    await page.goto(`/employees/view/${employeeId}`, { waitUntil: 'networkidle' });

    // Click on attendance tab
    await page.click('button[data-bs-target="#tab-attendance"]');
    await page.waitForTimeout(500);

    // Verify attendance tab is visible
    await expect(page.locator('#tab-attendance')).toBeVisible();

    // Wait for content to load
    await page.waitForTimeout(1000);
    await expect(page.locator('#attendanceTabContent')).toBeVisible();
  });

  test('should switch to leave tab', async ({ page }) => {
    const employeeId = await getFirstEmployeeId(page);

    if (!employeeId) {
      test.skip();
      return;
    }

    await page.goto(`/employees/view/${employeeId}`, { waitUntil: 'networkidle' });

    // Click on leave tab
    await page.click('button[data-bs-target="#tab-leave"]');
    await page.waitForTimeout(500);

    // Verify leave tab is visible
    await expect(page.locator('#tab-leave')).toBeVisible();

    // Wait for content to load
    await page.waitForTimeout(1000);
    await expect(page.locator('#leaveTabContent')).toBeVisible();
  });

  test('should switch to timeline tab', async ({ page }) => {
    const employeeId = await getFirstEmployeeId(page);

    if (!employeeId) {
      test.skip();
      return;
    }

    await page.goto(`/employees/view/${employeeId}`, { waitUntil: 'networkidle' });

    // Click on timeline tab
    await page.click('button[data-bs-target="#tab-timeline"]');
    await page.waitForTimeout(500);

    // Verify timeline tab is visible
    await expect(page.locator('#tab-timeline')).toBeVisible();

    // Verify timeline container exists
    await expect(page.locator('#timelineContainer')).toBeVisible();
  });

  test('should show edit dropdown for active employee', async ({ page }) => {
    const employeeId = await getFirstEmployeeId(page);

    if (!employeeId) {
      test.skip();
      return;
    }

    await page.goto(`/employees/view/${employeeId}`, { waitUntil: 'networkidle' });

    // Check if Edit button exists (only for non-exited employees)
    const editBtn = page.locator('button.dropdown-toggle:has-text("Edit")');

    if (await editBtn.count() > 0) {
      await editBtn.click();
      await page.waitForTimeout(300);

      // Verify dropdown items
      await expect(page.locator('a:has-text("Basic Information")').first()).toBeVisible();
      await expect(page.locator('a:has-text("Work Information")').first()).toBeVisible();

      // Close dropdown by clicking elsewhere
      await page.click('body');
    }
  });

  test('should navigate back to employees list', async ({ page }) => {
    const employeeId = await getFirstEmployeeId(page);

    if (!employeeId) {
      test.skip();
      return;
    }

    await page.goto(`/employees/view/${employeeId}`, { waitUntil: 'networkidle' });

    // Find and click breadcrumb link to go back to employees list
    const employeesLink = page.locator('a[href*="/employees"]:has-text("Employees")').first();

    if (await employeesLink.count() > 0) {
      await employeesLink.click();
      await page.waitForURL('**/employees**', { timeout: 10000 });
      await expect(page).toHaveURL(/.*employees.*/);
    }
  });
});