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

test.describe('Employee Image Upload', () => {
  test('image upload shows spinner only for uploading employee and loads with full URL', async ({
    page,
  }) => {
    await page.goto('/hr-manager/employees/list');

    await page.waitForSelector('table tbody tr:not([aria-hidden="true"])', { timeout: 20000 });

    const rowCount = await page.locator('table tbody tr:not([aria-hidden="true"])').count();
    if (rowCount === 0) {
      test.skip(true, 'No employees available for testing');
    }

    const firstRow = page.locator('table tbody tr:not([aria-hidden="true"])').first();

    const viewButton = firstRow.locator('button[aria-label="View"]');
    await viewButton.click();

    await page.waitForURL('**/employees/view/**', { timeout: 10000 });

    const fileInput = page.locator('input[type="file"]').first();
    const testImagePath = path.join(__dirname, '../fixtures/test-image.jpg');
    await fileInput.setInputFiles(testImagePath);

    const spinner = page.locator('.ant-spin-spinning').first();
    await expect(spinner).toBeVisible({ timeout: 5000 });

    await expect(spinner).toBeHidden({ timeout: 15000 });

    const previewImage = page.locator('img').filter({ hasText: '' }).first();
    const src = await previewImage.getAttribute('src');

    if (src) {
      expect(src).toMatch(/^http/);
      expect(src).toContain('/storage/employee_pictures/');
    }
  });
});