{% extends "base.html" %}
{% block title %}Register — {{ session.scenario_slug.replace('_',' ').title() }}{% endblock %}
{% block extra_css %}
<style>
.reg-hero{background:linear-gradient(135deg,#0d1117 0%,#161b22 50%,#1a1f2e 100%);border-bottom:2px solid #FF6B35;padding:2rem 2rem 1.5rem;text-align:center;}
.reg-hero h1{font-size:2rem;font-weight:800;color:#FF6B35;margin:0 0 .4rem;}
.reg-hero p{color:#8b949e;font-size:.95rem;max-width:560px;margin:0 auto;}
.reg-body{max-width:820px;margin:0 auto;padding:1.5rem 1rem;}
.reg-section{background:#161b22;border:1px solid #30363d;border-radius:10px;padding:1.5rem;margin-bottom:1.5rem;}
.reg-section h2{font-size:.9rem;font-weight:700;color:#8b949e;text-transform:uppercase;letter-spacing:.07em;margin:0 0 1.2rem;}
.tab-bar{display:flex;gap:.5rem;margin-bottom:1.4rem;}
.tab-btn{flex:1;padding:.55rem 0;border:1px solid #30363d;background:#0d1117;color:#6e7681;border-radius:6px;cursor:pointer;font-size:.88rem;font-weight:600;transition:all .2s;}
.tab-btn.active{background:linear-gradient(135deg,#FF6B35,#cc4a1a);border-color:#FF6B35;color:#fff;}
.tab-pane{display:none;}
.tab-pane.active{display:block;}
/* Role cards */
.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.9rem;}
.role-card{background:#0d1117;border:2px solid #30363d;border-radius:9px;padding:1rem;cursor:pointer;transition:all .2s;position:relative;}
.role-card:hover{border-color:#FF6B35;transform:translateY(-2px);}
.role-card.selected{border-color:var(--role-color,#FF6B35);box-shadow:0 0 0 3px color-mix(in srgb,var(--role-color,#FF6B35) 25%,transparent);}
.role-card .rc-icon{font-size:2rem;margin-bottom:.4rem;}
.role-card .rc-label{font-size:.93rem;font-weight:700;color:#e6edf3;margin-bottom:.3rem;}
.role-card .rc-desc{font-size:.78rem;color:#6e7681;line-height:1.45;}
.role-card .rc-missions{margin-top:.6rem;display:flex;flex-wrap:wrap;gap:.3rem;}
.role-card .rc-mission{font-size:.67rem;background:#21262d;color:#58a6ff;padding:.1rem .45rem;border-radius:10px;}
.role-card .rc-check{position:absolute;top:.6rem;right:.7rem;width:18px;height:18px;border-radius:50%;background:var(--role-color,#FF6B35);display:none;align-items:center;justify-content:center;color:#fff;font-size:.7rem;font-weight:700;}
.role-card.selected .rc-check{display:flex;}
/* Free-text matcher */
.match-box{position:relative;}
.match-result{background:#0d1117;border:1px solid #30363d;border-radius:8px;padding:.9rem;margin-top:.8rem;display:none;}
.match-result .mr-role{font-size:1rem;font-weight:700;color:#e6edf3;margin-bottom:.2rem;}
.match-result .mr-conf{font-size:.78rem;color:#6e7681;}
.match-result .mr-reason{font-size:.78rem;color:#8b949e;margin-top:.3rem;font-style:italic;}
.conf-bar{height:4px;background:#30363d;border-radius:2px;margin-top:.5rem;}
.conf-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#f85149,#FFB800,#3fb950);background-size:300% 100%;transition:width .4s;}
/* Form fields */
.gd-input{width:100%;background:#0d1117;border:1px solid #30363d;color:#e6edf3;padding:.6rem .9rem;border-radius:6px;font-size:.93rem;box-sizing:border-box;outline:none;}
.gd-input:focus{border-color:#FF6B35;}
.form-label{font-size:.8rem;color:#6e7681;margin-bottom:.35rem;display:block;}
.field-row{margin-bottom:.9rem;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;}
.gd-btn{background:linear-gradient(135deg,#FF6B35,#cc4a1a);color:#fff;border:none;padding:.7rem 1.6rem;border-radius:7px;font-size:.97rem;font-weight:700;cursor:pointer;transition:opacity .2s;}
.gd-btn:hover{opacity:.85;}
.gd-btn:disabled{opacity:.45;cursor:default;}
.success-banner{background:#1a3a1f;border:1px solid #3fb950;border-radius:8px;padding:1.2rem 1.5rem;text-align:center;display:none;}
.success-banner h3{color:#3fb950;margin:0 0 .4rem;font-size:1.1rem;}
.success-banner p{color:#8b949e;font-size:.88rem;margin:0;}
.err-msg{color:#f85149;font-size:.82rem;margin-top:.5rem;display:none;}
</style>
{% endblock %}
{% block content %}
<div class="reg-hero">
  <h1>🎮 Register for GameDay</h1>
  <p>
    <strong style="color:#e6edf3;">{{ session.scenario_slug.replace('_',' ').title() }}</strong>
    &nbsp;·&nbsp; Join Code: <span style="font-family:monospace;color:#58a6ff;letter-spacing:.08em;">{{ session.join_code }}</span>
  </p>
</div>

<div class="reg-body">

  <!-- Success state -->
  <div class="success-banner" id="success-banner">
    <h3>You're registered! 🎉</h3>
    <p id="success-msg">Your spot is saved. Your facilitator will assign teams before the session starts.</p>
  </div>

  <!-- Step 1: Player info -->
  <div class="reg-section" id="step-info">
    <h2>Step 1 — Your Info</h2>
    <div class="two-col">
      <div class="field-row">
        <label class="form-label">Player Name <span style="color:#f85149;">*</span></label>
        <input id="f-name" class="gd-input" placeholder="Call sign or full name" maxlength="80">
      </div>
      <div class="field-row">
        <label class="form-label">Email <span style="color:#6e7681;font-weight:400;">(optional)</span></label>
        <input id="f-email" class="gd-input" type="email" placeholder="for results delivery">
      </div>
    </div>
    <div class="field-row">
      <label class="form-label">FORGE Academy Username <span style="color:#6e7681;font-weight:400;">(optional — unlocks Academy bonuses)</span></label>
      <input id="f-academy" class="gd-input" placeholder="e.g. sovanna.chuon" maxlength="80">
    </div>
  </div>

  <!-- Step 2: Role selection -->
  <div class="reg-section" id="step-role">
    <h2>Step 2 — Your Role</h2>
    <div class="tab-bar">
      <button class="tab-btn active" onclick="switchTab('cards')">Select a Role</button>
      <button class="tab-btn" onclick="switchTab('ai')">Describe Your Skills</button>
    </div>

    <!-- Tab A: Role cards -->
    <div class="tab-pane active" id="tab-cards">
      <div class="role-grid" id="role-grid">
        {% for role in roles %}
        <div class="role-card" id="rc-{{ role.id }}"
             style="--role-color:{{ role.color }};"
             onclick="selectRole('{{ role.id }}','{{ role.label }}','{{ role.description }}','{{ role.color }}')">
          <div class="rc-check">✓</div>
          <div class="rc-icon">{{ role.icon }}</div>
          <div class="rc-label">{{ role.label }}</div>
          <div class="rc-desc">{{ role.description }}</div>
          {% if role.academy_missions %}
          <div class="rc-missions">
            {% for m in role.academy_missions %}
            <span class="rc-mission">{{ m }}</span>
            {% endfor %}
          </div>
          {% endif %}
        </div>
        {% endfor %}
      </div>
      <div id="cards-skill-row" style="margin-top:1rem;display:none;">
        <label class="form-label">Skill summary for this role <span style="color:#6e7681;">(shown to facilitator)</span></label>
        <input id="f-skill-cards" class="gd-input" placeholder="e.g. 5 years PyTorch, MLOps on AWS" maxlength="200">
      </div>
    </div>

    <!-- Tab B: Free-text AI match -->
    <div class="tab-pane" id="tab-ai">
      <div class="field-row">
        <label class="form-label">Describe your background and skills</label>
        <textarea id="f-skill-ai" class="gd-input" rows="3"
          placeholder="e.g. I've spent 4 years doing MLOps on AWS — model training, fine-tuning, Kubeflow pipelines, and deploying via EKS. I'm comfortable with PyTorch and HuggingFace."
          style="resize:vertical;" maxlength="500" oninput="scheduleMatch()"></textarea>
      </div>
      <div class="match-box">
        <div class="match-result" id="match-result">
          <div style="display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem;">
            <span id="mr-icon" style="font-size:1.4rem;"></span>
            <div>
              <div class="mr-role" id="mr-role">—</div>
              <div class="mr-conf" id="mr-conf"></div>
            </div>
          </div>
          <div class="conf-bar"><div class="conf-fill" id="mr-bar" style="width:0%;background-position:right center;"></div></div>
          <div class="mr-reason" id="mr-reason"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- Submit -->
  <div class="err-msg" id="err-msg"></div>
  <button class="gd-btn" id="submit-btn" onclick="submitRegistration()">Register for GameDay →</button>
  <div style="margin-top:.7rem;font-size:.8rem;color:#6e7681;">
    Already registered? Your facilitator manages the roster at <code>/gameday/session/{{ session.session_id }}/registrations</code>
  </div>
</div>

<script>
const SESSION_ID = {{ session.session_id }};
let selectedRoleId = null;
let selectedRoleLabel = null;
let matchedRole = null;
let matchTimer = null;

function switchTab(tab) {
  document.querySelectorAll('.tab-btn').forEach((b,i)=>{b.classList.toggle('active', (i===0&&tab==='cards')||(i===1&&tab==='ai'));});
  document.getElementById('tab-cards').classList.toggle('active', tab==='cards');
  document.getElementById('tab-ai').classList.toggle('active', tab==='ai');
}

function selectRole(id, label, desc, color) {
  document.querySelectorAll('.role-card').forEach(c=>c.classList.remove('selected'));
  const card = document.getElementById('rc-'+id);
  if(card){card.classList.add('selected');}
  selectedRoleId = id;
  selectedRoleLabel = label;
  document.getElementById('cards-skill-row').style.display = 'block';
}

function scheduleMatch() {
  clearTimeout(matchTimer);
  matchTimer = setTimeout(runMatch, 650);
}

async function runMatch() {
  const skill = document.getElementById('f-skill-ai').value.trim();
  if(skill.length < 10) return;
  const res = await fetch(`/api/gameday/session/${SESSION_ID}/match-skill`, {
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body: JSON.stringify({stated_skill: skill}),
  });
  const d = await res.json();
  if(!d.ok) return;
  matchedRole = d.match;
  const mr = d.match;
  document.getElementById('mr-icon').textContent = mr.icon || '🎯';
  document.getElementById('mr-role').textContent = mr.role_label;
  document.getElementById('mr-conf').textContent = `Confidence: ${Math.round(mr.confidence*100)}%  ·  Method: ${mr.method}`;
  document.getElementById('mr-reason').textContent = mr.reasoning || '';
  const pct = Math.round(mr.confidence*100);
  const bar = document.getElementById('mr-bar');
  bar.style.width = pct+'%';
  // Color gradient based on confidence
  if(pct >= 70) bar.style.background='#3fb950';
  else if(pct >= 40) bar.style.background='#FFB800';
  else bar.style.background='#f85149';
  document.getElementById('match-result').style.display='block';
}

async function submitRegistration() {
  const name = document.getElementById('f-name').value.trim();
  const email = document.getElementById('f-email').value.trim();
  const academy = document.getElementById('f-academy').value.trim();
  const err = document.getElementById('err-msg');
  err.style.display='none';

  if(!name){err.textContent='Player name is required';err.style.display='block';return;}

  // Determine active tab + role
  const isAiTab = document.getElementById('tab-ai').classList.contains('active');
  let roleId='', roleLabel='', statedSkill='', confidence=1.0, method='selected', reasoning='';

  if(isAiTab){
    statedSkill = document.getElementById('f-skill-ai').value.trim();
    if(!statedSkill){err.textContent='Please describe your skills';err.style.display='block';return;}
    if(!matchedRole){err.textContent='Please wait for AI role matching (or switch to Select a Role)';err.style.display='block';return;}
    roleId=matchedRole.role_id; roleLabel=matchedRole.role_label;
    confidence=matchedRole.confidence; method=matchedRole.method; reasoning=matchedRole.reasoning||'';
  } else {
    if(!selectedRoleId){err.textContent='Please select a role';err.style.display='block';return;}
    roleId=selectedRoleId; roleLabel=selectedRoleLabel;
    statedSkill = document.getElementById('f-skill-cards').value.trim() || roleLabel;
  }

  const btn = document.getElementById('submit-btn');
  btn.disabled = true;
  btn.textContent = 'Registering…';

  const r = await fetch(`/api/gameday/session/${SESSION_ID}/register`, {
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body: JSON.stringify({
      player_name:        name,
      email:              email,
      academy_username:   academy,
      stated_skill:       statedSkill,
      role_id:            roleId,
      role_label:         roleLabel,
      match_confidence:   confidence,
      match_method:       method,
      match_reasoning:    reasoning,
    }),
  });
  const d = await r.json();
  if(d.ok){
    document.getElementById('step-info').style.display='none';
    document.getElementById('step-role').style.display='none';
    btn.style.display='none';
    const banner = document.getElementById('success-banner');
    banner.style.display='block';
    document.getElementById('success-msg').textContent =
      `${name} registered as ${roleLabel}. Your facilitator will assign teams before the session starts.`;
  } else {
    err.textContent=d.error||'Registration failed';
    err.style.display='block';
    btn.disabled=false; btn.textContent='Register for GameDay →';
  }
}
</script>
{% endblock %}