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

/**
 * Employee List Tests
 *
 * Tests the Employee list page functionality including:
 * - Viewing employee list with DataTable
 * - Filtering by status, role, team, designation
 * - Searching employees
 * - Reset filters
 * - Navigate to create employee
 */

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

  test('should display employee list page with statistics', async ({ page }) => {
    await navigateToEmployees(page);

    // Verify statistics cards are visible
    await expect(page.locator('.card').first()).toBeVisible();

    // Verify DataTable is visible
    await expect(page.locator('.datatables-users')).toBeVisible();

    // Verify filter section is visible
    await expect(page.locator('#statusFilter')).toBeVisible();
    await expect(page.locator('#teamFilter')).toBeVisible();
    await expect(page.locator('#designationFilter')).toBeVisible();

    // Verify Add Employee button is visible (use .btn to target the one in content, not menu)
    await expect(page.locator('.card a[href*="employees/create"], .btn[href*="employees/create"]').first()).toBeVisible();
  });

  test('should filter employees by status', async ({ page }) => {
    await navigateToEmployees(page);

    // Wait for DataTable to load
    await page.waitForLoadState('networkidle');

    // Select Active status
    await page.locator('#statusFilter').selectOption('active');
    await page.waitForTimeout(500);

    // Verify the filter is applied (status dropdown has correct value)
    await expect(page.locator('#statusFilter')).toHaveValue('active');

    // Try another status
    await page.locator('#statusFilter').selectOption('probation');
    await page.waitForTimeout(500);
    await expect(page.locator('#statusFilter')).toHaveValue('probation');
  });

  test('should filter employees by role', async ({ page }) => {
    await navigateToEmployees(page);
    await page.waitForLoadState('networkidle');

    // Check if role filter exists and has options
    const roleFilter = page.locator('#roleFilter');
    await expect(roleFilter).toBeVisible();

    // Click on Select2 container to open dropdown
    await page.click('#roleFilter + .select2-container, [aria-controls="select2-roleFilter-results"]');
    await page.waitForTimeout(300);

    // Check if dropdown opens (Select2 results container)
    const resultsVisible = await page.locator('.select2-results').isVisible();
    if (resultsVisible) {
      // Click first available option if exists
      const firstOption = page.locator('.select2-results__option').first();
      if (await firstOption.count() > 0) {
        await firstOption.click();
        await page.waitForTimeout(300);
      }
    }

    // Page should still be on employees
    await expect(page).toHaveURL(/.*employees.*/);
  });

  test('should filter employees by team', async ({ page }) => {
    await navigateToEmployees(page);
    await page.waitForLoadState('networkidle');

    // Check if team filter exists
    const teamFilter = page.locator('#teamFilter');
    await expect(teamFilter).toBeVisible();

    // Open team Select2 dropdown
    await page.click('#teamFilter + .select2-container, [aria-controls="select2-teamFilter-results"]');
    await page.waitForTimeout(300);

    // Check if options are available
    const resultsVisible = await page.locator('.select2-results').isVisible();
    if (resultsVisible) {
      const options = page.locator('.select2-results__option');
      if (await options.count() > 0) {
        await options.first().click();
        await page.waitForTimeout(300);
      }
    }

    await expect(page).toHaveURL(/.*employees.*/);
  });

  test('should filter employees by designation', async ({ page }) => {
    await navigateToEmployees(page);
    await page.waitForLoadState('networkidle');

    // Check if designation filter exists
    const designationFilter = page.locator('#designationFilter');
    await expect(designationFilter).toBeVisible();

    // Open designation Select2 dropdown
    await page.click('#designationFilter + .select2-container, [aria-controls="select2-designationFilter-results"]');
    await page.waitForTimeout(300);

    // Select an option if available
    const resultsVisible = await page.locator('.select2-results').isVisible();
    if (resultsVisible) {
      const options = page.locator('.select2-results__option');
      if (await options.count() > 0) {
        await options.first().click();
        await page.waitForTimeout(300);
      }
    }

    await expect(page).toHaveURL(/.*employees.*/);
  });

  test('should reset all filters', async ({ page }) => {
    await navigateToEmployees(page);
    await page.waitForLoadState('networkidle');

    // Apply a filter first
    await page.locator('#statusFilter').selectOption('active');
    await page.waitForTimeout(300);

    // Click reset button
    await page.locator('#resetFilters').click();
    await page.waitForTimeout(500);

    // Status filter should be reset
    await expect(page.locator('#statusFilter')).toHaveValue('');
  });

  test('should navigate to create employee page', async ({ page }) => {
    await navigateToEmployees(page);

    // Click Add Employee button (use .btn to target the one in content, not menu)
    await page.locator('.card a[href*="employees/create"], .btn[href*="employees/create"]').first().click();

    // Should navigate to create page
    await page.waitForURL('**/employees/create**', { timeout: 10000 });
    await expect(page).toHaveURL(/.*employees\/create.*/);
  });

  test('should display employee DataTable with columns', async ({ page }) => {
    await navigateToEmployees(page);
    await page.waitForLoadState('networkidle');

    // Verify table is visible
    const table = page.locator('.datatables-users');
    await expect(table).toBeVisible();

    // Check for expected column headers (use count to handle responsive hidden columns)
    // Employee column should always be visible
    const employeeHeader = page.locator('th:has-text("Employee")');
    expect(await employeeHeader.count()).toBeGreaterThan(0);
  });
});
