<%- include("../../../src/web/views/partials/layout-top", { title }) %>
<style>
  .game-list {
    display: grid;
    gap: 16px;
  }
  .game-row {
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    overflow: hidden;
  }
  .game-row summary {
    list-style: none;
    cursor: pointer;
  }
  .game-row summary::-webkit-details-marker {
    display: none;
  }
  .game-row__summary {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) auto minmax(160px, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
  }
  .game-row__title h2 {
    margin: 0;
    font-size: 1.15rem;
  }
  .game-row__status,
  .game-row__platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
  }
  .status-pill,
  .platform-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid transparent;
  }
  .status-pill.on {
    color: #60d394;
    background: rgba(96, 211, 148, 0.15);
    border-color: rgba(96, 211, 148, 0.4);
  }
  .status-pill.off {
    color: #ff7a7a;
    background: rgba(255, 122, 122, 0.15);
    border-color: rgba(255, 122, 122, 0.4);
  }
  .platform-pill {
    color: var(--text);
    border-color: var(--border);
    background: var(--surface-3);
    opacity: 0.45;
  }
  .platform-pill.on {
    opacity: 1;
  }
  .platform-pill.discord.on {
    color: #7c8dff;
    border-color: rgba(124, 141, 255, 0.4);
    background: rgba(124, 141, 255, 0.12);
  }
  .platform-pill.twitch.on {
    color: #b88cff;
    border-color: rgba(184, 140, 255, 0.4);
    background: rgba(184, 140, 255, 0.12);
  }
  .platform-pill.youtube.on {
    color: #ff6d6d;
    border-color: rgba(255, 109, 109, 0.4);
    background: rgba(255, 109, 109, 0.12);
  }
  .game-row__chevron {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--surface-3);
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    color: var(--muted);
    transition: transform 0.2s ease;
  }
  .game-row[open] .game-row__chevron {
    transform: rotate(90deg);
  }
  .game-row__body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 16px;
    transition: max-height 0.35s ease, opacity 0.2s ease, padding 0.3s ease;
  }
  .game-row[open] .game-row__body {
    max-height: 12000px;
    opacity: 1;
    padding: 0 16px 16px;
    overflow: visible;
  }
  .game-card {
    background: var(--surface-2);
    border-radius: 14px;
    padding: 16px;
    border: 1px solid var(--border);
  }
  .game-card h3 {
    margin-top: 0;
    font-family: "Space Grotesk", sans-serif;
  }
  .game-row__footer {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border);
  }
  .game-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    font-size: 0.85rem;
    color: var(--muted);
  }
  .game-footer span {
    background: var(--surface-3);
    border-radius: 999px;
    padding: 6px 10px;
    border: 1px solid var(--border);
  }
  .responses-grid {
    display: grid;
    gap: 16px;
  }
  .responses-grid .button {
    width: 100%;
  }
  .reply-body {
    overflow: visible;
  }
  .response-field textarea {
    min-height: 120px;
    resize: vertical;
  }
  .reply-toggle {
    margin-top: 16px;
    border-top: 1px dashed var(--border);
    padding-top: 12px;
  }
  .reply-toggle summary {
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    margin-bottom: 8px;
  }
  .reply-toggle summary::-webkit-details-marker {
    display: none;
  }
  .reply-toggle summary::after {
    content: "+";
    margin-left: 8px;
    color: var(--muted);
  }
  .reply-toggle[open] summary::after {
    content: "–";
  }
</style>

<section class="card">
  <div class="section-header">
    <div>
      <h1>Economy Games</h1>
      <p class="command-subtitle">Mini-games that spend and reward coins via the Economy framework.</p>
    </div>
    <span class="badge <%= frameworkReady ? 'discord' : 'youtube' %>">
      <%= frameworkReady ? 'Framework connected' : 'Framework missing' %>
    </span>
  </div>
</section>

<% const renderLastPlayed = (entry) => {
  if (!entry || entry.lastPlayedLabel === "Never") {
    return "Never";
  }
  const user = entry.lastPlayedUser ? ` (${entry.lastPlayedUser})` : "";
  return `${entry.lastPlayedLabel}${user}`;
}; %>

