{% extends 'base.html' %}
{% block title %}Search — CampusTalent{% endblock %}

{% block content %}
<!-- Search Hero -->
<div class="page-hero" style="padding:3rem 0 2.5rem">
  <div class="container" style="position:relative;z-index:2">
    <h1 style="color:white;margin-bottom:1.25rem;font-size:2rem">Find Talent & Projects</h1>
    <form method="get" action="">
      <div class="search-main">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        <input type="text" name="q" value="{{ q }}" placeholder='Search skills, people, projects...' autofocus>
        <button type="submit" class="btn btn-primary">Search</button>
      </div>

      <!-- Filters -->
      <div style="display:flex;gap:0.75rem;margin-top:1rem;flex-wrap:wrap">
        <select name="type" class="form-select" style="width:auto;background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);color:white;backdrop-filter:blur(10px)">
          <option value="all" {% if filter_type == 'all' %}selected{% endif %} style="color:var(--text-primary)">All Results</option>
          <option value="people" {% if filter_type == 'people' %}selected{% endif %} style="color:var(--text-primary)">People</option>
          <option value="projects" {% if filter_type == 'projects' %}selected{% endif %} style="color:var(--text-primary)">Projects</option>
          <option value="skills" {% if filter_type == 'skills' %}selected{% endif %} style="color:var(--text-primary)">Skills</option>
        </select>
        <input type="text" name="university" value="{{ university }}" placeholder="Filter by university" class="form-input" style="width:auto;background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);color:white;backdrop-filter:blur(10px)">
        <select name="experience" class="form-select" style="width:auto;background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);color:white;backdrop-filter:blur(10px)">
          <option value="" style="color:var(--text-primary)">Any Level</option>
          <option value="beginner" {% if experience == 'beginner' %}selected{% endif %} style="color:var(--text-primary)">Beginner</option>
          <option value="intermediate" {% if experience == 'intermediate' %}selected{% endif %} style="color:var(--text-primary)">Intermediate</option>
          <option value="advanced" {% if experience == 'advanced' %}selected{% endif %} style="color:var(--text-primary)">Advanced</option>
          <option value="expert" {% if experience == 'expert' %}selected{% endif %} style="color:var(--text-primary)">Expert</option>
        </select>
      </div>
    </form>
  </div>
</div>

