{% extends "base.html" %}
{% block content %}
<div class="profile">

  <div class="stats-header">
    <div class="profile-name">{{ profile_display_name }}</div>
    <div class="stats-grid">
      <div class="stat-tile">
        <div class="stat-value">{{ stats.total_movies }}</div>
        <div class="stat-label">movies</div>
      </div>
      <div class="stat-tile">
        <div class="stat-value">{{ avg_rating_display }}★</div>
        <div class="stat-label">avg rating</div>
      </div>
      <div class="stat-tile">
        <div class="stat-value">{{ favorite_director_display }}</div>
        <div class="stat-label">fav director</div>
      </div>
      <div class="stat-tile">
        <div class="stat-value">{{ most_active_month_display }}</div>
        <div class="stat-label">most active</div>
      </div>
    </div>
  </div>

  {% if is_own_profile %}
  <section class="follow-section">
    <h3>Follow remote user</h3>
    <form method="POST" action="/users/{{ profile_user_id }}/follow">
      <input type="text" name="handle" placeholder="user@instance.example.com" required>
      <input type="hidden" name="_csrf" value="{{ ctx.csrf_token }}">
      <button type="submit">Follow</button>
    </form>
    {% if let Some(err) = error %}
    <p class="error">{{ err }}</p>
    {% endif %}
  </section>
  <a href="/users/{{ profile_user_id }}/following-list">View following ({{ following_count }})</a>
  <a href="/users/{{ profile_user_id }}/followers-list">View followers ({{ followers_count }})</a>
  {% if !pending_followers.is_empty() %}
  <section class="pending-followers">
    <h3>Pending follow requests ({{ pending_followers.len() }})</h3>
    <ul class="pending-list">
    {% for actor in pending_followers %}
    <li class="pending-item">
      <span class="pending-handle"><strong>{{ actor.handle }}</strong></span>
      <a href="{{ actor.url }}" class="pending-url" target="_blank" rel="noopener noreferrer">{{ actor.url }}</a>
      <form method="POST" action="/users/{{ profile_user_id }}/followers/accept" class="inline-form">
        <input type="hidden" name="actor_url" value="{{ actor.url }}">
        <input type="hidden" name="_csrf" value="{{ ctx.csrf_token }}">
        <button type="submit" class="btn-accept">Accept</button>
      </form>
      <form method="POST" action="/users/{{ profile_user_id }}/followers/reject" class="inline-form">
        <input type="hidden" name="actor_url" value="{{ actor.url }}">
        <input type="hidden" name="_csrf" value="{{ ctx.csrf_token }}">
        <button type="submit" class="btn-reject">Reject</button>
      </form>
    </li>
    {% endfor %}
    </ul>
  </section>
  {% endif %}
  <section class="export-section">
    <h3>Export diary</h3>
    <a href="/diary/export?format=csv">Download CSV</a>
    <a href="/diary/export?format=json">Download JSON</a>
  </section>
  {% endif %}

  <div class="view-tabs">
    <a href="?view=recent" class="view-tab {% if view == "recent" %}active{% endif %}">Recent</a>
    <a href="?view=ratings" class="view-tab {% if view == "ratings" %}active{% endif %}">Top Rated</a>
    <a href="?view=history" class="view-tab {% if view == "history" %}active{% endif %}">History</a>
    <a href="?view=trends" class="view-tab {% if view == "trends" %}active{% endif %}">Trends</a>
  </div>

  {% if view == "recent" || view == "ratings" %}
  <form method="get" class="feed-filters" action="/users/{{ profile_user_id }}">
    <input type="hidden" name="view" value="{{ view }}">
    <input type="hidden" name="limit" value="{{ limit }}">
    {% include "_filter_controls.html" %}
    {% if sort_by != "date" || !search.is_empty() %}
    <a href="/users/{{ profile_user_id }}?view={{ view }}" class="clear-filters">Clear</a>
    {% endif %}
  </form>
  {% endif %}

  {% if view == "history" %}
  {% if let Some(hist) = history %}
  <div class="heatmap-section">
    <div class="heatmap-label">Movies watched this year</div>
    <div class="heatmap">
      {% for cell in heatmap %}
      <div class="heatmap-cell" style="--alpha: {{ cell.alpha }}">
        <div class="heatmap-count">{{ cell.count }}</div>
        <div class="heatmap-month">{{ cell.month_label }}</div>
      </div>
      {% endfor %}
    </div>
  </div>
  {% for month in hist %}
  <div class="history-month">
    <h3 class="month-heading">{{ month.month_label }} <span class="month-count">{{ month.count }}</span></h3>
    <div class="diary">
      {% for entry in month.entries %}
      <article class="entry">
        {% if let Some(poster) = entry.movie().poster_path() %}
        <div class="poster"><img src="/posters/{{ poster.value() }}" alt=""></div>
        {% endif %}
        <div class="entry-body">
          <div class="entry-title"><a href="/movies/{{ entry.movie().id().value() }}" class="movie-title-link">{{ entry.movie().title().value() }}</a> <span class="year">({{ entry.movie().release_year().value() }})</span></div>
          {% if let Some(dir) = entry.movie().director() %}<div class="director">{{ dir }}</div>{% endif %}
          <div class="rating">
            {% for filled in entry.review().stars() %}
              <span class="star {% if filled %}filled{% else %}empty{% endif %}">★</span>
            {% endfor %}
          </div>
          <div class="watched-at">{{ entry.review().watched_at().format("%b %-d") }}</div>
        </div>
      </article>
      {% endfor %}
    </div>
  </div>
  {% else %}
  <p class="empty">No movies logged yet.</p>
  {% endfor %}
  {% endif %}

  {% elif view == "trends" %}
  {% if let Some(t) = trends %}
  <div class="trends-section">
    {% if !monthly_rating_rows.is_empty() %}
    <div class="chart-block">
      <div class="chart-label">Average rating per month</div>
      <div class="bar-chart">
        {% for row in monthly_rating_rows %}
        <div class="bar-col">
          <div class="bar-value">{{ "{:.1}"|format(row.rating.avg_rating) }}</div>
          <div class="bar-fill" style="height: {{ row.bar_height_px }}px"></div>
          <div class="bar-month">{{ row.rating.month_label }}</div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}
    {% if !t.top_directors.is_empty() %}
    <div class="chart-block">
      <div class="chart-label">Most watched directors</div>
      <div class="director-chart">
        {% for d in t.top_directors %}
        <div class="director-row">
          <div class="director-name">{{ d.director }}</div>
          <div class="director-bar">
            {% if t.max_director_count > 0 %}
            <div class="director-bar-fill" style="width: {{ d.count * 100 / t.max_director_count }}%"></div>
            {% else %}
            <div class="director-bar-fill" style="width: 0%"></div>
            {% endif %}
          </div>
          <div class="director-count">{{ d.count }}</div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}
  </div>
  {% endif %}

  {% else %}
  {% if let Some(paged) = entries %}
  <div class="diary">
    {% for entry in paged.items %}
    <article class="entry">
      {% if let Some(poster) = entry.movie().poster_path() %}
      <div class="poster">
        <img src="/posters/{{ poster.value() }}" alt="">
      </div>
      {% endif %}
      <div class="entry-body">
        <div class="entry-title">
          <a href="/movies/{{ entry.movie().id().value() }}" class="movie-title-link">{{ entry.movie().title().value() }}</a>
          <span class="year">({{ entry.movie().release_year().value() }})</span>
        </div>
        {% if let Some(dir) = entry.movie().director() %}
        <div class="director">{{ dir }}</div>
        {% endif %}
        <div class="rating">
          {% for filled in entry.review().stars() %}
            <span class="star {% if filled %}filled{% else %}empty{% endif %}">★</span>
          {% endfor %}
        </div>
        {% if let Some(comment) = entry.review().comment() %}
        <div class="comment">{{ comment.value() }}</div>
        {% endif %}
        <div class="watched-at">{{ entry.review().watched_at().format("%Y-%m-%d") }}</div>
        {% if ctx.is_current_user(entry.review().user_id().value()) %}
        <form method="post" action="/reviews/{{ entry.review().id().value() }}/delete" class="delete-form">
          <input type="hidden" name="redirect_after" value="/users/{{ profile_user_id }}?offset={{ current_offset }}{{ self.filter_qs() }}">
          <input type="hidden" name="_csrf" value="{{ ctx.csrf_token }}">
          <button type="submit">Delete</button>
        </form>
        {% endif %}
      </div>
    </article>
    {% else %}
    <p class="empty">No reviews yet.</p>
    {% endfor %}
  </div>
  <nav class="pagination">
    {% if current_offset >= limit %}
    <a href="/users/{{ profile_user_id }}?offset={{ current_offset - limit }}{{ self.filter_qs() }}" class="page-nav">&larr; Prev</a>
    {% endif %}
    {% for item in page_items %}
    {% if item.is_ellipsis %}
    <span class="page-ellipsis">&hellip;</span>
    {% elif item.is_current %}
    <span class="page-num current">{{ item.number + 1 }}</span>
    {% else %}
    <a href="/users/{{ profile_user_id }}?offset={{ item.number * limit }}{{ self.filter_qs() }}" class="page-num">{{ item.number + 1 }}</a>
    {% endif %}
    {% endfor %}
    {% if has_more %}
    <a href="/users/{{ profile_user_id }}?offset={{ current_offset + limit }}{{ self.filter_qs() }}" class="page-nav">Next &rarr;</a>
    {% endif %}
  </nav>
  {% endif %}
  {% endif %}

</div>
{% endblock %}