<div class="game-list">
  <details class="game-row">
    <summary class="game-row__summary">
      <div class="game-row__title">
        <h2><%= config.hotpotato.name %></h2>
      </div>
      <div class="game-row__status">
        <span class="status-pill <%= config.hotpotato.enabled ? 'on' : 'off' %>">
          <%= config.hotpotato.enabled ? 'Enabled' : 'Disabled' %>
        </span>
      </div>
      <div class="game-row__platforms">
        <span class="platform-pill discord <%= config.hotpotato.platforms.discord ? 'on' : 'off' %>">Discord</span>
        <span class="platform-pill twitch <%= config.hotpotato.platforms.twitch ? 'on' : 'off' %>">Twitch</span>
        <span class="platform-pill youtube <%= config.hotpotato.platforms.youtube ? 'on' : 'off' %>">YouTube</span>
      </div>
      <div class="game-row__chevron">›</div>
    </summary>
    <div class="game-row__body">
      <section class="game-card">
        <form method="post" action="/plugins/economy-games/settings/hotpotato" class="form-grid">
          <div class="field">
            <label>Enable Hot Potato</label>
            <label class="switch">
              <input
                type="checkbox"
                class="switch-input"
                name="hotpotato_enabled"
                <%= config.hotpotato.enabled ? 'checked' : '' %>
              />
              <span class="switch-track" aria-hidden="true"></span>
              <span class="switch-text"><%= config.hotpotato.enabled ? 'Enabled' : 'Disabled' %></span>
            </label>
          </div>
          <div class="field">
            <label>Display name</label>
            <input name="hotpotato_name" value="<%= config.hotpotato.name %>" />
          </div>
          <div class="field">
            <label>Command trigger</label>
            <input name="hotpotato_trigger" value="<%= config.hotpotato.trigger %>" />
          </div>
          <div class="field">
            <label>Command aliases (comma or space separated)</label>
            <input name="hotpotato_aliases" value="<%= config.hotpotato.aliases.join(', ') %>" />
          </div>
          <div class="field">
            <label>Minimum entry cost</label>
            <input name="hotpotato_min_cost" value="<%= config.hotpotato.minCost %>" />
          </div>
          <div class="field">
            <label>Maximum entry cost</label>
            <input name="hotpotato_max_cost" value="<%= config.hotpotato.maxCost %>" />
          </div>
          <div class="field">
            <label>Toss timer min (seconds)</label>
            <input name="hotpotato_toss_min" value="<%= config.hotpotato.tossMin %>" />
          </div>
          <div class="field">
            <label>Toss timer max (seconds)</label>
            <input name="hotpotato_toss_max" value="<%= config.hotpotato.tossMax %>" />
          </div>
          <div class="field">
            <label>Loss multiplier</label>
            <input name="hotpotato_loss_multiplier" value="<%= config.hotpotato.lossMultiplier %>" />
          </div>
          <div class="field">
            <label>Loss additive</label>
            <input name="hotpotato_loss_additive" value="<%= config.hotpotato.lossAdditive %>" />
          </div>
          <div class="field">
            <label>Presence window (seconds)</label>
            <input name="hotpotato_presence_window" value="<%= config.hotpotato.presenceWindow %>" />
            <span class="hint">Active users are pulled from recent chatters on the same platform.</span>
          </div>
          <div class="field">
            <label>Discord</label>
            <label class="switch">
              <input
                type="checkbox"
                class="switch-input"
                name="hotpotato_platform_discord"
                <%= config.hotpotato.platforms.discord ? 'checked' : '' %>
              />
              <span class="switch-track" aria-hidden="true"></span>
              <span class="switch-text"><%= config.hotpotato.platforms.discord ? 'On' : 'Off' %></span>
            </label>
          </div>
          <div class="field">
            <label>Twitch</label>
            <label class="switch">
              <input
                type="checkbox"
                class="switch-input"
                name="hotpotato_platform_twitch"
                <%= config.hotpotato.platforms.twitch ? 'checked' : '' %>
              />
              <span class="switch-track" aria-hidden="true"></span>
              <span class="switch-text"><%= config.hotpotato.platforms.twitch ? 'On' : 'Off' %></span>
            </label>
          </div>
          <div class="field">
            <label>YouTube</label>
            <label class="switch">
              <input
                type="checkbox"
                class="switch-input"
                name="hotpotato_platform_youtube"
                <%= config.hotpotato.platforms.youtube ? 'checked' : '' %>
              />
              <span class="switch-track" aria-hidden="true"></span>
              <span class="switch-text"><%= config.hotpotato.platforms.youtube ? 'On' : 'Off' %></span>
            </label>
          </div>
          <button type="submit" class="button">Save Hot Potato</button>
        </form>

        <details class="reply-toggle">
          <summary>Edit replies</summary>
          <div class="reply-body">
            <p class="hint">One reply per line. Tokens: {user}, {target}, {amount}, {payout}, {seconds}, {min}, {max}, {game}, {holder}, {loss}, {winners}, {trigger}.</p>
            <form method="post" action="/plugins/economy-games/settings/responses" class="form-grid responses-grid">
              <% responsesByGame.hotpotato.forEach((response) => { %>
              <div class="field response-field">
                <label><%= response.label %></label>
                <textarea name="response_<%= response.key %>"><%= response.lines.join('\n') %></textarea>
              </div>
              <% }) %>
              <div class="field full">
                <button type="submit" class="button">Save replies</button>
              </div>
            </form>
          </div>
        </details>
      </section>
    </div>
    <div class="game-row__footer">
      <div class="game-footer">
        <span>Last played: <%= renderLastPlayed(stats.hotpotato) %></span>
        <span>Times played: <%= stats.hotpotato.plays %></span>
        <span><%= currencyLabel %> lost: <%= stats.hotpotato.coinsLost %></span>
        <span><%= currencyLabel %> won: <%= stats.hotpotato.coinsWon %></span>
      </div>
    </div>
  </details>

  <details class="game-row">
    <summary class="game-row__summary">
      <div class="game-row__title">
        <h2><%= config.coinflip.name %></h2>
      </div>
      <div class="game-row__status">
        <span class="status-pill <%= config.coinflip.enabled ? 'on' : 'off' %>">
          <%= config.coinflip.enabled ? 'Enabled' : 'Disabled' %>
        </span>
      </div>
      <div class="game-row__platforms">
        <span class="platform-pill discord <%= config.coinflip.platforms.discord ? 'on' : 'off' %>">Discord</span>
        <span class="platform-pill twitch <%= config.coinflip.platforms.twitch ? 'on' : 'off' %>">Twitch</span>
        <span class="platform-pill youtube <%= config.coinflip.platforms.youtube ? 'on' : 'off' %>">YouTube</span>
      </div>
      <div class="game-row__chevron">›</div>
    </summary>
    <div class="game-row__body">
      <section class="game-card">
        <form method="post" action="/plugins/economy-games/settings/coinflip" class="form-grid">
          <div class="field">
            <label>Enable Coinflip</label>
            <label class="switch">
              <input
                type="checkbox"
                class="switch-input"
                name="coinflip_enabled"
                <%= config.coinflip.enabled ? 'checked' : '' %>
              />
              <span class="switch-track" aria-hidden="true"></span>
              <span class="switch-text"><%= config.coinflip.enabled ? 'Enabled' : 'Disabled' %></span>
            </label>
          </div>
          <div class="field">
            <label>Display name</label>
            <input name="coinflip_name" value="<%= config.coinflip.name %>" />
          </div>
          <div class="field">
            <label>Command trigger</label>
            <input name="coinflip_trigger" value="<%= config.coinflip.trigger %>" />
          </div>
          <div class="field">
            <label>Command aliases (comma or space separated)</label>
            <input name="coinflip_aliases" value="<%= config.coinflip.aliases.join(', ') %>" />
          </div>
          <div class="field">
            <label>Minimum bet</label>
            <input name="coinflip_min_bet" value="<%= config.coinflip.minBet %>" />
          </div>
          <div class="field">
            <label>Maximum bet</label>
            <input name="coinflip_max_bet" value="<%= config.coinflip.maxBet %>" />
          </div>
          <div class="field">
            <label>Payout multiplier</label>
            <input name="coinflip_multiplier" value="<%= config.coinflip.multiplier %>" />
          </div>
          <div class="field">
            <label>Cooldown (seconds)</label>
            <input name="coinflip_cooldown" value="<%= config.coinflip.cooldown %>" />
          </div>
          <div class="field">
            <label>Discord</label>
            <label class="switch">
              <input
                type="checkbox"
                class="switch-input"
                name="coinflip_platform_discord"
                <%= config.coinflip.platforms.discord ? 'checked' : '' %>
              />
              <span class="switch-track" aria-hidden="true"></span>
              <span class="switch-text"><%= config.coinflip.platforms.discord ? 'On' : 'Off' %></span>
            </label>
          </div>
          <div class="field">
            <label>Twitch</label>
            <label class="switch">
              <input
                type="checkbox"
                class="switch-input"
                name="coinflip_platform_twitch"
                <%= config.coinflip.platforms.twitch ? 'checked' : '' %>
              />
              <span class="switch-track" aria-hidden="true"></span>
              <span class="switch-text"><%= config.coinflip.platforms.twitch ? 'On' : 'Off' %></span>
            </label>
          </div>
          <div class="field">
            <label>YouTube</label>
            <label class="switch">
              <input
                type="checkbox"
                class="switch-input"
                name="coinflip_platform_youtube"
                <%= config.coinflip.platforms.youtube ? 'checked' : '' %>
              />
              <span class="switch-track" aria-hidden="true"></span>
              <span class="switch-text"><%= config.coinflip.platforms.youtube ? 'On' : 'Off' %></span>
            </label>
          </div>
          <button type="submit" class="button">Save Coinflip</button>
        </form>

        <details class="reply-toggle">
          <summary>Edit replies</summary>
          <div class="reply-body">
            <p class="hint">One reply per line. Tokens: {user}, {amount}, {payout}, {min}, {max}, {seconds}.</p>
            <form method="post" action="/plugins/economy-games/settings/responses" class="form-grid responses-grid">
              <% responsesByGame.coinflip.forEach((response) => { %>
              <div class="field response-field">
                <label><%= response.label %></label>
                <textarea name="response_<%= response.key %>"><%= response.lines.join('\n') %></textarea>
              </div>
              <% }) %>
              <div class="field full">
                <button type="submit" class="button">Save replies</button>
              </div>
            </form>
          </div>
        </details>
      </section>
    </div>
    <div class="game-row__footer">
      <div class="game-footer">
        <span>Last played: <%= renderLastPlayed(stats.coinflip) %></span>
        <span>Times played: <%= stats.coinflip.plays %></span>
        <span><%= currencyLabel %> lost: <%= stats.coinflip.coinsLost %></span>
        <span><%= currencyLabel %> won: <%= stats.coinflip.coinsWon %></span>
      </div>
    </div>
  </details>

  <details class="game-row">
    <summary class="game-row__summary">
      <div class="game-row__title">
        <h2><%= config.mystery.name %></h2>
      </div>
      <div class="game-row__status">
        <span class="status-pill <%= config.mystery.enabled ? 'on' : 'off' %>">
          <%= config.mystery.enabled ? 'Enabled' : 'Disabled' %>
        </span>
      </div>
      <div class="game-row__platforms">
        <span class="platform-pill discord <%= config.mystery.platforms.discord ? 'on' : 'off' %>">Discord</span>
        <span class="platform-pill twitch <%= config.mystery.platforms.twitch ? 'on' : 'off' %>">Twitch</span>
        <span class="platform-pill youtube <%= config.mystery.platforms.youtube ? 'on' : 'off' %>">YouTube</span>
      </div>
      <div class="game-row__chevron">›</div>
    </summary>
    <div class="game-row__body">
      <section class="game-card">
        <form method="post" action="/plugins/economy-games/settings/mystery" class="form-grid">
          <div class="field">
            <label>Enable Mystery Box</label>
            <label class="switch">
              <input
                type="checkbox"
                class="switch-input"
                name="mystery_enabled"
                <%= config.mystery.enabled ? 'checked' : '' %>
              />
              <span class="switch-track" aria-hidden="true"></span>
              <span class="switch-text"><%= config.mystery.enabled ? 'Enabled' : 'Disabled' %></span>
            </label>
          </div>
          <div class="field">
            <label>Display name</label>
            <input name="mystery_name" value="<%= config.mystery.name %>" />
          </div>
          <div class="field">
            <label>Command trigger</label>
            <input name="mystery_trigger" value="<%= config.mystery.trigger %>" />
          </div>
          <div class="field">
            <label>Command aliases (comma or space separated)</label>
            <input name="mystery_aliases" value="<%= config.mystery.aliases.join(', ') %>" />
          </div>
          <div class="field">
            <label>Minimum bet</label>
            <input name="mystery_min_bet" value="<%= config.mystery.minBet %>" />
          </div>
          <div class="field">
            <label>Maximum bet</label>
            <input name="mystery_max_bet" value="<%= config.mystery.maxBet %>" />
          </div>
          <div class="field">
            <label>Payout multiplier</label>
            <input name="mystery_multiplier" value="<%= config.mystery.multiplier %>" />
          </div>
          <div class="field">
            <label>Cooldown (seconds)</label>
            <input name="mystery_cooldown" value="<%= config.mystery.cooldown %>" />
          </div>
          <div class="field">
            <label>Discord</label>
            <label class="switch">
              <input
                type="checkbox"
                class="switch-input"
                name="mystery_platform_discord"
                <%= config.mystery.platforms.discord ? 'checked' : '' %>
              />
              <span class="switch-track" aria-hidden="true"></span>
              <span class="switch-text"><%= config.mystery.platforms.discord ? 'On' : 'Off' %></span>
            </label>
          </div>
          <div class="field">
            <label>Twitch</label>
            <label class="switch">
              <input
                type="checkbox"
                class="switch-input"
                name="mystery_platform_twitch"
                <%= config.mystery.platforms.twitch ? 'checked' : '' %>
              />
              <span class="switch-track" aria-hidden="true"></span>
              <span class="switch-text"><%= config.mystery.platforms.twitch ? 'On' : 'Off' %></span>
            </label>
          </div>
          <div class="field">
            <label>YouTube</label>
            <label class="switch">
              <input
                type="checkbox"
                class="switch-input"
                name="mystery_platform_youtube"
                <%= config.mystery.platforms.youtube ? 'checked' : '' %>
              />
              <span class="switch-track" aria-hidden="true"></span>
              <span class="switch-text"><%= config.mystery.platforms.youtube ? 'On' : 'Off' %></span>
            </label>
          </div>
          <button type="submit" class="button">Save Mystery Box</button>
        </form>

        <details class="reply-toggle">
          <summary>Edit replies</summary>
          <div class="reply-body">
            <p class="hint">One reply per line. Tokens: {user}, {amount}, {payout}, {min}, {max}, {seconds}.</p>
            <form method="post" action="/plugins/economy-games/settings/responses" class="form-grid responses-grid">
              <% responsesByGame.mystery.forEach((response) => { %>
              <div class="field response-field">
                <label><%= response.label %></label>
                <textarea name="response_<%= response.key %>"><%= response.lines.join('\n') %></textarea>
              </div>
              <% }) %>
              <div class="field full">
                <button type="submit" class="button">Save replies</button>
              </div>
            </form>
          </div>
        </details>
      </section>
    </div>
    <div class="game-row__footer">
      <div class="game-footer">
        <span>Last played: <%= renderLastPlayed(stats.mystery) %></span>
        <span>Times played: <%= stats.mystery.plays %></span>
        <span><%= currencyLabel %> lost: <%= stats.mystery.coinsLost %></span>
        <span><%= currencyLabel %> won: <%= stats.mystery.coinsWon %></span>
      </div>
    </div>
  </details>
</div>

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