{% extends 'base.html.twig' %}
{% block title %}{{ album.name }} — Reviews{% endblock %}
{% block body %}
  <div class="row g-4 mb-4">
    <div class="col-md-4">
      <div class="card h-100">
        {% set image = (album.images[1] ?? album.images[0] ?? null) %}
        {% if image %}
          <img class="card-img-top" src="{{ image.url }}" alt="{{ album.name }} cover" />
        {% endif %}
        <div class="card-body">
          <h5 class="card-title mb-1">{{ album.name }}</h5>
          <div class="text-secondary mb-2">{{ album.artists|map(a => a.name)|join(', ') }}</div>
          {% set release_text = album.release_date is defined and album.release_date ? album.release_date : 'Not provided' %}
          {% set track_count = album.total_tracks is defined and album.total_tracks ? album.total_tracks : 0 %}
          {% set track_text = track_count > 0 ? track_count ~ ' tracks' : 'Track count unknown' %}
          <p class="text-secondary mb-2">
            Released {{ release_text }} • {{ track_text }}
            {% if album.source is defined and album.source == 'user' %}
              <br>
              <small>
                Added{{ albumOwner ? ' by ' ~ (albumOwner.displayName ?? albumOwner.userIdentifier) : '' }}
                {% if albumCreatedAt %}on {{ albumCreatedAt|date('Y-m-d') }}{% endif %}
              </small>
            {% endif %}
          </p>
          {% if album.genres is defined and album.genres is not empty %}
            <p class="text-secondary mb-2">Genres: {{ album.genres|join(', ') }}</p>
          {% endif %}
          <p class="mb-2"><strong>User score:</strong> {{ avg }}/10 ({{ count }})</p>
          {% if album.external_urls.spotify %}
            <a class="btn btn-outline-success btn-sm" href="{{ album.external_urls.spotify }}" target="_blank" rel="noopener">Open in Spotify</a>
          {% endif %}
          {% if album.source is defined and album.source == 'user' %}
            <span class="badge text-bg-primary ms-2">User album</span>
          {% endif %}
          {% if app.user and (album.source is not defined or album.source != 'user') and (isSaved is defined) and (not isSaved) %}
            <form class="d-inline ms-2" method="post" action="{{ path('album_save', {id: albumId}) }}">
              <input type="hidden" name="_token" value="{{ csrf_token('save-album-' ~ albumId) }}">
              <button class="btn btn-primary btn-sm" type="submit">Save album</button>
            </form>
          {% endif %}
          {% if allowedEdit %}
            <a class="btn btn-outline-secondary btn-sm ms-2" href="{{ path('album_edit', {id: albumId}) }}">Edit</a>
          {% endif %}
          {% if allowedDelete %}
            <form class="d-inline ms-2" method="post" action="{{ path('album_delete', {id: albumId}) }}" onsubmit="return confirm('Delete this album from the database?');">
              <input type="hidden" name="_token" value="{{ csrf_token('delete-album-' ~ albumId) }}">
              <button class="btn btn-outline-danger btn-sm" type="submit">Delete</button>
            </form>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="col-md-8">
      {% if tracks is defined and tracks is not empty %}
        <div class="card mb-4">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <h2 class="h5 mb-0">Tracklist</h2>
              <span class="text-secondary">{{ tracks|length }} tracks</span>
            </div>
            <div class="mui-table-wrapper w-100">
              <table class="mui-table mui-table--compact mui-table--striped mb-0">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">Title</th>
                    <th scope="col" class="text-end">Duration</th>
                  </tr>
                </thead>
                <tbody>
                  {% for track in tracks %}
                    <tr>
                      <td class="mui-table__number">{{ track.disc > 1 ? track.disc ~ '.' : '' }}{{ track.track }}</td>
                      <td>
                        <div class="d-flex align-items-center gap-2">
                          <div class="mui-table__title">{{ track.name }}</div>
                          {% if track.preview_url %}
                            <a class="mui-icon-button" href="{{ track.preview_url }}" target="_blank" rel="noopener" title="Preview track">
                              &#9658;
                            </a>
                          {% endif %}
                        </div>
                      </td>
                      <td class="text-end mui-table__metric">{{ track.duration_label }}</td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      {% endif %}

      <div class="d-flex justify-content-between align-items-center mb-2">
        <h2 class="h5 mb-0">Reviews</h2>
      </div>
      <div class="vstack gap-3 mb-4">
        {% for r in reviews %}
          {% set avatar = r.author.profileImagePath ?? null %}
          <div class="card">
            <div class="card-body">
              <div class="d-flex gap-3">
                <div>
                  {% if avatar %}
                    <img src="{{ avatar }}" alt="Avatar for {{ r.author.displayName ?? r.author.userIdentifier }}" class="rounded-circle border" width="56" height="56" style="object-fit: cover;">
                  {% else %}
                    <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center" style="width:56px;height:56px;">
                      {{ (r.author.displayName ?? r.author.userIdentifier)|slice(0,1)|upper }}
                    </div>
                  {% endif %}
                </div>
                <div class="flex-grow-1">
                  <h6 class="card-title mb-1">{{ r.title }} <span class="text-secondary">(Rating {{ r.rating }}/10)</span></h6>
                  <div class="text-secondary mb-2">by {{ r.author.displayName ?? r.author.userIdentifier }} • {{ r.createdAt|date('Y-m-d H:i') }}</div>
                  <p class="card-text">{{ r.content|u.truncate(300, '…', false) }}</p>
                  <a class="btn btn-link p-0" href="{{ path('review_show', {id: r.id}) }}">Read more</a>
                </div>
              </div>
            </div>
          </div>
        {% else %}
          <p class="text-secondary">No reviews yet for this album.</p>
        {% endfor %}
      </div>

      {% if app.user %}
        <div class="card">
          <div class="card-body">
            <h3 class="h6">Leave a review</h3>
            {{ form_start(form, {attr: {class: 'vstack gap-3', novalidate: 'novalidate'}}) }}
              <div>{{ form_label(form.title) }}{{ form_widget(form.title, {attr: {class: 'form-control'}}) }}{{ form_errors(form.title) }}</div>
              <div>{{ form_label(form.content) }}{{ form_widget(form.content, {attr: {class: 'form-control', rows: 6}}) }}{{ form_errors(form.content) }}</div>
              <div>
                {{ form_label(form.rating) }}
                <div class="d-flex align-items-center gap-3">
                  {{ form_widget(form.rating, {attr: {class: 'form-range', min:1, max:10, step:1, list:'rating-ticks', oninput:'document.getElementById("rating-value").textContent=this.value;'}}) }}
                  <span id="rating-value" class="badge text-bg-success">{{ form.rating.vars.value ?? 5 }}</span>
                </div>
                <datalist id="rating-ticks">
                  {% for i in 1..10 %}<option value="{{ i }}">{{ i }}</option>{% endfor %}
                </datalist>
                {{ form_errors(form.rating) }}
              </div>
              <button class="btn btn-success" type="submit">Post review</button>
            {{ form_end(form) }}
          </div>
        </div>
      {% else %}
        <div class="alert alert-info">Sign in to leave a review. <button class="btn btn-sm btn-success ms-2" type="button" data-open-auth="login">Login / Sign up</button></div>
      {% endif %}
    </div>
  </div>
{% endblock %}