{% extends "base.html" %}
{% block title %}Guild — 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-guild-header { background:linear-gradient(135deg,#0a0a14,#12192b); border-bottom:1px solid var(--fa-border); padding:1.5rem 2rem; }
.fa-guild-header h1 { font-size:1.6rem; font-weight:900; background:linear-gradient(135deg,var(--fa-cyan),var(--fa-green)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin:0; }
.fa-guild-body { padding:1.5rem 2rem; display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media(max-width:700px) { .fa-guild-body { grid-template-columns:1fr; } }
.fa-guild-card { background:var(--fa-card); border:1px solid var(--fa-border); border-radius:10px; padding:1.2rem; }
.fa-guild-card h2 { font-size:.7rem; text-transform:uppercase; letter-spacing:.15em; color:var(--fa-orange); margin:0 0 1rem; }
.fa-member-list { list-style:none; padding:0; margin:0; }
.fa-member-list li { display:flex; align-items:center; gap:.6rem; padding:.45rem 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:.82rem; }
.fa-member-list li:last-child { border-bottom:none; }
.fa-member-icon { width:28px; height:28px; border-radius:50%; background:rgba(74,144,217,.15); display:flex; align-items:center; justify-content:center; font-size:.7rem; flex-shrink:0; }
.fa-invite-code { background:#060910; border:1px solid var(--fa-border); border-radius:6px; padding:.6rem 1rem; font-family:monospace; font-size:1.1rem; color:var(--fa-cyan); letter-spacing:.2em; text-align:center; margin:1rem 0; cursor:pointer; }
.fa-form-input { width:100%; background:#060910; border:1px solid var(--fa-border); color:var(--text-primary); border-radius:6px; padding:.5rem .8rem; font-size:.85rem; margin-bottom:.6rem; }
.fa-btn-action { background:linear-gradient(135deg,var(--fa-cyan),#008db3); color:#0a0a14; border:none; border-radius:6px; padding:.55rem 1.2rem; font-size:.82rem; font-weight:700; cursor:pointer; width:100%; transition:opacity .15s; }
.fa-btn-action:hover { opacity:.85; }
.fa-btn-create { background:linear-gradient(135deg,var(--fa-orange),#e05a2b); color:#fff; }
</style>
{% endblock %}

{% block content %}
<div>
  <div class="fa-guild-header">
    <h1>⚔ Guild</h1>
    <p style="color:var(--text-secondary);margin:.3rem 0 0;font-size:.82rem;">
      Train together. Earn together. Complete squad missions for bonus XP.
    </p>
    <a href="/academy" class="btn" style="font-size:.75rem;margin-top:.6rem;">← Hub</a>
  </div>

  <div class="fa-guild-body">
    {% if guild %}
    <!-- Guild Stats -->
    <div class="fa-guild-card" style="grid-column:1/-1;">
      <h2>{{ guild.name }}</h2>
      <p style="font-size:.8rem;color:var(--text-secondary);margin:-.5rem 0 1rem;">{{ guild.description | default('') }}</p>
      <div style="display:flex;gap:1.5rem;flex-wrap:wrap;margin-bottom:1rem;">
        <div><div style="font-size:1.4rem;font-weight:800;color:var(--fa-gold);">{{ guild.total_xp | default(0) }}</div><div style="font-size:.65rem;color:var(--text-secondary);text-transform:uppercase;">Guild XP</div></div>
        <div><div style="font-size:1.4rem;font-weight:800;color:var(--fa-cyan);">{{ guild.member_count | default(0) }}</div><div style="font-size:.65rem;color:var(--text-secondary);text-transform:uppercase;">Members</div></div>
      </div>
      <div style="font-size:.68rem;color:var(--text-secondary);margin-bottom:.4rem;">Invite Code</div>
      <div class="fa-invite-code" onclick="navigator.clipboard.writeText('{{ guild.invite_code | default('') }}');this.textContent='Copied!'">{{ guild.invite_code | default('N/A') }}</div>
    </div>

    <!-- Members -->
    <div class="fa-guild-card">
      <h2>Members</h2>
      <ul class="fa-member-list">
        {% for m in guild.members | default([]) %}
        <li>
          <div class="fa-member-icon">{{ m.display_name[0] if m.display_name else '?' }}</div>
          <span>{{ m.display_name | default('Operative') }}</span>
          <span style="margin-left:auto;font-size:.7rem;color:var(--fa-gold);">{{ m.xp | default(0) }} XP</span>
        </li>
        {% else %}
        <li style="color:var(--text-secondary);">No members found.</li>
        {% endfor %}
      </ul>
    </div>

    <!-- Squad Missions -->
    <div class="fa-guild-card">
      <h2>Squad Missions</h2>
      <p style="font-size:.78rem;color:var(--text-secondary);">Complete missions with your squad to earn bonus XP for the whole team.</p>
      <a href="/academy/missions" class="fa-btn-action" style="display:block;text-align:center;text-decoration:none;">→ Browse Missions</a>
    </div>

    {% else %}
    <!-- No Guild -->
    <div class="fa-guild-card">
      <h2>Create a Guild</h2>
      <p style="font-size:.78rem;color:var(--text-secondary);margin-bottom:1rem;">Found a squad, earn together. Guilds share XP bonus on squad missions.</p>
      <input class="fa-form-input" id="guild-name" placeholder="Guild Name" maxlength="50">
      <input class="fa-form-input" id="guild-desc" placeholder="Description (optional)" maxlength="200">
      <button class="fa-btn-action fa-btn-create" onclick="createGuild()">⚔ Create Guild</button>
      <div id="guild-result" style="display:none;margin-top:.8rem;font-size:.78rem;color:var(--fa-green);"></div>
    </div>

    <div class="fa-guild-card">
      <h2>Join a Guild</h2>
      <p style="font-size:.78rem;color:var(--text-secondary);margin-bottom:1rem;">Got an invite code from a squadmate? Enter it to join their guild.</p>
      <input class="fa-form-input" id="invite-code" placeholder="Invite Code" maxlength="20">
      <button class="fa-btn-action" onclick="joinGuild()">→ Join Guild</button>
      <div id="join-result" style="display:none;margin-top:.8rem;font-size:.78rem;"></div>
    </div>
    {% endif %}
  </div>
</div>

<script>
async function createGuild() {
  const name = document.getElementById('guild-name').value.trim();
  if (!name) { alert('Guild name is required'); return; }
  const resp = await fetch('/api/academy/guild/create', {
    method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({name, description: document.getElementById('guild-desc').value})
  });
  const d = await resp.json();
  const el = document.getElementById('guild-result');
  el.style.display = 'block';
  if (d.ok) {
    el.textContent = '✓ Guild created! Invite code: ' + d.invite_code;
    setTimeout(() => location.reload(), 1500);
  } else {
    el.style.color = '#ff6b6b';
    el.textContent = d.error || 'Failed to create guild';
  }
}
async function joinGuild() {
  const code = document.getElementById('invite-code').value.trim();
  if (!code) { alert('Invite code required'); return; }
  const resp = await fetch('/api/academy/guild/join', {
    method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({invite_code: code})
  });
  const d = await resp.json();
  const el = document.getElementById('join-result');
  el.style.display = 'block';
  if (d.ok) {
    el.style.color = 'var(--fa-green)';
    el.textContent = '✓ Joined guild successfully!';
    setTimeout(() => location.reload(), 1500);
  } else {
    el.style.color = '#ff6b6b';
    el.textContent = d.error || 'Invalid invite code';
  }
}
</script>
{% endblock %}