{% extends "base.html" %}
{% block title %}Log in · ABA PayWay Stream Alert{% endblock %}
{% block body %}
<div class="login-shell">
  <div class="login-card">
    <div class="brand" style="margin-bottom:18px;">
      <div class="brand-mark">A</div>
      <div class="brand-text">ABA Stream Alert<small>DONATION OVERLAYS</small></div>
    </div>

    <div class="login-tabs">
      <div class="login-tab active" id="tabPhoneBtn" onclick="showTab('phone')">Phone number</div>
      <div class="login-tab" id="tabQrBtn" onclick="showTab('qr')">Scan QR code</div>
    </div>

    <!-- PHONE FLOW -->
    <div id="tabPhone">
      <div id="stepPhone">
        <p class="help-text" style="margin-bottom:14px;">
          Uses Telegram's own published desktop app credentials — you only ever
          hand over your phone number, the login code, and (if enabled) your 2FA password.
        </p>
        <div class="field"><label>Phone number</label>
          <input type="tel" id="phoneInput" placeholder="+855 xx xxx xxx"></div>
        <button class="btn primary" style="width:100%;" onclick="sendPhone()">Send login code</button>
        <div class="error-text" id="phoneError"></div>
      </div>

      <div id="stepCode" class="hidden">
        <p class="help-text" style="margin-bottom:14px;">Enter the login code Telegram just sent to your app.</p>
        <div class="field"><label>Login code</label><input type="text" id="codeInput" placeholder="12345"></div>
        <button class="btn primary" style="width:100%;" onclick="sendCode()">Confirm code</button>
        <div class="error-text" id="codeError"></div>
      </div>

      <div id="stepPassword" class="hidden">
        <p class="help-text" style="margin-bottom:14px;">This account has 2FA enabled — enter your cloud password.</p>
        <div class="field"><label>Cloud password</label><input type="password" id="passwordInput"></div>
        <button class="btn primary" style="width:100%;" onclick="sendPassword()">Log in</button>
        <div class="error-text" id="passwordError"></div>
      </div>
    </div>

    <!-- QR FLOW -->
    <div id="tabQr" class="hidden">
      <div class="qr-wrap">
        <img id="qrImg" src="" alt="QR code">
        <p class="help-text" style="text-align:center;">
          Open Telegram → Settings → Devices → Link Desktop Device, then scan this code.
        </p>
        <button class="btn small" onclick="startQr()">↻ Refresh QR</button>
      </div>
      <div id="qrPasswordStep" class="hidden" style="margin-top:14px;">
        <div class="field"><label>Cloud password (2FA)</label><input type="password" id="qrPasswordInput"></div>
        <button class="btn primary" style="width:100%;" onclick="sendQrPassword()">Log in</button>
      </div>
      <div class="error-text" id="qrError"></div>
    </div>
  </div>
</div>

<script>
function j(method, url, body) {
  return fetch(url, { method, headers: { "Content-Type": "application/json" }, body: body ? JSON.stringify(body) : undefined })
    .then(r => r.json());
}

function showTab(name) {
  document.getElementById("tabPhone").classList.toggle("hidden", name !== "phone");
  document.getElementById("tabQr").classList.toggle("hidden", name !== "qr");
  document.getElementById("tabPhoneBtn").classList.toggle("active", name === "phone");
  document.getElementById("tabQrBtn").classList.toggle("active", name === "qr");
  if (name === "qr") startQr();
}

async function sendPhone() {
  const phone = document.getElementById("phoneInput").value.trim();
  const err = document.getElementById("phoneError"); err.textContent = "";
  if (!phone) { err.textContent = "Enter your phone number."; return; }
  const res = await j("POST", "/api/auth/phone/start", { phone });
  if (res.ok) {
    document.getElementById("stepPhone").classList.add("hidden");
    document.getElementById("stepCode").classList.remove("hidden");
  } else { err.textContent = res.error || "Failed to send code."; }
}

async function sendCode() {
  const code = document.getElementById("codeInput").value.trim();
  const err = document.getElementById("codeError"); err.textContent = "";
  const res = await j("POST", "/api/auth/phone/code", { code });
  if (res.ok && res.status === "password_needed") {
    document.getElementById("stepCode").classList.add("hidden");
    document.getElementById("stepPassword").classList.remove("hidden");
  } else if (res.ok && res.status === "logged_in") {
    window.location.href = "/";
  } else { err.textContent = res.error || "Invalid code."; }
}

async function sendPassword() {
  const password = document.getElementById("passwordInput").value;
  const err = document.getElementById("passwordError"); err.textContent = "";
  const res = await j("POST", "/api/auth/phone/password", { password });
  if (res.ok && res.status === "logged_in") { window.location.href = "/"; }
  else { err.textContent = res.error || "Invalid password."; }
}

let qrPollTimer = null;
async function startQr() {
  const err = document.getElementById("qrError"); err.textContent = "";
  const res = await j("POST", "/api/auth/qr/start");
  if (!res.ok) { err.textContent = res.error || "Could not start QR login."; return; }
  document.getElementById("qrImg").src = res.qr;
  clearInterval(qrPollTimer);
  qrPollTimer = setInterval(pollQr, 1500);
}

async function pollQr() {
  const res = await fetch("/api/auth/qr/status").then(r => r.json());
  if (res.status === "logged_in") {
    clearInterval(qrPollTimer);
    window.location.href = "/";
  } else if (res.status === "password_needed") {
    clearInterval(qrPollTimer);
    document.getElementById("qrPasswordStep").classList.remove("hidden");
  } else if (res.status === "qr_expired") {
    clearInterval(qrPollTimer);
    document.getElementById("qrError").textContent = "QR code expired — refreshing…";
    startQr();
  }
}

async function sendQrPassword() {
  const password = document.getElementById("qrPasswordInput").value;
  const res = await j("POST", "/api/auth/phone/password", { password });
  if (res.ok && res.status === "logged_in") { window.location.href = "/"; }
  else { document.getElementById("qrError").textContent = res.error || "Invalid password."; }
}
</script>
{% endblock %}