<script lang="ts">
  import type { HistoryEvent } from '$lib/api/history';
  import { playQueue } from '$lib/player/store.svelte';
  import { coverUrl } from '$lib/media/covers';

  let { event } = $props<{ event: HistoryEvent }>();

  function handleClick() {
    playQueue([event.track], 0);
  }

  // Format played_at as a human-readable timestamp.
  // Bands: <1h "23m ago" / <24h "3h ago" / <7d "Tue 14:32" /
  // older same-year "May 1" / older diff-year "May 1, 2025".
  function relativeTime(playedAtIso: string): string {
    const playedAt = new Date(playedAtIso);
    const now = new Date();
    const ms = now.getTime() - playedAt.getTime();
    const minutes = Math.floor(ms / 60000);
    if (minutes < 60) return `${Math.max(1, minutes)}m ago`;
    const hours = Math.floor(minutes / 60);
    if (hours < 24) return `${hours}h ago`;
    const days = Math.floor(hours / 24);
    if (days < 7) {
      const dayOfWeek = playedAt.toLocaleDateString(undefined, { weekday: 'short' });
      const time = playedAt.toLocaleTimeString(undefined, {
        hour: '2-digit', minute: '2-digit', hour12: false
      });
      return `${dayOfWeek} ${time}`;
    }
    if (playedAt.getFullYear() === now.getFullYear()) {
      return playedAt.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
    }
    return playedAt.toLocaleDateString(undefined, {
      month: 'short', day: 'numeric', year: 'numeric'
    });
  }

  const timestamp = $derived(relativeTime(event.played_at));
  const tooltip = $derived(new Date(event.played_at).toISOString());
</script>

<button
  type="button"
  onclick={handleClick}
  aria-label={`Play ${event.track.title}`}
  class="flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-surface-hover"
>
  <img
    src={coverUrl(event.track.album_id)}
    alt=""
    class="h-11 w-11 flex-shrink-0 rounded object-cover"
    loading="lazy"
  />
  <div class="min-w-0 flex-1">
    <div class="truncate text-sm font-medium text-text-primary">{event.track.title}</div>
    <div class="truncate text-xs text-text-secondary">
      {event.track.artist_name} · {event.track.album_title}
    </div>
  </div>
  <span title={tooltip} class="flex-shrink-0 text-xs text-text-secondary">
    {timestamp}
  </span>
</button>
