<section class="card">
  <h1>Auto VC</h1>
  <p>Automatically create temporary voice channels when members join your lobby channels. Rooms inherit lobby permissions and can be managed with <code>!vc</code> commands.</p>
  <div class="callout">
    <strong>Placeholders</strong>
    <p>Use <code>[username]</code>, <code>[room_number]</code>, and <code>[game_name]</code> inside channel names.</p>
    <p class="hint">[game_name] is pulled from the creator's Discord presence.</p>
  </div>
</section>

<style>
  .lobby-permissions {
    margin-top: 16px;
    padding: 12px;
    border-radius: 14px;
    background: var(--surface-2);
    border: 1px dashed var(--border);
  }
  .lobby-permissions h4 {
    margin: 0 0 8px;
    font-family: "Space Grotesk", sans-serif;
  }
  .lobby-permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
  }
  .lobby-permission-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--border);
  }
  .lobby-permission-item[data-missing="true"] {
    border-color: color-mix(in srgb, var(--rose) 40%, var(--border));
  }
  .lobby-permissions-hint {
    margin: 6px 0 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
  }
  .lobby-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .lobby-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .button.danger-hover {
    background: var(--surface-2);
    color: var(--ink);
    border: 1px solid var(--border);
  }
  .button.danger-hover:hover {
    background: var(--rose);
    color: white;
  }
  .lobby-card.is-deleted {
    display: none;
  }
  .lobby-id-note {
    margin: 6px 0 0;
    color: var(--ink-soft);
    font-size: 0.85rem;
  }
  .rate-limit-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .rate-limit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .rate-limit-row input {
    max-width: 120px;
  }
  .rate-limit-unit {
    color: var(--ink-soft);
    font-size: 0.85rem;
  }
  .permissions-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Space Grotesk", sans-serif;
    cursor: pointer;
  }
  .permissions-ok {
    color: #2cb678;
    font-weight: 700;
  }
  .lobby-permissions summary::-webkit-details-marker {
    display: none;
  }
  .lobby-permissions summary::marker {
    content: "";
  }
  .modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 30;
  }
  .modal.is-open {
    display: flex;
  }
  .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
  }
  .modal-dialog {
    position: relative;
    z-index: 1;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    width: min(420px, calc(100% - 32px));
    box-shadow: var(--shadow);
  }
  .modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
  }
</style>

<section class="card">
  <h2>Stats</h2>
  <% if (!stats || !stats.length) { %>
  <p>No rooms created yet.</p>
  <% } else { %>
  <table class="table">
    <thead>
      <tr>
        <th>User</th>
        <th>Rooms created</th>
      </tr>
    </thead>
    <tbody>
      <% stats.forEach((row) => { %>
      <tr>
        <td><%= row.label %></td>
        <td><%= row.count %></td>
      </tr>
      <% }) %>
    </tbody>
  </table>
  <% } %>
</section>

