{% extends "base.html" %}
{% block body_class %}themed-bg{% endblock %}

{% block content %}
<div class="container">
  <h1 class="page-title">Statistics</h1>

  <!-- Top counters -->
  <div class="card" style="padding:16px; margin-bottom:16px;">
    <div class="meta-grid">
      <div>
        <div class="meta-label">Total Illustrations</div>
        <div class="subject-title" style="margin:0">{{ total }}</div>
      </div>
      <div>
        <div class="meta-label">Added in last 30 days</div>
        <div class="subject-title" style="margin:0">{{ last30 }}</div>
      </div>
      <div>
        <div class="meta-label">Added in last 365 days</div>
        <div class="subject-title" style="margin:0">{{ last365 }}</div>
      </div>
    </div>
  </div>

  <!-- Sparkline (simple bars) -->
  <div class="card" style="padding:16px; margin-bottom:16px;">
    <div class="meta-label">Adds by Month (last 12)</div>
    <div style="display:flex; align-items:flex-end; gap:6px; height:140px; margin-top:8px;">
      {% for label, value, height in heights %}
        <div title="{{ label }} = {{ value }}"
             style="width:22px; height:{{ height }}px; background:#cfe3f6; border:1px solid #bcd4ee; border-radius:6px;"></div>
      {% endfor %}
    </div>
    <div class="small muted" style="margin-top:6px;">
      {% for label, value in series %}{% if not forloop.last %}{{ label }} · {% else %}{{ label }}{% endif %}{% endfor %}
    </div>
  </div>

  <!-- Scripture usage -->
  <div class="card" style="padding:16px; margin-bottom:16px;">
    <h3 style="margin:0 0 10px;">Scripture Usage</h3>
    <div class="chip" style="margin-bottom:10px;"><strong>Avg. refs per scripture-bearing entry:</strong>&nbsp;{{ avg_refs_per_entry }}</div>

    <div style="display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;">
      <div>
        <h4 style="margin:0 0 6px;">Top 10 Books</h4>
        <ol class="small" style="margin:0; padding-left:18px;">
          {% for book, cnt in top_books %}
            <li>
              <a
                class="chip chip-link"
                href="{% url 'search' %}?q={{ book|urlencode }}&scripture_raw=on"
                title="Search Scripture field for book: {{ book }}"
              >
                {{ book }}
              </a> — {{ cnt }}
            </li>
          {% empty %}
            <li class="muted">No data yet.</li>
          {% endfor %}
        </ol>
      </div>
      <div>
        <h4 style="margin:0 0 6px;">Top 10 Scriptures</h4>
        <ol class="small" style="margin:0; padding-left:18px;">
          {% for ref, cnt in top_refs %}
            <li>
              <a
                class="chip chip-link"
                href="{% url 'search' %}?q={{ ref|urlencode }}&scripture_raw=on"
                title="Search Scripture field for {{ ref }}"
              >
                {{ ref }}
              </a> — {{ cnt }}
            </li>
          {% empty %}
            <li class="muted">No data yet.</li>
          {% endfor %}
        </ol>
      </div>
    </div>
  </div>

  <!-- Top subjects -->
  <div class="card" style="padding:16px; margin-bottom:16px;">
    <div class="meta-label">Top Subjects</div>
    <div style="display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;">
      {% for s in top_subjects %}
        <a
          class="chip chip-muted"
          href="{% url 'search' %}?q={{ s.name|urlencode }}&subject=on"
          title="Search Subject field for {{ s.name }}"
        >
          {{ s.name }} ({{ s.count }})
        </a>
      {% empty %}
        <span class="muted">No subjects.</span>
      {% endfor %}
    </div>
  </div>

  <!-- Tools (collapsed like Search Help) -->
  <div class="card" style="padding:16px; margin-bottom:24px;">
    <button id="tools-toggle" class="btn" type="button">⚙️ Tools</button>
    <div id="tools-panel" style="display:none; margin-top:12px;">
      <div class="small muted" style="margin:0 0 8px;">
        Batch maintenance utilities. Preview first; then apply changes sitewide.
      </div>

      <!-- Scripture normalizer -->
      <div class="chip" style="margin:8px 0;">
        <strong>Scripture Normalizer</strong> — Standardizes Bible references (book abbreviations, separators, repeats book name for multiple sets).
      </div>
      <div style="display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px;">
        <form method="get" action="{% url 'normalize_scripture' %}">
          <input type="hidden" name="limit" value="">
          <button class="btn btn-secondary">Preview (dry‑run)</button>
        </form>

        {% if user.is_authenticated and user.is_staff %}
        <form method="post" action="{% url 'normalize_scripture' %}">
          {% csrf_token %}
          <button class="btn btn-danger" onclick="return confirm('Apply normalization to ALL entries? This will modify scripture_raw fields.');">
            Apply to all
          </button>
        </form>
        {% endif %}
      </div>

      <!-- Source normalizer -->
      <div class="chip" style="margin:8px 0;">
        <strong>Source Normalizer</strong> — Converts Watchtower/Awake!/Yearbook/KM references into WOL short-codes (e.g., <code>w13 3/15 p.14</code>). Non‑JW sources are left unchanged.
      </div>
      <div style="display:flex; gap:10px; flex-wrap:wrap;">
        <form method="get" action="{% url 'normalize_source' %}">
          <input type="number" min="0" name="limit" placeholder="Preview limit (optional)"
                 style="border:1px solid var(--border); border-radius:8px; padding:6px 8px;">
          <button class="btn btn-secondary">Preview (dry‑run)</button>
        </form>

        {% if user.is_authenticated and user.is_staff %}
        <form method="post" action="{% url 'normalize_source' %}">
          {% csrf_token %}
          <button class="btn btn-danger" onclick="return confirm('Apply normalization to ALL entries? This will modify source fields. Make a backup first.');">
            Apply to all
          </button>
        </form>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<!-- Tiny inline JS to toggle the Tools panel -->
<script>
  (function () {
    const btn = document.getElementById('tools-toggle');
    const panel = document.getElementById('tools-panel');
    if (!btn || !panel) return;
    btn.addEventListener('click', function () {
      panel.style.display = (panel.style.display === 'none' || panel.style.display === '') ? 'block' : 'none';
    });
  })();
</script>
{% endblock %}