{% extends "base.html" %}

{% block title %}Blog Statistics - {{ site_title }}{% endblock %}

{% block meta_tags %}
<meta property="og:title" content="Blog Statistics - {{ site_title }}">
{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="{{ stats_css_url }}">
{% endblock %}

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

    {% set total_posts = stats.posts_per_hour | sum %}
    <p class="stats-summary">Statistics for {{ total_posts }} post{{ '' if total_posts == 1 else 's' }}.</p>

    {# ------------------------------------------------------------------ #}
    {# Helper macro: render a histogram as a CSS bar chart               #}
    {# ------------------------------------------------------------------ #}
    {% macro histogram(title, labels, counts, label_step=1) %}
    {% set max_count = counts | max if counts | max > 0 else 1 %}
    <section class="stats-section stats-histogram">
        <h2>{{ title }}</h2>
        <figure class="stats-chart" aria-label="{{ title }}">
            <div class="stats-bars">
                {% for i in range(labels | length) %}
                {% set pct = (counts[i] / max_count * 100) | round(1) %}
                <div class="stats-bar-group">
                    <div class="stats-bar-value-area">
                        <span class="stats-bar-value">{{ counts[i] }}</span>
                    </div>
                    <div class="stats-bar-wrap">
                        <div class="stats-bar" style="height: {{ pct }}%" title="{{ labels[i] }}: {{ counts[i] }} post{{ '' if counts[i] == 1 else 's' }}"></div>
                    </div>
                    {% if loop.index0 % label_step == 0 or loop.last %}
                    <div class="stats-bar-label">{{ labels[i] }}</div>
                    {% else %}
                    <div class="stats-bar-label stats-bar-label-hidden" aria-hidden="true">{{ labels[i] }}</div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </figure>
    </section>
    {% endmacro %}

    {# Posts per hour of day #}
    {% set hour_labels = [] %}
    {% for h in range(24) %}{% set _ = hour_labels.append("%02d" % h) %}{% endfor %}
    {{ histogram("Posts by Hour of Day", hour_labels, stats.posts_per_hour, label_step=2) }}

    {# Posts per day of week #}
    {{ histogram("Posts by Day of Week", ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], stats.posts_per_weekday) }}

    {# Posts per month of year #}
    {{ histogram("Posts by Month of Year", ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], stats.posts_per_month) }}

    {# ------------------------------------------------------------------ #}
    {# Helper macro: render a horizontal bar chart (posts per year)       #}
    {# ------------------------------------------------------------------ #}
    {% macro hbarchart(title, rows) %}
    {% if rows %}
    {% set max_count = rows | map(attribute=1) | max %}
    {% set axis_max = ((max_count + 9) // 10 * 10) if max_count > 0 else 10 %}
    <section class="stats-section stats-hbarchart">
        <h2>{{ title }}</h2>
        <figure class="stats-hchart" aria-label="{{ title }}">
            <div class="stats-hbars">
                {% for year, count in rows %}
                {% set pct = (count / axis_max * 100) | round(1) %}
                {% set year_url = '/' ~ year ~ '/' ~ pagination_page1_suffix %}
                <div class="stats-hbar-row" title="{{ year }}: {{ count }} post{{ '' if count == 1 else 's' }}">
                    <div class="stats-hbar-label">{% if count > 0 %}<a href="{{ year_url }}">{{ year }}</a>{% else %}{{ year }}{% endif %}</div>
                    <div class="stats-hbar-track">
                        {% if count > 0 %}<div class="stats-hbar-fill" style="width: {{ pct }}%"></div>{% endif %}
                    </div>
                    <div class="stats-hbar-value">{{ count }}</div>
                </div>
                {% endfor %}
            </div>
        </figure>
    </section>
    {% endif %}
    {% endmacro %}

    {# Posts per year #}
    {{ hbarchart("Posts per Year", stats.posts_per_year) }}

    {# ------------------------------------------------------------------ #}
    {# Streak chart: responsive month variants (3 / 6 / 9 months)        #}
    {# ------------------------------------------------------------------ #}
    {% if stats.streak_variants %}
    <section class="stats-section stats-streak-section">
        {% for variant in stats.streak_variants %}
        {% set count = variant.posts_count %}
        <div class="streak-variant streak-variant-{{ variant.months }}mo">
            <h2>{{ count }} post{{ '' if count == 1 else 's' }} between {{ variant.first_date }} and {{ variant.last_date }}</h2>
            <figure class="stats-chart stats-streak-chart" aria-label="Posts between {{ variant.first_date }} and {{ variant.last_date }}">
                <div class="streak-outer">
                    {# Row 1, Col 1: spacer (aligns month labels with DOW labels column) #}
                    <div class="streak-dow-spacer" aria-hidden="true"></div>
                    {# Row 1, Col 2: month labels positioned by column #}
                    <div class="streak-month-labels-grid">
                        {% for label, col_start in variant.month_label_positions %}
                        <div class="streak-month-label" style="grid-column-start: {{ col_start }}">{{ label }}</div>
                        {% endfor %}
                    </div>
                    {# Row 2, Col 1: day-of-week labels #}
                    <div class="streak-dow-labels" aria-hidden="true">
                        <div class="streak-dow-label">Sun</div>
                        <div class="streak-dow-label">Mon</div>
                        <div class="streak-dow-label">Tue</div>
                        <div class="streak-dow-label">Wed</div>
                        <div class="streak-dow-label">Thu</div>
                        <div class="streak-dow-label">Fri</div>
                        <div class="streak-dow-label">Sat</div>
                    </div>
                    {# Row 2, Col 2: streak cells #}
                    <div class="streak-grid">
                        {% for week in variant.weeks %}
                        {% for cell in week %}
                        {% if cell is none %}
                        <div class="streak-cell streak-cell-out-of-range" aria-hidden="true"></div>
                        {% else %}
                        {% if cell.count == 0 %}
                        {% set level = 0 %}
                        {% elif cell.count == 1 %}
                        {% set level = 1 %}
                        {% elif cell.count <= 3 %}
                        {% set level = 2 %}
                        {% elif cell.count <= 6 %}
                        {% set level = 3 %}
                        {% else %}
                        {% set level = 4 %}
                        {% endif %}
                        {% set day_label = cell.date.strftime('%Y-%m-%d') ~ ': ' ~ cell.count ~ ' post' ~ ('' if cell.count == 1 else 's') %}
                        {% if cell.count > 0 %}
                        {% set day_url = '/' ~ cell.date.year ~ '/' ~ '%02d'|format(cell.date.month) ~ '/' ~ '%02d'|format(cell.date.day) ~ '/' ~ pagination_page1_suffix %}
                        <a href="{{ day_url }}" class="streak-cell streak-cell-level-{{ level }}" title="{{ day_label }}" aria-label="{{ day_label }}"></a>
                        {% else %}
                        <div class="streak-cell streak-cell-level-0" title="{{ day_label }}" aria-label="{{ day_label }}"></div>
                        {% endif %}
                        {% endif %}
                        {% endfor %}
                        {% endfor %}
                    </div>
                </div>
            </figure>
        </div>
        {% endfor %}
    </section>
    {% endif %}

    {# ------------------------------------------------------------------ #}
    {# Word count                                                         #}
    {# ------------------------------------------------------------------ #}
    <section class="stats-section">
        <h2>Word Count</h2>
        <dl class="stats-details">
            <div class="stats-detail-row">
                <dt>Average</dt>
                <dd>{{ "%.0f" % stats.avg_word_count }} word{{ '' if ("%.0f" % stats.avg_word_count) | int == 1 else 's' }}</dd>
            </div>
            <div class="stats-detail-row">
                <dt>Shortest</dt>
                <dd>
                    {% if stats.min_word_count_post %}
                    <a href="{{ stats.min_word_count_post.url }}">{{ stats.min_word_count_post.title }}</a>
                    — {{ stats.min_word_count }} word{{ '' if stats.min_word_count == 1 else 's' }}
                    {% else %}
                    {{ stats.min_word_count }} word{{ '' if stats.min_word_count == 1 else 's' }}
                    {% endif %}
                </dd>
            </div>
            <div class="stats-detail-row">
                <dt>Longest</dt>
                <dd>
                    {% if stats.max_word_count_post %}
                    <a href="{{ stats.max_word_count_post.url }}">{{ stats.max_word_count_post.title }}</a>
                    — {{ stats.max_word_count }} word{{ '' if stats.max_word_count == 1 else 's' }}
                    {% else %}
                    {{ stats.max_word_count }} word{{ '' if stats.max_word_count == 1 else 's' }}
                    {% endif %}
                </dd>
            </div>
        </dl>
    </section>

    {# ------------------------------------------------------------------ #}
    {# Reading time                                                        #}
    {# ------------------------------------------------------------------ #}
    {% if with_read_time %}
    <section class="stats-section">
        <h2>Reading Time</h2>
        <dl class="stats-details">
            <div class="stats-detail-row">
                <dt>Average</dt>
                <dd>{{ "%.1f" % stats.avg_reading_time }} min</dd>
            </div>
            <div class="stats-detail-row">
                <dt>Quickest</dt>
                <dd>
                    {% if stats.min_reading_time_post %}
                    <a href="{{ stats.min_reading_time_post.url }}">{{ stats.min_reading_time_post.title }}</a>
                    — {{ stats.min_reading_time }} min
                    {% else %}
                    {{ stats.min_reading_time }} min
                    {% endif %}
                </dd>
            </div>
            <div class="stats-detail-row">
                <dt>Longest</dt>
                <dd>
                    {% if stats.max_reading_time_post %}
                    <a href="{{ stats.max_reading_time_post.url }}">{{ stats.max_reading_time_post.title }}</a>
                    — {{ stats.max_reading_time }} min
                    {% else %}
                    {{ stats.max_reading_time }} min
                    {% endif %}
                </dd>
            </div>
        </dl>
    </section>
    {% endif %}

    {# ------------------------------------------------------------------ #}
    {# Blog time span                                                      #}
    {# ------------------------------------------------------------------ #}
    {% if stats.earliest_post_date and stats.latest_post_date %}
    <section class="stats-section">
        <h2>Blog Lifespan</h2>
        <dl class="stats-details">
            <div class="stats-detail-row">
                <dt>First post</dt>
                <dd>
                    {% if stats.earliest_post %}
                    <a href="{{ stats.earliest_post.url }}">{{ stats.earliest_post_date.strftime("%Y-%m-%d") }}</a>
                    {% else %}
                    {{ stats.earliest_post_date.strftime("%Y-%m-%d") }}
                    {% endif %}
                </dd>
            </div>
            <div class="stats-detail-row">
                <dt>Latest post</dt>
                <dd>
                    {% if stats.latest_post %}
                    <a href="{{ stats.latest_post.url }}">{{ stats.latest_post_date.strftime("%Y-%m-%d") }}</a>
                    {% else %}
                    {{ stats.latest_post_date.strftime("%Y-%m-%d") }}
                    {% endif %}
                </dd>
            </div>
            <div class="stats-detail-row">
                <dt>Span</dt>
                <dd>
                    {% set span = stats.blog_span_days %}
                    {% if span is none %}
                    —
                    {% elif span >= 365 %}
                    {{ "%.1f" % (span / 365.25) }} year{{ '' if (span / 365.25) | round(1) == 1.0 else 's' }}
                    {% else %}
                    {{ span }} day{{ '' if span == 1 else 's' }}
                    {% endif %}
                </dd>
            </div>
        </dl>
    </section>
    {% endif %}

    {# ------------------------------------------------------------------ #}
    {# Longest Posting Streaks                                            #}
    {# ------------------------------------------------------------------ #}
    {% if stats.longest_streaks %}
    <section class="stats-section">
        <h2>Longest Streaks</h2>
        <div class="stats-table-wrap">
            <table class="stats-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Days</th>
                        <th>Start Date</th>
                        <th>End Date</th>
                        <th>Posts</th>
                    </tr>
                </thead>
                <tbody>
                    {% for streak in stats.longest_streaks %}
                    {% set start_url = '/' ~ streak.start_date.year ~ '/' ~ '%02d'|format(streak.start_date.month) ~ '/' ~ '%02d'|format(streak.start_date.day) ~ '/' ~ pagination_page1_suffix %}
                    {% set end_url = '/' ~ streak.end_date.year ~ '/' ~ '%02d'|format(streak.end_date.month) ~ '/' ~ '%02d'|format(streak.end_date.day) ~ '/' ~ pagination_page1_suffix %}
                    <tr>
                        <td class="stats-table-rank">{{ loop.index }}</td>
                        <td class="stats-table-count">{{ streak.days }}</td>
                        <td><a href="{{ start_url }}">{{ streak.start_date.strftime('%Y-%m-%d') }}</a></td>
                        <td><a href="{{ end_url }}">{{ streak.end_date.strftime('%Y-%m-%d') }}</a></td>
                        <td class="stats-table-count">{{ streak.post_count }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
    {% endif %}

    {# ------------------------------------------------------------------ #}
    {# Tags, categories and links overview                                 #}
    {# ------------------------------------------------------------------ #}
    <section class="stats-section">
        <h2>Content Overview</h2>
        <dl class="stats-details">
            <div class="stats-detail-row">
                <dt>Tags</dt>
                <dd><a href="{{ tags_url }}">{{ stats.tag_count }}</a></dd>
            </div>
            <div class="stats-detail-row">
                <dt>Categories</dt>
                <dd><a href="{{ categories_url }}">{{ stats.category_count }}</a></dd>
            </div>
            <div class="stats-detail-row">
                <dt>Unique external links</dt>
                <dd>{{ stats.unique_external_link_count }}</dd>
            </div>
        </dl>
    </section>

    {# ------------------------------------------------------------------ #}
    {# Top 20 linked domains                                               #}
    {# ------------------------------------------------------------------ #}
    {% if stats.top_domains %}
    <section class="stats-section">
        <h2>Top Linked Domains</h2>
        <div class="stats-table-wrap">
            <table class="stats-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Domain</th>
                        <th>Links</th>
                    </tr>
                </thead>
                <tbody>
                    {% for domain, count in stats.top_domains %}
                    <tr>
                        <td class="stats-table-rank">{{ loop.index }}</td>
                        <td class="stats-table-domain">
                            <a href="https://{{ domain }}" target="_blank" rel="noopener noreferrer">{{ domain }}</a>
                        </td>
                        <td class="stats-table-count">{{ count }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
    {% endif %}

</div>
{% endblock %}