<script>
  let { entry, onBack } = $props();

  let photoIdx = $state(0);

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

  function prev() {
    photoIdx = (photoIdx - 1 + entry.photos.length) % entry.photos.length;
  }
  function next() {
    photoIdx = (photoIdx + 1) % entry.photos.length;
  }

  function tripType(/** @type {string[] | undefined} */ companions) {
    if (!companions || companions.length === 0 || (companions.length === 1 && companions[0] === 'solo')) return 'solo';
    return 'friends';
  }

  function companionText(/** @type {string[] | undefined} */ companions) {
    if (!companions || companions.length === 0 || (companions.length === 1 && companions[0] === 'solo')) return 'Solo';
    return companions.join(', ');
  }

  const TRANSPORT_LABELS = {
    plane: '✈️ Plane',
    car: '🚗 Car',
    train: '🚆 Train',
    boat: '⛵ Boat',
    bus: '🚌 Bus',
    other: 'Other',
  };
</script>

<article class="detail-page">

  <button class="back-btn" onclick={onBack} aria-label="Back to timeline">
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.8"
        stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    Back
  </button>

  {#if entry.photos?.length > 0}
    <div class="hero-gallery">
      <img
        class="hero-img"
        src={entry.photos[photoIdx]}
        alt="{entry.title} — photo {photoIdx + 1}"
        loading="lazy"
      />
      {#if entry.photos.length > 1}
        <button class="arr left" onclick={prev} aria-label="Previous photo">‹</button>
        <button class="arr right" onclick={next} aria-label="Next photo">›</button>
        <div class="thumb-strip">
          {#each entry.photos as photo, i}
            <button
              class="thumb"
              class:active={i === photoIdx}
              onclick={() => (photoIdx = i)}
              aria-label="Photo {i + 1}"
            >
              <img src={photo} alt="" />
            </button>
          {/each}
        </div>
      {/if}
      <span class="photo-counter">{photoIdx + 1} / {entry.photos.length}</span>
    </div>
  {/if}

  <div class="detail-content">
    <div class="meta-row">
      <span class="badge loc-badge">📍 {entry.city}, {entry.countryName}</span>
      <span class="badge" class:trip-badge--solo={tripType(entry.companions) === 'solo'} class:trip-badge--friends={tripType(entry.companions) === 'friends'}>
        {tripType(entry.companions) === 'solo' ? '🧍 Solo' : '👥 ' + companionText(entry.companions)}
      </span>
      {#if entry.transportation}
        <span class="badge transport-badge">{TRANSPORT_LABELS[entry.transportation] || entry.transportation}</span>
      {/if}
    </div>

    <h1 class="detail-title">{entry.title}</h1>

    <div class="stats-row">
      <div class="stat">
        <span class="stat-label">Date</span>
        <time class="stat-value" datetime={entry.date}>{formatDate(entry.date)}</time>
      </div>
      <div class="stat-divider"></div>
      <div class="stat">
        <span class="stat-label">Duration</span>
        <span class="stat-value">{entry.days} {entry.days === 1 ? 'day' : 'days'}</span>
      </div>
    </div>

    <hr class="section-divider" />
    <p class="detail-memo">{entry.memo}</p>
    <hr class="section-divider" />

    <div class="song-row">
      <div class="song-icon-wrap" aria-hidden="true">
        <svg width="18" height="18" 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>
      </div>
      <div class="song-text">
        <span class="song-label">Soundtrack</span>
        <span class="song-name">{entry.song?.title || ''}</span>
        <span class="song-artist">{entry.song?.artist || ''}</span>
      </div>
    </div>
  </div>
</article>

<style>
  .detail-page {
    max-width: 680px;
    margin: 0 auto;
    padding: 32px 24px 80px;
    font-family: var(--sans, system-ui, sans-serif);
  }

  .back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text, #6b6375);
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 0;
    margin-bottom: 28px;
    transition: color 0.15s;
  }
  .back-btn:hover { color: var(--accent, #aa3bff); }

  .hero-gallery {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    margin-bottom: 28px;
  }

  .hero-img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
  }

  .arr {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    z-index: 2;
  }
  .arr:hover { background: rgba(0,0,0,0.7); }
  .arr.left  { left: 14px; }
  .arr.right { right: 14px; }

  .photo-counter {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    background: rgba(0,0,0,0.45);
    padding: 3px 10px;
    border-radius: 20px;
    z-index: 2;
  }

  .thumb-strip {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
  }

  .thumb {
    width: 52px;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    opacity: 0.65;
    background: none;
    transition: border-color 0.15s, opacity 0.15s;
  }
  .thumb.active { border-color: #fff; opacity: 1; }
  .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .detail-content { text-align: left; }

  .meta-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }

  .badge {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 20px;
  }

  .loc-badge {
    background: var(--accent-bg, rgba(170,59,255,0.08));
    color: var(--accent, #aa3bff);
  }

  .trip-badge--solo { background: rgba(245,158,11,0.12); color: #b45309; }
  .trip-badge--friends { background: rgba(59,130,246,0.12); color: #1d4ed8; }

  .transport-badge {
    background: rgba(16,185,129,0.12);
    color: #059669;
  }

  .detail-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-h, #08060d);
    margin: 0 0 20px;
    letter-spacing: -0.6px;
    line-height: 1.2;
  }

  .stats-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
  }

  .stat { display: flex; flex-direction: column; gap: 2px; }

  .stat-label {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text, #6b6375);
  }

  .stat-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-h, #08060d);
  }

  .stat-divider {
    width: 1px;
    height: 32px;
    background: var(--border, #e5e4e7);
  }

  .section-divider {
    border: none;
    border-top: 1px solid var(--border, #e5e4e7);
    margin: 24px 0;
  }

  .detail-memo {
    font-size: 16px;
    line-height: 1.75;
    color: var(--text, #6b6375);
    margin: 0;
  }

  .song-row { display: flex; align-items: center; gap: 14px; }

  .song-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-bg, rgba(170,59,255,0.08));
    color: var(--accent, #aa3bff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .song-text { display: flex; flex-direction: column; gap: 2px; }

  .song-label {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text, #6b6375);
  }

  .song-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-h, #08060d);
  }

  .song-artist { font-size: 13px; color: var(--text, #6b6375); }

  @media (max-width: 600px) {
    .detail-page { padding: 24px 16px 60px; }
    .hero-img { height: 260px; }
    .detail-title { font-size: 22px; }
    .thumb { width: 40px; height: 28px; }
  }
</style>
