<%- include("partials/layout-top", { title, pageWidth: "wide", pageId: "command-management" }) %>
<div data-command-management>
<section class="card">
  <%- include("partials/page-header", {
    eyebrow: "Chat tools",
    pageTitle: "Custom commands",
    description: "Create a command, choose where it works, and control the reply it sends.",
    actions: isAdmin ? '<a class="button subtle" href="/admin/command-policies">Access, groups and limits</a>' : ''
  }) %>
  <% const platformLabelMap = new Map((platforms || []).map((item) => [item.id, item.label])); %>
  <form method="post" action="/admin/commands" class="form-grid command-form" data-command-create-form data-lumi-enhanced-form data-lumi-form-id="create-command">
    <div class="field">
      <label>Trigger</label>
      <input name="trigger" placeholder="hello" />
    </div>
    <div class="field">
      <label>Description (optional)</label>
      <input name="description" maxlength="500" placeholder="What this command does" />
    </div>
    <div class="field full">
      <label>Platforms</label>
      <div class="platform-checkboxes">
        <% (platforms || []).forEach((platform) => { %>
        <label class="platform-check <%= platform.enabled ? '' : 'is-disabled' %>" title="<%= platform.enabled ? '' : 'Disabled in Platform Integration' %>">
          <input
            type="checkbox"
            name="platforms"
            value="<%= platform.id %>"
            <%= platform.enabled ? 'checked' : '' %>
          />
          <span><%= platform.label %></span>
        </label>
        <% }) %>
      </div>
      <% if (!platforms || !platforms.length) { %>
      <p class="hint">Enable platforms in Platform Integration to assign them here.</p>
      <% } %>
    </div>
    <div class="field">
      <label>Mode</label>
      <select name="mode" class="js-command-mode">
        <option value="plain" selected>Static</option>
        <option value="random">Random Reply</option>
        <option value="conditional">Conditional Reply</option>
        <% if (isAdmin) { %>
        <option value="advanced">Dynamic</option>
        <% } %>
      </select>
    </div>
    <% if (isAdmin) { %>
    <div class="field js-field-language">
      <label>Language</label>
      <select name="language">
        <option value="js">JavaScript</option>
        <option value="python">Python</option>
      </select>
    </div>
    <% } else { %><input type="hidden" name="language" value="js" /><% } %>
    <div class="field">
      <label>Response / help text</label>
      <input name="response" placeholder="Hello there!" class="js-field-response" data-placeholder-field="core.custom_commands.static_response" data-placeholder-output-audience="user" />
      <p class="hint">For conditional replies, this is shown when no argument is given. Leave it empty to list the available keywords.</p>
    </div>
    <div class="field full js-field-conditional">
      <label>Keyword replies</label>
      <div class="command-random-replies" data-conditional-replies>
        <div class="command-random-row command-conditional-row" data-conditional-reply-row>
          <input name="conditional_keyword" placeholder="backseat, backseating" aria-label="Keywords, separated with commas" />
          <input name="conditional_response" placeholder="The reply for this keyword" aria-label="Reply" data-placeholder-field="core.custom_commands.static_response" data-placeholder-output-audience="user" />
          <button type="button" class="button subtle" data-conditional-remove>Remove</button>
        </div>
      </div>
      <button type="button" class="button subtle" data-conditional-add>Add keyword</button>
      <label class="switch"><input type="checkbox" class="switch-input" name="conditional_fuzzy" checked /><span class="switch-track" aria-hidden="true"></span><span class="switch-text">Suggest a close keyword when there is a small typo</span></label>
      <p class="hint">Separate aliases with commas to give them the same reply. Example: <code>backseat, backseating</code>. Exact matches are preferred; fuzzy matching only accepts a clear close match.</p>
    </div>
    <div class="field full js-field-random">
      <label>Random replies</label>
      <div class="command-random-replies" data-random-replies>
        <div class="command-random-row" data-random-reply-row>
          <input name="random_text" placeholder="Message to send" data-placeholder-field="core.custom_commands.static_response" data-placeholder-output-audience="user" />
          <input name="random_weight" type="number" min="1" max="999" step="1" value="1" aria-label="Selection weight" />
          <input name="random_condition" placeholder="Optional: &lt;20" aria-label="RNG condition" />
          <button type="button" class="button subtle" data-random-remove>Remove</button>
        </div>
      </div>
      <button type="button" class="button subtle" data-random-add>Add reply</button>
      <p class="hint">Every matching reply can be selected. Higher weights are chosen more often; use whole numbers from 1 to 999.</p>
      <label class="switch"><input type="checkbox" class="switch-input js-rng-enabled" name="rng_enabled" /><span class="switch-track" aria-hidden="true"></span><span class="switch-text">Roll a number for conditions and <code>{{core.command.rng}}</code></span></label>
      <div class="command-rng-range" data-rng-range><label>Minimum<input name="rng_min" type="number" step="1" value="1" /></label><label>Maximum<input name="rng_max" type="number" step="1" value="100" /></label></div>
      <p class="hint">Optional conditions use the rolled number, for example <code>&lt;20</code>, <code>&gt;=10</code>, or <code>=5</code>.</p>
    </div>
    <% if (isAdmin) { %>
    <div class="field full js-field-code">
      <label>Dynamic code</label>
      <textarea name="code" rows="6" placeholder="function run(ctx) { return `Hello ${ctx.user.username}`; }"></textarea>
      <p class="hint">Preview can use safe built-ins such as Math, dates, JSON, URLs, arrays, and text helpers. It cannot open files, run programs, load Node packages, or send external network requests.</p>
    </div>
    <% } %>
    <div class="form-actions"><button type="submit" class="button">Create command</button></div>
  </form>
  <% if (isAdmin) { %>
  <p class="hint">For Dynamic commands, paste a simple snippet that returns a reply, or provide an explicit <code>run(ctx)</code> or module export.</p>
  <% } else { %>
  <p class="hint">Moderators can create Static, Random Reply, and Conditional Reply commands. Dynamic code remains admin-only.</p>
  <% } %>
