{# Unified gift modal. Include once per page. Use: openGiftModal(pid, username). Optional: window.onGiftSuccess(pid). #}
<div class="kr-modal-backdrop" id="kr-gift-modal">
  <div class="kr-modal" style="position:relative;max-width:600px">
    <button type="button" class="kr-modal-close" onclick="KR.closeModal('kr-gift-modal')">&times;</button>
    <h3>Gift <span id="kr-gift-name">Player</span></h3>
    <input type="hidden" id="kr-gift-pid">

    <div class="form-group">
      <label>Gift Type</label>
      <select id="kr-gift-type" onchange="krGiftTypeChange(this.value)">
        <option value="item">Avatar Item</option>
        <option value="consumable">Consumable</option>
        <option value="equipment">Equipment Skin</option>
        <option value="tokens">Tokens (RecCenterTokens)</option>
      </select>
    </div>

    <div id="kr-gift-section-item">
      <div class="form-group">
        <label>Avatar Item <span style="color:var(--text3);font-size:.75rem">(optional — leave blank for XP only)</span></label>
        <input type="text" id="kr-gift-avatar-filter" placeholder="Filter items…" oninput="krFilterSelect('kr-gift-avatar','kr-gift-avatar-filter')" style="margin-bottom:.4rem">
        <select id="kr-gift-avatar" size="6" style="width:100%;font-size:.8rem">
          <option value="">— none / XP only —</option>
        </select>
        <div style="font-size:.7rem;color:var(--text3);margin-top:.25rem" id="kr-gift-avatar-count"></div>
      </div>
    </div>

    <div id="kr-gift-section-consumable" style="display:none">
      <div class="form-group">
        <label>Consumable</label>
        <input type="text" id="kr-gift-cons-filter" placeholder="Filter consumables…" oninput="krFilterSelect('kr-gift-consumable','kr-gift-cons-filter')" style="margin-bottom:.4rem">
        <select id="kr-gift-consumable" size="6" style="width:100%;font-size:.8rem">
          <option value="">Loading…</option>
        </select>
        <div style="font-size:.7rem;color:var(--text3);margin-top:.25rem" id="kr-gift-cons-count"></div>
      </div>
    </div>

    <div id="kr-gift-section-equipment" style="display:none">
      <div class="form-group">
        <label>Equipment Skin</label>
        <input type="text" id="kr-gift-equip-filter" placeholder="Filter equipment…" oninput="krFilterSelect('kr-gift-equipment','kr-gift-equip-filter')" style="margin-bottom:.4rem">
        <select id="kr-gift-equipment" size="6" style="width:100%;font-size:.8rem">
          <option value="">Loading…</option>
        </select>
        <div style="font-size:.7rem;color:var(--text3);margin-top:.25rem" id="kr-gift-equip-count"></div>
      </div>
    </div>

    <div id="kr-gift-section-tokens" style="display:none">
      <div class="form-group">
        <label>Token Amount (RecCenterTokens)</label>
        <input type="number" id="kr-gift-tokens" value="100" min="1" max="99999">
      </div>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:.65rem">
      <div class="form-group">
        <label>XP</label>
        <input type="number" id="kr-gift-xp" value="0" min="0" max="99999">
      </div>
      <div class="form-group">
        <label>Level Grant</label>
        <input type="number" id="kr-gift-level" value="0" min="0" max="50">
      </div>
      <div class="form-group">
        <label>Rarity</label>
        <select id="kr-gift-rarity">
          <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 class="form-group">
      <label>Message</label>
      <input type="text" id="kr-gift-msg" placeholder="From the KittyRec team!" maxlength="256">
    </div>

    <div class="kr-modal-footer">
      <button class="kr-btn kr-btn-ghost" type="button" onclick="KR.closeModal('kr-gift-modal')">Cancel</button>
      <button class="kr-btn kr-btn-primary" type="button" onclick="KR.confirmGift()">Send Gift</button>
    </div>
  </div>
</div>
<script>
(function () {
  const KR = window.KR = window.KR || {};
  if (window.openGiftModal) return;

  let _loaded = { avatar: false, consumable: false, equipment: false };

  function krFilterSelect(selId, filterId) {
    const q = document.getElementById(filterId).value.toLowerCase();
    const sel = document.getElementById(selId);
    Array.from(sel.options).forEach(o => {
      o.style.display = (!q || o.text.toLowerCase().includes(q)) ? '' : 'none';
    });
  }
  window.krFilterSelect = krFilterSelect;

  window.krGiftTypeChange = function(val) {
    ['item','consumable','equipment','tokens'].forEach(s => {
      document.getElementById('kr-gift-section-' + s).style.display = s === val ? '' : 'none';
    });
    if (val === 'consumable' && !_loaded.consumable) loadConsumables();
    if (val === 'equipment' && !_loaded.equipment) loadEquipment();
  };

  async function loadAvatarItems() {
    if (_loaded.avatar) return;
    try {
      const items = await KR.apiGet('/admin/api/avatar_items');
      const sel = document.getElementById('kr-gift-avatar');
      (items || []).forEach(it => {
        const o = document.createElement('option');
        o.value = it.AvatarItemDesc;
        o.textContent = it.FriendlyName || it.AvatarItemDesc;
        sel.appendChild(o);
      });
      document.getElementById('kr-gift-avatar-count').textContent = (items || []).length + ' items available';
      _loaded.avatar = true;
    } catch(e) {}
  }

  async function loadConsumables() {
    try {
      const items = await KR.apiGet('/admin/api/consumables');
      const sel = document.getElementById('kr-gift-consumable');
      sel.innerHTML = '<option value="">— select —</option>';
      (items || []).forEach(it => {
        const o = document.createElement('option');
        o.value = it.ConsumableItemDesc;
        o.textContent = it.ConsumableItemDesc + ' (cat:' + it.Category + ')';
        sel.appendChild(o);
      });
      document.getElementById('kr-gift-cons-count').textContent = (items || []).length + ' consumables available';
      _loaded.consumable = true;
    } catch(e) { document.getElementById('kr-gift-consumable').innerHTML = '<option value="">Error loading</option>'; }
  }

  async function loadEquipment() {
    try {
      const items = await KR.apiGet('/admin/api/equipment');
      const sel = document.getElementById('kr-gift-equipment');
      sel.innerHTML = '<option value="">— select —</option>';
      (items || []).forEach(it => {
        const o = document.createElement('option');
        o.value = it.PrefabName + '|' + it.ModificationGuid;
        o.textContent = it.PrefabName + ' — ' + it.ModificationGuid.slice(0,12) + '…';
        sel.appendChild(o);
      });
      document.getElementById('kr-gift-equip-count').textContent = (items || []).length + ' skins available';
      _loaded.equipment = true;
    } catch(e) { document.getElementById('kr-gift-equipment').innerHTML = '<option value="">Error loading</option>'; }
  }

  window.openGiftModal = function (pid, username) {
    document.getElementById('kr-gift-pid').value = pid;
    document.getElementById('kr-gift-name').textContent = username || ('#' + pid);
    document.getElementById('kr-gift-type').value = 'item';
    document.getElementById('kr-gift-xp').value = 0;
    document.getElementById('kr-gift-level').value = 0;
    document.getElementById('kr-gift-tokens').value = 100;
    document.getElementById('kr-gift-rarity').value = '10';
    document.getElementById('kr-gift-avatar').value = '';
    document.getElementById('kr-gift-avatar-filter').value = '';
    document.getElementById('kr-gift-msg').value = '';
    krGiftTypeChange('item');
    loadAvatarItems();
    KR.openModal('kr-gift-modal');
  };

  KR.confirmGift = async function () {
    try {
      const pid    = parseInt(document.getElementById('kr-gift-pid').value);
      const type   = document.getElementById('kr-gift-type').value;
      const xp     = parseInt(document.getElementById('kr-gift-xp').value) || 0;
      const level  = parseInt(document.getElementById('kr-gift-level').value) || 0;
      const rarity = parseInt(document.getElementById('kr-gift-rarity').value);
      const msg    = document.getElementById('kr-gift-msg').value;

      const payload = { xp, level, rarity, message: msg,
        avatar_item_desc: '', consumable_item_desc: '', prefab: '', guid: '',
        currency_type: 0, currency: 0 };

      if (type === 'item') {
        payload.avatar_item_desc = document.getElementById('kr-gift-avatar').value;
      } else if (type === 'consumable') {
        payload.consumable_item_desc = document.getElementById('kr-gift-consumable').value;
        if (!payload.consumable_item_desc) { KR.toast('Select a consumable', 'error'); return; }
      } else if (type === 'equipment') {
        const eq = document.getElementById('kr-gift-equipment').value;
        if (!eq) { KR.toast('Select an equipment item', 'error'); return; }
        const [p, g] = eq.split('|');
        payload.prefab = p || ''; payload.guid = g || '';
      } else if (type === 'tokens') {
        payload.currency_type = 2;
        payload.currency = parseInt(document.getElementById('kr-gift-tokens').value) || 0;
        if (payload.currency <= 0) { KR.toast('Token amount must be > 0', 'error'); return; }
      }

      const btn = document.querySelector('#kr-gift-modal .kr-modal-footer .kr-btn-primary');
      if (btn) { btn.disabled = true; btn.textContent = 'Sending…'; }
      let d;
      try {
        d = await KR.apiPost('/admin/api/gift_player/' + pid, payload);
      } finally {
        if (btn) { btn.disabled = false; btn.textContent = 'Send Gift'; }
      }
      if (d && d.error) { KR.toast(d.error, 'error'); return; }
      KR.toast('Gift sent!');
      KR.closeModal('kr-gift-modal');
      if (typeof window.onGiftSuccess === 'function') window.onGiftSuccess(pid);
    } catch (err) {
      KR.toast('Error: ' + err.message, 'error');
    }
  };
})();
</script>