{% extends "base.html" %}
{% block title %}Missions — FORGE Academy{% endblock %}

{% block extra_css %}
<style>
:root {
  --fa-orange:#FF6B35; --fa-cyan:#00D4FF; --fa-green:#00FF88;
  --fa-gold:#FFB800; --fa-card:#12192b; --fa-border:rgba(74,144,217,.25);
}
.fa-missions-header {
  background:linear-gradient(135deg,#0a0a14,#12192b);
  border-bottom:1px solid var(--fa-border);
  padding:2rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.fa-missions-header h1 {
  font-size:1.6rem; font-weight:900; letter-spacing:.08em;
  background:linear-gradient(135deg,var(--fa-orange),var(--fa-gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin:0;
}
.fa-filter-bar {
  background:#12192b; border:1px solid var(--fa-border);
  border-radius:8px; padding:1rem 2rem;
  display:flex; gap:.8rem; flex-wrap:wrap; align-items:center;
}
.fa-filter-btn {
  background:transparent; border:1px solid var(--fa-border);
  color:var(--text-secondary); border-radius:6px; padding:.3rem .75rem;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  cursor:pointer; transition:all .15s; text-decoration:none;
}
.fa-filter-btn:hover, .fa-filter-btn.active {
  border-color:var(--fa-orange); color:var(--fa-orange);
  background:rgba(255,107,53,.1);
}
.fa-filter-btn.t1.active { border-color:#4a90d9; color:#4a90d9; background:rgba(74,144,217,.1); }
.fa-filter-btn.t2.active { border-color:var(--fa-orange); }
.fa-filter-btn.t3.active { border-color:#FF2D55; color:#FF2D55; background:rgba(255,45,85,.1); }
.fa-missions-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.2rem; padding:1.5rem 2rem;
}
.fa-mission-card {
  background:var(--fa-card); border:1px solid var(--fa-border);
  border-radius:10px; padding:1.2rem; cursor:pointer;
  transition:border-color .2s,transform .15s,box-shadow .2s;
  position:relative; overflow:hidden;
}
.fa-mission-card:hover {
  border-color:var(--fa-orange); transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(255,107,53,.18);
}
.fa-tier-stripe {
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--stripe-color,var(--fa-orange));
}
.fa-card-hdr { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.5rem; }
.fa-card-title { font-weight:700; font-size:.95rem; }
.fa-type-badge {
  font-size:.6rem; text-transform:uppercase; letter-spacing:.1em;
  padding:2px 7px; border-radius:4px; white-space:nowrap;
}
.fa-type-badge.coding   { background:rgba(0,255,136,.12); color:var(--fa-green); }
.fa-type-badge.guided   { background:rgba(155,89,182,.12); color:#c39bd3; }
.fa-type-badge.hybrid   { background:rgba(255,107,53,.12); color:var(--fa-orange); }
.fa-type-badge.concept  { background:rgba(74,144,217,.12); color:var(--fa-cyan); }
.fa-type-badge.studio   { background:rgba(0,212,255,.12); color:var(--fa-cyan); }
.fa-type-badge.chat     { background:rgba(255,184,0,.12); color:var(--fa-gold); }
.fa-type-badge.design   { background:rgba(10,132,255,.12); color:#58a6ff; }
.fa-card-tag { font-size:.78rem; color:var(--text-secondary); margin-bottom:.8rem; line-height:1.4; }
.fa-card-ft { display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; }
.fa-xp-badge { font-size:.72rem; color:var(--fa-gold); font-weight:600; }
.fa-diff { font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; padding:2px 7px; border-radius:4px; }
.fa-diff.beginner     { background:rgba(0,255,136,.12); color:var(--fa-green); }
.fa-diff.intermediate { background:rgba(255,184,0,.12); color:var(--fa-gold); }
.fa-diff.advanced     { background:rgba(255,45,85,.12); color:#ff6b6b; }
.fa-status { font-size:.65rem; }
.fa-status.completed  { color:var(--fa-green); }
.fa-status.in_progress{ color:var(--fa-gold); }
.fa-status.locked     { color:var(--text-secondary); opacity:.5; }
.fa-empty { grid-column:1/-1; text-align:center; padding:3rem; color:var(--text-secondary); }
.fa-sep { height:1px; background:var(--fa-border); margin:0 2rem; }
.fa-tier-header {
  padding:.8rem 2rem .4rem;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.2em;
  display:flex; align-items:center; gap:.8rem;
}
.fa-tier-header::after { content:""; flex:1; height:1px; background:var(--fa-border); }
</style>
{% endblock %}

{% block content %}
<div>
  <div class="fa-missions-header">
    <div>
      <h1>Mission Browser</h1>
      <p style="margin:.3rem 0 0;color:var(--text-secondary);font-size:.82rem;">
        {{ missions|length }} missions available
        {% if fa_user %} · {{ fa_user.role|upper|default('') }} track{% endif %}
      </p>
    </div>
    <div style="margin-left:auto;display:flex;gap:.6rem;">
      <a href="/academy" class="btn" style="font-size:.75rem;">← Hub</a>
    </div>
  </div>

  <!-- Filters -->
  <div class="fa-filter-bar">
    <span style="font-size:.7rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;">Tier:</span>
    <a href="/academy/missions" class="fa-filter-btn {% if not active_tier %}active{% endif %}">All</a>
    <a href="/academy/missions?tier=1" class="fa-filter-btn t1 {% if active_tier==1 %}active{% endif %}">T1 Foundations</a>
    <a href="/academy/missions?tier=2" class="fa-filter-btn t2 {% if active_tier==2 %}active{% endif %}">T2 Role Tracks</a>
    <a href="/academy/missions?tier=3" class="fa-filter-btn t3 {% if active_tier==3 %}active{% endif %}">T3 Expert</a>

    <span style="font-size:.7rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;margin-left:.5rem;">Type:</span>
    <a href="/academy/missions?type=coding" class="fa-filter-btn {% if active_type=='coding' %}active{% endif %}" style="color:var(--fa-green);">Coding</a>
    <a href="/academy/missions?type=guided" class="fa-filter-btn {% if active_type=='guided' %}active{% endif %}" style="color:#c39bd3;">Guided</a>
    <a href="/academy/missions?type=studio" class="fa-filter-btn {% if active_type=='studio' %}active{% endif %}" style="color:var(--fa-cyan);">Studio</a>
    <a href="/academy/missions?type=chat" class="fa-filter-btn {% if active_type=='chat' %}active{% endif %}" style="color:var(--fa-gold);">Chat Lab</a>
  </div>

  {% if error %}
  <div style="padding:1.5rem 2rem;color:#ff6b6b;">⚠ {{ error }}</div>
  {% endif %}

  {% set tiers = missions|map(attribute='tier')|unique|sort|list %}
  {% for tier in tiers %}
  {% set tier_missions = missions|selectattr('tier','equalto',tier)|list %}
  {% if tier_missions %}
  <div class="fa-tier-header" style="color:{% if tier==1 %}#4a90d9{% elif tier==2 %}var(--fa-orange){% else %}#FF2D55{% endif %};">
    Tier {{ tier }} —
    {% if tier==1 %}Foundations{% elif tier==2 %}Role Tracks{% else %}ICDEV Expert{% endif %}
  </div>
  <div class="fa-missions-grid">
    {% for m in tier_missions %}
    {% set stripe = '#4a90d9' if m.tier==1 else ('var(--fa-orange)' if m.tier==2 else '#FF2D55') %}
    {% set status = progress_map.get(m.id, 'pending') %}
    <div class="fa-mission-card" onclick="window.location='/academy/mission/{{ m.slug }}'"
         style="--stripe-color:{{ stripe }}">
      <div class="fa-tier-stripe"></div>
      <div class="fa-card-hdr">
        <div class="fa-card-title">{{ m.title }}</div>
        <span class="fa-type-badge {{ m.mission_type|default('coding') }}">{{ m.mission_type|default('coding') }}</span>
      </div>
      <p class="fa-card-tag">{{ m.tagline|default('') }}</p>
      <div class="fa-card-ft">
        <span class="fa-xp-badge">+{{ m.xp_reward }} XP</span>
        <span class="fa-diff {{ m.difficulty|default('beginner') }}">{{ m.difficulty|default('beginner') }}</span>
        <span style="font-size:.68rem;color:var(--text-secondary);">~{{ m.estimated_minutes|default(30) }}m</span>
        {% if fa_user %}
        <span class="fa-status {{ status }}">
          {% if status=='completed' %}✓ Done{% elif status=='in_progress' %}● Active{% else %}○ Start{% endif %}
        </span>
        {% endif %}
      </div>
    </div>
    {% endfor %}
  </div>
  {% endif %}
  {% else %}
  <div class="fa-missions-grid">
    <div class="fa-empty">No missions match the current filter. <a href="/academy/missions">Clear filters</a></div>
  </div>
  {% endfor %}
</div>
{% endblock %}