import { TestBed } from '@angular/core/testing';
import type { CharacterResponse } from '../../core/api/game-api.models';
import { TopBarComponent } from './top-bar.component';

function characterFixture(overrides: Partial<CharacterResponse> = {}): CharacterResponse {
  return {
    id: 'character-1',
    name: 'Aric Duskwalker',
    renown: 3,
    silver: 120,
    currentHp: 80,
    maxHp: 100,
    attack: 10,
    currentLocation: { id: 'location-1', key: 'aschenfelder', name: 'Aschenfelder' },
    ...overrides,
  };
}

async function render(character: CharacterResponse | null): Promise<HTMLElement> {
  await TestBed.configureTestingModule({
    imports: [TopBarComponent],
  }).compileComponents();

  const fixture = TestBed.createComponent(TopBarComponent);
  fixture.componentRef.setInput('character', character);
  fixture.detectChanges();

  return fixture.nativeElement as HTMLElement;
}

describe('TopBarComponent', () => {
  it('shows the character name, HP and silver', async () => {
    const element = await render(characterFixture({ name: 'Aric Duskwalker', currentHp: 80, maxHp: 100, silver: 120 }));

    expect(element.textContent).toContain('Aric Duskwalker');
    expect(element.textContent).toContain('80 / 100');
    expect(element.querySelector('[data-top-bar-silver]')?.textContent).toContain('120');
  });

  it('shows Renown instead of Level, and displays no XP value', async () => {
    const element = await render(characterFixture({ renown: 3 }));

    expect(element.textContent).toContain('Renown 3');
    expect(element.querySelector('[data-top-bar-experience]')).toBeNull();
  });

  it('shows a loading message when no character is available yet', async () => {
    const element = await render(null);

    expect(element.textContent).toContain('Charakterdaten werden geladen');
  });
});