<div class="page-content" style="padding-top:2rem">
<div class="container">

  {% if q or university or experience %}
  <!-- Results summary -->
  <div style="margin-bottom:2rem;color:var(--text-muted);font-size:0.9rem">
    {% if q %}Showing results for <strong style="color:var(--text-primary)">"{{ q }}"</strong>{% endif %}
    {% if university %} in <strong style="color:var(--text-primary)">{{ university }}</strong>{% endif %}
  </div>

  <!-- PEOPLE -->
  {% if results.profiles %}
  <div style="margin-bottom:3rem">
    <div class="section-header">
      <h2 class="section-title">People <span style="font-size:0.875rem;color:var(--text-muted);font-weight:500">({{ results.profiles|length }})</span></h2>
    </div>
    <div class="grid-4 stagger">
      {% for profile in results.profiles %}
      <a href="{{ profile.get_absolute_url }}" style="text-decoration:none">
        <div class="profile-card">
          {% if profile.photo %}
            <img src="{{ profile.photo.url }}" alt="{{ profile.user.get_full_name }}" class="avatar avatar-lg profile-card-avatar" style="margin:0 auto 1rem">
          {% else %}
            <div class="avatar avatar-lg avatar-placeholder profile-card-avatar" style="margin:0 auto 1rem">
              {{ profile.user.first_name|first|upper }}{{ profile.user.last_name|first|upper }}
            </div>
          {% endif %}
          <div class="profile-card-name">{{ profile.user.get_full_name }}</div>
          <div class="profile-card-uni">{{ profile.user.university|default:"Student" }}</div>
          {% if profile.bio %}
          <p style="font-size:0.78rem;color:var(--text-muted);margin-bottom:0.75rem;line-height:1.5">{{ profile.bio|truncatechars:70 }}</p>
          {% endif %}
          <div class="tags" style="justify-content:center;margin-bottom:0.875rem">
            {% for skill in profile.skill_list|slice:":3" %}
            <span class="tag">{{ skill }}</span>
            {% endfor %}
          </div>
          <div style="display:flex;gap:0.5rem;justify-content:center">
            <span class="badge badge-{% if profile.experience_level == 'expert' %}secondary{% else %}teal{% endif %}">{{ profile.get_experience_level_display }}</span>
            {% if profile.is_available %}<span style="color:var(--success);font-size:0.75rem;font-weight:600">● Available</span>{% endif %}
          </div>
          {% if user.is_authenticated and user != profile.user %}
          <a href="{% url 'messaging:start' profile.user.pk %}" class="btn btn-primary btn-sm btn-block" style="margin-top:0.875rem" onclick="event.preventDefault();event.stopPropagation();window.location='{% url 'messaging:start' profile.user.pk %}'">
            Message
          </a>
          {% endif %}
        </div>
      </a>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  <!-- PROJECTS -->
  {% if results.projects %}
  <div style="margin-bottom:3rem">
    <div class="section-header">
      <h2 class="section-title">Projects <span style="font-size:0.875rem;color:var(--text-muted);font-weight:500">({{ results.projects|length }})</span></h2>
    </div>
    <div class="grid-3 stagger">
      {% for project in results.projects %}
      <a href="{{ project.get_absolute_url }}" style="text-decoration:none">
        <div class="card card-hover card-accent">
          <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:0.875rem">
            <span class="badge badge-primary">{{ project.get_project_type_display }}</span>
            <span style="font-size:0.75rem;color:var(--text-muted)">{{ project.open_slots }} slots</span>
          </div>
          <h3 style="font-size:1rem;margin-bottom:0.5rem">{{ project.title }}</h3>
          <p style="font-size:0.83rem;color:var(--text-muted);margin-bottom:1rem">{{ project.description|truncatechars:100 }}</p>
          <div class="tags" style="margin-bottom:0.875rem">
            {% for skill in project.required_skills.all|slice:":3" %}
            <span class="tag tag-secondary">{{ skill }}</span>
            {% endfor %}
          </div>
          <div style="font-size:0.78rem;color:var(--text-muted)">By {{ project.owner.get_full_name }}</div>
        </div>
      </a>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  <!-- SKILLS -->
  {% if results.skills %}
  <div style="margin-bottom:3rem">
    <div class="section-header">
      <h2 class="section-title">Skills <span style="font-size:0.875rem;color:var(--text-muted);font-weight:500">({{ results.skills|length }})</span></h2>
    </div>
    <div class="grid-3 stagger">
      {% for listing in results.skills %}
      <a href="{{ listing.get_absolute_url }}" style="text-decoration:none">
        <div class="card card-hover">
          <div style="display:flex;align-items:center;gap:0.875rem;margin-bottom:1rem">
            <div class="avatar avatar-md avatar-placeholder" style="font-size:14px;flex-shrink:0">
              {{ listing.user.first_name|first|upper }}
            </div>
            <div style="min-width:0">
              <div style="font-weight:600;font-size:0.875rem">{{ listing.user.get_full_name }}</div>
              <div style="font-size:0.72rem;color:var(--text-muted)">{{ listing.user.university|default:"Student" }}</div>
            </div>
            <span class="badge badge-gray" style="margin-left:auto;white-space:nowrap">{{ listing.get_experience_level_display }}</span>
          </div>
          <h3 style="font-size:0.95rem;margin-bottom:0.5rem">{{ listing.title }}</h3>
          <p style="font-size:0.82rem;color:var(--text-muted);margin-bottom:0.875rem">{{ listing.description|truncatechars:85 }}</p>
          {% if user.is_authenticated and user != listing.user %}
          <a href="{% url 'messaging:start' listing.user.pk %}" class="btn btn-outline btn-sm" onclick="event.preventDefault();event.stopPropagation();window.location='{% url 'messaging:start' listing.user.pk %}'">Contact</a>
          {% endif %}
        </div>
      </a>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  {% if not results.profiles and not results.projects and not results.skills %}
  <div class="empty-state">
    <div class="empty-state-icon">🔍</div>
    <h3 class="empty-state-title">No results found</h3>
    <p class="empty-state-text">Try different keywords or browse our sections below</p>
    <div style="display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1rem">
      <a href="{% url 'skills:list' %}" class="btn btn-outline">Browse Skills</a>
      <a href="{% url 'projects:list' %}" class="btn btn-primary">Browse Projects</a>
    </div>
  </div>
  {% endif %}

  {% else %}
  <!-- Empty search state -->
  <div style="text-align:center;padding:4rem 2rem">
    <div style="font-size:3rem;margin-bottom:1rem">🔎</div>
    <h2 style="margin-bottom:0.75rem">Search for Talent</h2>
    <p style="color:var(--text-muted);max-width:400px;margin:0 auto 2rem">Find skilled students, open projects, and collaboration opportunities across campuses.</p>
    <!-- Quick search suggestions -->
    <div style="display:flex;gap:0.5rem;flex-wrap:wrap;justify-content:center">
      <a href="?q=UI+Designer" class="tag">UI Designer</a>
      <a href="?q=Python" class="tag">Python</a>
      <a href="?q=Video+Editor" class="tag">Video Editor</a>
      <a href="?q=Researcher" class="tag">Researcher</a>
      <a href="?q=Marketing" class="tag">Marketing</a>
      <a href="?q=Data+Science" class="tag">Data Science</a>
    </div>
  </div>
  {% endif %}

</div>
</div>
{% endblock %}