import { test, expect } from '@playwright/test';
import { login } from './helpers/auth';

test.describe('Remittances', () => {
  test.beforeEach(async ({ page }) => {
    await login(page);
    await page.goto('/remittances');
  });

  test('page renders with header and table', async ({ page }) => {
    await expect(page.locator('h1:has-text("Remittances")')).toBeVisible();
    await expect(page.locator('table')).toBeVisible();
  });

  test('submit remittance button exists', async ({ page }) => {
    await expect(page.locator('[data-testid="btn-submit-remittance"]')).toBeVisible();
  });

  test('submit remittance modal opens', async ({ page }) => {
    await page.click('[data-testid="btn-submit-remittance"]');
    await expect(page.locator('text=Submit Remittance')).toBeVisible({ timeout: 5000 });
    // Close modal
    await page.locator('button:has-text("Cancel")').click();
    await expect(page.locator('text=Submit Remittance')).not.toBeVisible({ timeout: 3000 });
  });

  test('empty state shows when no remittances', async ({ page }) => {
    // Either rows exist OR empty state message shows — both are valid
    const hasRows = await page.locator('[data-testid="remittance-row"]').count();
    const hasEmpty = await page.locator('text=No remittances yet').isVisible().catch(() => false);
    expect(hasRows > 0 || hasEmpty).toBeTruthy();
  });

  test('clicking remittance row opens detail modal', async ({ page }) => {
    const rows = page.locator('[data-testid="remittance-row"]');
    const count = await rows.count();
    if (count === 0) {
      // No data — acceptable, skip
      test.skip();
      return;
    }
    await rows.first().click();
    await expect(page.locator('text=Remittance Details')).toBeVisible({ timeout: 5000 });
    await expect(page.locator('text=Total Amount')).toBeVisible();
    await page.locator('button:has-text("Close")').click();
    await expect(page.locator('text=Remittance Details')).not.toBeVisible({ timeout: 3000 });
  });
});