{% extends 'base.html' %}

{% block title %}Leaderboard — WildWatch{% endblock %}

{% block content %}
<div style="background:linear-gradient(135deg,#1a2e1a,#3d2b1f); padding:48px 0 32px;">
  <div class="container text-center">
    <div style="font-size:2.5rem; margin-bottom:12px;">🏆</div>
    <h1 style="font-family:var(--font-display); color:var(--cream); font-size:2rem; margin-bottom:8px;">Community Leaderboard</h1>
    <p style="color:var(--sage); font-size:0.95rem;">Top conservation contributors ranked by points</p>
  </div>
</div>

<div class="container py-md" style="max-width:700px;">

  <!-- Points Guide -->
  <div style="background:var(--bg-card); border-radius:var(--radius-lg); padding:20px 24px; border:1px solid var(--border-light); margin-bottom:28px;">
    <h5 style="font-family:var(--font-display); font-size:1rem; margin-bottom:14px; color:var(--text-secondary);">How to Earn Points</h5>
    <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px;">
      {% for icon, label, pts in point_guide %}
      <div style="background:var(--bg-secondary); border-radius:var(--radius-md); padding:10px; text-align:center; font-size:0.78rem; color:var(--text-secondary);">
        <div style="font-size:1.3rem; margin-bottom:4px;">{{ icon }}</div>
        <div style="font-weight:700; color:var(--text-primary); font-size:0.95rem;">{{ pts }}</div>
        <div>{{ label }}</div>
      </div>
      {% empty %}
      <div style="background:var(--bg-secondary); border-radius:var(--radius-md); padding:10px; text-align:center; font-size:0.78rem; color:var(--text-secondary);"><div style="font-size:1.3rem; margin-bottom:4px;">🗑️</div><div style="font-weight:700; color:var(--text-primary);">+5</div><div>Trash Cleanup</div></div>
      <div style="background:var(--bg-secondary); border-radius:var(--radius-md); padding:10px; text-align:center; font-size:0.78rem; color:var(--text-secondary);"><div style="font-size:1.3rem; margin-bottom:4px;">🦋</div><div style="font-weight:700; color:var(--text-primary);">+3</div><div>Wildlife Upload</div></div>
      <div style="background:var(--bg-secondary); border-radius:var(--radius-md); padding:10px; text-align:center; font-size:0.78rem; color:var(--text-secondary);"><div style="font-size:1.3rem; margin-bottom:4px;">🌿</div><div style="font-weight:700; color:var(--text-primary);">+2</div><div>Scenic Upload</div></div>
      <div style="background:var(--bg-secondary); border-radius:var(--radius-md); padding:10px; text-align:center; font-size:0.78rem; color:var(--text-secondary);"><div style="font-size:1.3rem; margin-bottom:4px;">🤝</div><div style="font-weight:700; color:var(--text-primary);">+3</div><div>Referral</div></div>
      <div style="background:var(--bg-secondary); border-radius:var(--radius-md); padding:10px; text-align:center; font-size:0.78rem; color:var(--text-secondary);"><div style="font-size:1.3rem; margin-bottom:4px;">❤️</div><div style="font-weight:700; color:var(--text-primary);">+1</div><div>Like Received</div></div>
      <div style="background:var(--bg-secondary); border-radius:var(--radius-md); padding:10px; text-align:center; font-size:0.78rem; color:var(--text-secondary);"><div style="font-size:1.3rem; margin-bottom:4px;">💬</div><div style="font-weight:700; color:var(--text-primary);">+1</div><div>Comment Received</div></div>
      {% endfor %}
    </div>
  </div>

  <!-- Rankings -->
  <h4 style="font-family:var(--font-display); font-size:1.3rem; margin-bottom:16px;">Top Contributors</h4>
  <div style="display:flex; flex-direction:column; gap:10px;">
    {% for profile in top_profiles %}
    {% with badge=profile.get_badge %}
    <div class="leaderboard-row {% if forloop.counter == 1 %}rank-1{% elif forloop.counter == 2 %}rank-2{% elif forloop.counter == 3 %}rank-3{% endif %}">
      <div style="width:40px; text-align:center; flex-shrink:0;">
        {% if forloop.counter == 1 %}<span style="font-size:1.5rem;">🥇</span>
        {% elif forloop.counter == 2 %}<span style="font-size:1.5rem;">🥈</span>
        {% elif forloop.counter == 3 %}<span style="font-size:1.5rem;">🥉</span>
        {% else %}<span style="font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--text-muted);">#{{ forloop.counter }}</span>
        {% endif %}
      </div>
      {% if profile.profile_photo %}
        <img src="{{ profile.profile_photo.url }}" style="width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--border-mid);flex-shrink:0;" alt="">
      {% else %}
        <div style="width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--moss),var(--earth-warm));display:flex;align-items:center;justify-content:center;color:white;font-size:0.95rem;font-weight:700;border:2px solid var(--border-mid);flex-shrink:0;">{{ profile.user.username|first|upper }}</div>
      {% endif %}
      <div style="flex:1; min-width:0;">
        <a href="{% url 'profile' profile.user.username %}" style="font-weight:600; font-size:0.92rem; color:var(--text-primary); text-decoration:none; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ profile.user.username }}</a>
        <span style="font-size:0.72rem; font-weight:600; padding:2px 8px; border-radius:100px; background:rgba(90,138,74,0.1); color:var(--moss);">{{ badge.icon }} {{ badge.label }}</span>
      </div>
      <div class="leaderboard-points">⭐ {{ profile.points }}</div>
    </div>
    {% endwith %}
    {% empty %}
    <div class="empty-state">
      <div class="empty-icon">🏆</div>
      <h3 class="empty-title">No rankings yet</h3>
      {% if user.is_authenticated %}
        <a href="{% url 'upload' %}" class="btn-primary mt-sm"><i class="fa-solid fa-camera"></i> Upload & Claim Top Spot</a>
      {% endif %}
    </div>
    {% endfor %}
  </div>

  {% if user.is_authenticated %}
  <div style="text-align:center; margin-top:24px;">
    <a href="{% url 'upload' %}" class="btn-primary"><i class="fa-solid fa-camera"></i> Upload & Earn Points</a>
  </div>
  {% endif %}
</div>
{% endblock %}