</section>
<section class="card" data-command-list-section>
  <div class="section-header"><div><h2>Existing commands</h2><p class="hint">Review command replies and change their availability.</p><p class="hint" data-command-management-status role="status" aria-live="polite"></p></div></div>
  <% if (!commands.length) { %>
  <p>No commands created yet.</p>
  <% } else { %>
  <div class="table-wrap"><table class="table">
    <thead>
      <tr>
        <th>Trigger</th>
        <th>Response</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <% commands.forEach((command) => { %>
      <tr>
        <td data-label="Trigger"><%= command.trigger %></td>
        <td data-label="Response">
          <div class="command-meta">
            <span class="platform-pills">
              <% (command.platforms || []).forEach((platform) => { %>
              <span class="badge <%= platform %>"><%= platformLabelMap.get(platform) || platform %></span>
              <% }) %>
            </span>
            <% if (command.description) { %><span class="command-description"><%= command.description %></span><% } %>
            <% if (command.mode === "plain") { %>
            <span><%= command.response %></span>
            <% } else if (command.mode === "random") { %>
            <span><strong><%= command.random.replies.length %> random repl<%= command.random.replies.length === 1 ? "y" : "ies" %></strong></span>
            <% if (command.random.example) { %><span class="command-preview" title="Example using a repeatable preview roll"><%= command.random.example %></span><% } %>
            <% if (command.random.rng !== null) { %><span class="hint">Example roll: <%= command.random.rng %></span><% } %>
            <% if (command.random.error) { %><span class="command-preview-unavailable"><%= command.random.error %></span><% } %>
            <% } else if (command.mode === "conditional") { %>
            <span><strong><%= command.conditional.replies.length %> reply rule<%= command.conditional.replies.length === 1 ? "" : "s" %></strong></span>
            <span class="hint"><%= command.conditional.replies.map((reply) => reply.keyword).join(", ") %></span>
            <% } else if (command.preview.status === "ready") { %>
            <% const previewId = `command-preview-${command.id}`; %>
            <span id="<%= previewId %>" class="command-preview <%= command.preview.isLong ? 'is-collapsed' : '' %>" title="Sandboxed example output"><% command.preview.parts.forEach((part) => { %><% if (part.dynamic) { %><mark class="preview-dynamic" title="Dynamic <%= part.type %>"><%= part.text %></mark><% } else { %><%= part.text %><% } %><% }) %></span>
            <% if (command.preview.isLong) { %>
            <button type="button" class="command-preview-toggle" data-expand-text="<%= previewId %>" data-collapsed-label="Read more" data-expanded-label="Read less" aria-controls="<%= previewId %>" aria-expanded="false">Read more</button>
            <% } %>
            <% } else { %>
            <span class="command-preview-unavailable" title="<%= isAdmin ? command.preview.error : 'Ask an administrator to refresh this preview.' %>">Preview unavailable</span>
            <% if (isAdmin) { %>
            <details class="command-preview-details">
              <summary>Details</summary>
              <span><%= command.preview.error %></span>
            </details>
            <% } %>
            <% } %>
          </div>
        </td>
        <td data-label="Status"><%= command.enabled ? "Enabled" : "Disabled" %></td>
        <td data-label="Actions"><div class="table-actions command-actions">
          <form method="post" action="/admin/commands/<%= command.id %>/toggle" class="inline-form" data-lumi-enhanced-form data-command-list-action>
            <button type="submit" class="button subtle"><%= command.enabled ? "Disable" : "Enable" %></button>
          </form>
          <form method="post" action="/admin/commands/<%= command.id %>/delete" class="inline-form" data-lumi-enhanced-form data-command-list-action data-confirm-mode="modal" data-confirm-title="Delete command" data-confirm-text="Delete !<%= command.trigger %>?" data-confirm-label="Delete command">
            <button type="submit" class="button danger">Delete</button>
          </form>
          <% if (isAdmin && command.mode === "advanced") { %>
          <form method="post" action="/admin/commands/<%= command.id %>/preview" class="inline-form" data-lumi-enhanced-form data-command-list-action>
            <button type="submit" class="button subtle">Refresh preview</button>
          </form>
          <% } %>
          <% if (isAdmin || command.mode !== "advanced") { %>
          <button
            type="button"
            class="button subtle"
            data-edit-toggle="command-<%= command.id %>"
            aria-expanded="false"
          >
            Edit
          </button>
          <% } %>
        </div></td>
      </tr>
      <tr class="edit-row" data-edit-row="command-<%= command.id %>">
        <td colspan="4">
          <form method="post" action="/admin/commands/<%= command.id %>/update" class="form-grid command-form" data-lumi-enhanced-form data-command-list-action>
            <div class="field">
              <label>Trigger</label>
              <input name="trigger" value="<%= command.trigger %>" />
            </div>
            <div class="field">
              <label>Description (optional)</label>
              <input name="description" maxlength="500" value="<%= command.description || '' %>" placeholder="What this command does" />
            </div>
            <div class="field full">
              <label>Platforms</label>
              <div class="platform-checkboxes">
                <% (platforms || []).forEach((platform) => { %>
                <label class="platform-check <%= platform.enabled ? '' : 'is-disabled' %>" title="<%= platform.enabled ? '' : 'Disabled in Platform Integration' %>">
                  <input
                    type="checkbox"
                    name="platforms"
                    value="<%= platform.id %>"
                    <%= command.platforms && command.platforms.includes(platform.id) ? 'checked' : '' %>
                  />
                  <span><%= platform.label %></span>
                </label>
                <% }) %>
              </div>
            </div>
            <div class="field">
              <label>Mode</label>
              <select name="mode" class="js-command-mode">
                <option value="plain" <%= command.mode === 'plain' ? 'selected' : '' %>>Static</option>
                <option value="random" <%= command.mode === 'random' ? 'selected' : '' %>>Random Reply</option>
                <option value="conditional" <%= command.mode === 'conditional' ? 'selected' : '' %>>Conditional Reply</option>
                <% if (isAdmin) { %>
                <option value="advanced" <%= command.mode === 'advanced' ? 'selected' : '' %>>Dynamic</option>
                <% } %>
              </select>
            </div>
            <% if (isAdmin) { %>
            <div class="field js-field-language">
              <label>Language</label>
              <select name="language">
                <option value="js" <%= command.language === 'js' ? 'selected' : '' %>>JavaScript</option>
                <option value="python" <%= command.language === 'python' ? 'selected' : '' %>>Python</option>
              </select>
            </div>
            <% } else { %><input type="hidden" name="language" value="js" /><% } %>
            <div class="field">
              <label>Response / help text</label>
              <input name="response" value="<%= command.response %>" class="js-field-response" data-placeholder-field="core.custom_commands.static_response" data-placeholder-output-audience="user" />
              <p class="hint">For conditional replies, this is shown when no argument is given. Leave it empty to list the available keywords.</p>
            </div>
            <div class="field full js-field-conditional">
              <label>Keyword replies</label>
              <div class="command-random-replies" data-conditional-replies>
                <% (command.conditional.replies.length ? command.conditional.replies : [{ keyword: "", response: "" }]).forEach((reply) => { %>
                <div class="command-random-row command-conditional-row" data-conditional-reply-row>
                  <input name="conditional_keyword" value="<%= reply.keyword %>" placeholder="backseat, backseating" aria-label="Keywords, separated with commas" />
                  <input name="conditional_response" value="<%= reply.response %>" placeholder="The reply for this keyword" aria-label="Reply" data-placeholder-field="core.custom_commands.static_response" data-placeholder-output-audience="user" />
                  <button type="button" class="button subtle" data-conditional-remove>Remove</button>
                </div>
                <% }) %>
              </div>
              <button type="button" class="button subtle" data-conditional-add>Add keyword</button>
              <label class="switch"><input type="checkbox" class="switch-input" name="conditional_fuzzy" <%= command.conditional_fuzzy ? "checked" : "" %> /><span class="switch-track" aria-hidden="true"></span><span class="switch-text">Suggest a close keyword when there is a small typo</span></label>
              <p class="hint">Separate aliases with commas to give them the same reply.</p>
            </div>
            <div class="field full js-field-random">
              <label>Random replies</label>
              <div class="command-random-replies" data-random-replies>
                <% (command.random.replies.length ? command.random.replies : [{ text: "", weight: 1, condition: "" }]).forEach((reply) => { %>
                <div class="command-random-row" data-random-reply-row>
                  <input name="random_text" value="<%= reply.text %>" placeholder="Message to send" data-placeholder-field="core.custom_commands.static_response" data-placeholder-output-audience="user" />
                  <input name="random_weight" type="number" min="1" max="999" step="1" value="<%= reply.weight %>" aria-label="Selection weight" />
                  <input name="random_condition" value="<%= reply.condition %>" placeholder="Optional: &lt;20" aria-label="RNG condition" />
                  <button type="button" class="button subtle" data-random-remove>Remove</button>
                </div>
                <% }) %>
              </div>
              <button type="button" class="button subtle" data-random-add>Add reply</button>
              <p class="hint">Every matching reply can be selected. Higher weights are chosen more often; use whole numbers from 1 to 999.</p>
              <label class="switch"><input type="checkbox" class="switch-input js-rng-enabled" name="rng_enabled" <%= command.rng_enabled ? "checked" : "" %> /><span class="switch-track" aria-hidden="true"></span><span class="switch-text">Roll a number for conditions and <code>{{core.command.rng}}</code></span></label>
              <div class="command-rng-range" data-rng-range><label>Minimum<input name="rng_min" type="number" step="1" value="<%= command.rng_min %>" /></label><label>Maximum<input name="rng_max" type="number" step="1" value="<%= command.rng_max %>" /></label></div>
              <p class="hint">Optional conditions use the rolled number, for example <code>&lt;20</code>, <code>&gt;=10</code>, or <code>=5</code>.</p>
            </div>
            <% if (isAdmin) { %>
            <div class="field full js-field-code">
              <label>Dynamic code</label>
              <textarea name="code" rows="6"><%= command.code || '' %></textarea>
              <p class="hint">Preview can use safe built-ins such as Math, dates, JSON, URLs, arrays, and text helpers. It cannot open files, run programs, load Node packages, or send external network requests.</p>
            </div>
            <% } %>
            <div class="form-actions"><button type="submit" class="button">Save command</button></div>
          </form>
          <% if (!isAdmin && command.mode === 'advanced') { %>
          <p class="hint">Dynamic commands can only be edited by admins.</p>
          <% } %>
        </td>
      </tr>
      <% }) %>
    </tbody>
  </table></div>
  <% } %>
</section>
</div>
<%- include("partials/layout-bottom") %>
