<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Паспортный контроль</title>
    <link rel="stylesheet" href="/static/style.css" />
  </head>
  <body>
    <div class="sky"></div>
    <div class="page">
      <header class="title">
        <div class="badge">Пограничный пост</div>
        <h1>Паспортный контроль</h1>
        <p>Сервис цифровых пропусков для пограничного поста.</p>
      </header>

      <section class="card">
        <h2>Информация</h2>
        <div class="hint">Логин гостя: <span class="code">guest / guest123</span></div>
        <div class="hint">Профиль: <span class="code">GET /api/profile</span></div>
        <div class="hint">Охраняемая зона: <span class="code">GET /api/control</span></div>
        <div class="hint">Перезапуск сервиса из ssh - <span class="code">restart_proxy</span></div>
        <div class="hint">Исходный код находится в <span class="code">/app/proxy</span>.</div>
      </section>
      </section>

      <section class="card">
        <h2>Тренажер JWT</h2>
        <form id="loginForm" class="auth-form">
          <div class="field-row">
            <label for="username">Логин</label>
            <input id="username" type="text" value="guest" autocomplete="off" />
          </div>
          <div class="field-row">
            <label for="password">Пароль</label>
            <input id="password" type="text" value="guest123" autocomplete="off" />
          </div>
          <button type="submit">Войти и получить JWT</button>
        </form>

        <div class="hint">JWT токен (можно вставить свой):</div>
        <textarea id="tokenInput" class="token-box" placeholder="eyJ..." spellcheck="false"></textarea>

        <div class="action-row">
          <button type="button" id="profileBtn">Проверить /api/profile</button>
          <button type="button" id="controlBtn">Проверить /api/control</button>
        </div>

        <pre id="apiOutput">Ожидание запроса...</pre>
      </section>

      <section class="card">
        <h2>Доска флага</h2>
        <p>Когда чекер подтвердит исправление, флаг появится здесь.</p>
        <form method="get" action="/flag">
          <button type="submit">Показать флаг</button>
        </form>
        {% if flag %}
        <pre>{{ flag }}</pre>
        {% endif %}
      </section>

      {% if error %}
      <section class="card error">
        <h2>Статус</h2>
        <pre>{{ error }}</pre>
      </section>
      {% endif %}

      <footer class="footer">
        <span>Деревенская пограничная служба</span>
      </footer>
    </div>

    <script>
      const loginForm = document.getElementById("loginForm");
      const username = document.getElementById("username");
      const password = document.getElementById("password");
      const tokenInput = document.getElementById("tokenInput");
      const profileBtn = document.getElementById("profileBtn");
      const controlBtn = document.getElementById("controlBtn");
      const apiOutput = document.getElementById("apiOutput");

      function showResult(title, data, status) {
        const serialized = typeof data === "string" ? data : JSON.stringify(data, null, 2);
        apiOutput.textContent = `${title}\nstatus=${status}\n\n${serialized}`;
      }

      async function requestJson(url, options) {
        const resp = await fetch(url, options);
        let data;
        try {
          data = await resp.json();
        } catch {
          data = await resp.text();
        }
        return { resp, data };
      }

      loginForm.addEventListener("submit", async (e) => {
        e.preventDefault();
        try {
          const { resp, data } = await requestJson("/api/login", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ username: username.value, password: password.value }),
          });

          if (resp.ok && data.token) {
            tokenInput.value = data.token;
          }
          showResult("/api/login", data, resp.status);
        } catch (err) {
          showResult("/api/login", String(err), "ERR");
        }
      });

      async function callProtected(path) {
        const token = tokenInput.value.trim();
        if (!token) {
          showResult(path, { error: "Сначала получи или вставь JWT токен." }, 0);
          return;
        }

        try {
          const { resp, data } = await requestJson(path, {
            method: "GET",
            headers: { Authorization: `Bearer ${token}` },
          });
          showResult(path, data, resp.status);
        } catch (err) {
          showResult(path, String(err), "ERR");
        }
      }

      profileBtn.addEventListener("click", () => callProtected("/api/profile"));
      controlBtn.addEventListener("click", () => callProtected("/api/control"));
    </script>
  </body>
</html>
