<script lang="ts">
  import type { AlbumRef, AlbumDetail } from '$lib/api/types';
  import { api } from '$lib/api/client';
  import { enqueueTracks, playQueue } from '$lib/player/store.svelte';
  import { Play } from 'lucide-svelte';
  import AlbumMenu from './AlbumMenu.svelte';
  import CardActionCluster from './CardActionCluster.svelte';
  import Cover from './Cover.svelte';

  let { album }: { album: AlbumRef } = $props();

  async function onAddClick(e: MouseEvent) {
    e.preventDefault();
    e.stopPropagation();
    const detail = await api.get<AlbumDetail>(`/api/albums/${album.id}`);
    enqueueTracks(detail.tracks);
  }

  async function onPlayClick(e: MouseEvent) {
    e.preventDefault();
    e.stopPropagation();
    const detail = await api.get<AlbumDetail>(`/api/albums/${album.id}`);
    playQueue(detail.tracks, 0);
  }
</script>

<div class="card group relative">
  <a
    href={`/albums/${album.id}`}
    class="block rounded focus-visible:ring-2 focus-visible:ring-accent"
  >
    <div
      class="art-wrap relative aspect-square w-full overflow-hidden rounded-md
             shadow-sm transition-all duration-150
             group-hover:shadow-lg group-hover:ring-1 group-hover:ring-accent/40"
    >
      <Cover
        src={album.cover_url}
        class="transition-transform group-hover:scale-[1.03]"
      />
      <button
        type="button"
        aria-label={`Play ${album.title}`}
        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-sm font-medium text-text-primary">{album.title}</div>
    {#if album.artist_name}
      <div class="truncate text-xs text-text-secondary">{album.artist_name}</div>
    {/if}
  </a>
  <CardActionCluster
    likeEntityType="album"
    likeEntityId={album.id}
    onAdd={onAddClick}
    addLabel="Add to queue"
  >
    {#snippet menu()}
      <AlbumMenu
        albumId={album.id}
        albumTitle={album.title}
        artistId={album.artist_id}
        artistName={album.artist_name}
      />
    {/snippet}
  </CardActionCluster>
</div>

