{% extends "base.html" %}

{% block title %}{{ selected_year }} Year in Review · Lumière{% endblock %}

{% block content %}
  <section class="review-hero">
    <div>
      <p class="eyebrow">Year in Review</p>
      <h1>{{ selected_year }}</h1>
      <p class="review-intro">A snapshot of the films you logged that year.</p>
    </div>

    <form class="year-picker" method="get" action="/stats/year-in-review">
      <label for="year">Year</label>
      <select id="year" name="year" onchange="this.form.submit()">
        {% for option in available_years %}
          <option value="{{ option }}" {% if option == selected_year %}selected{% endif %}>{{ option }}</option>
        {% endfor %}
      </select>
    </form>
  </section>

  {% if total_watched == 0 %}
    <section class="empty-state">
      <p class="eyebrow">No entries</p>
      <h2>No diary films for this year</h2>
      <p>Pick another year or add more diary entries.</p>
    </section>
  {% else %}
    <section class="review-metrics">
      <article class="summary-card">
        <span class="summary-label">Films watched</span>
        <strong>{{ total_watched }}</strong>
      </article>
      <article class="summary-card">
        <span class="summary-label">Average stars</span>
        <strong>{{ "%.1f"|format(average_stars) }}</strong>
      </article>
      <article class="summary-card">
        <span class="summary-label">Rewatch rate</span>
        <strong>{{ (rewatch_rate.rate * 100)|round(0) }}%</strong>
      </article>
      <article class="summary-card">
        <span class="summary-label">Top director</span>
        <strong>{% if top_director %}{{ top_director.director }}{% else %}—{% endif %}</strong>
      </article>
      <article class="summary-card">
        <span class="summary-label">Top month</span>
        <strong>{% if top_month %}{{ top_month.month }}{% else %}—{% endif %}</strong>
      </article>
    </section>

    <section class="review-grid">
      <article class="review-panel review-panel-wide">
        <p class="eyebrow">Monthly activity</p>
        <div class="year-bars">
          {% set max_month = films_per_month | map(attribute='count') | max if films_per_month else 1 %}
          {% for item in films_per_month %}
            <div class="year-bar-row">
              <span>{{ item.month[:3] }}</span>
              <div class="year-bar-track">
                <div class="year-bar-fill" style="width: {{ (item.count / max_month * 100) if max_month else 0 }}%"></div>
              </div>
              <strong>{{ item.count }}</strong>
            </div>
          {% endfor %}
        </div>
      </article>

      <article class="review-panel">
        <p class="eyebrow">Stars</p>
        <div class="stats-bars">
          {% set max_stars = star_distribution | map(attribute='count') | max if star_distribution else 1 %}
          {% for item in star_distribution %}
            <div class="stats-bar-row">
              <span>{{ item.stars }} star</span>
              <div class="stats-bar-track"><div class="stats-bar-fill" style="width: {{ (item.count / max_stars * 100) if max_stars else 0 }}%"></div></div>
              <strong>{{ item.count }}</strong>
            </div>
          {% endfor %}
        </div>
      </article>

      <article class="review-panel">
        <p class="eyebrow">Companions</p>
        <ol class="stats-list">
          {% for item in watched_with_breakdown %}
            {% if item.watched_with.lower() != 'solo' %}
            <li><span>{{ item.watched_with }}</span><strong>{{ item.count }}</strong></li>
            {% endif %}
          {% endfor %}
        </ol>
      </article>

      <article class="review-panel">
        <p class="eyebrow">Decades</p>
        <ol class="stats-list">
          {% for item in films_per_decade %}
            <li><span>{{ item.decade }}</span><strong>{{ item.count }}</strong></li>
          {% endfor %}
        </ol>
      </article>

      <article class="review-panel">
        <p class="eyebrow">Genres</p>
        <ol class="stats-list">
          {% for item in films_per_genre %}
            <li><span>{{ item.genre }}</span><strong>{{ item.count }}</strong></li>
          {% endfor %}
        </ol>
      </article>
    </section>

    <section class="review-panel" style="margin-top: 24px;">
      <p class="eyebrow">Highlights</p>
      <div class="highlight-grid">
        {% if highlight_films.highest_rated %}
          {% for film in highlight_films.highest_rated %}
            <article class="highlight-card">
              <a class="poster-frame" href="/films/{{ film.id }}">
                {% if film.poster_url %}
                  <img src="{{ film.poster_url }}" alt="{{ film.title }} poster" loading="lazy">
                {% else %}
                  <span>{{ film.title[:1] }}</span>
                {% endif %}
              </a>
              <div>
                <h2><a href="/films/{{ film.id }}">{{ film.title }}</a></h2>
                <p class="muted">{{ film.director or "Unknown director" }}</p>
                <p class="highlight-meta">
                  {% if film.date_watched %}{{ film.date_watched }}{% endif %}
                  {% if film.stars %} · {% for _ in range(film.stars) %}✦{% endfor %}{% endif %}
                </p>
                {% if film.notes_excerpt %}
                  <p class="notes-preview">{{ film.notes_excerpt }}</p>
                {% endif %}
              </div>
            </article>
          {% endfor %}
        {% endif %}

        {% if highlight_films.first_watch %}
          <article class="highlight-card">
            <a class="poster-frame" href="/films/{{ highlight_films.first_watch.id }}">
              {% if highlight_films.first_watch.poster_url %}
                <img src="{{ highlight_films.first_watch.poster_url }}" alt="{{ highlight_films.first_watch.title }} poster" loading="lazy">
              {% else %}
                <span>{{ highlight_films.first_watch.title[:1] }}</span>
              {% endif %}
            </a>
            <div>
              <p class="summary-label">First watch</p>
              <h2><a href="/films/{{ highlight_films.first_watch.id }}">{{ highlight_films.first_watch.title }}</a></h2>
              <p class="muted">{{ highlight_films.first_watch.date_watched }}</p>
            </div>
          </article>
        {% endif %}

        {% if highlight_films.last_watch %}
          <article class="highlight-card">
            <a class="poster-frame" href="/films/{{ highlight_films.last_watch.id }}">
              {% if highlight_films.last_watch.poster_url %}
                <img src="{{ highlight_films.last_watch.poster_url }}" alt="{{ highlight_films.last_watch.title }} poster" loading="lazy">
              {% else %}
                <span>{{ highlight_films.last_watch.title[:1] }}</span>
              {% endif %}
            </a>
            <div>
              <p class="summary-label">Last watch</p>
              <h2><a href="/films/{{ highlight_films.last_watch.id }}">{{ highlight_films.last_watch.title }}</a></h2>
              <p class="muted">{{ highlight_films.last_watch.date_watched }}</p>
            </div>
          </article>
        {% endif %}

        {% if highlight_films.most_rewatched %}
          <article class="highlight-card">
            <a class="poster-frame" href="/films/{{ highlight_films.most_rewatched.id }}">
              {% if highlight_films.most_rewatched.poster_url %}
                <img src="{{ highlight_films.most_rewatched.poster_url }}" alt="{{ highlight_films.most_rewatched.title }} poster" loading="lazy">
              {% else %}
                <span>{{ highlight_films.most_rewatched.title[:1] }}</span>
              {% endif %}
            </a>
            <div>
              <p class="summary-label">Most rewatched</p>
              <h2><a href="/films/{{ highlight_films.most_rewatched.id }}">{{ highlight_films.most_rewatched.title }}</a></h2>
              <p class="muted">{{ highlight_films.most_rewatched.rewatch_count }} rewatches</p>
            </div>
          </article>
        {% endif %}
      </div>
    </section>
  {% endif %}
{% endblock %}