// @ts-nocheck
/**
 * E2E Tests: Form Validations & Twig Rendering
 *
 * Valida que:
 * - Formularios renderizan inputs correctamente
 * - Validaciones frontend funcionan
 * - Datos se envían limpios al backend
 * - Respuestas se manejan correctamente
 */

import { test, expect } from '../fixtures/fixtures';
import { ROUTES } from '../fixtures/data';

test.describe('Form Validations', () => {
  test.beforeEach(async ({ page, appPage }) => {
    const adminUser = process.env.E2E_ADMIN_USER || 'admin';
    const adminPassword = process.env.E2E_ADMIN_PASSWORD || '';

    test.skip(!adminPassword, 'Definir E2E_ADMIN_PASSWORD para ejecutar pruebas protegidas');

    await appPage.login(adminUser, adminPassword);
    await appPage.goto(ROUTES.install);
  });

  test('Checkboxes mantienen estado en form', async ({ page }) => {
    // Verificar estado inicial
    expect(await page.isChecked('#readOnly')).toBe(true);

    // Toggle
    await page.uncheck('#readOnly');
    expect(await page.isChecked('#readOnly')).toBe(false);

    // Toggle back
    await page.check('#readOnly');
    expect(await page.isChecked('#readOnly')).toBe(true);
  });

  test('Boolean form values convertidos correctamente', async ({ page }) => {
    // Validar que los valores que se envían son strings ('true', 'false')
    const formData = await page.evaluate(() => {
      const readOnlyEl = document.getElementById('readOnly') as HTMLInputElement | null;
      const triggerEl = document.getElementById('crearTriggers') as HTMLInputElement | null;
      return {
        readOnly: String(readOnlyEl ? readOnlyEl.checked : false),
        trigger: String(triggerEl ? triggerEl.checked : false),
      };
    });

    expect(formData.readOnly).toMatch(/^(true|false)$/i);
    expect(formData.trigger).toMatch(/^(true|false)$/i);
  });

  test('Empty form submission validado', async ({ page }) => {
    // Verificar que form fields required no es undefined
    // (aunque HTML5 validation no stricto en Symfony 2.x)
    const fieldCount = await page.locator('input').count();
    expect(fieldCount).toBeGreaterThan(0);
  });

  test('Special characters no corrompen form values', async ({ page }) => {
    // Validar que valores especiales en texto se escapan
    // (no aplicable directo en checkboxes, pero validar concepto)
    const html = await page.content();
    expect(html).not.toContain('$INJECTION');
    expect(html).not.toContain('<script>');
  });

  test('Respuesta AJAX estructura validada', async ({ page }) => {
    // Interceptar respuestas AJAX futuras
    page.on('response', async response => {
      if (response.url().includes('ajax')) {
        try {
          const json = await response.json();
          // Si es JSON, debe tener estructura esperada
          if (json && typeof json === 'object') {
            expect(json).toHaveProperty('error');
            expect(json).toHaveProperty('mensaje');
          }
        } catch {
          // No es JSON, ignore
          return;
        }
      }
    });
  });

  test('Bootstrap validation classes aplicadas a forms', async ({ page }) => {
    // Verificar que existen clases para validación visual
    const form = page.locator('form');
    if (await form.count() > 0) {
      const classAttr = await form.getAttribute('class');
      expect(classAttr).toBeDefined();
    }
  });
});

test.describe('Twig Template Rendering', () => {
  test.beforeEach(async ({ page, appPage }) => {
    const adminUser = process.env.E2E_ADMIN_USER || 'admin';
    const adminPassword = process.env.E2E_ADMIN_PASSWORD || '';

    test.skip(!adminPassword, 'Definir E2E_ADMIN_PASSWORD para ejecutar pruebas protegidas');

    await appPage.login(adminUser, adminPassword);
    await appPage.goto(ROUTES.install);
  });

  test('Variables Twig renderizan correctamente', async ({ page }) => {
    // Validar que {{pregunta}} se reemplaza (no aparece literal)
    const content = await page.textContent('h2');
    expect(content).not.toContain('{{pregunta}}');
    expect((content || '').length).toBeGreaterThan(0);
  });

  test('Condicionales Twig if/elseif funcionan', async ({ page }) => {
    // Validar que aparece h3 con SERVER_ID (renderizado por condición Twig)
    const serverIdText = await page.textContent('h3:has-text("SERVER_ID")');
    expect(serverIdText).toBeTruthy();
  });

  test('Twig path() helper genera URLs válidas', async ({ page }) => {
    // Validar que {{ path(...) }} se reemplaza por URLs
    const onclick = await page.getAttribute('button#generar', 'onclick');
    if (onclick) {
      // Si hay onclick, debe contener URL válida, no {{path(...)}}
      expect(onclick).not.toContain('{{path');
    }

    // Validar href en links
    const links = await page.evaluate(() =>
      Array.prototype.map.call(document.querySelectorAll('a'), (el: HTMLAnchorElement) => el.href)
    );
    expect(links.length).toBeGreaterThan(0);
    expect(links.some((href: string) => href && !href.includes('{{'))).toBe(true);
  });

  test('Twig raw filter no introduce XSS', async ({ page }) => {
    // Validar que {{ parametros.getTriggers() | raw }} renderiza HTML seguro
    const alertDiv = page.locator('.alert');
    if (await alertDiv.count() > 0) {
      const html = await alertDiv.innerHTML();
      // No debe contener <script> tags
      expect(html).not.toContain('<script');
    }
  });

  test('Twig includes no rompen template', async ({ page }) => {
    // {% include "progress.html.twig" %} debe incluirse sin errores
    const modal = page.locator('#myModal');
    const progress = page.locator('.progress');
    const count = (await modal.count()) + (await progress.count());
    expect(count).toBeGreaterThan(0);
  });

  test('Parent block inheritance funciona', async ({ page }) => {
    // {% block body %} debe heredar de layout.html.twig
    const body = page.locator('body');
    expect(await body.count()).toBe(1);

    // Validar que layout elements existen (header, nav, etc)
    const html = await page.content();
    expect(html.length).toBeGreaterThan(1000); // Debe tener contenido del layout
  });
});