import { afterEach, describe, expect, test, vi } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import { flushSync } from 'svelte';
import { readable } from 'svelte/store';
import { mockQuery } from '../../../test-utils/query';
import type { ArtistDetail, AlbumRef } from '$lib/api/types';

const state = vi.hoisted(() => ({ pageParams: { id: 'abc' } as Record<string, string> }));

vi.mock('$app/state', () => ({
  page: {
    get params() { return state.pageParams; },
    get url() { return new URL('http://localhost/artists/' + state.pageParams.id); }
  }
}));

vi.mock('$lib/api/queries', () => ({
  qk: { artist: (id: string) => ['artist', id] },
  createArtistQuery: vi.fn()
}));

vi.mock('$lib/api/likes', () => ({
  createLikedIdsQuery: () => readable({
    data: { track_ids: [], album_ids: [], artist_ids: [] },
    isPending: false,
    isError: false
  }),
  likeEntity: vi.fn(),
  unlikeEntity: vi.fn()
}));

vi.mock('@tanstack/svelte-query', async (orig) => {
  const actual = (await orig()) as Record<string, unknown>;
  return { ...actual, useQueryClient: () => ({}) };
});

import ArtistPage from './+page.svelte';
import { createArtistQuery } from '$lib/api/queries';

function album(id: string, title: string, year?: number): AlbumRef {
  return {
    id, title,
    sort_title: title,
    artist_id: 'abc', artist_name: 'Alice',
    year, track_count: 10, duration_sec: 2400,
    cover_url: `/api/albums/${id}/cover`,
    cover_art_source: null
  };
}

afterEach(() => {
  vi.clearAllMocks();
  state.pageParams = { id: 'abc' };
});

describe('artist detail page', () => {
  test('renders artist name, subtitle, and one AlbumCard per album', () => {
    const detail: ArtistDetail = {
      id: 'abc', name: 'Alice', sort_name: 'Alice', album_count: 2, cover_url: '',
      albums: [album('a1', 'First', 2020), album('a2', 'Second')]
    };
    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: detail }));
    render(ArtistPage);
    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Alice');
    expect(screen.getByText(/2 albums/i)).toBeInTheDocument();
    expect(screen.getByRole('link', { name: /First/ })).toHaveAttribute('href', '/albums/a1');
    expect(screen.getByRole('link', { name: /Second/ })).toHaveAttribute('href', '/albums/a2');
  });

  test('back link points to Library', () => {
    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({
      data: { id: 'abc', name: 'Alice', sort_name: 'Alice', album_count: 0, cover_url: '', albums: [] }
    }));
    render(ArtistPage);
    const back = screen.getByRole('link', { name: /library/i });
    expect(back).toHaveAttribute('href', '/');
  });

  test('404 renders non-retryable "Artist not found" with back link', () => {
    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({
      isError: true,
      error: { code: 'not_found', message: 'nope', status: 404 }
    }));
    render(ArtistPage);
    expect(screen.getByText(/artist not found/i)).toBeInTheDocument();
    expect(screen.queryByRole('button', { name: /try again/i })).not.toBeInTheDocument();
  });

  test('non-404 error renders the retry banner', () => {
    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({
      isError: true,
      error: { code: 'server_error', message: 'boom', status: 500 }
    }));
    render(ArtistPage);
    expect(screen.getByRole('alert')).toHaveTextContent('boom');
    expect(screen.getByRole('button', { name: /try again/i })).toBeInTheDocument();
  });

  test('pending (after delay) renders the grid skeleton', () => {
    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ isPending: true }));
    vi.useFakeTimers();
    try {
      render(ArtistPage);
      vi.advanceTimersByTime(200);
      flushSync();
      expect(screen.getByTestId('skeleton-grid')).toBeInTheDocument();
    } finally {
      vi.useRealTimers();
    }
  });
});