import { describe, expect, test, vi } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import { readable } from 'svelte/store';
import { emptyLikesMock } from '../../../test-utils/mocks/likes';
import { apiClientMock } from '../../../test-utils/mocks/client';

vi.mock('$lib/api/albums', () => ({
  createAlbumsAlphaInfiniteQuery: () => readable({
    data: { pages: [{
      items: [
        { id: 'a1', title: 'Apple',  sort_title: 'Apple',
          artist_id: 'art-1', artist_name: 'X',
          track_count: 5, duration_sec: 100, cover_url: '/api/albums/a1/cover' },
        { id: 'b1', title: 'Banana', sort_title: 'Banana',
          artist_id: 'art-1', artist_name: 'X',
          track_count: 3, duration_sec: 50,  cover_url: '/api/albums/b1/cover' }
      ],
      total: 2, limit: 50, offset: 0
    }] },
    isPending: false,
    isError: false,
    hasNextPage: false,
    isFetchingNextPage: false,
    refetch: () => {},
    fetchNextPage: () => {}
  }),
  ALBUM_PAGE_SIZE: 50
}));
vi.mock('$lib/api/client', () => apiClientMock());
vi.mock('$lib/player/store.svelte', () => ({
  enqueueTracks: vi.fn(),
  playQueue: vi.fn()
}));
vi.mock('$lib/api/likes', () => emptyLikesMock());
// AlbumCard renders LikeButton, which calls useQueryClient() to get the
// cache for invalidation. The page test isn't wrapped in a QueryClientProvider,
// so we stub useQueryClient with a noop client.
import Page from './+page.svelte';

describe('/library/albums', () => {
  test('renders title + count + alphabetical dividers', () => {
    render(Page);
    expect(screen.getByRole('heading', { name: /albums/i })).toBeInTheDocument();
    expect(screen.getByText(/2 albums/)).toBeInTheDocument();
    expect(screen.getByText('A')).toBeInTheDocument();
    expect(screen.getByText('B')).toBeInTheDocument();
    expect(screen.getByText('Apple')).toBeInTheDocument();
    expect(screen.getByText('Banana')).toBeInTheDocument();
  });
});