<% if (isAdmin) { %>
<section class="card">
  <h2>Lobby setup</h2>
  <form method="post" action="/plugins/auto-vc/settings" class="form-grid" data-auto-vc-settings data-confirm-mode="modal" data-confirm-title="Delete lobby" data-confirm-text="Save these settings and permanently delete the selected lobby configuration?" data-confirm-label="Delete lobby">
    <div class="card">
      <h3>Rate limits</h3>
      <div class="form-grid rate-limit-grid">
        <div class="field">
          <label>Room creations per user</label>
          <div class="rate-limit-row">
            <input
              name="rate_create_count"
              type="number"
              min="1"
              value="<%= limits?.create?.max || 3 %>"
            />
            <span class="rate-limit-unit">per</span>
            <input
              name="rate_create_window"
              type="number"
              min="10"
              value="<%= limits?.create?.windowSeconds || 600 %>"
            />
            <span class="rate-limit-unit">seconds</span>
          </div>
        </div>
        <div class="field">
          <label>Room action changes per user</label>
          <div class="rate-limit-row">
            <input
              name="rate_action_count"
              type="number"
              min="1"
              value="<%= limits?.action?.max || 8 %>"
            />
            <span class="rate-limit-unit">per</span>
            <input
              name="rate_action_window"
              type="number"
              min="10"
              value="<%= limits?.action?.windowSeconds || 60 %>"
            />
            <span class="rate-limit-unit">seconds</span>
          </div>
        </div>
      </div>
      <p class="hint">Applies to room creation and commands that update channels or permissions.</p>
    </div>
    <div class="field full">
      <div id="lobby-sections" class="form-grid">
        <% lobbies.forEach((lobby, index) => { %>
        <div class="card lobby-card" data-lobby>
          <div class="lobby-header">
            <h3>Lobby <%= index + 1 %></h3>
            <div class="lobby-actions">
              <input type="hidden" name="lobby_remove" value="<%= lobby.id %>" data-remove disabled />
              <button type="button" class="button danger-hover" data-lobby-delete>Delete lobby</button>
            </div>
          </div>
          <input type="hidden" name="lobby_id" value="<%= lobby.id %>" />
          <% const lobbyVoice = voiceChannels?.find((channel) => channel.id === lobby.lobbyChannelId); %>
          <% const lobbyCategory = categoryChannels?.find((channel) => channel.id === lobby.categoryId); %>
          <div class="form-grid">
            <div class="field">
              <label>Lobby voice channel</label>
              <% if (voiceChannels && voiceChannels.length) { %>
              <select name="lobby_channel_id" data-channel-select>
                <% if (lobby.lobbyChannelId && !lobbyVoice) { %>
                <option value="<%= lobby.lobbyChannelId %>" selected>
                  Unknown channel (<%= lobby.lobbyChannelId %>)
                </option>
                <% } %>
                <option value="">Select a lobby voice channel</option>
                <% voiceChannels.forEach((channel) => { %>
                <option value="<%= channel.id %>" <%= channel.id === lobby.lobbyChannelId ? 'selected' : '' %>>
                  <%= channel.label %>
                </option>
                <% }) %>
              </select>
              <div class="lobby-id-note">Selected ID: <span data-channel-id-display><%= lobby.lobbyChannelId || "-" %></span></div>
              <% } else { %>
              <input name="lobby_channel_id" value="<%= lobby.lobbyChannelId %>" placeholder="123456789012345678" />
              <% } %>
            </div>
            <div class="field">
              <label>Target category</label>
              <% if (categoryChannels && categoryChannels.length) { %>
              <select name="lobby_category_id" data-category-select>
                <% if (lobby.categoryId && !lobbyCategory) { %>
                <option value="<%= lobby.categoryId %>" selected>
                  Unknown category (<%= lobby.categoryId %>)
                </option>
                <% } %>
                <option value="">Select a category</option>
                <% categoryChannels.forEach((channel) => { %>
                <option value="<%= channel.id %>" <%= channel.id === lobby.categoryId ? 'selected' : '' %>>
                  <%= channel.label %>
                </option>
                <% }) %>
              </select>
              <div class="lobby-id-note">Selected ID: <span data-category-id-display><%= lobby.categoryId || "-" %></span></div>
              <% } else { %>
              <input name="lobby_category_id" value="<%= lobby.categoryId %>" placeholder="123456789012345678" />
              <% } %>
            </div>
            <div class="field">
              <label>Channel name template</label>
              <input name="lobby_name_template" value="<%= lobby.nameTemplate %>" />
              <p class="hint">Examples: <code>[username]'s room</code>, <code>[game_name] [room_number]</code></p>
            </div>
            <div class="field">
              <label>Empty room cleanup (seconds)</label>
              <input name="lobby_empty_timeout" value="<%= lobby.emptyTimeoutSeconds %>" type="number" min="5" />
            </div>
          </div>
          <% if (lobby.permissions && lobby.permissions.length) { %>
          <% const totalPerms = lobby.permissions.length; %>
          <% const okPerms = lobby.permissions.filter((perm) => perm.granted).length; %>
          <% const allOk = okPerms === totalPerms; %>
          <details class="lobby-permissions" <%= allOk ? "" : "open" %>>
            <summary class="permissions-summary">
              Permissions Check (<%= okPerms %>/<%= totalPerms %>
              <% if (allOk) { %>
              <span class="permissions-ok">all ok</span>
              <% } %>
              )
            </summary>
            <div class="lobby-permissions-grid">
              <% lobby.permissions.forEach((perm) => { %>
              <div
                class="lobby-permission-item"
                data-missing="<%= perm.granted ? 'false' : 'true' %>"
                title="<%= perm.granted ? '' : perm.help %>"
              >
                <span class="perm-toggle <%= perm.granted ? 'on' : 'off' %>" aria-hidden="true">
                  <span class="perm-thumb"></span>
                </span>
                <span class="perm-label"><%= perm.label %></span>
              </div>
              <% }) %>
            </div>
            <p class="lobby-permissions-hint">Hover red checks to see how to fix missing permissions.</p>
          </details>
          <% } %>
        </div>
        <% }) %>
      </div>
    </div>
    <div class="field full">
      <button type="button" class="button subtle" id="add-lobby">Add VC lobby</button>
      <button type="submit" class="button">Save lobby settings</button>
    </div>
  </form>
</section>
<% } %>

