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

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

  function onImgError(e: Event) {
    (e.currentTarget as HTMLImageElement).src = FALLBACK_COVER;
  }

  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 relative">
  <a
    href={`/albums/${album.id}`}
    class="group block rounded focus-visible:ring-2 focus-visible:ring-accent"
  >
    <div class="art-wrap relative aspect-square w-full overflow-hidden rounded-md">
      <img
        src={album.cover_url}
        alt=""
        class="h-full w-full object-cover transition-transform group-hover:scale-[1.03]"
        loading="lazy"
        onerror={onImgError}
      />
      <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}
    {#if album.year}
      <div class="text-xs text-text-secondary">{album.year}</div>
    {/if}
  </a>
  <div class="absolute right-2 top-2 z-10 flex gap-1">
    <LikeButton entityType="album" entityId={album.id} />
    <button
      type="button"
      aria-label="Add to queue"
      onclick={onAddClick}
      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"
    >
      <Plus size={16} strokeWidth={1} />
    </button>
  </div>
</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>
