{% extends 'base.html' %}

{% block title %}Achievements — 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;">Achievements</h1>
    <p style="color:var(--sage);">{{ earned.count }} of {{ all_achievements|length }} unlocked</p>
  </div>
</div>

<div class="container py-md" style="max-width:800px;">
  <div class="row g-4">
    <!-- Achievement Grid -->
    <div class="col-lg-8">
      <h4 style="font-family:var(--font-display); font-size:1.2rem; margin-bottom:16px;">All Achievements</h4>
      <div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:12px;">
        {% for code, title, desc in all_achievements %}
        {% if code in earned_codes %}
        <div style="background:var(--bg-card); border-radius:var(--radius-lg); padding:18px; border:1px solid var(--moss); text-align:center; box-shadow:0 4px 16px rgba(90,138,74,0.12);">
          <div style="font-size:1.8rem; margin-bottom:8px;">{{ title|slice:":2" }}</div>
          <div style="font-weight:600; font-size:0.88rem; color:var(--text-primary); margin-bottom:4px;">{{ title|slice:"3:" }}</div>
          <div style="font-size:0.75rem; color:var(--text-muted); line-height:1.4;">{{ desc }}</div>
          <div style="margin-top:10px;">
            <span style="background:rgba(90,138,74,0.12); color:var(--moss); font-size:0.68rem; font-weight:700; padding:3px 10px; border-radius:100px; text-transform:uppercase;">✓ Earned</span>
          </div>
        </div>
        {% else %}
        <div style="background:var(--bg-secondary); border-radius:var(--radius-lg); padding:18px; border:1px solid var(--border-light); text-align:center; opacity:0.55;">
          <div style="font-size:1.8rem; margin-bottom:8px; filter:grayscale(1);">{{ title|slice:":2" }}</div>
          <div style="font-weight:600; font-size:0.88rem; color:var(--text-muted); margin-bottom:4px;">{{ title|slice:"3:" }}</div>
          <div style="font-size:0.75rem; color:var(--text-muted); line-height:1.4;">{{ desc }}</div>
          <div style="margin-top:10px;">
            <span style="background:var(--bg-card); color:var(--text-muted); font-size:0.68rem; font-weight:600; padding:3px 10px; border-radius:100px; text-transform:uppercase;">Locked</span>
          </div>
        </div>
        {% endif %}
        {% endfor %}
      </div>
    </div>

    <!-- Points Log -->
    <div class="col-lg-4">
      <h4 style="font-family:var(--font-display); font-size:1.2rem; margin-bottom:16px;">Points History</h4>
      <div style="background:var(--bg-card); border-radius:var(--radius-xl); padding:20px; border:1px solid var(--border-light);">
        {% if point_logs %}
        <div style="display:flex; flex-direction:column; gap:10px;">
          {% for log in point_logs %}
          <div style="display:flex; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--border-light);">
            <div style="font-size:0.85rem; color:var(--text-secondary); flex:1; line-height:1.4;">{{ log.reason }}</div>
            <div style="font-size:0.88rem; font-weight:700; color:{% if log.points > 0 %}var(--moss){% else %}#ef4444{% endif %}; flex-shrink:0;">
              {% if log.points > 0 %}+{% endif %}{{ log.points }}
            </div>
          </div>
          {% endfor %}
        </div>
        {% else %}
        <p style="color:var(--text-muted); font-size:0.85rem; text-align:center; padding:20px 0;">No points earned yet. Upload a photo!</p>
        {% endif %}
        <a href="{% url 'upload' %}" class="btn-primary btn-sm" style="justify-content:center; margin-top:16px; display:flex;">
          <i class="fa-solid fa-camera me-1"></i> Earn Points
        </a>
      </div>
    </div>
  </div>
</div>
{% endblock %}