{% extends "base.html" %}

{% block content %}
  <section class="tag-metric-grid" aria-label="Tag summary">
    <article>
      <span>Total tagged figures</span>
      <strong>{{ state.tag_analytics.total_tagged_figures }}</strong>
      <small>Across {{ state.aggregate.project_count }} projects</small>
    </article>
    <article>
      <span>Distinct tags used</span>
      <strong>{{ state.tag_analytics.distinct_used_tags }}</strong>
      <small>{{ state.tag_analytics.tag_sets | length }} catalog tag sets</small>
    </article>
    <article>
      <span>Tagged incomplete</span>
      <strong>{{ tagged_open_actions }}</strong>
      <small>{{ tagged_overdue_actions }} overdue items</small>
    </article>
    <article>
      <span>Completed tagged</span>
      <strong>{{ tagged_completed_actions }}</strong>
      <small>Figures at 100% progress</small>
    </article>
  </section>

  <div class="tags-layout">
    <section class="panel tag-ranking" aria-labelledby="ranking-title">
      <div class="panel-heading">
        <div>
          <p class="section-kicker">Actual figure usage</p>
          <h2 id="ranking-title">Most-used tags</h2>
        </div>
        <span class="panel-count">Top {{ [tag_statistics | length, 12] | min }}</span>
      </div>
      {% if tag_statistics %}
        <div class="tag-ranking-list">
          {% for item in tag_statistics[:12] %}
            <div class="tag-ranking-row">
              <div class="tag-ranking-label">
                <span>
                  <small>{{ item.set_name }}</small>
                  <strong>{{ item.label }}</strong>
                </span>
                <span class="tag-counts">
                  <b>{{ item.statistic.total_figures }}</b>
                  <small>
                    {{ item.statistic.open_actions }} incomplete ·
                    {{ item.statistic.overdue_actions }} overdue
                  </small>
                </span>
              </div>
              <div
                class="tag-ranking-track"
                role="img"
                aria-label="{{ item.statistic.tag }}: {{ item.statistic.total_figures }} figures"
              >
                <span style="--tag-width: {{ item.percent }}%"></span>
              </div>
            </div>
          {% endfor %}
        </div>
      {% else %}
        <div class="empty-state compact-empty">
          <span class="empty-mark" aria-hidden="true">◇</span>
          <div>
            <h3>No used tags in this scope</h3>
            <p>The catalog may exist, but no figures currently use its tags.</p>
          </div>
        </div>
      {% endif %}
    </section>

    <section class="panel tag-distribution" aria-labelledby="distribution-title">
      <div class="panel-heading">
        <div>
          <p class="section-kicker">Assignment mix</p>
          <h2 id="distribution-title">Tag-set distribution</h2>
        </div>
      </div>
      {% if tag_set_distribution %}
        <div class="distribution-list">
          {% for item in tag_set_distribution %}
            <div>
              <span class="distribution-name">{{ item.name }}</span>
              <span class="distribution-bar">
                <i style="--distribution-width: {{ item.percent }}%"></i>
              </span>
              <strong>{{ item.count }}</strong>
            </div>
          {% endfor %}
        </div>
      {% else %}
        <p class="muted-copy">No tag assignments are available.</p>
      {% endif %}

      <div class="recent-tags">
        <h3>Recently active</h3>
        {% if recent_tags %}
          <ol>
            {% for item in recent_tags[:5] %}
              <li>
                <span>{{ item.tag }}</span>
                <time datetime="{{ item.last_modified }}">
                  {{ item.last_modified | replace("T", " · ") }}
                </time>
              </li>
            {% endfor %}
          </ol>
        {% else %}
          <p>Modification dates are not available.</p>
        {% endif %}
      </div>
    </section>
  </div>

  <section class="panel matrix-panel" aria-labelledby="matrix-title">
    <div class="panel-heading matrix-heading">
      <div>
        <p class="section-kicker">Cross-project coverage</p>
        <h2 id="matrix-title">{{ state.board.tag_set or "Selected tag set" }} matrix</h2>
      </div>
      <form action="/selection/tag-set" method="post" class="matrix-tag-set-form">
        <input type="hidden" name="return_to" value="/tags">
        <label for="matrix-tag-set">Tag set</label>
        <select id="matrix-tag-set" name="tag_set" data-auto-submit>
          {% for tag_set in state.board.available_tag_sets %}
            <option
              value="{{ tag_set }}"
              {% if tag_set == state.board.tag_set %}selected{% endif %}
            >
              {{ tag_set }}
            </option>
          {% endfor %}
        </select>
      </form>
    </div>

    {% if matrix_tags %}
      <div class="matrix-scroll">
        <table class="tag-matrix">
          <thead>
            <tr>
              <th scope="col">Project</th>
              {% for tag in matrix_tags %}
                <th scope="col">{{ tag.split("/", 1)[-1] }}</th>
              {% endfor %}
              <th scope="col">Total</th>
            </tr>
          </thead>
          <tbody>
            {% for row in matrix_rows %}
              <tr>
                <th scope="row">
                  <span class="matrix-project accent-{{ row.accent }}">
                    <i></i>{{ row.project.project_title }}
                  </span>
                </th>
                {% for value in row.cells %}
                  <td>
                    <span class="matrix-value level-{{ [value, 3] | min }}">
                      {{ value }}
                    </span>
                  </td>
                {% endfor %}
                <td><strong>{{ row.total }}</strong></td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <p class="matrix-note">
        Counts represent tagged figures, not catalog availability. Zero-value
        projects remain visible for honest coverage.
      </p>
    {% else %}
      <div class="empty-state compact-empty">
        <span class="empty-mark" aria-hidden="true">▦</span>
        <div>
          <h3>No matrix columns available</h3>
          <p>Select a populated tag set to compare projects.</p>
        </div>
      </div>
    {% endif %}
  </section>
{% endblock %}