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

{% block title %}{{ profile_user.username }} — WildWatch{% endblock %}

{% block content %}
<div class="profile-header">
  <div class="container">
    <div class="row align-items-center g-4">
      <div class="col-auto">
        {% if profile.profile_photo %}
          <img src="{{ profile.profile_photo.url }}" class="profile-avatar-large" alt="{{ profile_user.username }}">
        {% else %}
          <div class="profile-avatar-placeholder-large">{{ profile_user.username|first|upper }}</div>
        {% endif %}
      </div>
      <div class="col">
        <h1 style="font-family:var(--font-display); color:var(--cream); font-size:1.9rem; margin-bottom:4px;">{{ profile_user.get_full_name|default:profile_user.username }}</h1>
        <p style="color:var(--sage); font-size:0.9rem; margin-bottom:8px;">@{{ profile_user.username }}</p>
        {% if profile.bio %}
          <p style="color:rgba(213,232,194,0.8); font-size:0.92rem; max-width:480px; line-height:1.65; margin-bottom:10px;">{{ profile.bio }}</p>
        {% endif %}
        <div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap;">
          <span class="badge-pill">{{ badge.icon }} {{ badge.label }}</span>
          <span style="color:rgba(213,232,194,0.5); font-size:0.8rem;"><i class="fa-solid fa-calendar me-1"></i>Joined {{ profile.joined_date|date:"F Y" }}</span>
        </div>
      </div>
      <div class="col-lg-auto">
        <div style="display:flex; gap:20px; text-align:center; margin-bottom:16px; flex-wrap:wrap;">
          <div>
            <div style="font-family:var(--font-display); font-size:1.6rem; color:var(--cream); line-height:1;">{{ total_uploads }}</div>
            <div style="font-size:0.72rem; color:var(--sage); text-transform:uppercase; letter-spacing:0.5px;">Posts</div>
          </div>
          <div>
            <div style="font-family:var(--font-display); font-size:1.6rem; color:var(--cream); line-height:1;">{{ followers_count }}</div>
            <div style="font-size:0.72rem; color:var(--sage); text-transform:uppercase; letter-spacing:0.5px;">Followers</div>
          </div>
          <div>
            <div style="font-family:var(--font-display); font-size:1.6rem; color:var(--cream); line-height:1;">{{ following_count }}</div>
            <div style="font-size:0.72rem; color:var(--sage); text-transform:uppercase; letter-spacing:0.5px;">Following</div>
          </div>
          <div>
            <div style="font-family:var(--font-display); font-size:1.6rem; color:#f59e0b; line-height:1;">{{ profile.points }}</div>
            <div style="font-size:0.72rem; color:var(--sage); text-transform:uppercase; letter-spacing:0.5px;">Points</div>
          </div>
        </div>
        {% if user == profile_user %}
          <a href="{% url 'edit_profile' %}" class="btn-secondary btn-sm" style="display:block; text-align:center;">
            <i class="fa-solid fa-pen me-1"></i>Edit Profile
          </a>
        {% elif user.is_authenticated %}
          <button class="follow-btn {% if is_following %}following{% else %}not-following{% endif %}"
                  id="followBtn"
                  data-username="{{ profile_user.username }}"
                  style="width:100%;">
            {% if is_following %}✓ Following{% else %}+ Follow{% endif %}
          </button>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<div class="container py-md">
  <div class="row g-4">
    <!-- Gallery -->
    <div class="col-lg-8">
      {% if posts %}
      <div class="flex-between mb-sm">
        <h2 style="font-family:var(--font-display); font-size:1.3rem;">📸 Photos</h2>
        <span style="color:var(--text-muted); font-size:0.85rem;">{{ total_uploads }} post{{ total_uploads|pluralize }}</span>
      </div>
      <div class="profile-gallery">
        {% for post in posts %}
        <div class="gallery-item">
          <a href="{% url 'post_detail' post.pk %}">
            <img src="{{ post.image.url }}" alt="{{ post.caption|truncatechars:40 }}" loading="lazy">
            <div class="gallery-overlay">
              <span><i class="fa-solid fa-heart me-1"></i>{{ post.like_count }}</span>
              <span><i class="fa-solid fa-comment me-1"></i>{{ post.comment_count }}</span>
              <span>⭐{{ post.points_value }}</span>
            </div>
          </a>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <div class="empty-state">
        <div class="empty-icon">📷</div>
        <h3 class="empty-title">{% if user == profile_user %}No posts yet{% else %}{{ profile_user.username }} hasn't posted yet{% endif %}</h3>
        {% if user == profile_user %}
        <a href="{% url 'upload' %}" class="btn-primary mt-sm"><i class="fa-solid fa-plus"></i> Upload First Photo</a>
        {% endif %}
      </div>
      {% endif %}
    </div>

    <!-- Achievements Sidebar -->
    <div class="col-lg-4">
      {% if achievements %}
      <h4 style="font-family:var(--font-display); font-size:1.1rem; margin-bottom:14px;">🏅 Achievements</h4>
      <div style="display:flex; flex-direction:column; gap:8px;">
        {% for ach in achievements %}
        <div style="background:var(--bg-card); border-radius:var(--radius-md); padding:12px 14px; border:1px solid var(--border-light); display:flex; align-items:center; gap:10px;">
          <span style="font-size:1.3rem; flex-shrink:0;">{{ ach.title|slice:":2" }}</span>
          <div>
            <div style="font-size:0.85rem; font-weight:600; color:var(--text-primary);">{{ ach.title|slice:"3:" }}</div>
            <div style="font-size:0.73rem; color:var(--text-muted);">{{ ach.description }}</div>
          </div>
        </div>
        {% endfor %}
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
const followBtn = document.getElementById('followBtn');
if (followBtn) {
  followBtn.addEventListener('click', function() {
    const username = this.dataset.username;
    fetch(`/accounts/follow/${username}/`, {
      method: 'POST',
      headers: { 'X-CSRFToken': document.cookie.split(';').find(c=>c.trim().startsWith('csrftoken=')).split('=')[1] }
    })
    .then(r => r.json())
    .then(data => {
      if (data.following) {
        this.textContent = '✓ Following';
        this.classList.remove('not-following');
        this.classList.add('following');
      } else {
        this.textContent = '+ Follow';
        this.classList.remove('following');
        this.classList.add('not-following');
      }
    });
  });
}
</script>
{% endblock %}