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

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

  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);
  }
</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 size={32} strokeWidth={1.5} class="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>

<style>
  .play-overlay {
    background: var(--fs-accent);
    color: var(--fs-parchment);
    opacity: 0;
    transition: opacity 150ms ease;
  }
  @media (hover: hover) {
    .card:hover .play-overlay { opacity: 1; }
  }
  @media (hover: none) {
    .play-overlay { opacity: 1; }
  }
</style>
