<%- include("../../../src/web/views/partials/layout-top", { title }) %>
<section class="card">
  <h1>Expression Interaction</h1>
  <p>Roleplay friendly interactions from Discord or Twitch with quick commands.</p>
  <p class="hint">
    Commands:
    <% const enabledActions = actions.filter((action) => action.enabled && !action.archived); %>
    <% if (!enabledActions.length) { %>
      None enabled yet.
    <% } else { %>
      <%= enabledActions.map((action) => `!${action.command}`).join(", ") %>
    <% } %>
  </p>
</section>

<section class="card">
  <h2>Your stats</h2>
  <% if (!stats) { %>
  <p>Sign in to see how many actions you have given or received.</p>
  <% } else { %>
  <div class="stat-grid">
    <div class="stat">
      <span class="stat-label">Given</span>
      <span class="stat-value"><%= stats.totals.given %></span>
    </div>
    <div class="stat">
      <span class="stat-label">Received</span>
      <span class="stat-value"><%= stats.totals.received %></span>
    </div>
  </div>
  <table class="table">
    <thead>
      <tr>
        <th>Action</th>
        <th>Given</th>
        <th>Received</th>
      </tr>
    </thead>
    <tbody>
      <% const statActions = actions.filter((action) => !action.archived); %>
      <% statActions.forEach((action) => { %>
      <% const row = stats.byAction[action.id] || { given_count: 0, received_count: 0 }; %>
      <tr>
        <td><%= action.command %></td>
        <td><%= row.given_count %></td>
        <td><%= row.received_count %></td>
      </tr>
      <% }) %>
    </tbody>
  </table>
  <% } %>
</section>

<section class="card">
  <h2>Global stats</h2>
  <div class="stat-grid">
    <div class="stat">
      <span class="stat-label">Total interactions</span>
      <span class="stat-value"><%= globalStats.total %></span>
    </div>
  </div>
  <% if (!globalStats.byAction.length) { %>
  <p>No interactions recorded yet.</p>
  <% } else { %>
  <table class="table">
    <thead>
      <tr>
        <th>Action</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <% globalStats.byAction.forEach((row) => { %>
      <% const action = actions.find((item) => item.id === row.action); %>
      <tr>
        <td><%= action ? action.command : row.action %></td>
        <td><%= row.count %></td>
      </tr>
      <% }) %>
    </tbody>
  </table>
  <% } %>
</section>

