<script lang="ts">
  import { pageTitle } from '$lib/branding';
  import { createHomeQuery } from '$lib/api/home';
  import HorizontalScrollRow from '$lib/components/HorizontalScrollRow.svelte';
  import AlbumCard from '$lib/components/AlbumCard.svelte';
  import ArtistCard from '$lib/components/ArtistCard.svelte';
  import CompactTrackCard from '$lib/components/CompactTrackCard.svelte';
  import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
  import { useDelayed } from '$lib/utils/useDelayed.svelte';

  const queryStore = createHomeQuery();
  const query = $derived($queryStore);
  const data = $derived(query.data);

  const showSkeleton = useDelayed(() => query.isPending);

  // Each "Most played" row gets 25 of the 75 tracks (server returns up
  // to 75; rows 0/1/2 slice [0..25), [25..50), [50..75)).
  function chunk<T>(items: T[], size: number): T[][] {
    const out: T[][] = [];
    for (let i = 0; i < items.length; i += size) out.push(items.slice(i, i + size));
    return out;
  }
</script>

<svelte:head><title>{pageTitle('Home')}</title></svelte:head>

<div class="space-y-8">
  {#if query.isError}
    <ApiErrorBanner error={query.error} onRetry={query.refetch} />
  {:else if showSkeleton.value && !data}
    <p class="text-text-secondary">Loading…</p>
  {:else if data}
    <!-- Recently added: 50 albums in 2 rows of 25, scrolling together -->
    <section class="space-y-3">
      {#if data.recently_added_albums.length === 0}
        <header>
          <h2 class="font-display text-2xl font-medium text-text-primary">Recently added</h2>
        </header>
        <p class="text-text-secondary">Nothing added yet. Scan a folder via the server's config.</p>
      {:else}
        <HorizontalScrollRow
          rows={chunk(data.recently_added_albums, 25)}
          title="Recently added"
          ariaLabel="Recently added"
        >
          {#snippet item(album: import('$lib/api/types').AlbumRef)}
            <div class="w-44"><AlbumCard {album} /></div>
          {/snippet}
        </HorizontalScrollRow>
      {/if}
    </section>

    <!-- Rediscover: albums + artists. Kept as two scrollers because the
         card types differ (square vs circular); coupling them in one
         scroller would interleave shapes awkwardly. -->
    <section class="space-y-3">
      {#if data.rediscover_albums.length === 0 && data.rediscover_artists.length === 0}
        <header>
          <h2 class="font-display text-2xl font-medium text-text-primary">Rediscover</h2>
        </header>
        <p class="text-text-secondary">No forgotten favourites yet. Like some albums or artists to fill this in.</p>
      {:else}
        {#if data.rediscover_albums.length > 0}
          <HorizontalScrollRow
            rows={[data.rediscover_albums]}
            title="Rediscover"
            ariaLabel="Rediscover albums"
          >
            {#snippet item(album: import('$lib/api/types').AlbumRef)}
              <div class="w-44"><AlbumCard {album} /></div>
            {/snippet}
          </HorizontalScrollRow>
        {/if}
        {#if data.rediscover_artists.length > 0}
          <HorizontalScrollRow
            rows={[data.rediscover_artists]}
            title={data.rediscover_albums.length === 0 ? 'Rediscover' : undefined}
            ariaLabel="Rediscover artists"
          >
            {#snippet item(artist: import('$lib/api/types').ArtistRef)}
              <div class="w-36"><ArtistCard {artist} /></div>
            {/snippet}
          </HorizontalScrollRow>
        {/if}
      {/if}
    </section>

    <!-- Most played: 75 tracks in 3 rows of 25, scrolling together -->
    <section class="space-y-3">
      {#if data.most_played_tracks.length === 0}
        <header>
          <h2 class="font-display text-2xl font-medium text-text-primary">Most played</h2>
        </header>
        <p class="text-text-secondary">No plays to draw from. Listen to something.</p>
      {:else}
        <HorizontalScrollRow
          rows={chunk(data.most_played_tracks, 25)}
          title="Most played"
          ariaLabel="Most played"
        >
          {#snippet item(track: import('$lib/api/types').TrackRef, globalIdx: number)}
            <CompactTrackCard
              {track}
              sectionTracks={data.most_played_tracks}
              index={globalIdx}
            />
          {/snippet}
        </HorizontalScrollRow>
      {/if}
    </section>

    <!-- Last played artists -->
    <section class="space-y-3">
      {#if data.last_played_artists.length === 0}
        <header>
          <h2 class="font-display text-2xl font-medium text-text-primary">Last played</h2>
        </header>
        <p class="text-text-secondary">No recent plays.</p>
      {:else}
        <HorizontalScrollRow
          rows={[data.last_played_artists]}
          title="Last played"
          ariaLabel="Last played artists"
        >
          {#snippet item(artist: import('$lib/api/types').ArtistRef)}
            <div class="w-36"><ArtistCard {artist} /></div>
          {/snippet}
        </HorizontalScrollRow>
      {/if}
    </section>
  {/if}
</div>
