import { signal } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { ActivatedRoute, provideRouter } from '@angular/router';
import { describe, expect, it } from 'vitest';

import { Tenant } from '../../../../core/services/tenant.interface';
import { TenantService } from '../../../../core/services/tenant.service';
import { MenuPageLayoutComponent } from './menu-page-layout.component';

function createTenant(): Tenant {
  return {
    id: 1,
    codigo: 'test',
    nombre: 'Test',
    dominio: 'localhost',
    primary_color: '#000000',
    secondary_color: '#000000',
    danger_color: '#000000',
    success_color: '#000000',
    header_bg_color: '#ffffff',
    footer_bg_color: '#ffffff',
    header_logo: '',
    footer_logo: '',
    categories: [],
    menues: [
      {
        id: 1,
        code: 'account',
        label: 'Mi cuenta',
        parent_menu_code: null,
        content_type: 'dynamic',
        route: '/mi-cuenta',
        submenues: [
          {
            id: 2,
            code: 'account.profile',
            label: 'Datos personales',
            parent_menu_code: 'account',
            content_type: 'dynamic',
            route: '/mi-cuenta/datos-personales',
            submenues: [],
          },
          {
            id: 3,
            code: 'account.purchases',
            label: 'Mis compras',
            parent_menu_code: 'account',
            content_type: 'dynamic',
            route: '/mi-cuenta/compras',
            submenues: [],
          },
        ],
      },
      {
        id: 4,
        code: 'help',
        label: 'Centro de ayuda',
        parent_menu_code: null,
        content_type: 'dynamic',
        route: '/ayuda',
        submenues: [
          {
            id: 5,
            code: 'help.faq',
            label: 'Consultas habituales',
            parent_menu_code: 'help',
            content_type: 'dynamic',
            route: '/ayuda/preguntas-frecuentes',
            submenues: [],
          },
        ],
      },
    ],
  };
}

async function renderLayout(menuCode: string, navigationLabel: string): Promise<HTMLElement> {
  const tenant = signal(createTenant());

  await TestBed.configureTestingModule({
    imports: [MenuPageLayoutComponent],
    providers: [
      provideRouter([]),
      {
        provide: ActivatedRoute,
        useValue: {
          snapshot: {
            data: { menuCode, navigationLabel },
          },
        },
      },
      {
        provide: TenantService,
        useValue: { tenant: tenant.asReadonly() },
      },
    ],
  }).compileComponents();

  const fixture = TestBed.createComponent(MenuPageLayoutComponent);
  fixture.detectChanges();

  return fixture.nativeElement as HTMLElement;
}

describe('MenuPageLayoutComponent', () => {
  it('renders the configured account menu and its navigation label', async () => {
    const element = await renderLayout('account', 'Secciones de mi cuenta');
    const links = Array.from(
      element.querySelectorAll<HTMLAnchorElement>('.menu-page-layout__link'),
    );

    expect(element.querySelector('.menu-page-layout__title')?.textContent?.trim()).toBe(
      'Mi cuenta',
    );
    expect(element.querySelector('nav')?.getAttribute('aria-label')).toBe('Secciones de mi cuenta');
    expect(links.map((link) => link.textContent?.trim())).toEqual([
      'Datos personales',
      'Mis compras',
    ]);
    expect(links.map((link) => link.getAttribute('href'))).toEqual([
      '/mi-cuenta/datos-personales',
      '/mi-cuenta/compras',
    ]);
  });

  it('uses the same component for the help menu', async () => {
    const element = await renderLayout('help', 'Secciones de ayuda');

    expect(element.querySelector('.menu-page-layout__title')?.textContent?.trim()).toBe(
      'Centro de ayuda',
    );
    expect(element.querySelector('.menu-page-layout__link')?.textContent?.trim()).toBe(
      'Consultas habituales',
    );
  });
});
