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

test.describe('Flujo: Ver Compañeros de Clase', () => {
  test.beforeEach(async ({ page }) => {
    await setupGraphQLMocks(page);
  });

  test('debe navegar a la página de compañeros desde el listado', async ({ page }) => {
    await page.goto('/students');

    // Click en el botón de ver compañeros del primer estudiante
    await page.getByTestId('btn-classmates').first().click();

    // Verificar navegación
    await expect(page).toHaveURL(/\/classmates\/\d+/);
    await expect(page.getByText('Compañeros de Clase')).toBeVisible();
  });

  test('debe mostrar los compañeros agrupados por materia', async ({ page }) => {
    await page.goto('/classmates/1');

    // Verificar que se muestran las materias
    await expect(page.getByText('Matemáticas I')).toBeVisible();
    await expect(page.getByText('Física I')).toBeVisible();

    // Verificar que se muestran los compañeros
    await expect(page.getByText('María García')).toBeVisible();
    await expect(page.getByText('Carlos López')).toBeVisible();
    await expect(page.getByText('Ana Rodríguez')).toBeVisible();
    await expect(page.getByText('Pedro Sánchez')).toBeVisible();
  });

  test('debe mostrar el contador de compañeros por materia', async ({ page }) => {
    await page.goto('/classmates/1');

    // Verificar que se muestra el contador
    await expect(page.getByText('2 compañeros')).toHaveCount(2); // 2 materias con 2 compañeros cada una
  });

  test('debe tener botón para volver a inscripción', async ({ page }) => {
    await page.goto('/classmates/1');

    // Verificar que existe el botón de ver inscripción
    await expect(page.getByText('Ver Inscripción')).toBeVisible();
  });

  test('debe navegar a inscripción al hacer click en el botón', async ({ page }) => {
    await page.goto('/classmates/1');

    // Click en ver inscripción
    await page.getByText('Ver Inscripción').click();

    // Verificar navegación
    await expect(page).toHaveURL(/\/enrollment\/\d+/);
  });

  test('debe mostrar las iniciales de los compañeros', async ({ page }) => {
    await page.goto('/classmates/1');

    // Verificar que se muestran avatares con iniciales
    await expect(page.locator('.classmate-item-avatar')).toHaveCount(4);

    // Verificar algunas iniciales específicas
    await expect(page.locator('.classmate-item-avatar', { hasText: 'MG' })).toBeVisible();
    await expect(page.locator('.classmate-item-avatar', { hasText: 'CL' })).toBeVisible();
  });

  test('debe volver al listado con el botón de volver', async ({ page }) => {
    await page.goto('/classmates/1');

    // Click en volver
    await page.getByText('Volver a estudiantes').click();

    // Verificar navegación
    await expect(page).toHaveURL('/students');
  });
});
