{% extends 'admin/custom_base.html' %}
{% block body %}
<div class="container-fluid mt-3">
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h4 class="mb-0">Manage Rooms</h4>
    <span class="badge badge-secondary">{{ all_rooms|length }} rooms</span>
  </div>

{% if SCOPE_ADMIN in scopes %}
  <div class="row mb-4">
    <div class="col-lg-8">
      <div class="card">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
          <strong>+ Create Room</strong>
        </div>
        <div class="card-body">
          <div class="form-row align-items-end">
            <div class="form-group col-md-3 mb-2">
              <label class="small font-weight-bold">Room Name <span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="cr-name" placeholder="e.g. CrimsonCauldron" required>
            </div>
            <div class="form-group col-md-3 mb-2">
              <label class="small font-weight-bold">Activity</label>
              <select class="form-control" id="cr-activity">
                <option value="">-- select --</option>
                {% for guid, name in activities.items() | sort(attribute='1') %}
                <option value="{{ guid }}">{{ name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="form-group col-md-2 mb-2">
              <label class="small font-weight-bold">Owner PID</label>
              <input type="number" class="form-control" id="cr-owner" value="1" min="1">
            </div>
            <div class="form-group col-md-2 mb-2">
              <label class="small font-weight-bold">Max Players</label>
              <input type="number" class="form-control" id="cr-max" value="20" min="1" max="40">
            </div>
            <div class="form-group col-md-2 mb-2">
              <button class="btn btn-success btn-block" onclick="createRoom()">Create</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-4">
      <div class="card">
        <div class="card-header bg-warning d-flex justify-content-between align-items-center">
          <strong>Gamemode Defaults</strong>
          <small class="text-dark">Per-activity flag overrides</small>
        </div>
        <div class="card-body p-2">
          <div style="max-height:160px;overflow-y:auto">
            <table class="table table-sm mb-0" id="gm-defaults-table">
              <thead><tr><th>Activity</th><th>Flags</th><th></th></tr></thead>
              <tbody>
              {% for guid, gm_val in gamemode_defaults.items() %}
              <tr data-guid="{{ guid }}">
                <td><small>{{ activities.get(guid, guid[:12]+'...') }}</small></td>
                <td><code>{{ gm_val }}</code> <small class="text-muted">({{ gm_val }})</small></td>
                <td><button class="btn btn-xs btn-outline-danger" onclick="removeGmDefault('{{ guid }}')">X</button></td>
              </tr>
              {% endfor %}
              {% if not gamemode_defaults %}
              <tr id="gm-empty"><td colspan="3" class="text-center text-muted py-2">No defaults set</td></tr>
              {% endif %}
              </tbody>
            </table>
          </div>
          <hr class="my-2">
          <div class="form-row align-items-end">
            <div class="form-group col-5 mb-0">
              <select class="form-control form-control-sm" id="gmd-activity">
                {% for guid, name in activities.items() | sort(attribute='1') %}
                <option value="{{ guid }}">{{ name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="form-group col-4 mb-0">
              <div class="d-flex flex-wrap">
                {% for flag in gamemode_flags %}
                <div class="form-check form-check-inline mr-2">
                  <input class="form-check-input gmd-flag" type="checkbox" value="{{ flag.value }}" id="gmd-f-{{ flag.value }}">
                  <label class="form-check-label small" for="gmd-f-{{ flag.value }}">{{ flag.name }}</label>
                </div>
                {% endfor %}
              </div>
            </div>
            <div class="form-group col-3 mb-0">
              <button class="btn btn-sm btn-warning btn-block" onclick="setGmDefault()">Set</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  {% endif %}

  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <strong>All Rooms</strong>
      <input type="text" class="form-control form-control-sm" id="room-filter" placeholder="Filter..." style="width:200px">
    </div>
    <div class="card-body p-0">
      <div style="max-height:600px;overflow-y:auto">
        <table class="table table-sm table-hover mb-0">
          <thead class="thead-dark">
            <tr>
              <th style="width:50px">ID</th>
              <th>Name</th>
              <th>Activity</th>
              <th style="width:60px">Max</th>
              <th style="width:70px">Sandbox</th>
              <th style="width:80px">Gamemode</th>
              <th style="width:80px">Owner</th>
              <th style="width:70px">Joins</th>
              <th style="width:130px">Created</th>
              {% if SCOPE_ADMIN in scopes %}<th style="width:120px">Actions</th>{% endif %}
            </tr>
          </thead>
          <tbody id="rooms-tbody">
            {% if not all_rooms %}
            <tr><td colspan="10" class="text-center text-muted py-4">No rooms yet.</td></tr>
            {% else %}
            {% for r in all_rooms %}
            <tr class="room-row" data-room-id="{{ r.RoomId }}" data-activity="{{ r.ActivityLevelId }}">
              <td>{{ r.RoomId }}</td>
              <td><strong>{{ r.Name }}</strong></td>
              <td><small>{{ activities.get(r.ActivityLevelId, '') }}</small><br><small class="text-monospace text-muted" style="font-size:.65rem">{{ r.ActivityLevelId }}</small></td>
              <td>{{ r.MaxPlayers }}</td>
              <td>{% if r.IsSandbox %}<span class="badge badge-info">Yes</span>{% else %}<span class="text-muted">No</span>{% endif %}</td>
              <td>
                {% if r.SpecialGamemode %}
                <span class="badge badge-warning">{{ r.SpecialGamemode }}</span>
                {% else %}
                <span class="text-muted">0</span>
                {% endif %}
              </td>
              <td>{{ r.CreatorPlayerId }}</td>
              <td>
                {% if r.Disabled %}
                <span class="badge badge-danger join-badge">Blocked</span>
                {% else %}
                <span class="badge badge-success join-badge">Open</span>
                {% endif %}
              </td>
              <td><small>{{ r.CreatedAt[:16] if r.CreatedAt else '' }}</small></td>
              {% if SCOPE_ADMIN in scopes %}
              <td class="text-nowrap">
                <button class="btn btn-xs btn-outline-primary mr-1" onclick="editRoom({{ r.RoomId }})">Edit</button>
                <button class="btn btn-xs btn-outline-danger" onclick="deleteRoom({{ r.RoomId }}, '{{ r.Name|e }}')">Del</button>
              </td>
              {% endif %}
            </tr>
            {% endfor %}
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

{% if SCOPE_ADMIN in scopes %}
<div class="kr-modal-backdrop" id="editRoomModal">
  <div class="kr-modal" style="max-width:700px;position:relative">
    <button type="button" class="kr-modal-close" onclick="KR.closeModal('editRoomModal')">&times;</button>
    <h3>Edit Room <span id="er-title" style="color:var(--text3);font-size:.9rem"></span></h3>
    <input type="hidden" id="er-id">
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem">
      <div class="form-group">
        <label>Room Name</label>
        <input type="text" id="er-name" maxlength="128">
      </div>
      <div class="form-group">
        <label>Activity Level</label>
        <select id="er-activity">
          {% for guid, name in activities.items() | sort(attribute='1') %}
          <option value="{{ guid }}">{{ name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="form-group">
        <label>Owner Player ID</label>
        <input type="number" id="er-creator" min="1">
      </div>
      <div class="form-group">
        <label>Max Players</label>
        <input type="number" id="er-max" min="1" max="40">
      </div>
      <div class="form-group">
        <label>Accessibility</label>
        <select id="er-accessibility">
          <option value="0">Public (0)</option>
          <option value="1">Private (1)</option>
          <option value="2">Unlisted (2)</option>
        </select>
      </div>
      <div class="form-group">
        <label>State</label>
        <select id="er-state">
          <option value="0">Active (0)</option>
          <option value="1">Archived (1)</option>
          <option value="2">Locked (2)</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label>Special Gamemode (flag enum)</label>
      <div style="display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.4rem">
        {% for flag in gamemode_flags %}
        <label style="display:flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:400;cursor:pointer">
          <input class="er-gm-flag" type="checkbox" value="{{ flag.value }}" id="er-gm-{{ flag.value }}" style="width:auto">
          {{ flag.name }} ({{ flag.value }})
        </label>
        {% endfor %}
      </div>
      <input type="number" id="er-gamemode" min="0" max="7" placeholder="Combined flag value">
      <small style="color:var(--text3);font-size:.7rem">0=None, 1=MaxFiringRate, 2=RandomEnemy, 4=RandomLoot (combine with +)</small>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem">
      <div class="form-group">
        <label>Description</label>
        <textarea id="er-description" rows="3" style="resize:vertical"></textarea>
      </div>
      <div class="form-group">
        <label>Options</label>
        <label style="display:flex;align-items:center;gap:.4rem;font-weight:400;cursor:pointer;margin-bottom:.3rem">
          <input type="checkbox" id="er-sandbox" style="width:auto"> Sandbox
        </label>
        <label style="display:flex;align-items:center;gap:.4rem;font-weight:400;cursor:pointer;margin-bottom:.6rem">
          <input type="checkbox" id="er-instanced" style="width:auto"> Instanced
        </label>
        <label style="display:flex;align-items:center;gap:.4rem;font-weight:400;cursor:pointer;color:var(--red)">
          <input type="checkbox" id="er-disabled" style="width:auto"> Disable Joins (Result 7)
        </label>
      </div>
      <div class="form-group">
        <label>Unity Asset Bundle URL</label>
        <input type="text" id="er-asset-url" placeholder="https://...">
      </div>
      <div class="form-group">
        <label>Unity Scene Name</label>
        <input type="text" id="er-scene-name" placeholder="SceneName">
      </div>
    </div>
    <div class="form-group">
      <label>Room Image</label>
      <div style="display:flex;align-items:center;gap:.75rem">
        <img id="er-image-preview" src="" style="width:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid var(--border);display:none">
        <div>
          <input type="file" id="er-image-file" accept="image/*">
          <button type="button" class="btn btn-ghost btn-sm" style="margin-top:.4rem" onclick="uploadRoomImage()">Upload Image</button>
          <small id="er-image-status" style="display:block;color:var(--text3);font-size:.72rem;margin-top:.25rem"></small>
        </div>
      </div>
    </div>
    <div class="form-group" style="margin-top:.75rem">
      <label>Permissions <span style="font-weight:400;color:var(--text3)">(co-owners &amp; hosts)</span></label>
      <div id="er-perms-list" style="margin-bottom:.5rem;font-size:.8rem"></div>
      <div style="display:flex;gap:.5rem;align-items:center">
        <input type="number" id="er-perm-pid" placeholder="Player ID" style="width:110px">
        <label style="display:flex;align-items:center;gap:.3rem;font-weight:400;cursor:pointer"><input type="checkbox" id="er-perm-host" style="width:auto"> Host</label>
        <label style="display:flex;align-items:center;gap:.3rem;font-weight:400;cursor:pointer"><input type="checkbox" id="er-perm-owner" style="width:auto"> Co-owner</label>
        <button type="button" class="btn btn-ghost btn-sm" onclick="addRoomPerm()">Add</button>
      </div>
    </div>
    <div class="kr-modal-footer">
      <button type="button" class="kr-btn kr-btn-ghost" onclick="KR.closeModal('editRoomModal')">Cancel</button>
      <button type="button" class="kr-btn kr-btn-primary" id="er-save-btn" onclick="saveRoom()">Save Changes</button>
    </div>
  </div>
</div>
{% endif %}

<script>
async function apiPut(url, body) {
  const r = await fetch(url, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body || {})});
  return r.json();
}
async function apiDel(url) {
  const r = await fetch(url, {method:'DELETE'});
  return r.json();
}
function showAlert(msg, type) { KR.toast(msg, type === 'danger' ? 'error' : type); }

async function createRoom() {
  const name = document.getElementById('cr-name').value.trim();
  const activity = document.getElementById('cr-activity').value;
  const owner = parseInt(document.getElementById('cr-owner').value) || 1;
  const max = parseInt(document.getElementById('cr-max').value) || 20;
  if (!name) { KR.toast('Room name required.', 'error'); return; }
  if (!activity) { KR.toast('Select an activity.', 'error'); return; }
  const d = await KR.apiPost('/admin/api/rooms/create', {name, level_id: activity, owner_pid: owner, max_players: max});
  if (d.error) { showAlert(d.error, 'danger'); return; }
  showAlert('Room created (id=' + d.room_id + ')', 'success');
  setTimeout(() => location.reload(), 800);
}

async function deleteRoom(id, name) {
  if (!confirm('Delete room "' + name + '" (id=' + id + ')?')) return;
  const d = await apiDel('/admin/api/rooms/' + id);
  if (d.error) { showAlert(d.error, 'danger'); return; }
  document.querySelector('tr[data-room-id="' + id + '"]').remove();
  showAlert('Room deleted.', 'success');
}

async function editRoom(id) {
  const roomRes = await fetch('/admin/api/rooms/' + id);
  const room = await roomRes.json();
  if (room.error) { KR.toast(room.error, 'error'); return; }
  document.getElementById('er-id').value = room.RoomId;
  document.getElementById('er-title').textContent = '#' + room.RoomId;
  document.getElementById('er-name').value = room.Name;
  document.getElementById('er-activity').value = room.ActivityLevelId;
  document.getElementById('er-creator').value = room.CreatorPlayerId;
  document.getElementById('er-max').value = room.MaxPlayers;
  document.getElementById('er-accessibility').value = room.Accessibility;
  document.getElementById('er-state').value = room.State;
  document.getElementById('er-gamemode').value = room.SpecialGamemode || 0;
  document.getElementById('er-description').value = room.Description || '';
  document.getElementById('er-asset-url').value = room.UnityAssetBundleUrl || '';
  document.getElementById('er-scene-name').value = room.UnitySceneName || '';
  document.getElementById('er-sandbox').checked = room.IsSandbox;
  document.getElementById('er-instanced').checked = room.Instanced;
  document.getElementById('er-disabled').checked = !!room.Disabled;
  updateGmCheckboxes(room.SpecialGamemode || 0);
  const preview = document.getElementById('er-image-preview');
  const imgStatus = document.getElementById('er-image-status');
  if (room.DataBlobName) {
    preview.src = '/alt/' + room.DataBlobName;
    preview.style.display = 'block';
    imgStatus.textContent = room.DataBlobName;
  } else {
    preview.style.display = 'none';
    imgStatus.textContent = 'No image set';
  }
  document.getElementById('er-image-file').value = '';
  document.getElementById('er-perm-pid').value = '';
  document.getElementById('er-perm-host').checked = false;
  document.getElementById('er-perm-owner').checked = false;
  loadRoomPerms(id);

  KR.openModal('editRoomModal');
}

async function loadRoomPerms(id) {
  const list = document.getElementById('er-perms-list');
  if (!list) return;
  const d = await KR.apiGet('/admin/api/rooms/' + id + '/permissions');
  if (!d || d.error) { list.textContent = 'Error loading'; return; }
  const rid = id;
  if (!d.permissions.length) { list.innerHTML = '<span style="color:var(--text3)">No additional permissions</span>'; return; }
  list.innerHTML = d.permissions.map(p =>
    `<div style="display:flex;align-items:center;gap:.5rem;padding:.25rem 0;border-bottom:1px solid var(--bg3)">
      <span style="font-weight:600;color:var(--text);min-width:100px">${KR.escapeHtml(p.username)}</span>
      <span style="color:var(--text3);font-size:.72rem">#${p.player_id}</span>
      ${p.is_owner ? '<span class="badge badge-purple">Co-owner</span>' : ''}
      ${p.is_host ? '<span class="badge badge-teal">Host</span>' : ''}
      <button class="btn btn-ghost btn-sm" style="padding:1px 6px;font-size:.7rem;color:var(--red);margin-left:auto" onclick="removeRoomPerm(${rid}, ${p.player_id})">✕</button>
    </div>`
  ).join('');
}

async function addRoomPerm() {
  const id = document.getElementById('er-id').value;
  const pid = parseInt(document.getElementById('er-perm-pid').value);
  if (!pid) { KR.toast('Enter a player ID', 'error'); return; }
  const is_host = document.getElementById('er-perm-host').checked;
  const is_owner = document.getElementById('er-perm-owner').checked;
  if (!is_host && !is_owner) { KR.toast('Select host or co-owner', 'error'); return; }
  const d = await KR.apiPost('/admin/api/rooms/' + id + '/permissions', {player_id: pid, is_host, is_owner});
  if (d.ok) { KR.toast('Permission added'); loadRoomPerms(id); document.getElementById('er-perm-pid').value = ''; }
  else KR.toast(d.error || 'Error', 'error');
}

async function removeRoomPerm(room_id, player_id) {
  const r = await fetch('/admin/api/rooms/' + room_id + '/permissions/' + player_id, {method: 'DELETE'});
  const d = await r.json();
  if (d.ok) { KR.toast('Permission removed'); loadRoomPerms(room_id); }
  else KR.toast(d.error || 'Error', 'error');
}

async function uploadRoomImage() {
  const id = document.getElementById('er-id').value;
  const fileInput = document.getElementById('er-image-file');
  const status = document.getElementById('er-image-status');
  if (!fileInput.files.length) { status.textContent = 'Select an image first'; return; }
  const formData = new FormData();
  formData.append('image', fileInput.files[0]);
  status.textContent = 'Uploading...';
  try {
    const r = await fetch('/admin/api/rooms/' + id + '/image', {method: 'POST', body: formData});
    const d = await r.json();
    if (d.error) { status.textContent = 'Error: ' + d.error; return; }
    const preview = document.getElementById('er-image-preview');
    preview.src = '/alt/' + d.image_name + '?' + Date.now();
    preview.style.display = 'block';
    status.textContent = 'Uploaded: ' + d.image_name;
  } catch(e) { status.textContent = 'Upload failed'; }
}

function updateGmCheckboxes(val) {
  document.querySelectorAll('.er-gm-flag').forEach(cb => {
    cb.checked = (val & parseInt(cb.value)) !== 0;
  });
}

document.querySelectorAll('.er-gm-flag').forEach(cb => {
  cb.addEventListener('change', () => {
    let val = 0;
    document.querySelectorAll('.er-gm-flag:checked').forEach(c => val |= parseInt(c.value));
    document.getElementById('er-gamemode').value = val;
  });
});

document.getElementById('er-gamemode') && document.getElementById('er-gamemode').addEventListener('input', function() {
  updateGmCheckboxes(parseInt(this.value) || 0);
});

async function saveRoom() {
  const id = document.getElementById('er-id').value;
  const data = {
    name: document.getElementById('er-name').value.trim(),
    activity_level_id: document.getElementById('er-activity').value,
    creator_id: parseInt(document.getElementById('er-creator').value) || 1,
    max_players: parseInt(document.getElementById('er-max').value) || 20,
    accessibility: parseInt(document.getElementById('er-accessibility').value),
    state: parseInt(document.getElementById('er-state').value),
    special_gamemode: parseInt(document.getElementById('er-gamemode').value) || 0,
    description: document.getElementById('er-description').value,
    is_sandbox: document.getElementById('er-sandbox').checked,
    instanced: document.getElementById('er-instanced').checked,
    unity_asset_bundle_url: document.getElementById('er-asset-url').value,
    unity_scene_name: document.getElementById('er-scene-name').value,
  };
  const btn = document.getElementById('er-save-btn');
  btn.disabled = true;
  const disableJoins = document.getElementById('er-disabled').checked;
  await KR.apiPost('/admin/api/rooms/' + id + '/disabled', {disabled: disableJoins});
  const d = await apiPut('/admin/api/rooms/' + id, data);
  btn.disabled = false;
  if (d.error) {
    KR.toast(d.error, 'error');
  } else {
    KR.toast('Room saved!');
    setTimeout(() => { KR.closeModal('editRoomModal'); location.reload(); }, 800);
  }
}

async function setGmDefault() {
  const activity = document.getElementById('gmd-activity').value;
  let val = 0;
  document.querySelectorAll('.gmd-flag:checked').forEach(c => val |= parseInt(c.value));
  const d = await KR.apiPost('/admin/api/gamemode_defaults', {activity_level_id: activity, special_gamemode: val});
  if (d.error) { showAlert(d.error, 'danger'); return; }
  showAlert('Gamemode default set (flags=' + val + ')', 'success');
  setTimeout(() => location.reload(), 600);
}

async function removeGmDefault(guid) {
  const d = await KR.apiPost('/admin/api/gamemode_defaults', {activity_level_id: guid, special_gamemode: 0});
  if (d.ok) {
    const row = document.querySelector('#gm-defaults-table tr[data-guid="' + guid + '"]');
    if (row) row.remove();
    showAlert('Default removed.', 'success');
  }
}

const filterInput = document.getElementById('room-filter');
if (filterInput) {
  filterInput.addEventListener('input', function() {
    const q = this.value.toLowerCase();
    document.querySelectorAll('.room-row').forEach(row => {
      row.style.display = row.textContent.toLowerCase().includes(q) ? '' : 'none';
    });
  });
}
</script>
{% endblock %}