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

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

{% block content %}
<div class="dashboard-header">
  <div class="container">
    <div class="flex flex-gap-md" style="align-items:center; flex-wrap:wrap; gap:16px;">
      {% if user.profile.profile_photo %}
        <img src="{{ user.profile.profile_photo.url }}" class="profile-avatar-large" style="width:72px;height:72px;" alt="">
      {% else %}
        <div class="profile-avatar-placeholder-large" style="width:72px;height:72px;font-size:1.4rem;">{{ user.username|first|upper }}</div>
      {% endif %}
      <div>
        <div style="color:var(--sage); font-size:0.8rem; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px;">Dashboard</div>
        <h1 style="font-family:var(--font-display); color:var(--cream); font-size:1.8rem; margin-bottom:6px;">Hello, {{ user.first_name|default:user.username }}! 👋</h1>
        {% with badge=profile.get_badge %}
        <span class="badge-pill">{{ badge.icon }} {{ badge.label }}</span>
        {% endwith %}
      </div>
    </div>
  </div>
</div>

<div class="container py-md">
  <!-- Stats Row -->
  <div class="row g-3 mb-md">
    <div class="col-6 col-lg-3">
      <div class="stat-card">
        <div class="stat-icon stat-icon-green">📸</div>
        <div>
          <div class="stat-value" data-count="{{ total_uploads }}">{{ total_uploads }}</div>
          <div class="stat-label">Photos Shared</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="stat-card">
        <div class="stat-icon stat-icon-red">❤️</div>
        <div>
          <div class="stat-value" data-count="{{ total_likes }}">{{ total_likes }}</div>
          <div class="stat-label">Likes Received</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="stat-card">
        <div class="stat-icon stat-icon-amber">🤝</div>
        <div>
          <div class="stat-value" data-count="{{ referral_count }}">{{ referral_count }}</div>
          <div class="stat-label">Referrals</div>
        </div>
      </div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="stat-card">
        <div class="stat-icon stat-icon-blue">⭐</div>
        <div>
          <div class="stat-value" data-count="{{ profile.points }}">{{ profile.points }}</div>
          <div class="stat-label">Total Points</div>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-4">
    <!-- Left Column -->
    <div class="col-lg-7">

      <!-- Recent Posts -->
      <div style="background:var(--bg-card); border-radius:var(--radius-xl); padding:28px; border:1px solid var(--border-light); margin-bottom:20px;">
        <div class="flex-between mb-sm">
          <h3 style="font-family:var(--font-display); font-size:1.2rem;">Recent Posts</h3>
          <a href="{% url 'profile' user.username %}" style="font-size:0.82rem; color:var(--moss);">View All →</a>
        </div>
        {% if recent_posts %}
        <div style="display:flex; flex-direction:column; gap:10px;">
          {% for post in recent_posts %}
          <div style="display:flex; gap:14px; align-items:center; padding:12px; background:var(--bg-secondary); border-radius:var(--radius-md);">
            <img src="{{ post.image.url }}" alt="" style="width:52px;height:52px;object-fit:cover;border-radius:var(--radius-sm);flex-shrink:0;">
            <div style="flex:1; min-width:0;">
              <p style="font-size:0.85rem; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0 0 4px;">{{ post.caption|truncatechars:55 }}</p>
              <div style="display:flex; align-items:center; gap:6px; flex-wrap:wrap;">
                <span class="post-category-badge {{ post.get_category_color }}" style="position:static; padding:2px 8px; font-size:0.67rem;">{{ post.get_category_display }}</span>
                <span class="points-pill" style="font-size:0.67rem; padding:2px 7px;">{{ post.get_points_display }}</span>
              </div>
            </div>
            <div style="font-size:0.75rem; color:var(--text-muted); text-align:right; flex-shrink:0; line-height:1.8;">
              <div>❤️ {{ post.like_count }}</div>
              <div>💬 {{ post.comment_count }}</div>
            </div>
            <a href="{% url 'post_detail' post.pk %}" style="color:var(--moss); font-size:0.85rem; flex-shrink:0;"><i class="fa-solid fa-arrow-right"></i></a>
          </div>
          {% endfor %}
        </div>
        {% else %}
        <div style="text-align:center; padding:32px 0; color:var(--text-muted);">
          <div style="font-size:2rem; margin-bottom:10px;">📷</div>
          <p style="font-size:0.88rem; margin-bottom:16px;">No posts yet. Upload your first photo!</p>
          <a href="{% url 'upload' %}" class="btn-primary btn-sm">Upload Photo</a>
        </div>
        {% endif %}
      </div>

      <!-- Recent Notifications -->
      <div style="background:var(--bg-card); border-radius:var(--radius-xl); padding:28px; border:1px solid var(--border-light);">
        <div class="flex-between mb-sm">
          <h3 style="font-family:var(--font-display); font-size:1.2rem;">Recent Activity</h3>
          <a href="{% url 'notifications' %}" style="font-size:0.82rem; color:var(--moss);">View All →</a>
        </div>
        {% if recent_notifications %}
        <div style="display:flex; flex-direction:column; gap:8px;">
          {% for notif in recent_notifications %}
          <a href="{{ notif.link|default:'#' }}" style="display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--bg-secondary); border-radius:var(--radius-md); text-decoration:none; {% if not notif.is_read %}border-left:3px solid var(--moss);{% endif %}">
            <span style="font-size:1.1rem; flex-shrink:0;">
              {% if notif.notif_type == 'like' %}❤️{% elif notif.notif_type == 'comment' %}💬{% elif notif.notif_type == 'follow' %}👤{% elif notif.notif_type == 'achievement' %}🏆{% elif notif.notif_type == 'referral' %}🤝{% else %}📣{% endif %}
            </span>
            <p style="font-size:0.83rem; color:var(--text-secondary); margin:0; flex:1;">{{ notif.message }}</p>
            <span style="font-size:0.72rem; color:var(--text-muted); flex-shrink:0;">{{ notif.created_at|timesince|slice:":8" }}</span>
          </a>
          {% endfor %}
        </div>
        {% else %}
        <p style="color:var(--text-muted); font-size:0.85rem; text-align:center; padding:20px 0;">No activity yet. Share a photo to get started!</p>
        {% endif %}
      </div>
    </div>

    <!-- Right Column -->
    <div class="col-lg-5">

      <!-- Quick Actions -->
      <div style="background:var(--bg-card); border-radius:var(--radius-xl); padding:24px; border:1px solid var(--border-light); margin-bottom:16px;">
        <h3 style="font-family:var(--font-display); font-size:1.1rem; margin-bottom:16px;">Quick Actions</h3>
        <div style="display:flex; flex-direction:column; gap:8px;">
          <a href="{% url 'upload' %}" class="btn-primary" style="justify-content:center; text-decoration:none;"><i class="fa-solid fa-camera"></i> Upload Photo</a>
          <a href="{% url 'following_feed' %}" class="btn-secondary" style="justify-content:center; text-decoration:none;"><i class="fa-solid fa-users"></i> Following Feed</a>
          <a href="{% url 'achievements' %}" style="display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:var(--radius-pill);background:var(--bg-secondary);color:var(--text-secondary);font-size:0.88rem;font-weight:500;text-decoration:none;"><i class="fa-solid fa-medal"></i> My Achievements</a>
          <a href="{% url 'bookmarks' %}" style="display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:var(--radius-pill);background:var(--bg-secondary);color:var(--text-secondary);font-size:0.88rem;font-weight:500;text-decoration:none;"><i class="fa-solid fa-bookmark"></i> Saved Posts</a>
        </div>
      </div>

      <!-- Referral Card -->
      <div style="background:linear-gradient(135deg,var(--forest-mid),var(--earth-dark)); border-radius:var(--radius-xl); padding:24px; color:var(--cream); margin-bottom:16px;">
        <div style="font-size:0.75rem; text-transform:uppercase; letter-spacing:1px; color:var(--sage); margin-bottom:10px;">🤝 Your Referral Link</div>
        <p style="font-size:0.82rem; opacity:0.8; line-height:1.6; margin-bottom:14px;">Invite friends to WildWatch and earn <strong style="color:var(--sage);">+3 points</strong> for each one who joins!</p>
        <div style="background:rgba(0,0,0,0.2); border-radius:var(--radius-md); padding:10px 14px; font-size:0.75rem; word-break:break-all; margin-bottom:12px; font-family:monospace; color:var(--sage);">{{ referral_link }}</div>
        <div style="display:flex; gap:8px;">
          <button onclick="navigator.clipboard.writeText('{{ referral_link }}'); this.textContent='✅ Copied!'; setTimeout(()=>this.textContent='📋 Copy Link',2000);"
                  style="flex:1; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2); color:var(--cream); padding:9px; border-radius:var(--radius-md); font-size:0.82rem; font-weight:600; cursor:pointer;">
            📋 Copy Link
          </button>
          <a href="https://wa.me/?text=Join%20WildWatch%20—%20Conservation%20Through%20Community!%20{{ referral_link|urlencode }}"
             target="_blank"
             style="flex:1; background:rgba(37,211,102,0.25); border:1px solid rgba(37,211,102,0.3); color:#25d366; padding:9px; border-radius:var(--radius-md); font-size:0.82rem; font-weight:600; text-align:center; text-decoration:none; display:flex; align-items:center; justify-content:center; gap:4px;">
            <i class="fa-brands fa-whatsapp"></i> WhatsApp
          </a>
        </div>
        <p style="font-size:0.75rem; color:var(--sage); margin-top:10px; text-align:center;">{{ referral_count }} member{{ referral_count|pluralize }} joined via your link</p>
      </div>

      <!-- Recent Achievements -->
      {% if achievements %}
      <div style="background:var(--bg-card); border-radius:var(--radius-xl); padding:24px; border:1px solid var(--border-light);">
        <div class="flex-between mb-sm">
          <h3 style="font-family:var(--font-display); font-size:1.1rem;">Recent Achievements</h3>
          <a href="{% url 'achievements' %}" style="font-size:0.82rem; color:var(--moss);">All →</a>
        </div>
        <div style="display:flex; flex-wrap:wrap; gap:8px;">
          {% for ach in achievements %}
          <div style="background:var(--bg-secondary); border-radius:var(--radius-md); padding:8px 12px; font-size:0.78rem; font-weight:500; color:var(--text-secondary); display:flex; align-items:center; gap:6px;" title="{{ ach.description }}">
            {{ ach.title|slice:":2" }} <span>{{ ach.title|slice:"3:" }}</span>
          </div>
          {% endfor %}
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}