{% extends "base.html" %}
{% block title %}{{ song.title or song.filename }} — Pitchkit{% endblock %}

{% block content %}
<div class="page-header" style="display:flex;align-items:center;gap:14px;">
  <a href="/catalog" class="btn-back">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
    Catalog
  </a>
</div>

<div class="song-detail-layout">

  <!-- Left: song info -->
  <div class="song-detail-info">
    <div class="song-detail-title">{{ song.title or song.filename }}</div>
    {% if song.artist %}<div class="song-detail-artist">{{ song.artist }}</div>{% endif %}
    {% if song.album  %}<div class="song-detail-album">{{ song.album }}</div>{% endif %}

    <div class="song-audio-player">
      <audio controls preload="metadata" src="/audio/{{ song.id }}">
        Your browser does not support audio playback.
      </audio>
    </div>

    <div class="song-detail-pills">
      {% if song.bpm and song.bpm != '0' and song.bpm != 0 %}
        <span class="pill pill-blue">♩ {{ song.bpm|int }} BPM</span>
      {% endif %}
      {% if song.key %}<span class="pill pill-purple">{{ song.key }}</span>{% endif %}
      {% if song.energy %}
        {% set e = song.energy|float %}
        <span class="pill pill-{% if e > 0.65 %}orange{% elif e < 0.4 %}green{% else %}gray{% endif %}">
          {% if e > 0.65 %}High energy{% elif e < 0.4 %}Chill{% else %}Mid energy{% endif %}
        </span>
      {% endif %}
      {% if song.danceability %}
        {% set d = song.danceability|float %}
        {% if d > 0.6 %}<span class="pill pill-pink">Danceable</span>{% endif %}
      {% endif %}
    </div>

    {% if song.genre_tags %}
    <div class="song-meta-row">
      <div class="song-meta-label">Genre</div>
      <div class="song-meta-val">{{ song.genre_tags }}</div>
    </div>
    {% endif %}
    {% if song.mood_tags %}
    <div class="song-meta-row">
      <div class="song-meta-label">Mood</div>
      <div class="song-meta-val">{{ song.mood_tags }}</div>
    </div>
    {% endif %}
    {% if song.themes %}
    <div class="song-meta-row">
      <div class="song-meta-label">Themes</div>
      <div class="song-meta-val">{{ song.themes }}</div>
    </div>
    {% endif %}
    {% if song.sound_desc %}
    <div class="song-meta-row">
      <div class="song-meta-label">Sound</div>
      <div class="song-meta-val">{{ song.sound_desc }}</div>
    </div>
    {% endif %}
    {% if song.notes %}
    <div class="song-meta-row">
      <div class="song-meta-label">Notes</div>
      <div class="song-meta-val">{{ song.notes }}</div>
    </div>
    {% endif %}
    {% if song.duration %}
    <div class="song-meta-row">
      <div class="song-meta-label">Duration</div>
      <div class="song-meta-val">
        {% set dur = song.duration|float|int %}
        {{ '%d:%02d'|format(dur // 60, dur % 60) }}
      </div>
    </div>
    {% endif %}
    {% if song.lyrics_source %}
    <div class="song-meta-row">
      <div class="song-meta-label">Lyrics source</div>
      <div class="song-meta-val">{{ song.lyrics_source }}</div>
    </div>
    {% endif %}
  </div>

  <!-- Right: lyrics + export -->
  <div class="song-detail-lyrics-panel">
    {% if song.lyrics %}
    <div class="lyrics-header">
      <div class="lyrics-header-title">Lyrics</div>
      <div class="lyrics-export-btns">
        <button class="btn btn-sm btn-outline" onclick="window.print()">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
          Save as PDF
        </button>
        <a href="/song/{{ song.id }}/lyrics.txt" class="btn btn-sm btn-outline">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
          Download .txt
        </a>
      </div>
    </div>
    <div class="lyrics-body">{{ song.lyrics }}</div>
    {% else %}
    <div class="no-lyrics">
      <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.3"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
      <div>No lyrics yet for this song.</div>
      <div class="no-lyrics-sub">Run <a href="/analyze">Analyze Catalog</a> with Whisper enabled to auto-transcribe vocals.</div>
    </div>
    {% endif %}
  </div>

</div>
{% endblock %}

{% block scripts %}
<style>
/* ── Print styles — makes "Save as PDF" look like a real lyric sheet ────── */
@media print {
  aside.sidebar, .page-header, .lyrics-export-btns, .song-audio-player,
  .lyrics-header-title ~ .lyrics-export-btns { display: none !important; }
  body { background: white !important; color: #111 !important; }
  .main-content { margin: 0 !important; padding: 0 !important; }
  .page-inner { padding: 0 !important; }
  .song-detail-layout { display: block !important; }
  .song-detail-info { margin-bottom: 28px; }
  .song-detail-title { font-size: 26px !important; color: #111 !important; }
  .song-detail-artist { font-size: 16px !important; color: #333 !important; }
  .pill { border: 1px solid #ccc !important; color: #333 !important; background: white !important; }
  .song-meta-label { color: #666 !important; }
  .song-detail-lyrics-panel { border: none !important; background: white !important; padding: 0 !important; }
  .lyrics-body { color: #111 !important; background: white !important; font-size: 13pt; line-height: 1.8; }
  .lyrics-header { border-bottom: 1px solid #ddd !important; padding-bottom: 8px; margin-bottom: 16px; }
  .lyrics-header-title { color: #111 !important; }
}
</style>
{% endblock %}