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

{% block title %}Edit Profile — 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:2rem; margin-bottom:10px;">✏️</div>
    <h1 style="font-family:var(--font-display); color:var(--cream); font-size:1.9rem; margin-bottom:6px;">Edit Your Profile</h1>
    <p style="color:var(--sage); font-size:0.9rem;">Keep your community profile up to date</p>
  </div>
</div>

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

      <!-- Profile Photo -->
      <div class="col-lg-4">
        <div class="form-card" style="text-align:center;">
          <div style="margin-bottom:20px;">
            {% if user.profile.profile_photo %}
              <img src="{{ user.profile.profile_photo.url }}" id="profilePhotoPreview"
                   style="width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--sage);margin:0 auto 16px;" alt="">
            {% else %}
              <div id="profilePhotoPreview" style="width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,var(--moss),var(--earth-warm));display:flex;align-items:center;justify-content:center;color:white;font-size:2rem;font-weight:700;margin:0 auto 16px;border:3px solid var(--sage);">
                {{ user.username|first|upper }}
              </div>
            {% endif %}
            <h4 style="font-family:var(--font-display); font-size:1.1rem; margin-bottom:4px;">{{ user.username }}</h4>
            <p style="color:var(--text-muted); font-size:0.82rem;">{{ user.email }}</p>
          </div>
          <div class="form-group">
            <label class="form-label">Profile Photo</label>
            {{ profile_form.profile_photo }}
            {% if profile_form.profile_photo.errors %}
              {% for error in profile_form.profile_photo.errors %}
              <div class="invalid-feedback d-block">{{ error }}</div>
              {% endfor %}
            {% endif %}
          </div>
        </div>
      </div>

      <!-- Details -->
      <div class="col-lg-8">
        <div class="form-card">
          <div class="form-section-title" style="font-size:1.2rem; margin-bottom:6px;">Account Details</div>
          <div class="form-section-sub">Update your public information</div>

          <div class="row g-3">
            <div class="col-sm-6">
              <div class="form-group">
                <label class="form-label">First Name</label>
                {{ user_form.first_name }}
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="form-label">Last Name</label>
                {{ user_form.last_name }}
              </div>
            </div>
          </div>

          <div class="form-group">
            <label class="form-label">Username</label>
            {{ user_form.username }}
            {% if user_form.username.errors %}
              {% for e in user_form.username.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
            {% endif %}
          </div>

          <div class="form-group">
            <label class="form-label">Email Address</label>
            {{ user_form.email }}
            {% if user_form.email.errors %}
              {% for e in user_form.email.errors %}<div class="invalid-feedback d-block">{{ e }}</div>{% endfor %}
            {% endif %}
          </div>

          <div class="form-group">
            <label class="form-label">Phone Number <span style="color:var(--text-muted); font-weight:400; text-transform:none;">(optional)</span></label>
            {{ profile_form.phone_number }}
          </div>

          <div class="form-group">
            <label class="form-label">Bio</label>
            {{ profile_form.bio }}
            <div style="text-align:right; font-size:0.75rem; color:var(--text-muted); margin-top:4px;">
              <span id="bioCount">{{ user.profile.bio|length }}</span>/500
            </div>
          </div>

          {% if user_form.non_field_errors or profile_form.non_field_errors %}
          <div class="alert alert-error mb-sm">Form errors. Please check the fields above.</div>
          {% endif %}

          <div class="flex-between" style="gap:12px; margin-top:8px;">
            <a href="{% url 'profile' user.username %}" class="btn-secondary btn-sm">Cancel</a>
            <button type="submit" class="btn-primary">
              <i class="fa-solid fa-floppy-disk"></i> Save Changes
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

{% endblock %}

{% block extra_js %}
<script>
// Bio character counter
const bioEl = document.querySelector('textarea[name="bio"]');
const bioCount = document.getElementById('bioCount');
if (bioEl && bioCount) {
  bioEl.addEventListener('input', () => { bioCount.textContent = bioEl.value.length; });
}

// Profile photo preview
const photoInput = document.querySelector('input[name="profile_photo"]');
if (photoInput) {
  photoInput.addEventListener('change', function() {
    const file = this.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = e => {
        const preview = document.getElementById('profilePhotoPreview');
        if (preview.tagName === 'IMG') {
          preview.src = e.target.result;
        } else {
          const img = document.createElement('img');
          img.src = e.target.result;
          img.id = 'profilePhotoPreview';
          img.style.cssText = 'width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--sage);margin:0 auto 16px;display:block;';
          preview.replaceWith(img);
        }
      };
      reader.readAsDataURL(file);
    }
  });
}
</script>
{% endblock %}