<script lang="ts">
  import DifficultyLabel from './DifficultyLabel.svelte';
  import MapActionButtons from './MapActionButtons.svelte';
  import SongPlayer from './SongPlayer.svelte';
  import ScoreBar from './ScoreBar.svelte';

// Song metadata
export let hash: string;
export let coverURL: string | undefined = undefined;
export let songName: string | undefined = undefined;
export let mapper: string | undefined = undefined;
export let stars: number | undefined = undefined;
export let timeset: number | undefined = undefined;

// Difficulty info
export let diffName: string;
export let modeName: string = 'Standard';

// BeatLeader/BeatSaver links
export let leaderboardId: string | undefined = undefined;
export let beatsaverKey: string | undefined = undefined;

// BeatSaver stats
export let score: number | undefined = undefined;

export let showActions = true;
export let showPublished = true;

$: hasScore = typeof score === 'number' && Number.isFinite(score);
</script>

<div class="card-wrapper">
  <div class="cover">
    {#if coverURL}
      <img src={coverURL} alt={songName ?? hash} loading="lazy" />
    {:else}
      <div class="placeholder">☁️</div>
    {/if}
  </div>
  <div class="body">
    <div class="title" title={songName ?? hash}>
      {songName ?? hash}
    </div>
    {#if mapper}
      <div class="mapper-row">
        <span class="mapper">
          {mapper}
          {#if stars !== undefined}
            <span class="stars" title="BeatLeader star rating">★ {stars.toFixed(2)}</span>
          {/if}
        </span>
        {#if showPublished && timeset !== undefined}
          <span class="date">{new Date(timeset * 1000).toLocaleDateString()}</span>
        {/if}
      </div>
    {/if}

    <div class="meta">
      <div class="meta-leading">
        <slot name="meta-leading">
          <DifficultyLabel {diffName} {modeName} />
        </slot>
        {#if hasScore}
          <ScoreBar value={score} showLabel={true} size="sm" decimals={1} className="score-meter--with-max" />
        {/if}
      </div>
    </div>

    <slot name="content" />

    {#if showActions}
      <div class="actions">
        <MapActionButtons
          {hash}
          {leaderboardId}
          {diffName}
          {modeName}
          {beatsaverKey}
        />
        <div class="player">
          <SongPlayer {hash} preferBeatLeader={true} />
        </div>
      </div>
    {/if}
  </div>
</div>

<style>
  .card-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }

  .cover {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.75rem;
    overflow: hidden;
  }

  .cover img,
  .cover .placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cover .placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
  }

  .body {
    padding: 0.75rem 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .title {
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mapper-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.9);
  }

  .mapper-row .mapper {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mapper-row .stars {
    margin-left: 0.4rem;
  }

  .mapper-row .date {
    font-size: 0.7rem;
    white-space: nowrap;
  }

  .meta {
    margin-top: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .meta-leading {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    flex: 1;
  }

  .meta-leading :global(.score-meter) {
    width: 100%;
    max-width: 45%;
    margin-left: auto;
  }

  .actions {
    margin-top: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .player {
    flex: 1;
    max-width: 45%;
    margin-left: auto;
  }

  .actions :global(.map-action-buttons) {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  @media (max-width: 959px) {
    .player {
      max-width: none;
      width: 100%;
      margin-left: 0;
    }
  }

  :global(.difficulty-label) {
    white-space: nowrap;
  }
</style>