{% extends 'base.html' %}

{% block content %}
<div class="container py-4">
  <!-- Header -->
  <div class="row mb-4">
    <div class="col-lg-8">
      <h1 class="fw-bold">Discover Celebrities & Fans</h1>
      <p class="text-muted">Browse discoverable profiles using location, interests, and verification filters.</p>
    </div>
  </div>

  <div class="row g-4">
    <!-- Filters Sidebar -->
    <div class="col-lg-4">
      <div class="card shadow-sm sticky-top" style="top: 90px;">
        <div class="card-body">
          <h5 class="mb-3">Search Filters</h5>
          <form method="get">
            {% csrf_token %}
            <div class="mb-3">
              {{ form.keyword.label_tag }}
              {{ form.keyword }}
            </div>
            <div class="mb-3">
              {{ form.city.label_tag }}
              {{ form.city }}
            </div>
            <div class="mb-3">
              {{ form.country.label_tag }}
              {{ form.country }}
            </div>
            <div class="mb-3">
              {{ form.interest.label_tag }}
              {{ form.interest }}
            </div>
            <div class="mb-3">
              {{ form.category.label_tag }}
              {{ form.category }}
            </div>
            <div class="form-check mb-3">
              {{ form.verified_only }}
              {{ form.verified_only.label_tag }}
            </div>
            <button class="btn btn-primary w-100" type="submit">Apply Filters</button>
          </form>
        </div>
      </div>
    </div>

    <!-- Results -->
    <div class="col-lg-8">
      {% if profiles %}
        
        <!-- ===================== CELEBRITIES ===================== -->
        <div class="mb-5">
          <h4 class="mb-3 d-flex align-items-center">
            <i class="fas fa-star text-warning me-2"></i> Celebrities
          </h4>
          
          <div class="list-group">
            {% for profile in profiles %}
              {% if profile.user.is_celebrity %}
                <a href="{% url 'core:discover_detail' profile.user.username %}" 
                   class="list-group-item list-group-item-action">
                  <div class="d-flex w-100 justify-content-between align-items-start">
                    <div>
                      <h5 class="mb-1">
                        {{ profile.display_name|default:profile.user.username }}
                        {% if profile.user.is_verified %}
                          <span class="badge bg-success ms-1">Verified</span>
                        {% endif %}
                        <span class="badge bg-warning text-dark ms-1">Celebrity</span>
                      </h5>
                      <p class="mb-1 text-truncate text-muted">
                        {{ profile.headline|default:profile.bio|truncatechars:120 }}
                      </p>
                    </div>
                    <small class="text-muted text-end">
                      {{ profile.city }}, {{ profile.country }}
                    </small>
                  </div>
                  <div class="mt-2">
                    {% if profile.media_count %}
                      <span class="badge bg-secondary me-1">{{ profile.media_count }} media</span>
                    {% endif %}
                    <span class="badge bg-light text-dark">{{ profile.visibility|title }}</span>
                  </div>
                </a>
              {% endif %}
            {% empty %}
              <div class="alert alert-light">No celebrities found.</div>
            {% endfor %}
          </div>
        </div>

        <!-- ===================== FANS ===================== -->
        <div>
          <h4 class="mb-3 d-flex align-items-center">
            <i class="fas fa-users text-primary me-2"></i> Fans
          </h4>
          
          <div class="list-group">
            {% for profile in profiles %}
              {% if not profile.user.is_celebrity %}
                <a href="{% url 'core:discover_detail' profile.user.username %}" 
                   class="list-group-item list-group-item-action">
                  <div class="d-flex w-100 justify-content-between align-items-start">
                    <div>
                      <h5 class="mb-1">
                        {{ profile.display_name|default:profile.user.username }}
                        {% if profile.user.is_verified %}
                          <span class="badge bg-success ms-1">Verified</span>
                        {% endif %}
                      </h5>
                      <p class="mb-1 text-truncate text-muted">
                        {{ profile.headline|default:profile.bio|truncatechars:120 }}
                      </p>
                    </div>
                    <small class="text-muted text-end">
                      {{ profile.city }}, {{ profile.country }}
                    </small>
                  </div>
                  <div class="mt-2">
                    {% if profile.media_count %}
                      <span class="badge bg-secondary me-1">{{ profile.media_count }} media</span>
                    {% endif %}
                    <span class="badge bg-light text-dark">{{ profile.visibility|title }}</span>
                  </div>
                </a>
              {% endif %}
            {% empty %}
              <div class="alert alert-light">No fans found.</div>
            {% endfor %}
          </div>
        </div>

      {% else %}
        <div class="alert alert-info">
          No discoverable profiles matched your filters.
        </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}