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

/**
 * Web Attendance Tests
 *
 * Tests the Web Attendance check-in/out functionality including:
 * - Web attendance page display
 * - Clock and date display
 * - Status cards (Check In, Check Out, Working Hours)
 * - Check In/Out button functionality
 * - Today's activity log
 * - Attendance widget
 */

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

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

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

  test('should display current date and time', async ({ page }) => {
    await page.goto('/hrcore/attendance/web-attendance', { waitUntil: 'networkidle' });

    // Verify clock and date elements
    await expect(page.locator('#currentDate')).toBeVisible();
    await expect(page.locator('#currentTime')).toBeVisible();

    // Verify clock has time format (digits and colons)
    const timeText = await page.locator('#currentTime').textContent();
    expect(timeText).toMatch(/\d{1,2}:\d{2}:\d{2}/);
  });

  test('should display status cards', async ({ page }) => {
    await page.goto('/hrcore/attendance/web-attendance', { waitUntil: 'networkidle' });

    // Verify status cards
    await expect(page.locator('#checkInTime')).toBeVisible();
    await expect(page.locator('#checkOutTime')).toBeVisible();
    await expect(page.locator('#workingHours')).toBeVisible();
  });

  test('should display check in/out button', async ({ page }) => {
    await page.goto('/hrcore/attendance/web-attendance', { waitUntil: 'networkidle' });

    // Verify main action button
    await expect(page.locator('#checkInOutBtn')).toBeVisible();
    await expect(page.locator('#checkBtnText')).toBeVisible();
  });

  test('should display status message', async ({ page }) => {
    await page.goto('/hrcore/attendance/web-attendance', { waitUntil: 'networkidle' });

    // Verify status message exists
    await expect(page.locator('#statusMessage')).toBeVisible();
  });

  test('should display today activity log section', async ({ page }) => {
    await page.goto('/hrcore/attendance/web-attendance', { waitUntil: 'networkidle' });

    // Verify today's activity log section
    await expect(page.locator('#todayLogs')).toBeVisible();
  });

  test('should display user info badges', async ({ page }) => {
    await page.goto('/hrcore/attendance/web-attendance', { waitUntil: 'networkidle' });

    // Verify user info badges are visible
    const badges = page.locator('.attendance-card .badge');
    await expect(badges.first()).toBeVisible();
  });

  test('should have fingerprint icon', async ({ page }) => {
    await page.goto('/hrcore/attendance/web-attendance', { waitUntil: 'networkidle' });

    // Verify fingerprint icon in main action card
    await expect(page.locator('.bx-fingerprint')).toBeVisible();
  });
});

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

  test('should display attendance widget toggle button', async ({ page }) => {
    // Navigate to dashboard (widget should be visible on all pages)
    await page.goto('/dashboard', { waitUntil: 'networkidle' });

    // Verify widget toggle button
    await expect(page.locator('#attendanceWidgetToggle')).toBeVisible();
  });

  test('should open attendance widget offcanvas', async ({ page }) => {
    await page.goto('/dashboard', { waitUntil: 'networkidle' });

    // Click widget toggle button
    await page.click('#attendanceWidgetToggle');
    await page.waitForTimeout(500);

    // Verify offcanvas is visible
    await expect(page.locator('#attendanceWidgetOffcanvas')).toBeVisible();
  });

  test('should display widget summary fields', async ({ page }) => {
    await page.goto('/dashboard', { waitUntil: 'networkidle' });

    // Open widget
    await page.click('#attendanceWidgetToggle');
    await page.waitForTimeout(500);

    // Verify summary fields
    await expect(page.locator('#widgetCheckInTime')).toBeVisible();
    await expect(page.locator('#widgetCheckOutTime')).toBeVisible();
    await expect(page.locator('#widgetWorkingHours')).toBeVisible();
  });

  test('should have check in or check out button in widget', async ({ page }) => {
    await page.goto('/dashboard', { waitUntil: 'networkidle' });

    // Open widget
    await page.click('#attendanceWidgetToggle');
    await page.waitForTimeout(500);

    // Should have either check in or check out button
    const checkInBtn = page.locator('#widgetCheckInBtn');
    const checkOutBtn = page.locator('#widgetCheckOutBtn');

    const hasCheckInBtn = await checkInBtn.count() > 0;
    const hasCheckOutBtn = await checkOutBtn.count() > 0;

    // At least one button should be present
    expect(hasCheckInBtn || hasCheckOutBtn).toBeTruthy();
  });

  test('should have link to full attendance page in widget', async ({ page }) => {
    await page.goto('/dashboard', { waitUntil: 'networkidle' });

    // Open widget
    await page.click('#attendanceWidgetToggle');
    await page.waitForTimeout(500);

    // Verify link to full attendance page
    const fullAttendanceLink = page.locator('#attendanceWidgetOffcanvas a[href*="web-attendance"]');
    await expect(fullAttendanceLink).toBeVisible();
  });

  test('should close widget offcanvas', async ({ page }) => {
    await page.goto('/dashboard', { waitUntil: 'networkidle' });

    // Open widget
    await page.click('#attendanceWidgetToggle');
    await page.waitForTimeout(500);
    await expect(page.locator('#attendanceWidgetOffcanvas')).toBeVisible();

    // Close widget using close button
    await page.locator('#attendanceWidgetOffcanvas .btn-close').click();
    await page.waitForTimeout(500);

    // Verify offcanvas is hidden
    await expect(page.locator('#attendanceWidgetOffcanvas')).toBeHidden();
  });
});
