<script lang="ts">
  import type { ArtistRef, TrackRef } from '$lib/api/types';
  import { api } from '$lib/api/client';
  import { playQueue, enqueueTracks } from '$lib/player/store.svelte';
  import { Disc3, Play, Plus } from 'lucide-svelte';
  import LikeButton from './LikeButton.svelte';
  import ArtistMenu from './ArtistMenu.svelte';
  import { listArtistTracks } from '$lib/api/artists';

  let { artist }: { artist: ArtistRef } = $props();

  let queueing = $state(false);

  function shuffle<T>(items: T[]): T[] {
    const arr = items.slice();
    for (let i = arr.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [arr[i], arr[j]] = [arr[j], arr[i]];
    }
    return arr;
  }

  async function onPlayClick(e: MouseEvent) {
    e.preventDefault();
    e.stopPropagation();
    const tracks = await api.get<TrackRef[]>(`/api/artists/${artist.id}/tracks`);
    if (tracks.length === 0) return;
    playQueue(shuffle(tracks), 0);
  }

  async function onAddToQueue(e: MouseEvent) {
    e.preventDefault();
    e.stopPropagation();
    if (queueing) return;
    queueing = true;
    try {
      const tracks = await listArtistTracks(artist.id);
      if (tracks.length > 0) enqueueTracks(tracks);
    } finally {
      queueing = false;
    }
  }
</script>

<div class="card relative">
  <a
    href={`/artists/${artist.id}`}
    class="group block rounded focus-visible:ring-2 focus-visible:ring-accent"
  >
    <div class="art-wrap relative mx-auto aspect-square w-full overflow-hidden rounded-full bg-surface-hover">
      {#if artist.cover_url}
        <img
          src={artist.cover_url}
          alt=""
          class="h-full w-full object-cover transition-transform group-hover:scale-[1.03]"
          loading="lazy"
        />
      {:else}
        <div class="flex h-full w-full items-center justify-center">
          <Disc3 strokeWidth={1} class="h-4/5 w-4/5 text-text-muted" />
        </div>
      {/if}
      <button
        type="button"
        aria-label={`Play ${artist.name}`}
        onclick={onPlayClick}
        class="play-overlay absolute inset-0 m-auto flex h-12 w-12 items-center justify-center rounded-full"
      >
        <Play size={24} strokeWidth={1.5} fill="currentColor" />
      </button>
    </div>
    <div class="mt-2 truncate text-center text-sm font-medium text-text-primary">{artist.name}</div>
  </a>
  <div class="absolute right-2 top-2 z-10 flex gap-1">
    <LikeButton entityType="artist" entityId={artist.id} />
    <button
      type="button"
      aria-label={`Add ${artist.name} to queue`}
      onclick={onAddToQueue}
      disabled={queueing}
      class="rounded-full bg-surface px-2 py-1 text-sm text-text-secondary hover:text-text-primary focus-visible:ring-2 focus-visible:ring-accent disabled:opacity-50"
    >
      <Plus size={16} strokeWidth={1} />
    </button>
  </div>

  <div class="absolute right-2 bottom-2 z-10">
    <ArtistMenu artistId={artist.id} artistName={artist.name} />
  </div>
</div>

