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

/**
 * Attendance List Tests
 *
 * Tests the Attendance list and viewing functionality including:
 * - Viewing attendance records
 * - Filtering by date
 * - Filtering by employee
 */

// Helper function to login as admin
async function loginAsAdmin(page) {
  await page.goto('/auth/login', { waitUntil: 'networkidle' });
  await page.locator('#email').fill('admin@demo.com');
  await page.locator('#password').fill('password123');
  await page.locator('button[type="submit"]').click();
  await page.waitForURL('**/dashboard', { timeout: 15000 });
}

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

  test('should display attendance list page', async ({ page }) => {
    // Navigate to attendance page
    await page.goto('/hrcore/attendance', { waitUntil: 'networkidle' });

    // Verify page elements
    await expect(page.locator('.card').first()).toBeVisible();
    await expect(page.locator('#attendanceTable')).toBeVisible();

    // Verify filters exist
    await expect(page.locator('#date')).toBeVisible();
    await expect(page.locator('#userId')).toBeVisible();
  });

  test('should filter attendance by date', async ({ page }) => {
    await page.goto('/hrcore/attendance', { waitUntil: 'networkidle' });

    // Wait for DataTable to load
    await page.waitForTimeout(1000);

    // Get the date input (Flatpickr)
    const dateInput = page.locator('#date');
    await expect(dateInput).toBeVisible();

    // Change date using JavaScript (Flatpickr is readonly)
    const today = new Date().toISOString().split('T')[0];
    await page.evaluate((date) => {
      const input = document.querySelector('#date') as HTMLInputElement;
      if (input) {
        const fp = (input as any)._flatpickr;
        if (fp) {
          fp.setDate(date, true);
        } else {
          input.value = date;
          input.dispatchEvent(new Event('change', { bubbles: true }));
        }
      }
    }, today);

    await page.waitForTimeout(1000);

    // Table should still be visible after filter
    await expect(page.locator('#attendanceTable')).toBeVisible();
  });

  test('should filter attendance by user', async ({ page }) => {
    await page.goto('/hrcore/attendance', { waitUntil: 'networkidle' });

    // Wait for DataTable to load
    await page.waitForTimeout(1000);

    // Check if user filter exists
    const userSelect = page.locator('#userId');
    await expect(userSelect).toBeVisible();

    // Open Select2 dropdown
    await page.click('#userId + .select2-container');
    await page.waitForTimeout(300);

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

    // Table should still be visible after filter
    await expect(page.locator('#attendanceTable')).toBeVisible();
  });

  test('should display attendance table columns', async ({ page }) => {
    await page.goto('/hrcore/attendance', { waitUntil: 'networkidle' });

    // Verify table headers
    await expect(page.locator('#attendanceTable thead')).toContainText('Employee');
    await expect(page.locator('#attendanceTable thead')).toContainText('Shift');
    await expect(page.locator('#attendanceTable thead')).toContainText('Check In');
    await expect(page.locator('#attendanceTable thead')).toContainText('Check Out');
  });
});