<% if (canModerate) { %>
<section class="card">
  <h2>VC creation bans</h2>
  <form method="post" action="/plugins/auto-vc/bans" class="form-grid">
    <div class="field">
      <label>Ban user (mention or ID)</label>
      <input name="ban_input" placeholder="@user or 123456789012345678" />
    </div>
    <div class="field">
      <label>Reason (optional)</label>
      <input name="ban_reason" placeholder="Optional reason" />
    </div>
    <div class="field full">
      <button type="submit" class="button">Ban user</button>
    </div>
  </form>
  <div class="card">
    <h3>Currently banned</h3>
    <% if (!bans.length) { %>
    <p>No banned users.</p>
    <% } else { %>
    <form method="post" action="/plugins/auto-vc/unban" class="form-grid">
      <table class="table">
        <thead>
          <tr>
            <th>User</th>
            <th>Reason</th>
            <th>Remove</th>
          </tr>
        </thead>
        <tbody>
          <% bans.forEach((ban) => { %>
          <tr>
            <td><%= ban.label %></td>
            <td><%= ban.reason || '-' %></td>
            <td>
              <input type="checkbox" name="unban_ids" value="<%= ban.discord_user_id %>" />
            </td>
          </tr>
          <% }) %>
        </tbody>
      </table>
      <div class="field full">
        <button type="submit" class="button subtle">Unban selected</button>
      </div>
    </form>
    <% } %>
  </div>
</section>
<% } %>

<div class="modal" id="delete-lobby-modal" aria-hidden="true">
  <div class="modal-backdrop" data-modal-close></div>
  <div class="modal-dialog" role="dialog" aria-modal="true" aria-labelledby="delete-lobby-title">
    <h3 id="delete-lobby-title">Mark lobby for deletion?</h3>
    <p>The lobby is removed only after you save the settings and complete the safety timer.</p>
    <div class="modal-actions">
      <button type="button" class="button subtle" data-modal-cancel>Cancel</button>
      <button type="button" class="button danger" data-modal-confirm>Mark for deletion</button>
    </div>
  </div>
</div>

<template id="lobby-template">
  <div class="card lobby-card" data-lobby>
    <div class="lobby-header">
      <h3>Lobby</h3>
      <div class="lobby-actions">
        <input type="hidden" name="lobby_remove" value="__ID__" data-remove disabled />
        <button type="button" class="button danger-hover" data-lobby-delete>Delete lobby</button>
      </div>
    </div>
    <input type="hidden" name="lobby_id" value="__ID__" data-placeholder />
    <div class="form-grid">
      <div class="field">
        <label>Lobby voice channel</label>
        <% if (voiceChannels && voiceChannels.length) { %>
        <select name="lobby_channel_id" data-channel-select>
          <option value="">Select a lobby voice channel</option>
          <% voiceChannels.forEach((channel) => { %>
          <option value="<%= channel.id %>"><%= channel.label %></option>
          <% }) %>
        </select>
        <div class="lobby-id-note">Selected ID: <span data-channel-id-display>-</span></div>
        <% } else { %>
        <input name="lobby_channel_id" placeholder="123456789012345678" />
        <% } %>
      </div>
      <div class="field">
        <label>Target category</label>
        <% if (categoryChannels && categoryChannels.length) { %>
        <select name="lobby_category_id" data-category-select>
          <option value="">Select a category</option>
          <% categoryChannels.forEach((channel) => { %>
          <option value="<%= channel.id %>"><%= channel.label %></option>
          <% }) %>
        </select>
        <div class="lobby-id-note">Selected ID: <span data-category-id-display>-</span></div>
        <% } else { %>
        <input name="lobby_category_id" placeholder="123456789012345678" />
        <% } %>
      </div>
      <div class="field">
        <label>Channel name template</label>
        <input name="lobby_name_template" value="[username]'s room" />
        <p class="hint">Examples: <code>[username]'s room</code>, <code>[game_name] [room_number]</code></p>
      </div>
      <div class="field">
        <label>Empty room cleanup (seconds)</label>
        <input name="lobby_empty_timeout" value="30" type="number" min="5" />
      </div>
    </div>
  </div>
