{% extends 'admin/custom_base.html' %}

{% block body %}
<div class="container mt-3" style="max-width:750px">
  <div class="d-flex align-items-center mb-3">
    <h3 class="mb-0 mr-3">Gift Item to Player</h3>
    <a href="/admin/admin_players/" class="btn btn-sm btn-outline-secondary ml-auto">Back to Players</a>
  </div>

  {% if error %}
  <div class="alert alert-danger">{{ error }}</div>
  {% endif %}
  {% if success %}
  <div class="alert alert-success">{{ success }}</div>
  {% endif %}

  {% if player %}
  <div class="card mb-4">
    <div class="card-header"><strong>Player: {{ player.Username }}</strong> (ID {{ player.Id }})</div>
    <div class="card-body p-2">
      <small class="text-muted">Display name: {{ player.DisplayName }} — Level {{ player.Level }} — {{ player.Xp }} XP</small>
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header"><strong>Gift Details</strong></div>
    <div class="card-body">
      <form method="post">
        <input type="hidden" name="player_id" value="{{ player_id }}">

        <div class="form-group">
          <label>Gift Type</label>
          <select name="gift_type" class="form-control" id="gift-type-sel" onchange="updateGiftType(this.value)">
            <option value="item">Avatar Item (Skin / Clothing)</option>
            <option value="consumable">Consumable</option>
            <option value="equipment">Equipment (Weapon / Tool Skin)</option>
            <option value="tokens">Tokens (RecCenterTokens)</option>
          </select>
        </div>

        <div id="section-item">
          <div class="form-group">
            <label>Avatar Item</label>
            <input type="text" class="form-control mb-1" id="item-filter" placeholder="Filter items..." autocomplete="off">
            <select name="item_desc" class="form-control" id="item-select" size="10">
              <option value="">(No item — XP/Level only)</option>
              {% if custom_items_only %}
              <optgroup label="Custom / SDK Items ({{ custom_items_only|length }})">
                {% for item in custom_items_only %}
                <option value="{{ item.AvatarItemDesc }}">{{ item.FriendlyName }}{% if item.get('Starter') %} [Starter]{% endif %}</option>
                {% endfor %}
              </optgroup>
              {% endif %}
              {% set custom_descs = custom_items_only | map(attribute='AvatarItemDesc') | list %}
              {% for item in all_items %}
              {% if item.AvatarItemDesc not in custom_descs %}
              <option value="{{ item.AvatarItemDesc }}">{{ item.FriendlyName }} [{{ item.AvatarItemDesc[:20] }}]</option>
              {% endif %}
              {% endfor %}
            </select>
            <small class="form-text text-muted">{{ all_items|length }} avatar items available ({{ custom_items_only|length }} custom)</small>
          </div>
        </div>

        <div id="section-consumable" style="display:none">
          <div class="form-group">
            <label>Consumable Item</label>
            <input type="text" class="form-control mb-1" id="consumable-filter" placeholder="Filter consumables..." autocomplete="off">
            <select name="consumable_desc" class="form-control" id="consumable-select" size="8">
              <option value="">(Select a consumable)</option>
              {% for item in all_consumables %}
              <option value="{{ item.ConsumableItemDesc }}">{{ item.ConsumableItemDesc }} (Count: {{ item.Count }}, Cat: {{ item.Category }})</option>
              {% endfor %}
            </select>
            <small class="form-text text-muted">{{ all_consumables|length }} consumables available</small>
          </div>
        </div>

        <div id="section-equipment" style="display:none">
          <div class="form-group">
            <label>Equipment</label>
            <input type="text" class="form-control mb-1" id="equipment-filter" placeholder="Filter equipment..." autocomplete="off">
            <select name="equip_combined" class="form-control" id="equipment-select" size="8" onchange="splitEquipment(this.value)">
              <option value="">(Select equipment)</option>
              {% for item in all_equipment %}
              <option value="{{ item.PrefabName }}|{{ item.ModificationGuid }}">{{ item.PrefabName }} — {{ item.ModificationGuid[:12] }}...</option>
              {% endfor %}
            </select>
            <small class="form-text text-muted">{{ all_equipment|length }} equipment skins available</small>
          </div>
          <input type="hidden" name="equip_prefab" id="equip-prefab" value="">
          <input type="hidden" name="equip_guid" id="equip-guid" value="">
        </div>

        <div id="section-tokens" style="display:none">
          <div class="form-group">
            <label>Token Amount</label>
            <input type="number" name="tokens" class="form-control" value="100" min="1" max="99999">
            <small class="form-text text-muted">RecCenterTokens sent directly to the player's gift inbox.</small>
          </div>
        </div>

        <hr style="border-color:var(--kr-border)">

        <div class="row">
          <div class="col-md-4">
            <div class="form-group">
              <label>XP Amount</label>
              <input type="number" name="xp" class="form-control" value="0" min="0" max="99999">
              <small class="form-text text-muted">Bonus XP included with the gift</small>
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group">
              <label>Level Grant</label>
              <input type="number" name="level" class="form-control" value="0" min="0" max="50">
              <small class="form-text text-muted">Levels to grant (0 = none)</small>
            </div>
          </div>
          <div class="col-md-4">
            <div class="form-group">
              <label>Rarity</label>
              <select name="rarity" class="form-control">
                <option value="0">Common</option>
                <option value="10" selected>Uncommon</option>
                <option value="20">Rare</option>
                <option value="30">Epic</option>
                <option value="50">Legendary</option>
              </select>
            </div>
          </div>
        </div>

        <div class="form-group">
          <label>Message</label>
          <input type="text" name="message" class="form-control" value="Gift from KittyRec admin" maxlength="256">
        </div>

        <div class="d-flex">
          <button type="submit" class="btn btn-primary">Send Gift</button>
          <a href="/admin/admin_players/gift-item/?player_id={{ player_id }}" class="btn btn-secondary ml-2">Reset</a>
        </div>
      </form>
    </div>
  </div>

  {% else %}
  <div class="card">
    <div class="card-body">
      <p class="text-muted">No player selected. Enter a player ID:</p>
      <form method="get">
        <div class="input-group">
          <input type="number" name="player_id" class="form-control" placeholder="Player ID" min="1">
          <div class="input-group-append">
            <button type="submit" class="btn btn-primary">Load Player</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  {% endif %}
</div>

<script>
var sections = ['item', 'consumable', 'equipment', 'tokens'];

function updateGiftType(val) {
  sections.forEach(function(s) {
    document.getElementById('section-' + s).style.display = s === val ? '' : 'none';
  });
}

function splitEquipment(val) {
  if (!val) {
    document.getElementById('equip-prefab').value = '';
    document.getElementById('equip-guid').value = '';
    return;
  }
  var parts = val.split('|');
  document.getElementById('equip-prefab').value = parts[0] || '';
  document.getElementById('equip-guid').value = parts[1] || '';
}

function setupFilter(filterId, selectId) {
  var filter = document.getElementById(filterId);
  var select = document.getElementById(selectId);
  if (!filter || !select) return;
  var opts = Array.from(select.options);
  filter.addEventListener('input', function() {
    var q = this.value.toLowerCase();
    opts.forEach(function(o, i) {
      if (i === 0) return;
      o.style.display = o.text.toLowerCase().includes(q) ? '' : 'none';
    });
  });
}

setupFilter('item-filter', 'item-select');
setupFilter('consumable-filter', 'consumable-select');
setupFilter('equipment-filter', 'equipment-select');
</script>
{% endblock %}