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

{% block title %}Upload Photo — WildWatch{% endblock %}

{% block content %}
<div style="background:linear-gradient(135deg,var(--forest-deep),var(--forest-mid)); padding:48px 0 60px;">
  <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;">Share Your Moment</h1>
    <p style="color:var(--sage); font-size:0.95rem;">Upload your environmental photo and earn points for the community</p>
  </div>
</div>

<div class="container py-md" style="max-width:760px;">
  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="row g-4">

      <!-- Image Upload Column -->
      <div class="col-lg-5">
        <div class="form-card" style="padding:28px;">
          <div class="form-section-title" style="font-size:1.1rem; margin-bottom:6px;">Photo</div>
          <p class="form-section-sub" style="font-size:0.82rem; margin-bottom:20px;">JPG or PNG, max 5MB. Auto-compressed.</p>

          <div class="image-preview-wrap" id="dropZone">
            <img id="imagePreview" src="" alt="Preview" style="display:none; width:100%; height:280px; object-fit:cover;">
            <div class="image-preview-placeholder" id="previewPlaceholder">
              <div class="upload-icon">🖼️</div>
              <p style="font-weight:500; font-size:0.9rem; color:var(--text-secondary);">Click or drag to upload</p>
              <p style="font-size:0.78rem; color:var(--text-muted); margin-top:4px;">JPG, JPEG or PNG</p>
            </div>
          </div>

          <div style="margin-top:14px;">
            {{ form.image }}
            {% if form.image.errors %}
              {% for error in form.image.errors %}
              <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            {% endif %}
          </div>
        </div>
      </div>

      <!-- Details Column -->
      <div class="col-lg-7">
        <div class="form-card" style="padding:28px;">
          <div class="form-section-title" style="font-size:1.1rem; margin-bottom:20px;">Post Details</div>

          <div class="form-group">
            <label class="form-label" for="{{ form.caption.id_for_label }}">
              <i class="fa-solid fa-align-left me-1"></i> Caption
            </label>
            {{ form.caption }}
            <div style="text-align:right; font-size:0.75rem; color:var(--text-muted); margin-top:4px;">
              <span id="captionCount">0</span>/1000
            </div>
            {% if form.caption.errors %}
              {% for error in form.caption.errors %}
              <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            {% endif %}
          </div>

          <div class="form-group">
            <label class="form-label" for="{{ form.category.id_for_label }}">
              <i class="fa-solid fa-tag me-1"></i> Category & Points
            </label>
            {{ form.category }}
            {% if form.category.errors %}
              {% for error in form.category.errors %}
              <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            {% endif %}
          </div>

          <!-- Points guide cards -->
          <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:24px;">
            <div style="background:var(--bg-secondary); border-radius:var(--radius-md); padding:12px 8px; text-align:center; font-size:0.75rem; color:var(--text-secondary); cursor:pointer;" onclick="document.querySelector('[name=category]').value='trash_cleanup'">
              <div style="font-size:1.3rem; margin-bottom:4px;">🗑️</div>
              <div style="font-weight:700; color:#d97706;">+50 pts</div>
              <div>Trash Cleanup</div>
            </div>
            <div style="background:var(--bg-secondary); border-radius:var(--radius-md); padding:12px 8px; text-align:center; font-size:0.75rem; color:var(--text-secondary); cursor:pointer;" onclick="document.querySelector('[name=category]').value='wildlife'">
              <div style="font-size:1.3rem; margin-bottom:4px;">🦋</div>
              <div style="font-weight:700; color:#3b82f6;">+30 pts</div>
              <div>Wildlife & Plants</div>
            </div>
            <div style="background:var(--bg-secondary); border-radius:var(--radius-md); padding:12px 8px; text-align:center; font-size:0.75rem; color:var(--text-secondary); cursor:pointer;" onclick="document.querySelector('[name=category]').value='scenic'">
              <div style="font-size:1.3rem; margin-bottom:4px;">🌿</div>
              <div style="font-weight:700; color:var(--moss);">+20 pts</div>
              <div>Scenic</div>
            </div>
          </div>

          <div id="pointsPreview" class="upload-points-hint" style="margin-bottom:20px;">
            ⭐ Select a category to see your points reward
          </div>

          {% if form.non_field_errors %}
          <div class="alert alert-error mb-sm">{{ form.non_field_errors }}</div>
          {% endif %}

          <div class="flex-between" style="gap:12px;">
            <a href="{% url 'feed' %}" class="btn-secondary btn-sm">Cancel</a>
            <button type="submit" class="btn-primary">
              <i class="fa-solid fa-cloud-arrow-up"></i> Share & Earn Points
            </button>
          </div>
        </div>
      </div>

    </div>
  </form>
</div>

{% endblock %}

{% block extra_js %}
<script>
// Caption counter
const captionEl = document.querySelector('textarea[name="caption"]');
const captionCount = document.getElementById('captionCount');
if (captionEl && captionCount) {
  captionEl.addEventListener('input', () => { captionCount.textContent = captionEl.value.length; });
}

// Points preview based on selected category
const categoryEl = document.querySelector('[name="category"]');
const pointsPreview = document.getElementById('pointsPreview');
const pointsMap = { 'trash_cleanup': '🗑️ Trash Cleanup — You earn +50 points!', 'wildlife': '🦋 Wildlife & Plants — You earn +30 points!', 'scenic': '🌿 Scenic Environment — You earn +20 points!' };
if (categoryEl && pointsPreview) {
  function updatePoints() {
    const val = categoryEl.value;
    pointsPreview.textContent = pointsMap[val] || '⭐ Select a category to see your points reward';
  }
  categoryEl.addEventListener('change', updatePoints);
  updatePoints();
}
</script>
{% endblock %}