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

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

  <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>

<!-- 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-link"
        href="{% url 'search' %}?q={{ s.name|urlencode }}&subject=on"
        title="Search subject: {{ s.name }}"
      >
        {{ s.name }} ({{ s.count }})
      </a>
    {% empty %}
      <span class="muted">No subjects.</span>
    {% 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><strong>{{ book }}</strong> — {{ 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><strong>{{ ref }}</strong> — {{ cnt }}</li>
          {% empty %}
            <li class="muted">No data yet.</li>
          {% endfor %}
        </ol>
      </div>
    </div>
  </div>

  <!-- Tools: collapsible panel -->
  <div class="card" style="padding:16px; margin-bottom:24px;">
    <div style="display:flex; align-items:center; justify-content:space-between; gap:10px;">
      <div class="meta-label">Maintenance Tools</div>
      <button
        class="btn btn-secondary"
        type="button"
        id="tools-toggle"
        aria-expanded="false"
        aria-controls="tools-panel"
      >
        ▾ Show tools
      </button>
    </div>

    <div id="tools-panel" class="tools-panel" hidden>
      <!-- Scripture Normalizer -->
      <div class="tool-block">
        <h4>Scripture Normalizer</h4>
        <p class="small muted">
          Standardizes Bible references (book abbreviations, separators, and repeats book names as needed).
          Use preview first; Apply will modify all <code>scripture_raw</code> fields.
        </p>
        <div class="tool-actions">
          <form method="get" action="{% url 'normalize_scripture' %}" class="inline">
            <input type="number" min="0" name="limit" placeholder="Preview limit (optional)"
                   class="tool-input">
            <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' %}" class="inline">
            {% csrf_token %}
            <button class="btn btn-danger"
                    onclick="return confirm('Apply Scripture Normalizer to ALL entries? This will modify scripture_raw fields.');">
              Apply to all
            </button>
          </form>
          {% endif %}
        </div>
      </div>

      <hr class="tool-sep">

      <!-- Source Normalizer -->
      <div class="tool-block">
        <h4>Source Normalizer</h4>
        <p class="small muted">
          Converts Watchtower/Awake!/Yearbook/KM references (e.g., “March 15, 2013 WT page 14”) into WOL short‑codes
          like <code>w13 3/15 p.14</code>. Non‑JW sources are left unchanged. Use preview first; Apply will modify all
          <code>source</code> fields.
        </p>
        <div class="tool-actions">
          <form method="get" action="{% url 'normalize_source' %}" class="inline">
            <input type="number" min="0" name="limit" placeholder="Preview limit (optional)"
                   class="tool-input">
            <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' %}" class="inline">
            {% csrf_token %}
            <button class="btn btn-danger"
                    onclick="return confirm('Apply Source Normalizer to ALL entries? This cannot be undone. Make a backup first.');">
              Apply to all
            </button>
          </form>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Tiny, scoped styles + JS for the collapsible panel -->
<style>
  .tools-panel{
    margin-top:12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    padding:14px;
  }
  .tool-block h4{
    margin:0 0 6px;
    font-size:16px;
    color:#0f172a;
  }
  .tool-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:8px;
  }
  .tool-input{
    border:1px solid var(--border);
    border-radius:8px;
    padding:6px 8px;
    font-size:14px;
    margin-right:6px;
  }
  .tool-sep{
    border:none;
    border-top:1px solid var(--border);
    margin:14px 0;
  }
</style>
<script>
  (function(){
    var btn = document.getElementById('tools-toggle');
    var panel = document.getElementById('tools-panel');
    if(!btn || !panel) return;
    btn.addEventListener('click', function(){
      var open = panel.hasAttribute('hidden') ? false : true;
      if(open){
        panel.setAttribute('hidden', '');
        btn.textContent = '▾ Show tools';
        btn.setAttribute('aria-expanded', 'false');
      }else{
        panel.removeAttribute('hidden');
        btn.textContent = '▴ Hide tools';
        btn.setAttribute('aria-expanded', 'true');
      }
    });
  })();
</script>
{% endblock %}