import { signal } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { Tenant } from '../../../../../../core/services/tenant.interface';
import { TenantService } from '../../../../../../core/services/tenant.service';
import { FaqPage } from './faq-page';

const tenant: Tenant = {
  id: 1,
  codigo: 'test',
  nombre: 'Test',
  dominio: 'localhost',
  primary_color: '#6376f3',
  secondary_color: '#a0a0a0',
  danger_color: '#ff8888',
  success_color: '#198754',
  header_bg_color: '#ffffff',
  footer_bg_color: '#202020',
  header_logo: '',
  footer_logo: '',
  categories: [],
  menues: [
    {
      id: 1,
      code: 'help',
      label: 'Ayuda',
      parent_menu_code: null,
      content_type: 'dynamic',
      route: '/ayuda',
      submenues: [
        {
          id: 2,
          code: 'help.faq',
          label: 'Preguntas frecuentes',
          parent_menu_code: 'help',
          content_type: 'static',
          route: '/ayuda/preguntas-frecuentes',
          static_content: [
            {
              pregunta: '¿Hay algún límite de compra?',
              respuesta: 'No hay un límite general de compra.',
            },
            {
              pregunta: '¿Cuáles son los medios de pago disponibles?',
              respuesta: 'Podés seleccionarlos al finalizar tu compra.',
            },
          ],
          submenues: [],
        },
      ],
    },
  ],
};

describe('FaqPage', () => {
  let fixture: ComponentFixture<FaqPage>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [FaqPage],
      providers: [
        {
          provide: TenantService,
          useValue: {
            tenant: signal<Tenant | null>(tenant).asReadonly(),
          },
        },
      ],
    }).compileComponents();

    fixture = TestBed.createComponent(FaqPage);
    fixture.detectChanges();
  });

  it('renders the tenant FAQ content using the reusable accordion', () => {
    const element = fixture.nativeElement as HTMLElement;
    const buttons = element.querySelectorAll<HTMLButtonElement>('.accordion-button');

    expect(element.textContent).toContain('PREGUNTAS FRECUENTES');
    expect(buttons).toHaveLength(2);
    expect(buttons[0].textContent).toContain('¿Hay algún límite de compra?');
    expect(buttons[1].getAttribute('aria-expanded')).toBe('true');
    expect(element.textContent).toContain('Podés seleccionarlos al finalizar tu compra.');
  });
});
