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

/**
 * Read-only bandeja coverage, so the most phone-centric screen in the product is checked
 * on a phone viewport too. Nothing here confirms or rejects: the mutating flows live in
 * ingestion.spec.ts and run in a single project to avoid two workers racing for a card.
 */
test.describe('bandeja', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/es/login');
    // Carlos, not Maria: the mutating ingestion flows work through Maria's bandeja, and
    // two workers pulling cards from the same stack makes this inherently flaky.
    await page.getByLabel(es['auth.register.email']).fill('carlos@demo.local');
    await page.getByLabel(es['auth.login.password']).fill('demo-carlos-1');
    await page.getByRole('button', { name: es['auth.login.submit'] }).click();
    await expect(page).toHaveURL(/\/es\/inicio$/);
    await page.goto('/es/bandeja');
  });

  test('shows a card with every gesture mirrored as a button', async ({ page }) => {
    const card = page.getByTestId('bandeja-card');
    await expect(card).toBeVisible();

    // Every swipe has a button, which is what makes the screen usable without gestures.
    await expect(page.getByRole('button', { name: es['bandeja.confirm'] })).toBeEnabled();
    await expect(page.getByRole('button', { name: es['scan.result.changeCat'] })).toBeEnabled();
    await expect(page.getByRole('button', { name: es['scan.result.discard'] })).toBeEnabled();
    await expect(page.getByText(es['bandeja.swipeHint'])).toBeVisible();
  });

  test('opens the category picker with all eight categories', async ({ page }) => {
    await page.getByRole('button', { name: es['scan.result.changeCat'] }).click();

    for (const key of [
      'categories.alimentacion',
      'categories.salud',
      'categories.educacion',
      'categories.vivienda',
      'categories.vestimenta',
      'categories.esparcimiento',
      'categories.vehiculo',
      'categories.familiares',
    ] as const) {
      await expect(page.getByRole('button', { name: es[key], exact: true })).toBeVisible();
    }

    await page.getByRole('button', { name: es['common.cancel'] }).click();
    await expect(page.getByRole('button', { name: es['bandeja.confirm'] })).toBeVisible();
  });

  test('J and K move through the stack without changing anything', async ({ page }) => {
    const first = await page.getByTestId('bandeja-card').locator('p').first().textContent();

    await page.keyboard.press('j');
    await expect(async () => {
      const next = await page.getByTestId('bandeja-card').locator('p').first().textContent();
      expect(next).not.toBe(first);
    }).toPass({ timeout: 5_000 });

    await page.keyboard.press('k');
    await expect(page.getByTestId('bandeja-card').locator('p').first()).toHaveText(first ?? '');
  });
});