import { signal } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { provideHttpClient } from '@angular/common/http';
import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
import { ActivatedRoute, convertToParamMap, provideRouter } from '@angular/router';
import { PlayerDetail } from './player-detail';
import { TeamStore } from '../../../core/team/team-store';
import { environment } from '../../../../environments/environment';

describe('PlayerDetail', () => {
  it('renders the selected player and transaction history', async () => {
    const team = {
      id: 5,
      name: 'Team A',
      alias: 'team-a',
      balance: 0,
      players: [
        {
          id: 7,
          firstName: 'Alex',
          lastName: 'Muster',
          balance: -12,
          active: true,
          teamRole: { id: 1, name: 'player' },
        },
      ],
    };
    await TestBed.configureTestingModule({
      imports: [PlayerDetail],
      providers: [
        provideHttpClient(),
        provideHttpClientTesting(),
        provideRouter([]),
        { provide: TeamStore, useValue: { team: signal(team), loading: signal(false) } },
        {
          provide: ActivatedRoute,
          useValue: { snapshot: { paramMap: convertToParamMap({ playerId: '7' }) } },
        },
      ],
    }).compileComponents();
    const fixture = TestBed.createComponent(PlayerDetail);
    fixture.detectChanges();
    TestBed.inject(HttpTestingController)
      .expectOne(`${environment.apiUrl}teams/5/players/7/transactions`)
      .flush([
        { id: 1, date: '2026-07-31', amount: 12, note: 'Beitrag', type: { id: 11, name: 'fine' } },
      ]);
    await fixture.whenStable();
    fixture.detectChanges();
    expect(fixture.nativeElement.textContent).toContain('Alex Muster');
    expect(fixture.nativeElement.textContent).toContain('Beitrag');
    expect(fixture.nativeElement.textContent).toContain('-12,00');
  });
});
