{% extends "bookkeeper/base.html" %}
{% load static %}

{% block title %}{{ book.title }} — Bookkeeper{% endblock %}

{% block content %}
<div class="bk-book-detail">
  <div class="bk-detail-cover-col">
    {% with cover_url=user_book.effective_cover_url %}
    {% if cover_url %}
    <img src="{{ cover_url }}" alt="{{ book.title }} cover" class="bk-detail-cover" id="bk-cover-img">
    {% else %}
    <div class="bk-detail-cover bk-cover-placeholder" id="bk-cover-img">
      <span>{{ book.get_format_display }}</span>
    </div>
    {% endif %}
    {% endwith %}

    <div class="bk-cover-change">
      <label for="bk-cover-input" class="bk-btn bk-btn-sm">Change cover</label>
      <input type="file" id="bk-cover-input" accept="image/jpeg,image/png,image/webp,image/gif"
             data-url="{% url 'bookkeeper:api_cover' book.slug %}" hidden>
      <span class="bk-cover-error bk-muted" hidden></span>
    </div>

    <a href="{{ book.get_reader_url }}" class="bk-btn bk-btn-primary bk-btn-block bk-read-btn">
      {% if progress and progress.percentage > 0 %}
      Continue Reading
      {% else %}
      Start Reading
      {% endif %}
    </a>

    {% if progress and progress.percentage > 0 %}
    <div class="bk-progress-row">
      <div class="bk-progress-bar">
        <div class="bk-progress-fill" style="width: {{ progress.percentage }}%"></div>
      </div>
      <span class="bk-muted">{{ progress.percentage|floatformat:0 }}% · p.{{ progress.page_number }}</span>
    </div>
    {% endif %}

    <div class="bk-detail-actions">
      {% if user == book.added_by %}
      <a href="{% url 'bookkeeper:book_edit' book.slug %}" class="bk-btn">Edit Details</a>
      {% endif %}
      <button class="bk-btn bk-favorite-btn {% if user_book.is_favorite %}active{% endif %}"
              data-slug="{{ book.slug }}" data-url="{% url 'bookkeeper:api_favorite' book.slug %}">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="{% if user_book.is_favorite %}currentColor{% else %}none{% endif %}" stroke="currentColor" stroke-width="2">
          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
        </svg>
        {% if user_book.is_favorite %}Favorited{% else %}Favorite{% endif %}
      </button>
      {% if not user_book.is_finished %}
      <button class="bk-btn bk-finish-btn" data-url="{% url 'bookkeeper:api_finish' book.slug %}">
        Mark as Finished
      </button>
      {% else %}
      <span class="bk-badge bk-badge-finished">Finished ✓</span>
      {% endif %}
      <button class="bk-btn bk-delete-btn" data-url="{% url 'bookkeeper:api_delete' book.slug %}">
        Delete from Library
      </button>
    </div>
  </div>

  <div class="bk-detail-info-col">
    <h1 class="bk-detail-title">{{ book.title }}</h1>
    {% if book.author %}<p class="bk-detail-author">by {{ book.author }}</p>{% endif %}

    <div class="bk-detail-rating">
      <label>Your rating:</label>
      <div class="bk-star-rating bk-star-rating-lg" data-rating="{{ user_book.rating|default:0 }}" data-slug="{{ book.slug }}" data-url-rate="{% url 'bookkeeper:api_rate' book.slug %}">
        {% for i in "12345" %}
        <button class="bk-star {% if user_book.rating and user_book.rating >= forloop.counter %}bk-star-filled{% endif %}"
                data-value="{{ forloop.counter }}" aria-label="{{ forloop.counter }} star">★</button>
        {% endfor %}
      </div>
    </div>

    <dl class="bk-detail-meta">
      {% if book.publisher %}<dt>Publisher</dt><dd>{{ book.publisher }}</dd>{% endif %}
      {% if book.published_date %}<dt>Published</dt><dd>{{ book.published_date }}</dd>{% endif %}
      {% if book.isbn %}<dt>ISBN</dt><dd>{{ book.isbn }}</dd>{% endif %}
      <dt>Format</dt><dd>{{ book.get_format_display }}</dd>
      {% if book.page_count %}<dt>Pages</dt><dd>{{ book.page_count }}</dd>{% endif %}
      {% if book.language %}<dt>Language</dt><dd>{{ book.language|upper }}</dd>{% endif %}
      <dt>Added</dt><dd>{{ book.created_at|date:"N j, Y" }}</dd>
    </dl>

    {% if book.description %}
    <div class="bk-detail-description">
      <h2>About this book</h2>
      <p>{{ book.description }}</p>
    </div>
    {% endif %}

    {% if book.amazon_url %}
    <div class="bk-detail-amazon">
      <a href="{{ book.amazon_url }}" target="_blank" rel="noopener sponsored" class="bk-btn">
        Buy on Amazon
      </a>
      <p class="bk-affiliate-disclosure">As an Amazon Associate, we earn from qualifying purchases.</p>
    </div>
    {% endif %}

    {% if bookmarks %}
    <div class="bk-detail-section">
      <h2>Bookmarks ({{ bookmarks.count }})</h2>
      <ul class="bk-bookmark-list">
        {% for bm in bookmarks %}
        <li>
          <a href="{{ book.get_reader_url }}?position={{ bm.position|urlencode }}">
            {{ bm.title|default:"Bookmark" }} — p.{{ bm.page_number }}
          </a>
          {% if bm.note %}<p class="bk-muted">{{ bm.note }}</p>{% endif %}
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}

    {% if highlights %}
    <div class="bk-detail-section">
      <h2>Highlights ({{ highlights.count }})</h2>
      <ul class="bk-highlight-list">
        {% for hl in highlights %}
        <li class="bk-highlight-item bk-hl-{{ hl.color }}">
          <blockquote>{{ hl.text|truncatewords:30 }}</blockquote>
          {% if hl.note %}<p class="bk-muted">{{ hl.note }}</p>{% endif %}
          <span class="bk-muted">p.{{ hl.page_number }}</span>
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.querySelectorAll('.bk-favorite-btn').forEach(btn => {
  btn.addEventListener('click', async () => {
    const res = await BK.post(btn.dataset.url);
    if (res.is_favorite) {
      btn.classList.add('active');
      btn.querySelector('svg').setAttribute('fill', 'currentColor');
      btn.lastChild.textContent = ' Favorited';
    } else {
      btn.classList.remove('active');
      btn.querySelector('svg').setAttribute('fill', 'none');
      btn.lastChild.textContent = ' Favorite';
    }
  });
});
document.querySelector('.bk-finish-btn')?.addEventListener('click', async function() {
  await BK.post(this.dataset.url);
  this.replaceWith(Object.assign(document.createElement('span'), {
    className: 'bk-badge bk-badge-finished', textContent: 'Finished ✓'
  }));
});
document.querySelector('.bk-delete-btn')?.addEventListener('click', async function() {
  if (!confirm('Remove this book from your library? The book will not be deleted — you can add it back anytime.')) return;
  const res = await BK.post(this.dataset.url);
  if (res.redirect) window.location.href = res.redirect;
});
const coverInput = document.getElementById('bk-cover-input');
const coverError = document.querySelector('.bk-cover-error');
coverInput?.addEventListener('change', async () => {
  const file = coverInput.files[0];
  if (!file) return;
  coverError.hidden = true;
  const fd = new FormData();
  fd.append('cover', file);
  const csrf = document.cookie.split('; ').find(r => r.startsWith('csrftoken='))?.split('=')[1] ?? '';
  const res = await fetch(coverInput.dataset.url, {
    method: 'POST', body: fd, headers: { 'X-CSRFToken': csrf },
  });
  const data = await res.json();
  if (data.ok) {
    const img = document.getElementById('bk-cover-img');
    const newImg = document.createElement('img');
    newImg.src = data.cover_url;
    newImg.alt = img.alt || '';
    newImg.className = 'bk-detail-cover';
    newImg.id = 'bk-cover-img';
    img.replaceWith(newImg);
  } else {
    coverError.textContent = data.error || 'Upload failed.';
    coverError.hidden = false;
  }
  coverInput.value = '';
});
</script>
{% endblock %}