<script>
  import PhotoGallery from '../shared/PhotoGallery.svelte';

  /** @type {{ entry: import('../stores/journalStore.js').JournalEntry, onClick: () => void }} */
  let { entry, onClick } = $props();

  function formatDate(/** @type {string} */ iso) {
    return new Date(iso).toLocaleDateString('en-US', {
      year: 'numeric', month: 'short', day: 'numeric',
    });
  }
</script>

<li class="v-item">
  <div class="v-dot" aria-hidden="true"></div>
  <div class="v-entry-wrap">
    <div class="above-card">
      <time class="above-date" datetime={entry.date}>{formatDate(entry.date)}</time>
      <span class="above-sep">·</span>
      <span class="above-loc">{entry.location.city}, {entry.location.country}</span>
      <span class="above-sep">·</span>
      <span class="above-days">{entry.days} {entry.days === 1 ? 'day' : 'days'}</span>
    </div>

    <div class="entry-card" role="button" tabindex="0"
      onclick={onClick}
      onkeydown={(e) => e.key === 'Enter' && onClick()}>

      <PhotoGallery photos={entry.photos} height="220px" />

      <div class="entry-body">
        <h2 class="entry-title">{entry.title}</h2>
        {#if entry.memo}
          <p class="entry-memo">{entry.memo}</p>
        {/if}
        <div class="entry-song">
          <svg class="song-icon" width="13" height="13" viewBox="0 0 24 24" fill="none">
            <path d="M9 18V5l12-2v13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <circle cx="6" cy="18" r="3" stroke="currentColor" stroke-width="2"/>
            <circle cx="18" cy="16" r="3" stroke="currentColor" stroke-width="2"/>
          </svg>
          <span class="song-title">{entry.song.title}</span>
          <span class="song-sep">·</span>
          <span class="song-artist">{entry.song.artist}</span>
          <span class="trip-badge trip-badge--{entry.tripType}">
            {entry.tripType === 'solo' ? 'Solo' : 'With Friends'}
          </span>
        </div>
      </div>
    </div>
  </div>
</li>

<style>
  /* Above-card meta */
  .above-card {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .above-date { font-size: 12px; font-weight: 500; color: var(--text-h, #08060d); }
  .above-loc, .above-days { font-size: 12px; color: var(--text, #6b6375); }
  .above-sep { font-size: 11px; color: var(--border, #c8c6cc); user-select: none; }

  /* Card */
  .entry-card {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border, #e5e4e7);
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg, #fff);
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s;
    text-align: left;
  }
  .entry-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.1);
    transform: translateY(-2px);
  }

  .entry-body { padding: 14px 18px 18px; }

  .entry-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-h, #08060d);
    margin: 0 0 6px;
    letter-spacing: -0.2px;
  }

  .entry-memo {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text, #6b6375);
    margin: 0 0 10px;
  }

  .entry-song {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text, #6b6375);
    padding-top: 10px;
    border-top: 1px solid var(--border, #e5e4e7);
  }
  .song-icon { flex-shrink: 0; color: var(--accent, #aa3bff); }
  .song-title { font-weight: 500; color: var(--text-h, #08060d); }
  .song-sep { opacity: 0.35; }

  .entry-song .trip-badge { margin-left: auto; flex-shrink: 0; }
  .trip-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
  }
  .trip-badge--solo    { background: rgba(245,158,11,0.12); color: #b45309; }
  .trip-badge--friends { background: rgba(59,130,246,0.12); color: #1d4ed8; }

  /* Timeline line & dot */
  .v-item { display: flex; gap: 24px; align-items: flex-start; padding-bottom: 36px; }
  .v-item:last-child { padding-bottom: 0; }

  .v-dot {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent, #aa3bff);
    border: 3px solid var(--bg, #fff);
    box-shadow: 0 0 0 2px var(--accent, #aa3bff);
    margin-top: 28px;
    z-index: 1;
  }

  .v-entry-wrap { flex: 1; display: flex; flex-direction: column; }

  @media (max-width: 600px) {
    .v-dot { width: 18px; height: 18px; }
    .v-item { gap: 16px; }
  }
</style>
