{% extends "base.html" %}
{% block title %}Skill Tree — 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-st-header { background:linear-gradient(135deg,#0a0a14,#12192b); border-bottom:1px solid var(--fa-border); padding:1.5rem 2rem; }
.fa-st-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-st-wrap { padding:1.5rem 2rem; overflow-x:auto; }
.fa-st-svg { display:block; margin:0 auto; }
.fa-node { cursor:pointer; transition:all .2s; }
.fa-node:hover circle { stroke-width:3; filter:brightness(1.3); }
.fa-node.locked opacity { 0.4; }
.fa-node circle { transition:all .2s; }
.fa-st-legend { display:flex; gap:1.5rem; flex-wrap:wrap; padding:.7rem 2rem; border-top:1px solid var(--fa-border); }
.fa-legend-item { display:flex; align-items:center; gap:.4rem; font-size:.7rem; color:var(--text-secondary); }
.fa-legend-dot { width:10px; height:10px; border-radius:50%; }
</style>
{% endblock %}

{% block content %}
<div>
  <div class="fa-st-header">
    <h1>Skill Tree</h1>
    <p style="color:var(--text-secondary);margin:.3rem 0 0;font-size:.82rem;">
      Complete missions to unlock nodes. Follow the prereq arrows.
    </p>
    <a href="/academy" class="btn" style="font-size:.75rem;margin-top:.6rem;">← Hub</a>
  </div>

  <div class="fa-st-wrap">
    <svg class="fa-st-svg" width="900" height="600" viewBox="0 0 900 600" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <marker id="arrow" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
          <path d="M0,0 L0,6 L8,3 z" fill="rgba(74,144,217,.4)"/>
        </marker>
        <filter id="glow">
          <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
          <feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge>
        </filter>
      </defs>
      <!-- Background grid -->
      <rect width="900" height="600" fill="#0a0a14"/>
      <g opacity="0.05">
        {% for x in range(0, 900, 40) %}<line x1="{{ x }}" y1="0" x2="{{ x }}" y2="600" stroke="#4a90d9" stroke-width="0.5"/>{% endfor %}
        {% for y in range(0, 600, 40) %}<line x1="0" y1="{{ y }}" x2="900" y2="{{ y }}" stroke="#4a90d9" stroke-width="0.5"/>{% endfor %}
      </g>

      <!-- Prereq edges -->
      {% for node in skill_nodes %}
      {% for pre in node.prereqs | default([]) %}
      {% set src = skill_nodes | selectattr('slug','equalto',pre) | first | default(none) %}
      {% if src and src.pos and node.pos %}
      <line x1="{{ src.pos[0] }}" y1="{{ src.pos[1] }}" x2="{{ node.pos[0] }}" y2="{{ node.pos[1] }}"
            stroke="rgba(74,144,217,.25)" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#arrow)"/>
      {% endif %}
      {% endfor %}
      {% endfor %}

      <!-- Nodes -->
      {% for node in skill_nodes %}
      {% if node.pos %}
      {% set unlocked = node.slug in user_skills or not node.prereqs %}
      {% set tier_color = '#4a90d9' if node.tier==1 else ('#FF6B35' if node.tier==2 else '#FF2D55') %}
      <g class="fa-node {% if not unlocked %}locked{% endif %}"
         onclick="window.location='/academy/missions?topic={{ node.slug }}'"
         transform="translate({{ node.pos[0] }},{{ node.pos[1] }})">
        <circle r="28" fill="{{ '#12192b' if not unlocked else 'rgba(74,144,217,.08)' }}"
                stroke="{{ tier_color }}" stroke-width="{{ '2' if not unlocked else '2.5' }}"
                opacity="{{ '0.4' if not unlocked else '1' }}"
                {% if unlocked %}filter="url(#glow)"{% endif %}/>
        <text y="-10" text-anchor="middle" font-size="16" fill="{{ tier_color if unlocked else 'rgba(255,255,255,.3)' }}">
          {{ node.icon | default('◆') }}
        </text>
        <text y="6" text-anchor="middle" font-size="7.5" fill="{{ '#ccc' if unlocked else 'rgba(255,255,255,.25)' }}" font-weight="600">
          {{ node.title[:12] }}
        </text>
        {% if not unlocked %}
        <text y="16" text-anchor="middle" font-size="7" fill="rgba(255,255,255,.2)">🔒</text>
        {% endif %}
      </g>
      {% endif %}
      {% endfor %}

      <!-- Tier labels -->
      <text x="15" y="100" font-size="9" fill="rgba(74,144,217,.5)" font-weight="600" transform="rotate(-90,15,100)">TIER 1</text>
      <text x="15" y="350" font-size="9" fill="rgba(255,107,53,.5)" font-weight="600" transform="rotate(-90,15,350)">TIER 2</text>
      <text x="15" y="550" font-size="9" fill="rgba(255,45,85,.5)" font-weight="600" transform="rotate(-90,15,550)">TIER 3</text>
    </svg>
  </div>

  <div class="fa-st-legend">
    <div class="fa-legend-item"><div class="fa-legend-dot" style="background:#4a90d9;"></div> Tier 1 — Foundations</div>
    <div class="fa-legend-item"><div class="fa-legend-dot" style="background:#FF6B35;"></div> Tier 2 — Role Tracks</div>
    <div class="fa-legend-item"><div class="fa-legend-dot" style="background:#FF2D55;"></div> Tier 3 — ICDEV Expert</div>
    <div class="fa-legend-item"><div class="fa-legend-dot" style="background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.2);"></div> Locked</div>
  </div>
</div>
{% endblock %}