</template>

<script>
  window.addEventListener("DOMContentLoaded", () => {
    const addButton = document.getElementById("add-lobby");
    const container = document.getElementById("lobby-sections");
    const template = document.getElementById("lobby-template");
    const settingsForm = document.querySelector("[data-auto-vc-settings]");
    if (!addButton || !container || !template) {
      return;
    }

    const modal = document.getElementById("delete-lobby-modal");
    const modalConfirm = modal?.querySelector("[data-modal-confirm]");
    const modalCancel = modal?.querySelector("[data-modal-cancel]");
    const modalClose = modal?.querySelector("[data-modal-close]");
    let pendingDelete = null;

    const generateId = () => {
      if (window.crypto && window.crypto.randomUUID) {
        return window.crypto.randomUUID();
      }
      return `lobby-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
    };

    const updateHeaders = () => {
      const cards = Array.from(container.querySelectorAll("[data-lobby]")).filter(
        (card) => !card.classList.contains("is-deleted")
      );
      cards.forEach((card, index) => {
        const heading = card.querySelector("h3");
        if (heading) {
          heading.textContent = `Lobby ${index + 1}`;
        }
      });
    };

    const updateIdDisplays = (card) => {
      const channelSelect = card.querySelector("[data-channel-select]");
      const channelDisplay = card.querySelector("[data-channel-id-display]");
      if (channelSelect && channelDisplay) {
        channelDisplay.textContent = channelSelect.value || "-";
      }
      const categorySelect = card.querySelector("[data-category-select]");
      const categoryDisplay = card.querySelector("[data-category-id-display]");
      if (categorySelect && categoryDisplay) {
        categoryDisplay.textContent = categorySelect.value || "-";
      }
    };

    const markLobbyDeleted = (card) => {
      const removeInput = card.querySelector("[data-remove]");
      if (removeInput) {
        removeInput.disabled = false;
      }
      card.classList.add("is-deleted");
      card.querySelectorAll("input, select, textarea").forEach((field) => {
        if (field.dataset.remove !== undefined) {
          return;
        }
        field.disabled = true;
      });
      updateHeaders();
      if (settingsForm) settingsForm.action = "/plugins/auto-vc/settings/remove";
    };

    const openModal = (card) => {
      if (!modal) {
        markLobbyDeleted(card);
        return;
      }
      pendingDelete = card;
      modal.classList.add("is-open");
      modal.setAttribute("aria-hidden", "false");
    };

    const closeModal = () => {
      pendingDelete = null;
      modal?.classList.remove("is-open");
      modal?.setAttribute("aria-hidden", "true");
    };

    modalConfirm?.addEventListener("click", () => {
      if (pendingDelete) {
        markLobbyDeleted(pendingDelete);
      }
      closeModal();
    });
    modalCancel?.addEventListener("click", closeModal);
    modalClose?.addEventListener("click", closeModal);

    const wireLobbyCard = (card) => {
      const deleteButton = card.querySelector("[data-lobby-delete]");
      if (deleteButton) {
        deleteButton.addEventListener("click", () => openModal(card));
      }
      card.querySelectorAll("[data-channel-select]").forEach((select) => {
        select.addEventListener("change", () => updateIdDisplays(card));
      });
      card.querySelectorAll("[data-category-select]").forEach((select) => {
        select.addEventListener("change", () => updateIdDisplays(card));
      });
      updateIdDisplays(card);
    };

    addButton.addEventListener("click", () => {
      const id = generateId();
      const clone = template.content.cloneNode(true);
      clone.querySelectorAll("[data-placeholder]").forEach((node) => {
        node.value = node.value.replace(/__ID__/g, id);
      });
      clone.querySelectorAll("[data-remove]").forEach((node) => {
        node.value = node.value.replace(/__ID__/g, id);
        node.disabled = true;
      });
      const card = clone.querySelector("[data-lobby]");
      container.appendChild(clone);
      if (card) {
        wireLobbyCard(card);
      }
      updateHeaders();
    });

    container.querySelectorAll("[data-lobby]").forEach((card) => {
      wireLobbyCard(card);
    });

    updateHeaders();
  });
</script>
