{% extends "base.html" %}
{% block title %}warhawk-watch{% endblock %}
{% block content %}
<h1>warhawk-watch</h1>
<p class="sub">Polling warhawk.io every {{ poll_interval }}s. You'll get an email at {{ current_user['email'] }} on appear/disappear.</p>

<div class="mode-bar">
  <form method="post" action="{{ url_for('poll_now') }}" id="poll-now-form" hidden>
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
  </form>
  <button type="button" id="mode-toggle-btn">Edit</button>
  <span id="mode-status" class="sub"></span>
</div>

<section>
  <h2>Watched users</h2>
  <table>
    <thead>
      <tr><th>Account name</th><th>Status</th><th></th></tr>
    </thead>
    <tbody>
      {% for u in watched_users %}
      <tr>
        <td>{{ u['account_name'] }}</td>
        <td>{{ 'online' if u['is_online'] else 'offline' }}</td>
        <td>
          <form method="post" action="{{ url_for('delete_watched_user', entry_id=u['id']) }}" class="inline">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <button type="submit" class="edit-control">Remove</button>
          </form>
        </td>
      </tr>
      {% else %}
      <tr><td colspan="3">No watched users yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>

  <form method="post" action="{{ url_for('add_watched_user') }}" class="add-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <input type="text" name="account_name" placeholder="Warhawk account name" required>
    <button type="submit" class="edit-control">Add user</button>
  </form>
</section>

<section>
  <h2>Watched servers</h2>
  <table>
    <thead>
      <tr><th>Match type</th><th>Value</th><th>Status</th><th></th></tr>
    </thead>
    <tbody>
      {% for s in watched_servers %}
      <tr>
        <td>{{ s['match_type'] }}</td>
        <td>{{ s['match_value'] }}</td>
        <td>{{ 'up' if s['is_up'] else 'down' }}</td>
        <td>
          <form method="post" action="{{ url_for('delete_watched_server', entry_id=s['id']) }}" class="inline">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <button type="submit" class="edit-control">Remove</button>
          </form>
        </td>
      </tr>
      {% else %}
      <tr><td colspan="4">No watched servers yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>

  <form method="post" action="{{ url_for('add_watched_server') }}" class="add-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <select name="match_type">
      <option value="game_name">Game name</option>
      <option value="host_name">Host account name</option>
    </select>
    <input type="text" name="match_value" placeholder="Value to match" required>
    <button type="submit" class="edit-control">Add server</button>
  </form>
</section>

<script>
(function () {
  var POLL_INTERVAL_MS = {{ poll_interval * 1000 }};
  var toggleBtn = document.getElementById('mode-toggle-btn');
  var statusEl = document.getElementById('mode-status');
  var pollForm = document.getElementById('poll-now-form');
  var editControls = document.querySelectorAll('.edit-control');
  var timer = null;
  var countdownTimer = null;
  var nextPollAt = null;

  function updateCountdown() {
    var remainingSec = Math.max(0, Math.round((nextPollAt - Date.now()) / 1000));
    statusEl.textContent = 'Auto-refreshing in ' + remainingSec + 's - click Edit to add/remove watched users and/or servers.';
  }

  function enterPollingMode() {
    editControls.forEach(function (el) { el.disabled = true; });
    toggleBtn.textContent = 'Edit';
    nextPollAt = Date.now() + POLL_INTERVAL_MS;
    updateCountdown();
    countdownTimer = window.setInterval(updateCountdown, 1000);
    timer = window.setInterval(function () { window.location.reload(); }, POLL_INTERVAL_MS);
  }

  function enterEditMode() {
    if (timer !== null) {
      window.clearInterval(timer);
      timer = null;
    }
    if (countdownTimer !== null) {
      window.clearInterval(countdownTimer);
      countdownTimer = null;
    }
    editControls.forEach(function (el) { el.disabled = false; });
    toggleBtn.textContent = 'Poll Now';
    statusEl.textContent = 'Editing - auto-refresh paused.';
  }

  toggleBtn.addEventListener('click', function () {
    if (toggleBtn.textContent === 'Edit') {
      enterEditMode();
    } else {
      pollForm.submit();
    }
  });

  enterPollingMode();
})();
</script>
{% endblock %}