import { Component, signal } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { provideRouter } from '@angular/router';
import { HelpAccessService } from '../../core/help/help-access';
import { TeamStore } from '../../core/team/team-store';
import { ContextHelp } from './context-help';

@Component({
  imports: [ContextHelp],
  template: `
    <app-context-help
      title="Buchungen verstehen"
      [hints]="['Mitgliederbuchungen verändern den persönlichen Saldo.']"
      sectionId="bookings"
    />
  `,
})
class Host {}

describe('ContextHelp', () => {
  it('stays compact, expands on demand and links to the matching guide section', async () => {
    const fixture = await createFixture(true);
    const button: HTMLButtonElement = fixture.nativeElement.querySelector('button');

    expect(button.getAttribute('aria-expanded')).toBe('false');
    expect(fixture.nativeElement.textContent).not.toContain('persönlichen Saldo');

    button.click();
    fixture.detectChanges();

    expect(button.getAttribute('aria-expanded')).toBe('true');
    expect(fixture.nativeElement.textContent).toContain('persönlichen Saldo');
    const link: HTMLAnchorElement = fixture.nativeElement.querySelector('a');
    expect(link.getAttribute('href')).toBe('/team/5/more/guide#bookings');
  });

  it('renders nothing when contextual help is disabled', async () => {
    const fixture = await createFixture(false);

    expect(fixture.nativeElement.querySelector('app-context-help')?.textContent.trim()).toBe('');
  });
});

async function createFixture(show: boolean) {
  await TestBed.configureTestingModule({
    imports: [Host],
    providers: [
      provideRouter([]),
      {
        provide: HelpAccessService,
        useValue: { showContextHelp: signal(show) },
      },
      {
        provide: TeamStore,
        useValue: { team: signal({ id: 5 }) },
      },
    ],
  }).compileComponents();
  const fixture = TestBed.createComponent(Host);
  fixture.detectChanges();
  return fixture;
}
