<script lang="ts">
  import { createArtistsQuery } from '$lib/api/queries';
  import ArtistCard from '$lib/components/ArtistCard.svelte';
  import AlphabeticalGrid from '$lib/components/AlphabeticalGrid.svelte';
  import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
  import { useDelayed } from '$lib/utils/useDelayed.svelte';
  import type { ArtistRef } from '$lib/api/types';

  const queryStore = $derived(createArtistsQuery('alpha'));
  const query = $derived($queryStore);
  const artists = $derived(query.data?.pages?.flatMap((p) => p.items) ?? []);
  const total = $derived(query.data?.pages?.[0]?.total ?? 0);
  const showSkeleton = useDelayed(() => query.isPending);
</script>

<div class="space-y-4">
  <header>
    <h1 class="font-display text-2xl font-medium text-text-primary">Artists</h1>
    {#if !query.isPending && !query.isError}
      <p class="text-sm text-text-secondary">
        {total} {total === 1 ? 'artist' : 'artists'}
      </p>
    {/if}
  </header>

  {#if query.isError}
    <ApiErrorBanner error={query.error} onRetry={query.refetch} />
  {:else if showSkeleton.value && artists.length === 0}
    <p class="text-text-secondary">Loading…</p>
  {:else if !query.isPending && total === 0}
    <p class="text-text-secondary">No artists yet — scan a library folder via the server's config.</p>
  {:else}
    <AlphabeticalGrid
      items={artists}
      getKey={(a: ArtistRef) => a.sort_name || a.name}
    >
      {#snippet item(a: ArtistRef)}
        <ArtistCard artist={a} />
      {/snippet}
    </AlphabeticalGrid>

    {#if query.hasNextPage}
      <button
        type="button"
        class="w-full rounded bg-surface py-2 text-sm hover:bg-surface-hover disabled:opacity-60"
        disabled={query.isFetchingNextPage}
        onclick={() => query.fetchNextPage()}
      >
        {query.isFetchingNextPage ? 'Loading…' : 'Load more'}
      </button>
    {:else if artists.length > 0}
      <p class="py-2 text-center text-sm text-text-secondary">End of library</p>
    {/if}
  {/if}
</div>
