{% extends "base.html" %}
{% block title %}Duplicates — CalibreSync{% endblock %}

{% block content %}
<div class="page-header">
  <h1>Duplicate books in Calibre-Web</h1>
</div>

{% if error %}
  <div class="alert alert-warning">Could not fetch books from Calibre-Web: {{ error }}</div>
{% else %}
  <p class="muted small" style="margin-bottom:1.5rem">
    Scanned <strong>{{ total_books }}</strong> book(s) —
    {% if groups %}
      found <strong>{{ groups|length }}</strong> duplicate group(s).
      Books are grouped by normalised title. Keep the one you want and delete the rest.
    {% else %}
      no duplicates found.
    {% endif %}
  </p>

  {% for group in groups %}
  <div class="form-section" style="margin-bottom:1rem">
    <h3 style="margin-top:0">{{ group[0].title }}</h3>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Title</th>
          <th>Authors</th>
          <th>Format</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for book in group %}
        <tr id="row-{{ book.id }}">
          <td class="mono muted">{{ book.id }}</td>
          <td>{{ book.title }}</td>
          <td>{{ book.authors }}</td>
          <td>{{ book.format or "—" }}</td>
          <td>
            <button class="btn btn-danger" style="padding:0.2rem 0.7rem;font-size:0.85rem"
                    onclick="deleteBook({{ book.id }}, this)">Delete</button>
            <span id="status-{{ book.id }}" class="muted small" style="margin-left:0.5rem"></span>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endfor %}
{% endif %}

<script>
async function deleteBook(id, btn) {
  if (!confirm('Delete book ID ' + id + ' from Calibre-Web?')) return;
  btn.disabled = true;
  btn.textContent = 'Deleting…';
  const status = document.getElementById('status-' + id);
  try {
    const r = await fetch('/api/delete_book/' + id, {method: 'POST'});
    const data = await r.json();
    if (data.ok) {
      document.getElementById('row-' + id).style.opacity = '0.35';
      btn.textContent = 'Deleted';
      status.textContent = '✓';
    } else {
      btn.disabled = false;
      btn.textContent = 'Delete';
      status.textContent = 'Failed: ' + data.message;
      status.style.color = 'var(--error, #f87171)';
    }
  } catch (e) {
    btn.disabled = false;
    btn.textContent = 'Delete';
    status.textContent = 'Error: ' + e;
  }
}
</script>
{% endblock %}