import { afterEach, describe, expect, test, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/svelte';
import type { TrackRef } from '$lib/api/types';

vi.mock('$lib/player/store.svelte', () => ({
  playQueue: vi.fn()
}));

import CompactTrackCard from './CompactTrackCard.svelte';
import { playQueue } from '$lib/player/store.svelte';

const tracks: TrackRef[] = [
  { id: 't1', title: 'First', album_id: 'a1', album_title: 'A',
    artist_id: 'art-1', artist_name: 'Artist',
    track_number: 1, disc_number: 1, duration_sec: 1, stream_url: '/a' },
  { id: 't2', title: 'Second', album_id: 'a1', album_title: 'A',
    artist_id: 'art-1', artist_name: 'Artist',
    track_number: 2, disc_number: 1, duration_sec: 1, stream_url: '/b' },
  { id: 't3', title: 'Third', album_id: 'a1', album_title: 'A',
    artist_id: 'art-1', artist_name: 'Artist',
    track_number: 3, disc_number: 1, duration_sec: 1, stream_url: '/c' }
];

afterEach(() => vi.clearAllMocks());

describe('CompactTrackCard', () => {
  test('clicking the card calls playQueue with sectionTracks at the right index', async () => {
    render(CompactTrackCard, {
      props: { track: tracks[1], sectionTracks: tracks, index: 1 }
    });
    await fireEvent.click(screen.getByRole('button', { name: /play second/i }));
    expect(playQueue).toHaveBeenCalledWith(tracks, 1);
  });

  test('renders title and artist name', () => {
    render(CompactTrackCard, {
      props: { track: tracks[0], sectionTracks: tracks, index: 0 }
    });
    expect(screen.getByText('First')).toBeInTheDocument();
    expect(screen.getByText('Artist')).toBeInTheDocument();
  });
});