import { test, expect } from '@playwright/test';
import { setupGraphQLMocks } from './mocks/graphql.mock';

test.describe('Flujo: Crear Estudiante', () => {
  test.beforeEach(async ({ page }) => {
    await setupGraphQLMocks(page);
  });

  test('debe mostrar el listado de estudiantes', async ({ page }) => {
    await page.goto('/students');

    // Verificar que se muestra la tabla de estudiantes
    await expect(page.getByTestId('students-table')).toBeVisible();
    await expect(page.getByText('Juan Pérez')).toBeVisible();
  });

  test('debe navegar al formulario de nuevo estudiante', async ({ page }) => {
    await page.goto('/students');

    // Click en nuevo estudiante
    await page.getByTestId('btn-new-student').click();

    // Verificar navegación
    await expect(page).toHaveURL('/students/new');
    await expect(page.getByRole('heading', { name: 'Nuevo Estudiante' })).toBeVisible();
  });

  test('debe crear un estudiante y mostrar mensaje de éxito', async ({ page }) => {
    await page.goto('/students/new');

    // Llenar formulario
    await page.getByTestId('input-name').fill('María García López');
    await page.getByTestId('input-email').fill('maria@test.com');

    // Enviar formulario
    await page.getByTestId('btn-submit').click();

    // Verificar mensaje de éxito en snackbar
    await expect(page.getByText('Estudiante creado correctamente')).toBeVisible({ timeout: 5000 });

    // Verificar redirección al listado
    await expect(page).toHaveURL('/students');
  });

  test('debe mostrar errores de validación si los campos están vacíos', async ({ page }) => {
    await page.goto('/students/new');

    // Hacer focus y blur en los campos para activar validación
    await page.getByTestId('input-name').focus();
    await page.getByTestId('input-email').focus();
    await page.getByTestId('input-name').blur();

    // El botón debe estar deshabilitado
    await expect(page.getByTestId('btn-submit')).toBeDisabled();
  });

  test('debe mostrar error si el nombre es muy corto', async ({ page }) => {
    await page.goto('/students/new');

    // Escribir nombre corto
    await page.getByTestId('input-name').fill('AB');
    await page.getByTestId('input-email').focus();

    // Verificar mensaje de error
    await expect(page.getByText('El nombre debe tener al menos 3 caracteres')).toBeVisible();
  });

  test('debe mostrar error si el email es inválido', async ({ page }) => {
    await page.goto('/students/new');

    // Escribir email inválido
    await page.getByTestId('input-name').fill('Test User');
    await page.getByTestId('input-email').fill('email-invalido');
    await page.getByTestId('input-name').focus();

    // Verificar mensaje de error
    await expect(page.getByText('Ingresa un email válido')).toBeVisible();
  });
});
