{% extends 'base.html' %}
{% load static %}

{% block title %}Community Feed — WildWatch{% endblock %}

{% block content %}
<div class="feed-header">
  <div class="container">
    <h1 class="feed-title">🌿 Community Feed</h1>
    <p class="feed-subtitle">Photos shared by our conservation community</p>
  </div>
</div>

<div class="filter-bar">
  <div class="container">
    <div class="flex flex-between flex-wrap" style="gap:12px;">
      <div class="flex flex-gap-sm flex-wrap">
        <a href="{% url 'feed' %}" class="filter-pill {% if not current_category %}active{% endif %}">All Posts</a>
        <a href="{% url 'feed' %}?category=wildlife" class="filter-pill {% if current_category == 'wildlife' %}active{% endif %}">🦋 Wildlife</a>
        <a href="{% url 'feed' %}?category=scenic" class="filter-pill {% if current_category == 'scenic' %}active{% endif %}">🌿 Scenic</a>
        <a href="{% url 'feed' %}?category=trash_cleanup" class="filter-pill {% if current_category == 'trash_cleanup' %}active{% endif %}">🗑️ Cleanup</a>
        {% if user.is_authenticated %}
        <a href="{% url 'following_feed' %}" class="filter-pill">👥 Following</a>
        {% endif %}
      </div>
      <div class="search-wrap">
        <form method="get" action="{% url 'feed' %}">
          {% if current_category %}<input type="hidden" name="category" value="{{ current_category }}">{% endif %}
          <i class="fa-solid fa-search search-icon"></i>
          <input type="text" name="q" value="{{ query }}" class="search-input" placeholder="Search posts...">
        </form>
      </div>
    </div>
  </div>
</div>

<div class="container py-md">
  {% if posts %}
  <div class="posts-grid">
    {% for post in posts %}
    <article class="post-card">
      <div class="post-card-image-wrap">
        <a href="{% url 'post_detail' post.pk %}">
          <img src="{{ post.image.url }}" alt="{{ post.caption|truncatechars:60 }}" loading="lazy">
        </a>
        <span class="post-category-badge {{ post.get_category_color }}">{{ post.get_category_icon }} {{ post.get_category_display }}</span>
        <span class="points-pill" style="position:absolute; bottom:10px; right:10px; font-size:0.68rem;">{{ post.get_points_display }}</span>
      </div>

      <div class="post-card-body">
        <div class="post-author-row">
          {% if post.author.profile.profile_photo %}
            <img src="{{ post.author.profile.profile_photo.url }}" class="author-avatar" alt="{{ post.author.username }}">
          {% else %}
            <div class="author-avatar-placeholder">{{ post.author.username|first|upper }}</div>
          {% endif %}
          <div class="author-info">
            <a href="{% url 'profile' post.author.username %}" class="author-name" style="color:var(--text-primary);">{{ post.author.username }}</a>
            <div class="post-time">{{ post.created_at|timesince }} ago</div>
          </div>
          {% if user == post.author %}
          <div class="ms-auto dropdown">
            <button class="btn p-1 border-0 bg-transparent text-muted" data-bs-toggle="dropdown"><i class="fa-solid fa-ellipsis"></i></button>
            <ul class="dropdown-menu dropdown-menu-end shadow border-0 rounded-3">
              <li><a class="dropdown-item text-danger" href="{% url 'delete_post' post.pk %}"><i class="fa-solid fa-trash me-2"></i>Delete</a></li>
            </ul>
          </div>
          {% endif %}
        </div>

        <p class="post-caption">{{ post.caption }}</p>

        <div class="post-actions">
          {% if user.is_authenticated %}
          <button class="like-btn {% if post.pk in liked_post_ids %}liked{% endif %}"
                  data-post-id="{{ post.pk }}" data-authenticated="true">
            <span class="like-icon">{% if post.pk in liked_post_ids %}❤️{% else %}🤍{% endif %}</span>
            <span class="like-count">{{ post.like_count }}</span>
          </button>
          {% else %}
          <a href="{% url 'login' %}" class="like-btn">
            <span class="like-icon">🤍</span><span class="like-count">{{ post.like_count }}</span>
          </a>
          {% endif %}

          <button class="comment-btn" data-post-id="{{ post.pk }}">
            <i class="fa-regular fa-comment"></i>
            <span class="comment-count">{{ post.comment_count }}</span>
          </button>

          {% if user.is_authenticated %}
          <button class="bookmark-btn {% if post.pk in bookmarked_ids %}bookmarked{% endif %}"
                  data-post-id="{{ post.pk }}" title="Bookmark">
            {% if post.pk in bookmarked_ids %}🔖{% else %}🏷️{% endif %}
          </button>
          {% endif %}

          <a href="{% url 'post_detail' post.pk %}" class="view-btn ms-auto"><i class="fa-solid fa-expand"></i></a>
        </div>
      </div>

      <!-- Inline Comment Section -->
      <div class="comment-section" id="comments-{{ post.pk }}">
        <div id="comment-list-{{ post.pk }}">
          {% for comment in post.comments.all|slice:":3" %}
          <div class="comment-item">
            {% if comment.author.profile.profile_photo %}
              <img src="{{ comment.author.profile.profile_photo.url }}" class="author-avatar" style="width:28px;height:28px;flex-shrink:0;" alt="">
            {% else %}
              <div class="author-avatar-placeholder" style="width:28px;height:28px;font-size:0.7rem;flex-shrink:0;">{{ comment.author.username|first|upper }}</div>
            {% endif %}
            <div class="comment-bubble">
              <div class="comment-author">{{ comment.author.username }}</div>
              <div class="comment-text">{{ comment.content }}</div>
              <div class="comment-time">{{ comment.created_at|timesince }} ago</div>
            </div>
          </div>
          {% empty %}
          <p class="no-comments" style="color:var(--text-muted); font-size:0.85rem; text-align:center; padding:8px 0;">No comments yet.</p>
          {% endfor %}
          {% if post.comment_count > 3 %}
          <a href="{% url 'post_detail' post.pk %}" style="font-size:0.8rem; color:var(--moss); display:block; margin-bottom:8px;">View all {{ post.comment_count }} comments →</a>
          {% endif %}
        </div>
        {% if user.is_authenticated %}
        <form class="comment-form comment-form-row" data-post-id="{{ post.pk }}">
          {% csrf_token %}
          <input type="text" class="comment-input" name="content" placeholder="Add a comment..." maxlength="500" autocomplete="off">
          <button type="submit" class="comment-submit-btn"><i class="fa-solid fa-paper-plane"></i></button>
        </form>
        {% else %}
        <p style="font-size:0.82rem; color:var(--text-muted); text-align:center; padding:8px 0;"><a href="{% url 'login' %}">Log in</a> to comment</p>
        {% endif %}
      </div>
    </article>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty-state">
    <div class="empty-icon">🌿</div>
    <h3 class="empty-title">{% if query %}No results for "{{ query }}"{% elif current_category %}No posts in this category yet{% else %}No posts yet{% endif %}</h3>
    {% if user.is_authenticated %}
      <a href="{% url 'upload' %}" class="btn-primary mt-sm"><i class="fa-solid fa-plus"></i> Upload First Photo</a>
    {% else %}
      <a href="{% url 'register' %}" class="btn-primary mt-sm">Join WildWatch</a>
    {% endif %}
  </div>
  {% endif %}
</div>
{% endblock %}