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

{% block content %}

<div class="container py-4">

  <!-- ===================== PROFILE HEADER ===================== -->
  <div class="card shadow-sm border-0 mb-4">
    <div class="card-body">

      <div class="d-flex justify-content-between align-items-start">

        <!-- LEFT -->
        <div>
          <h2 class="mb-1">
            {{ profile.display_name|default:profile.user.username }}
          </h2>

          <p class="text-muted mb-2">
            {{ profile.headline|default:"No headline provided" }}
          </p>

          <div class="d-flex gap-3 text-muted small">
            <span id="follower-count-display">👥 {{ profile.follower_count }} Followers</span>
            <span>📸 {{ profile.media_count }} Media</span>
            <span>🔒 {{ profile.visibility|title }}</span>
          </div>
        </div>

        <!-- RIGHT ACTIONS -->
        {% if profile.user != request.user %}
        <div class="text-end d-flex gap-3">

          <!-- FOLLOW (HTMX) -->
          <div id="follow-wrapper-{{ profile.user.username }}">
            {% include "core/partials/follow_button.html" with profile=profile following=is_following %}
          </div>

          {% if can_send_message %}
          <a href="{% url 'core:message_new_with_recipient' profile.user.username %}"
             class="btn btn-primary btn-sm mt-2">
            Message
          </a>
          {% endif %}

          <div class="mt-2">
            <a href="{% url 'core:book_profile' profile.user.username %}"
               class="btn btn-outline-dark btn-sm">
              Book
            </a>
          </div>

        </div>
        {% endif %}

      </div>

    </div>
  </div>

  <!-- ===================== ABOUT ===================== -->
  <div class="row mb-4">
    <div class="col-lg-8">

      <div class="card shadow-sm border-0 mb-4">
        <div class="card-body">

          <h5>About</h5>
          <p class="text-muted">
            {{ profile.bio|default:"No biography available." }}
          </p>

          <hr>

          <div class="row small text-muted">

            <div class="col-md-6">
              <strong>Location:</strong><br>
              {{ profile.city }}, {{ profile.state }}, {{ profile.country }}
            </div>

            <div class="col-md-6">
              <strong>Joined:</strong><br>
              {{ profile.created_at|date:"F j, Y" }}
            </div>

          </div>

        </div>
      </div>

      <!-- ===================== MEDIA GALLERY ===================== -->
      {% if active_media_items %}

      <div class="row g-3">

        {% for media in active_media_items %}
        <div class="col-md-6 col-lg-6">

          <div class="card shadow-sm border-0">
            <!-- MEDIA -->
            <div class="ratio ratio-16x9 bg-dark">
              {% if media.is_video %}
              <video controls class="w-100 h-100">
                <source src="{{ media.media_file.url }}">
              </video>
              {% else %}
              <img src="{{ media.media_file.url }}"
                   class="w-100 h-100 object-fit-cover"
                   alt="{{ media.title }}">
              {% endif %}
            </div>

            <!-- CARD BODY -->
            <div class="card-body">
              <h6 class="mb-1">
                {{ media.title|default:media.get_category_display }}
              </h6>

              <p class="text-muted small">
                {{ media.description|default:"No description provided." }}
              </p>

              <span class="badge bg-secondary mb-2">
                {{ media.get_category_display }}
              </span>

              <!-- ===================== HTMX ACTION BAR ===================== -->
              <div class="d-flex flex-wrap gap-2 align-items-center mt-2">

                <!-- REACTIONS -->
                {% include "core/partials/reactions.html" with media=media %}

                <!-- BOOKMARK -->
                {% include "core/partials/bookmark.html" with media=media %}

              </div>

              <!-- ===================== COMMENTS ===================== -->
              <div class="mt-3">
                <!-- Comment form -->
                <form
                  hx-post="{% url 'core:add_comment' media.id %}"
                  hx-target="#comments-{{ media.id }}"
                  hx-swap="innerHTML"
                  class="d-flex gap-2">
                  {% csrf_token %}
                  <input type="text"
                         name="body"
                         class="form-control form-control-sm"
                         placeholder="Write a comment...">
                  <button class="btn btn-sm btn-dark">
                    Post
                  </button>
                </form>
                <!-- Comments list -->
                <div id="comments-{{ media.id }}" class="mt-2">
                  {% include "core/partials/comments.html" with media=media comments=media.comments.all %}
                </div>
              </div>
            </div>
          </div>

        </div>
        {% endfor %}

      </div>

      {% endif %}

    </div>

    <!-- ===================== SIDEBAR ===================== -->
    <div class="col-lg-4">

      <div class="card shadow-sm border-0">
        <div class="card-body">

          <h6>Profile details</h6>

          <p><strong>Interests:</strong></p>
          <p class="text-muted">
            {{ profile.interests|join:", " }}
          </p>

          <hr>

          <p class="mb-1">
            <strong>Followers:</strong> <span id="follower-count-sidebar">{{ profile.follower_count }}</span>
          </p>

          <p class="mb-1">
            <strong>Media:</strong> {{ profile.media_count }}
          </p>

        </div>
      </div>

    </div>

  </div>

</div>

<script>
document.addEventListener('htmx:afterRequest', function(event) {
  // When follow button is updated, refresh the follower counts
  if (event.detail.xhr.status === 200 && event.detail.xhr.getResponseHeader('HX-Trigger') === 'followerUpdated') {
    const newCount = event.detail.xhr.getResponseHeader('X-Follower-Count');
    if (newCount) {
      const followerCountDisplay = document.getElementById('follower-count-display');
      const followerCountSidebar = document.getElementById('follower-count-sidebar');
      
      if (followerCountDisplay) {
        followerCountDisplay.textContent = `👥 ${newCount} Followers`;
      }
      if (followerCountSidebar) {
        followerCountSidebar.textContent = newCount;
      }
    }
  }
});
</script>

{% endblock %}