import { test, expect } from '@playwright/test';
import {
  loginAsAdmin,
  navigateToTimesheets,
  navigateToTimesheetCreate,
  setFlatpickrDate,
  waitForDataTable,
  waitForPageStable,
  getTodayDate,
  getPastDate
} from './helpers/pmcore';

/**
 * PM Core Timesheet Management E2E Tests
 *
 * Tests timesheet pages and basic functionality:
 * - List display with DataTable and filters
 * - Create form display
 * - Form elements validation
 */

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

  test('should display timesheet list with filters', async ({ page }) => {
    await test.step('Navigate to timesheets page', async () => {
      await navigateToTimesheets(page);
    });

    await test.step('Verify page loaded', async () => {
      await waitForPageStable(page);
      await expect(page.locator('.card').first()).toBeVisible();
    });

    await test.step('Verify Add Timesheet button is visible', async () => {
      const addButton = page.locator('a[href*="timesheets/create"]').first();
      await expect(addButton).toBeVisible();
    });
  });

  test('should filter timesheets by date range', async ({ page }) => {
    await test.step('Navigate to timesheets page', async () => {
      await navigateToTimesheets(page);
      await waitForPageStable(page);
    });

    await test.step('Verify filter elements exist', async () => {
      // Check for date filter inputs (may be named differently)
      const dateInputs = page.locator('input[type="text"].flatpickr-input, input[name*="date"]');
      const inputCount = await dateInputs.count();
      expect(inputCount).toBeGreaterThanOrEqual(0); // Filters may or may not exist
    });

    await test.step('Verify DataTable is visible', async () => {
      await expect(page.locator('.card').first()).toBeVisible();
    });
  });

  test('should navigate to create timesheet page', async ({ page }) => {
    await test.step('Navigate to timesheets list', async () => {
      await navigateToTimesheets(page);
      await waitForPageStable(page);
    });

    await test.step('Click Add Timesheet button', async () => {
      const addButton = page.locator('a[href*="timesheets/create"]').first();
      await addButton.click();
    });

    await test.step('Verify create page loads', async () => {
      await page.waitForURL('**/timesheets/create', { timeout: 10000 });
      await waitForPageStable(page);
    });
  });

  test('should display create timesheet form elements', async ({ page }) => {
    await test.step('Navigate to create timesheet page', async () => {
      await navigateToTimesheetCreate(page);
    });

    await test.step('Verify form is displayed', async () => {
      const form = page.locator('form:not(#logout-form-menu)').first();
      await expect(form).toBeVisible();
    });

    await test.step('Verify date field exists', async () => {
      const dateField = page.locator('#date');
      await expect(dateField).toBeVisible();
    });

    await test.step('Verify project select exists', async () => {
      const projectSelect = page.locator('#project_id');
      await expect(projectSelect).toBeVisible();
    });

    await test.step('Verify hours field exists', async () => {
      const hoursField = page.locator('#hours');
      await expect(hoursField).toBeVisible();
    });

    await test.step('Verify description field exists', async () => {
      const descriptionField = page.locator('#description');
      await expect(descriptionField).toBeVisible();
    });

    await test.step('Verify billable checkbox exists', async () => {
      const billableCheckbox = page.locator('#is_billable');
      await expect(billableCheckbox).toBeVisible();
    });

    await test.step('Verify submit button exists', async () => {
      const submitButton = page.locator('button[type="submit"]');
      await expect(submitButton).toBeVisible();
    });
  });

  test('should have billable checkbox checked by default', async ({ page }) => {
    await test.step('Navigate to create timesheet page', async () => {
      await navigateToTimesheetCreate(page);
    });

    await test.step('Verify billable checkbox is checked', async () => {
      const billableCheckbox = page.locator('#is_billable');
      await expect(billableCheckbox).toBeChecked();
    });
  });

  test('should have cancel button that returns to list', async ({ page }) => {
    await test.step('Navigate to create timesheet page', async () => {
      await navigateToTimesheetCreate(page);
    });

    await test.step('Click cancel button', async () => {
      const cancelButton = page.locator('a:has-text("Cancel")').first();
      await cancelButton.click();
    });

    await test.step('Verify return to list', async () => {
      await page.waitForURL('**/timesheets', { timeout: 10000 });
      await waitForPageStable(page);
    });
  });

  test('should validate hours field accepts decimals', async ({ page }) => {
    await test.step('Navigate to create timesheet page', async () => {
      await navigateToTimesheetCreate(page);
    });

    await test.step('Verify hours field accepts decimal values', async () => {
      const hoursField = page.locator('#hours');
      await hoursField.fill('7.5');

      const value = await hoursField.inputValue();
      expect(value).toBe('7.5');
    });
  });
});