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

/**
 * Expense Requests List Tests
 *
 * Tests the Expense Requests list functionality including:
 * - Viewing expense requests
 * - Filtering by employee, date, expense type, status
 */

// 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('Expense Requests List', () => {
  test.beforeEach(async ({ page }) => {
    await loginAsAdmin(page);
  });

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

    // Verify page elements
    await expect(page.locator('.card').first()).toBeVisible();
    await expect(page.locator('.datatables-expenseRequests')).toBeVisible();
  });

  test('should display filter options', async ({ page }) => {
    await page.goto('/expenseRequests', { waitUntil: 'networkidle' });

    // Verify filter elements
    await expect(page.locator('#employeeFilter')).toBeVisible();
    await expect(page.locator('#dateFilter')).toBeVisible();
    await expect(page.locator('#expenseTypeFilter')).toBeVisible();
    await expect(page.locator('#statusFilter')).toBeVisible();
  });

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

    // Verify table headers
    const tableHeader = page.locator('.datatables-expenseRequests thead');
    await expect(tableHeader).toContainText('User');
    await expect(tableHeader).toContainText('Expense Type');
    await expect(tableHeader).toContainText('Amount');
    await expect(tableHeader).toContainText('Status');
  });

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

    // Select pending status
    await page.selectOption('#statusFilter', 'pending');
    await page.waitForTimeout(1000);

    // Table should still be visible
    await expect(page.locator('.datatables-expenseRequests')).toBeVisible();
  });

  test('should filter by expense type', async ({ page }) => {
    await page.goto('/expenseRequests', { waitUntil: 'networkidle' });

    // Check if there are expense type options
    const expenseTypeOptions = page.locator('#expenseTypeFilter option');
    if (await expenseTypeOptions.count() > 1) {
      // Select the first expense type
      await page.locator('#expenseTypeFilter').selectOption({ index: 1 });
      await page.waitForTimeout(1000);
    }

    // Table should still be visible
    await expect(page.locator('.datatables-expenseRequests')).toBeVisible();
  });

  test('should have date filter input', async ({ page }) => {
    await page.goto('/expenseRequests', { waitUntil: 'networkidle' });

    // Verify date filter exists and is interactable
    const dateFilter = page.locator('#dateFilter');
    await expect(dateFilter).toBeVisible();

    // Set a date
    const today = new Date().toISOString().split('T')[0];
    await dateFilter.fill(today);
    await page.waitForTimeout(500);

    // Table should still be visible
    await expect(page.locator('.datatables-expenseRequests')).toBeVisible();
  });

  test('should have employee filter with Select2', async ({ page }) => {
    await page.goto('/expenseRequests', { waitUntil: 'networkidle' });

    // Verify employee filter exists
    const employeeFilter = page.locator('#employeeFilter');
    await expect(employeeFilter).toBeVisible();

    // Check Select2 container
    const select2Container = page.locator('#employeeFilter + .select2-container');
    if (await select2Container.count() > 0) {
      await expect(select2Container).toBeVisible();
    }
  });
});
