{% extends "base.html" %}
{% block title %}{{ profile.DisplayName }} — KittyRec INDEV{% endblock %}
{% block head %}
<style>
  .profile-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
  }
  .avatar-circle {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), var(--teal));
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
    border: 3px solid var(--border);
  }
  .xp-bar { height: 6px; background: var(--bg4); border-radius: 3px; overflow: hidden; margin-top: .4rem; }
  .xp-fill { height: 100%; background: linear-gradient(90deg, var(--purple), var(--teal)); border-radius: 3px; }

  .gifts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
  .gift-card {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.1rem;
    display: flex; flex-direction: column; gap: .5rem;
  }
  .gift-card .rarity-0 { color: var(--text2); }
  .gift-card .rarity-1 { color: var(--green); }
  .gift-card .rarity-2 { color: var(--teal); }
  .gift-card .rarity-3 { color: var(--yellow); }

  .rarity-labels { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
</style>
{% endblock %}

{% block content %}
<div class="profile-header">
  <div class="avatar-circle">🐱</div>
  <div>
    <h1 style="font-size:1.6rem;font-weight:800;letter-spacing:-.5px">{{ profile.DisplayName }}</h1>
    <p style="color:var(--text2);font-size:.85rem;margin-top:.15rem">@{{ profile.Username }}</p>
    <div style="display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap">
      <span class="badge badge-purple">Level {{ profile.Level }}</span>
      {% if profile.Developer %}
      <span class="badge badge-yellow">⭐ Developer</span>
      {% endif %}
      <span class="badge badge-gray">{{ profile.XP | int }} XP</span>
    </div>
    <div class="xp-bar" style="width:200px;margin-top:.6rem">
      <div class="xp-fill" style="width:{{ [(profile.XP % 10000) / 100, 100] | min }}%"></div>
    </div>
    <p style="font-size:.72rem;color:var(--text3);margin-top:.25rem">
      {{ profile.XP % 10000 }} / 10 000 XP to Level {{ profile.Level + 1 }}
    </p>
  </div>
  <div style="margin-left:auto">
    <a href="/portal/logout" class="btn btn-ghost btn-sm">Sign out</a>
  </div>
</div>

{% if profile.Bio %}
<div class="card mb-2">
  <div class="card-title">Bio</div>
  <p style="font-size:.9rem;color:var(--text2)">{{ profile.Bio }}</p>
</div>
{% endif %}

<div class="card">
  <div class="section-head">
    <h2>🎁 Gift Boxes <span style="color:var(--text3);font-weight:400;font-size:.85rem">({{ gifts | length }} pending)</span></h2>
    {% if gifts %}
    <button class="btn btn-primary btn-sm" onclick="openAll()">Open All</button>
    {% endif %}
  </div>

  {% if not gifts %}
  <p style="color:var(--text2);font-size:.875rem;text-align:center;padding:2rem 0">
    No pending gifts — play some games to earn them!
  </p>
  {% else %}
  <div class="gifts-grid" id="gifts-container">
    {% for g in gifts %}
    <div class="gift-card" id="gift-{{ g.Id }}">
      <div class="flex items-center gap-1">
        <span style="font-size:1.3rem">
          {% if g.GiftRarity == 3 %}🌟
          {% elif g.GiftRarity == 2 %}💎
          {% elif g.GiftRarity == 1 %}🟢
          {% else %}📦{% endif %}
        </span>
        <span class="rarity-labels rarity-{{ g.GiftRarity }}">
          {% if g.GiftRarity == 3 %}Epic
          {% elif g.GiftRarity == 2 %}Rare
          {% elif g.GiftRarity == 1 %}Uncommon
          {% else %}Common{% endif %}
        </span>
      </div>
      {% if g.EquipmentPrefabName %}
      <div style="font-size:.8rem;font-weight:600;color:var(--text)">{{ g.EquipmentPrefabName | replace('[','') | replace(']','') }}</div>
      {% else %}
      <div style="font-size:.8rem;font-weight:600;color:var(--text)">XP Reward</div>
      {% endif %}
      <div style="font-size:.75rem;color:var(--text2)">+{{ g.Xp }} XP</div>
      {% if g.Message %}<div style="font-size:.72rem;color:var(--text3)">{{ g.Message }}</div>{% endif %}
      <button class="btn btn-green btn-sm" style="margin-top:.25rem" onclick="openGift({{ g.Id }})">Open</button>
    </div>
    {% endfor %}
  </div>
  {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
async function openGift(id) {
  const r = await fetch('/portal/api/consume_gift/' + id, { method: 'POST' });
  const d = await r.json();
  if (d.ok) {
    document.getElementById('gift-' + id).remove();
    toast('Gift opened! +' + d.xp + ' XP');
    setTimeout(() => location.reload(), 1500);
  } else {
    toast('Failed to open gift', 'error');
  }
}

async function openAll() {
  const cards = document.querySelectorAll('.gift-card[id^="gift-"]');
  for (const c of cards) {
    const id = c.id.replace('gift-', '');
    await openGift(parseInt(id));
    await new Promise(r => setTimeout(r, 200));
  }
}
</script>
{% endblock %}