<script lang="ts" module>
  export type DiscoverCardKind = 'artist' | 'album' | 'track';
  export type DiscoverCardState = 'requestable' | 'kept' | 'requested';
</script>

<script lang="ts">
  import { Plus, Disc3, Album, Music2 } from 'lucide-svelte';

  let {
    kind,
    title,
    subtitle,
    imageUrl,
    state,
    attribution,
    onRequest,
  }: {
    kind: DiscoverCardKind;
    title: string;
    subtitle?: string;
    imageUrl?: string;
    state: DiscoverCardState;
    attribution?: string;
    onRequest?: () => void;
  } = $props();

  const FallbackIcon = $derived(
    kind === 'artist' ? Disc3 : kind === 'album' ? Album : Music2
  );

  function handleRequest() {
    if (state === 'requestable') onRequest?.();
  }
</script>

<article
  class="card rounded-lg border border-border bg-surface p-3"
  data-state={state}
>
  <div
    class="art flex aspect-square w-full items-center justify-center overflow-hidden rounded-md bg-surface-hover"
  >
    {#if imageUrl}
      <img
        src={imageUrl}
        alt=""
        loading="lazy"
        class="h-full w-full object-cover"
      />
    {:else}
      <FallbackIcon size={32} strokeWidth={1} class="text-text-muted" />
    {/if}
  </div>

  <div class="text mt-3">
    <div class="title text-base font-medium text-text-primary">{title}</div>
    {#if subtitle}
      <div class="subtitle text-sm text-text-secondary">{subtitle}</div>
    {/if}
    {#if attribution}
      <div class="attribution text-xs italic text-text-secondary" data-testid="attribution">
        {attribution}
      </div>
    {/if}
    <div class="badge-row" data-testid="badge-row">
      {#if state === 'kept'}
        <span class="kept-pill" role="status">Kept</span>
      {/if}
    </div>
  </div>

  <div class="actions pt-3" data-testid="actions">
    {#if state === 'requestable'}
      <button
        type="button"
        aria-label={`Request ${title}`}
        class="flex items-center gap-1 rounded-md bg-action-primary px-3 py-1.5 text-sm text-action-fg"
        onclick={handleRequest}
      >
        <Plus size={16} strokeWidth={1} /> Request
      </button>
    {:else if state === 'kept'}
      <button
        type="button"
        disabled
        aria-label={`${title} is already in library`}
        onclick={handleRequest}
        class="rounded-md border border-border px-3 py-1.5 text-sm text-text-muted"
      >
        In library
      </button>
    {:else}
      <button
        type="button"
        disabled
        aria-label={`${title} already requested`}
        onclick={handleRequest}
        class="rounded-md border border-border px-3 py-1.5 text-sm text-text-muted"
      >
        Requested
      </button>
    {/if}
  </div>
</article>

<style>
  .card {
    display: flex;
    flex-direction: column;
  }
  .text {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .badge-row {
    min-height: 22px;
    display: flex;
    align-items: center;
  }
  .actions {
    margin-top: auto;
  }
  .kept-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 14px;
    background: color-mix(in srgb, var(--fs-accent) 15%, transparent);
    color: var(--fs-accent);
  }
</style>