<% if (isAdmin) { %>
<section class="card">
  <h2>Settings</h2>
  <% if (conflicts && conflicts.length) { %>
  <div class="flash error">
    Conflicting command names: <%= conflicts.join(", ") %>. Rename the duplicates.
  </div>
  <% } %>
  <form method="post" action="/plugins/expression-interaction/settings" class="form-grid">
    <div class="field">
      <label>Enable on Discord</label>
      <label class="switch">
        <input
          type="checkbox"
          class="switch-input"
          name="platform_discord"
          <%= platforms.discord ? 'checked' : '' %>
        />
        <span class="switch-track" aria-hidden="true"></span>
        <span class="switch-text"><%= platforms.discord ? 'On' : 'Off' %></span>
      </label>
    </div>
    <div class="field">
      <label>Enable on Twitch</label>
      <label class="switch">
        <input
          type="checkbox"
          class="switch-input"
          name="platform_twitch"
          <%= platforms.twitch ? 'checked' : '' %>
        />
        <span class="switch-track" aria-hidden="true"></span>
        <span class="switch-text"><%= platforms.twitch ? 'On' : 'Off' %></span>
      </label>
    </div>
    <div class="field full">
      <button type="submit" class="button">Save settings</button>
    </div>
  </form>
</section>

<section class="card">
  <h2>Expressions</h2>
  <form method="post" action="/plugins/expression-interaction/actions/create" class="form-grid">
    <div class="field">
      <label>Action id</label>
      <input name="action_id" placeholder="hug" />
      <span class="hint">Used for stats and tracking. Avoid changing it once created.</span>
    </div>
    <div class="field">
      <label>Command name</label>
      <input name="action_command" placeholder="hug" />
    </div>
    <div class="field">
      <label>Present tense</label>
      <input name="action_verb" placeholder="hugs" />
    </div>
    <div class="field">
      <label>Past tense</label>
      <input name="action_past" placeholder="hugged" />
    </div>
    <div class="field full">
      <label>Aliases (comma or space separated)</label>
      <input name="action_aliases" placeholder="high-five hf" />
      <span class="hint">Command names are lowercased; spaces become dashes.</span>
    </div>
    <div class="field">
      <label>Enabled</label>
      <label class="switch">
        <input type="checkbox" class="switch-input" name="action_enabled" checked />
        <span class="switch-track" aria-hidden="true"></span>
        <span class="switch-text">Enabled</span>
      </label>
    </div>
    <div class="field full">
      <button type="submit" class="button">Add expression</button>
    </div>
  </form>

  <% if (!actions.length) { %>
  <p>No expressions yet.</p>
  <% } else { %>
  <table class="table">
    <thead>
      <tr>
        <th>Action</th>
        <th>Command</th>
        <th>Verb</th>
        <th>Past</th>
        <th>Aliases</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <% actions.forEach((action) => { %>
      <tr>
        <td><%= action.id %></td>
        <td><%= action.command %></td>
        <td><%= action.verb %></td>
        <td><%= action.past %></td>
        <td><%= action.aliases.length ? action.aliases.join(", ") : '-' %></td>
        <td>
          <%= action.archived ? 'Archived' : action.enabled ? 'Enabled' : 'Disabled' %>
        </td>
        <td>
          <form method="post" action="/plugins/expression-interaction/actions/<%= action.id %>/toggle" class="inline-form">
            <button type="submit" class="button subtle"><%= action.enabled ? "Disable" : "Enable" %></button>
          </form>
          <% if (action.archived) { %>
          <form method="post" action="/plugins/expression-interaction/actions/<%= action.id %>/restore" class="inline-form">
            <button type="submit" class="button">Restore</button>
          </form>
          <% } else { %>
          <form method="post" action="/plugins/expression-interaction/actions/<%= action.id %>/archive" class="inline-form" data-confirm-mode="modal" data-confirm-title="Archive expression" data-confirm-text="Archive this expression interaction?" data-confirm-label="Archive expression">
            <button type="submit" class="button danger">Archive</button>
          </form>
          <% } %>
          <button
            type="button"
            class="button subtle"
            data-edit-toggle="expression-<%= action.id %>"
            aria-expanded="false"
          >
            Edit
          </button>
        </td>
      </tr>
      <tr class="edit-row" data-edit-row="expression-<%= action.id %>">
        <td colspan="7">
          <form method="post" action="/plugins/expression-interaction/actions/<%= action.id %>/update" class="form-grid">
            <div class="field">
              <label>Command name</label>
              <input name="action_command" value="<%= action.command %>" />
            </div>
            <div class="field">
              <label>Present tense</label>
              <input name="action_verb" value="<%= action.verbOverride || '' %>" placeholder="<%= action.verb %>" />
            </div>
            <div class="field">
              <label>Past tense</label>
              <input name="action_past" value="<%= action.pastOverride || '' %>" placeholder="<%= action.past %>" />
            </div>
            <div class="field full">
              <label>Aliases (comma or space separated)</label>
              <input name="action_aliases" value="<%= action.aliases.join(', ') %>" />
              <span class="hint">Leave tense fields blank to auto-conjugate.</span>
            </div>
            <div class="field">
              <label>Enabled</label>
              <label class="switch">
                <input
                  type="checkbox"
                  class="switch-input"
                  name="action_enabled"
                  <%= action.enabled ? 'checked' : '' %>
                />
                <span class="switch-track" aria-hidden="true"></span>
                <span class="switch-text"><%= action.enabled ? 'Enabled' : 'Disabled' %></span>
              </label>
            </div>
            <div class="field full">
              <button type="submit" class="button">Save expression</button>
            </div>
          </form>
        </td>
      </tr>
      <% }) %>
    </tbody>
  </table>
  <% } %>
</section>
<% } %>

<%- include("../../../src/web/views/partials/layout-bottom") %>
