/* Campus admin panel: the main website's look and behaviour (served at /admin/home_page.js).
 *
 *  - Theme: the site's light / dark / autumn and accent, read from the SAME localStorage keys the
 *    website uses ('campus-theme', 'campus-accent'), so the panel always matches the site.
 *  - Side drawer: the section list; on narrow screens it slides in from the cat button.
 *  - Room editor: "View Room Details", "View Dorm" and "Edit" open it in place; the old
 *    /admin/home/view_room/<id> and /admin/edit-room/<id> links land here with ?room=<id>.
 */
(function () {
  'use strict';

  // ───── theme (mirrors Website/app.js) ─────
  var THEME_KEY = 'campus-theme', ACCENT_KEY = 'campus-accent';
  var THEMES = ['light', 'dark', 'autumn'];
  var SUN = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>';
  var MOON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>';
  var LEAF = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 3c-7 0-13 3-16 9 3-1 6-1 9 0-4 1-7 3-9 8 6-2 12-4 14-9 1-2.5 2-5 2-8z"/><path d="M4 20l9-9"/></svg>';

  function store(k, v) { try { if (v === undefined) return localStorage.getItem(k); localStorage.setItem(k, v); } catch (e) { return null; } }
  function hexRgb(h) { h = h.replace('#', ''); return [0, 2, 4].map(function (i) { return parseInt(h.slice(i, i + 2), 16); }); }

  function applyTheme(t) {
    if (THEMES.indexOf(t) < 0) t = 'light';
    document.documentElement.setAttribute('data-theme', t);
    syncToggles();
  }
  function applyAccent(c) {
    if (!c || !/^#[0-9a-f]{6}$/i.test(c)) return;
    var s = document.documentElement.style, rgb = hexRgb(c);
    s.setProperty('--red', c);
    s.setProperty('--red-dark', 'rgb(' + rgb.map(function (x) { return x * 0.82 | 0; }).join(',') + ')');
    s.setProperty('--red-soft', 'rgba(' + rgb.join(',') + ',0.15)');
  }
  function current() { return document.documentElement.getAttribute('data-theme') || 'light'; }
  function nextTheme() { return THEMES[(THEMES.indexOf(current()) + 1) % THEMES.length]; }
  function syncToggles() {
    var n = nextTheme();
    var label = { light: SUN + '<span>Light mode</span>', dark: MOON + '<span>Dark mode</span>', autumn: LEAF + '<span>Autumn mode</span>' }[n];
    var icon = { light: SUN, dark: MOON, autumn: LEAF }[n];
    document.querySelectorAll('.cd-theme-toggle').forEach(function (b) { b.innerHTML = label; });
    document.querySelectorAll('.theme-icon-btn').forEach(function (b) { b.innerHTML = icon; b.title = 'Switch to ' + n + ' mode'; b.setAttribute('aria-label', b.title); });
    document.querySelectorAll('.cd-mode').forEach(function (b) { b.classList.toggle('active', b.dataset.theme === current()); });
  }
  function cycleTheme() { var n = nextTheme(); store(THEME_KEY, n); applyTheme(n); }

  applyTheme(store(THEME_KEY) || 'light');
  applyAccent(store(ACCENT_KEY));
  // Another tab (the website, or a second panel tab) changed the theme: follow it.
  window.addEventListener('storage', function (e) {
    if (e.key === THEME_KEY) applyTheme(e.newValue || 'light');
    if (e.key === ACCENT_KEY) applyAccent(e.newValue);
  });

  // ───── drawer ─────
  function setDrawer(open) {
    var side = document.getElementById('adminSidebar'), scrim = document.getElementById('adminScrim');
    if (side) side.classList.toggle('open', open);
    if (scrim) scrim.classList.toggle('open', open);
  }

  function ready(fn) { if (document.readyState !== 'loading') fn(); else document.addEventListener('DOMContentLoaded', fn); }

  ready(function () {
    syncToggles();
    document.querySelectorAll('.cd-theme-toggle, .theme-icon-btn').forEach(function (b) { b.addEventListener('click', cycleTheme); });
    document.querySelectorAll('.cd-mode').forEach(function (b) {
      b.addEventListener('click', function () { store(THEME_KEY, b.dataset.theme); applyTheme(b.dataset.theme); });
    });
    var burger = document.getElementById('adminBurger');
    if (burger) burger.addEventListener('click', function () {
      var side = document.getElementById('adminSidebar');
      setDrawer(!(side && side.classList.contains('open')));
    });
    var scrim = document.getElementById('adminScrim');
    if (scrim) scrim.addEventListener('click', function () { setDrawer(false); });
    // Picking a section on a phone closes the drawer.
    document.querySelectorAll('#adminSidebar .tab').forEach(function (t) {
      t.addEventListener('click', function () { if (window.innerWidth <= 900) setDrawer(false); });
    });

    // Room links open the editor in place instead of leaving the panel.
    document.addEventListener('click', function (e) {
      var a = e.target.closest && e.target.closest('a[href*="/admin/home/view_room/"], a[href*="/admin/edit-room/"]');
      if (!a) return;
      var id = (a.getAttribute('href').match(/\/(\d+)\/?$/) || [])[1];
      if (!id) return;
      e.preventDefault();
      openRoomEditor(id);
    });

    var q = new URLSearchParams(location.search).get('room');
    if (q && /^\d+$/.test(q)) {
      openRoomEditor(q);
      history.replaceState(null, '', location.pathname);
    }
  });

  // ───── room editor ─────
  function esc(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]; }); }
  var ACCESS = ['Private', 'Public', 'Unlisted', 'Dev only', 'Dev unlisted'];

  function modal() {
    var m = document.getElementById('room-editor');
    if (m) return m;
    m = document.createElement('div');
    m.id = 'room-editor';
    // Its own overlay class: the panel's start-up code hides every .popup-overlay, which closed
    // an editor opened from a ?room= link the moment the page finished loading.
    m.className = 're-overlay';
    m.style.cssText = 'display:none; position:fixed; inset:0; z-index:2000; align-items:center; justify-content:center; padding:16px;'
      + ' background:rgba(10,8,20,.5); backdrop-filter:blur(3px);';
    m.innerHTML = '<div class="popup" style="max-width:780px; width:100%; max-height:90vh; overflow:auto; padding:22px 24px; position:relative;">'
      + '<button type="button" class="icon-btn" id="re-close" aria-label="Close" style="position:absolute; top:12px; right:12px;">'
      + '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></button>'
      + '<div id="re-body">Loading…</div></div>';
    document.body.appendChild(m);
    m.addEventListener('click', function (e) { if (e.target === m) close(); });
    m.querySelector('#re-close').addEventListener('click', close);
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && m.style.display === 'flex') close(); });
    function close() { m.style.display = 'none'; }
    return m;
  }

  function openRoomEditor(roomId) {
    var m = modal(), body = m.querySelector('#re-body');
    m.style.display = 'flex';
    body.innerHTML = '<p style="color:var(--muted)">Loading room ' + esc(roomId) + '…</p>';
    fetch('/admin/api/room/' + encodeURIComponent(roomId), { credentials: 'same-origin' })
      .then(function (r) { return r.json(); })
      .then(function (d) {
        if (!d.success) { body.innerHTML = '<h3>Room ' + esc(roomId) + '</h3><p style="color:var(--danger)">' + esc(d.message || 'Not found.') + '</p>'; return; }
        var r = d.room;
        var subs = (r.SubRooms || []).map(function (s) { return '<span class="re-chip">' + esc(s.Name || ('subroom ' + s.SubRoomId)) + ' · ' + s.MaxPlayers + ' max</span>'; }).join('');
        body.innerHTML =
          '<h3 style="margin:0 36px 4px 0;">^' + esc(r.Name) + '</h3>'
          + '<div class="re-meta">'
          + '<span class="re-chip">id ' + r.RoomId + '</span>'
          + '<span class="re-chip">by ' + (r.CreatorName ? '@' + esc(r.CreatorName) : '#' + r.CreatorAccountId) + '</span>'
          + '<span class="re-chip">' + r.PlayersNow + ' playing now</span>'
          + (r.IsDorm ? '<span class="re-chip">dorm</span>' : '') + (r.IsRRO ? '<span class="re-chip">Rec Room Original</span>' : '')
          + subs + '</div>'
          + '<img class="re-img" src="/img/' + esc(r.ImageName || 'DefaultRoomImage.jpg') + '?width=640" alt="">'
          + '<div class="re-grid" style="margin-top:16px;">'
          + '<label class="full">Name<input type="text" id="re-name" value="' + esc(r.Name) + '"></label>'
          + '<label class="full">Description<textarea id="re-desc" rows="3">' + esc(r.Description) + '</textarea></label>'
          + '<label>Visibility<select id="re-acc">' + ACCESS.map(function (n, i) { return '<option value="' + i + '"' + (i === r.Accessibility ? ' selected' : '') + '>' + n + '</option>'; }).join('') + '</select></label>'
          + '<label>Max players<input type="number" id="re-max" min="1" max="100" value="' + r.MaxPlayers + '"></label>'
          + '<label class="full" style="flex-direction:row; align-items:center; gap:10px;"><input type="checkbox" id="re-clone"' + (r.CloningAllowed ? ' checked' : '') + '> Allow cloning</label>'
          + '<label class="full" style="flex-direction:row; align-items:center; gap:10px;"><input type="checkbox" id="re-dev"' + (r.DevRoom ? ' checked' : '') + '> Dev room (developer chips)</label>'
          + '</div>'
          + '<div style="display:flex; gap:10px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap;">'
          + '<a class="btn-login" href="/room/' + encodeURIComponent(r.Name) + '" target="_blank" rel="noopener">View on site</a>'
          + '<button type="button" class="btn btn-primary" id="re-save">Save changes</button>'
          + '</div><p id="re-msg" style="margin:10px 0 0; text-align:right;"></p>'
          + '<div id="re-people" style="margin-top:22px; border-top:1px solid var(--line); padding-top:16px;"><p style="color:var(--muted)">Loading people…</p></div>';
        body.querySelector('#re-save').addEventListener('click', function () { save(r.RoomId); });
        loadPeople(r.RoomId);
      })
      .catch(function () { body.innerHTML = '<p style="color:var(--danger)">Could not load the room.</p>'; });
  }

  function save(roomId) {
    var f = new FormData(), $ = function (id) { return document.getElementById(id); };
    f.append('roomId', roomId);
    f.append('name', $('re-name').value);
    f.append('description', $('re-desc').value);
    f.append('accessibility', $('re-acc').value);
    f.append('maxPlayers', $('re-max').value);
    f.append('cloningAllowed', $('re-clone').checked ? 'true' : 'false');
    f.append('devRoom', $('re-dev').checked ? 'true' : 'false');
    var msg = $('re-msg'), btn = $('re-save');
    btn.disabled = true; msg.style.color = 'var(--muted)'; msg.textContent = 'Saving…';
    fetch('/admin/api/edit_room', { method: 'POST', body: f, credentials: 'same-origin' })
      .then(function (r) { return r.json(); })
      .then(function (d) { msg.style.color = d.success ? 'var(--ok)' : 'var(--danger)'; msg.textContent = d.message || (d.success ? 'Saved.' : 'Failed.'); })
      .catch(function () { msg.style.color = 'var(--danger)'; msg.textContent = 'Save failed.'; })
      .finally(function () { btn.disabled = false; });
  }

  // ───── people: owner, roles, bans (AdminRoomPeopleController) ─────
  function who(w) {
    if (!w || !w.accountId) return '<i>nobody</i>';
    return (w.username ? '@' + esc(w.username) : '#' + w.accountId)
      + (w.displayName && w.displayName !== w.username ? ' <span style="color:var(--muted)">(' + esc(w.displayName) + ')</span>' : '')
      + ' <span style="color:var(--muted); font-size:.85em;">#' + w.accountId + '</span>';
  }
  function when(t) { return t ? new Date(t).toLocaleString() : ''; }
  var BAN_LENGTHS = [[0, 'Until unbanned'], [60, '1 hour'], [1440, '1 day'], [10080, '1 week'], [43200, '30 days']];

  function peoplePost(roomId, what, fields) {
    var f = new FormData();
    Object.keys(fields).forEach(function (k) { f.append(k, fields[k]); });
    var msg = document.getElementById('rp-msg');
    if (msg) { msg.style.color = 'var(--muted)'; msg.textContent = 'Working…'; }
    return fetch('/admin/api/room/' + roomId + '/' + what, { method: 'POST', body: f, credentials: 'same-origin' })
      .then(function (r) { return r.json(); })
      .then(function (d) {
        loadPeople(roomId, d.message, d.success);
        return d;
      })
      .catch(function () { if (msg) { msg.style.color = 'var(--danger)'; msg.textContent = 'That failed.'; } });
  }

  function loadPeople(roomId, note, ok) {
    var box = document.getElementById('re-people');
    if (!box) return;
    fetch('/admin/api/room/' + encodeURIComponent(roomId) + '/people', { credentials: 'same-origin' })
      .then(function (r) { return r.json(); })
      .then(function (d) {
        if (!d.success) { box.innerHTML = '<p style="color:var(--danger)">' + esc(d.message || 'Could not load people.') + '</p>'; return; }
        var roleOpts = function (sel) {
          return d.grantable.map(function (g) { return '<option value="' + g.value + '"' + (g.value === sel ? ' selected' : '') + '>' + esc(g.name) + '</option>'; }).join('');
        };
        var rows = d.roles.length ? d.roles.map(function (r) {
          return '<div class="rp-row" style="display:flex; gap:10px; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line);">'
            + '<span>' + who(r.who) + (r.pending ? ' <span class="re-chip">invited as ' + esc(r.pendingRole) + '</span>' : '') + '</span>'
            + '<span style="display:flex; gap:6px; align-items:center;"><select class="rp-role" data-id="' + r.who.accountId + '">' + roleOpts(r.role) + '</select>'
            + '<button type="button" class="btn btn-danger rp-ban" data-id="' + r.who.accountId + '">Ban</button></span></div>';
        }).join('') : '<p style="color:var(--muted); margin:6px 0;">Nobody else has a role on this room.</p>';
        var bans = d.bans.length ? d.bans.map(function (b) {
          return '<div style="display:flex; gap:10px; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line);">'
            + '<span>' + who(b.who) + '<br><span style="color:var(--muted); font-size:.85em;">by ' + who(b.by) + ' · ' + when(b.start)
            + (b.end ? ' · until ' + when(b.end) : ' · until unbanned') + (b.reason ? ' · “' + esc(b.reason) + '”' : '') + '</span></span>'
            + '<button type="button" class="btn btn-primary rp-unban" data-id="' + b.who.accountId + '">Unban</button></div>';
        }).join('') : '<p style="color:var(--muted); margin:6px 0;">Nobody is banned from this room.</p>';
        var hist = d.history.length ? '<details style="margin-top:8px;"><summary style="cursor:pointer; color:var(--muted);">Earlier bans (' + d.history.length + ')</summary>'
          + d.history.map(function (h) {
            return '<div style="font-size:.85em; padding:4px 0; border-bottom:1px solid var(--line);">' + who(h.who) + ' - banned by ' + who(h.by) + ' ' + when(h.start)
              + (h.reason ? ' “' + esc(h.reason) + '”' : '') + ' - <b>' + esc(h.lifted) + '</b>' + (h.unbannedBy ? ' by ' + who(h.unbannedBy) : '') + '</div>';
          }).join('') + '</details>' : '';

        box.innerHTML =
          '<h4 style="margin:0 0 8px;">People</h4>'
          + '<p id="rp-msg" style="margin:0 0 10px; min-height:1.2em; color:' + (ok === false ? 'var(--danger)' : 'var(--ok)') + ';">' + esc(note || '') + '</p>'
          + '<div style="margin-bottom:14px;"><b>Owner:</b> ' + who(d.owner) + '</div>'
          + (d.isDorm ? '<p style="color:var(--muted); margin:0 0 12px;">This is a dorm - it belongs to its player and can\'t be given away.</p>'
            : '<div class="re-grid" style="margin-bottom:16px;">'
              + '<label>Transfer ownership to<input type="text" id="rp-owner" placeholder="@username or account id"></label>'
              + '<label style="justify-content:flex-end;"><span style="display:flex; gap:8px; align-items:center;"><input type="checkbox" id="rp-keep" checked> keep the old owner as co-owner</span>'
              + '<button type="button" class="btn btn-warning" id="rp-transfer" style="margin-top:6px;">Transfer</button></label></div>')
          + '<h5 style="margin:6px 0;">Roles</h5>' + rows
          + '<div class="re-grid" style="margin:10px 0 18px;">'
          + '<label>Give a role to<input type="text" id="rp-rolewho" placeholder="@username or account id"></label>'
          + '<label>Role<span style="display:flex; gap:6px;"><select id="rp-rolepick">' + roleOpts(20).replace('value="0"', 'value="0" disabled') + '</select>'
          + '<button type="button" class="btn btn-primary" id="rp-roleadd">Give role</button></span></label></div>'
          + '<h5 style="margin:6px 0;">Bans</h5>' + bans + hist
          + '<div class="re-grid" style="margin-top:10px;">'
          + '<label>Ban<input type="text" id="rp-banwho" placeholder="@username or account id"></label>'
          + '<label>For<select id="rp-banlen">' + BAN_LENGTHS.map(function (x) { return '<option value="' + x[0] + '">' + x[1] + '</option>'; }).join('') + '</select></label>'
          + '<label class="full">Reason (optional)<span style="display:flex; gap:6px;"><input type="text" id="rp-banwhy" placeholder="shown in the ban history" style="flex:1;">'
          + '<button type="button" class="btn btn-danger" id="rp-banadd">Ban from room</button></span></label></div>';

        var $ = function (id) { return document.getElementById(id); };
        box.querySelectorAll('.rp-role').forEach(function (sel) {
          sel.addEventListener('change', function () {
            var label = sel.options[sel.selectedIndex].text;
            if (sel.value === '0' && !confirm('Remove their role?')) { loadPeople(roomId); return; }
            peoplePost(roomId, 'role', { player: sel.dataset.id, role: sel.value });
          });
        });
        box.querySelectorAll('.rp-ban').forEach(function (b) {
          b.addEventListener('click', function () { $('rp-banwho').value = b.dataset.id; $('rp-banwho').scrollIntoView({ block: 'center' }); $('rp-banwhy').focus(); });
        });
        box.querySelectorAll('.rp-unban').forEach(function (b) {
          b.addEventListener('click', function () { peoplePost(roomId, 'unban', { player: b.dataset.id }); });
        });
        var t = $('rp-transfer');
        if (t) t.addEventListener('click', function () {
          var to = $('rp-owner').value.trim();
          if (!to) { $('rp-owner').focus(); return; }
          if (!confirm('Give ^' + d.name + ' to ' + to + '? They become its owner.')) return;
          peoplePost(roomId, 'owner', { player: to, keepOld: $('rp-keep').checked ? 'true' : 'false' });
        });
        $('rp-roleadd').addEventListener('click', function () {
          var to = $('rp-rolewho').value.trim();
          if (!to) { $('rp-rolewho').focus(); return; }
          peoplePost(roomId, 'role', { player: to, role: $('rp-rolepick').value });
        });
        $('rp-banadd').addEventListener('click', function () {
          var to = $('rp-banwho').value.trim();
          if (!to) { $('rp-banwho').focus(); return; }
          if (!confirm('Ban ' + to + ' from ^' + d.name + '? If they are in it now they are sent out.')) return;
          peoplePost(roomId, 'ban', { player: to, minutes: $('rp-banlen').value, reason: $('rp-banwhy').value });
        });
      })
      .catch(function () { box.innerHTML = '<p style="color:var(--danger)">Could not load people.</p>'; });
  }

  window.openRoomEditor = openRoomEditor;
})();