'use client';

import { Reactions } from './Reactions';
import { SERVICE_LABELS, openUrl, timeAgo, type ProfileDTO, type RecentPlayDTO, type StreamingService } from '@musicshare/shared';

export function RecentPlays({
  plays,
  preferred,
  attribution = {},
  ownerId,
}: {
  plays: RecentPlayDTO[];
  /** Whose plays these are (they can't react to their own). */
  ownerId: string;
  preferred: StreamingService | null | undefined;
  attribution?: ProfileDTO['attribution'];
}) {
  const credits = (['lastfm', 'listenbrainz'] as const).filter((s) => attribution[s] && plays.some((p) => p.source === s));
  if (plays.length === 0) return null;
  return (
    <section className="card">
      <h2>Recently played</h2>
      <ul className="recent">
        {plays.map((p, i) => {
          const target = preferred ? openUrl(p.track, preferred) : null;
          const row = (
            <>
              {p.track.artworkUrl ? <img className="artwork-sm" src={p.track.artworkUrl} alt="" /> : <div className="artwork-sm artwork-empty">♪</div>}
              <span className="recent-text">
                <span className="recent-title">{p.track.title}</span>
                <span className="muted">{p.track.artist}</span>
              </span>
              <span className="muted recent-time">{timeAgo(p.playedAt)}</span>
            </>
          );
          return (
            <li key={p.listenId ?? `${p.playedAt}-${i}`}>
              {target ? (
                <a
                  className="recent-row"
                  href={target.url}
                  target="_blank"
                  rel="noreferrer"
                  title={`${target.exact ? 'Open' : 'Search'} in ${SERVICE_LABELS[preferred!]}`}
                >
                  {row}
                </a>
              ) : (
                <div className="recent-row">{row}</div>
              )}
              <Reactions listenId={p.listenId} reactions={p.reactions} ownerId={ownerId} commentCount={p.commentCount ?? 0} />
            </li>
          );
        })}
      </ul>
      {credits.map((s) => (
        <p key={s} className="muted credit">
          Some plays via{' '}
          <a href={attribution[s]} target="_blank" rel="noreferrer">
            {s === 'lastfm' ? 'Last.fm' : 'ListenBrainz'}
          </a>
        </p>
      ))}
    </section>
  );
}