<%- include("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); %>
    <% 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>
      <% actions.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">
      <table class="table">
        <thead>
          <tr>
            <th>Action</th>
            <th>Enabled</th>
            <th>Command name</th>
          </tr>
        </thead>
        <tbody>
          <% actions.forEach((action) => { %>
          <tr>
            <td><%= action.id %></td>
            <td>
              <label class="switch switch--compact">
                <input
                  type="checkbox"
                  class="switch-input"
                  name="action_<%= action.id %>_enabled"
                  <%= action.enabled ? 'checked' : '' %>
                />
                <span class="switch-track" aria-hidden="true"></span>
                <span class="switch-text"><%= action.enabled ? 'Enabled' : 'Disabled' %></span>
              </label>
            </td>
            <td>
              <input
                name="action_<%= action.id %>_name"
                value="<%= action.command %>"
              />
            </td>
          </tr>
          <% }) %>
        </tbody>
      </table>
      <p class="hint">Command names are lowercased; spaces become dashes.</p>
    </div>
    <div class="field full">
      <button type="submit" class="button">Save settings</button>
    </div>
  </form>
</section>
<% } %>

<%- include("partials/layout-bottom") %>
