{% extends "admin/onboarding/base.html" %}
{% block title %}Erreichbarkeit{% endblock %}

{% block content %}
<h1>Ist dein Server erreichbar?</h1>
<p class="lead">
  Damit die TeamRally-App sich verbinden kann, muss dein Server aus dem
  Internet erreichbar sein. Prüfe das mit dem Knopf unten.
</p>

<button class="btn btn-ghost" id="check-btn" onclick="checkReachability()">
  Erreichbarkeit prüfen
</button>

<div id="check-result" style="margin-top: 14px; display: none;"></div>

<div id="firewall-hint" style="display: none; margin-top: 16px;">
  <div class="alert alert-warn">
    <strong>Port {{ base_url.split(':')[-1] }} ist nicht erreichbar.</strong>
    Bitte öffne den Port in der Firewall deines Hosters.
  </div>

  <details style="margin-top: 12px;">
    <summary style="cursor: pointer; color: var(--accent); font-size: 13px;">
      Anleitung: Firewall-Port öffnen
    </summary>
    <div style="margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.6;">
      <p><strong>Hetzner Cloud:</strong></p>
      <ol style="padding-left: 20px; margin-top: 6px;">
        <li>Öffne <a href="https://console.hetzner.cloud" target="_blank" style="color: var(--accent);">console.hetzner.cloud</a></li>
        <li>Wähle deinen Server → <em>Firewalls</em></li>
        <li>Klicke auf deine Firewall → <em>Regeln hinzufügen</em></li>
        <li>Protokoll: TCP, Port: <code>5000</code>, Quelle: <code>0.0.0.0/0</code></li>
        <li>Speichern — dann hier erneut prüfen</li>
      </ol>

      <p style="margin-top: 12px;"><strong>Andere Hoster / ufw:</strong></p>
      <pre>sudo ufw allow 5000/tcp
sudo ufw reload</pre>

      <p style="margin-top: 12px;"><strong>iptables:</strong></p>
      <pre>sudo iptables -A INPUT -p tcp --dport 5000 -j ACCEPT</pre>
    </div>
  </details>
</div>

<div class="alert alert-warn" style="margin-top: 20px; font-size: 13px;">
  <strong>Hinweis:</strong> Dieser Server läuft ohne HTTPS-Verschlüsselung.
  Betreibe ihn nur im Vereins-WLAN oder über ein VPN — nicht direkt offen im Internet.
</div>

<div class="btn-row">
  <a href="{{ url_for('onboarding.step_3') }}" class="btn btn-ghost">Überspringen</a>
  <a href="{{ url_for('onboarding.step_3') }}" class="btn btn-primary" id="continue-btn">
    Weiter &rarr;
  </a>
</div>
{% endblock %}

{% block scripts %}
<script>
const baseUrl = {{ base_url | tojson }};

async function checkReachability() {
  const btn    = document.getElementById('check-btn');
  const result = document.getElementById('check-result');
  const hint   = document.getElementById('firewall-hint');

  btn.disabled = true;
  btn.textContent = 'Prüfe …';
  result.style.display = 'none';
  hint.style.display = 'none';

  try {
    const resp = await fetch(baseUrl + '/health', { signal: AbortSignal.timeout(6000) });
    if (resp.ok) {
      result.innerHTML = '<div class="alert alert-success">✓ Server ist erreichbar!</div>';
      result.style.display = 'block';
    } else {
      throw new Error('HTTP ' + resp.status);
    }
  } catch (e) {
    result.innerHTML = '<div class="alert alert-error">✗ Server nicht erreichbar (' + e.message + ')</div>';
    result.style.display = 'block';
    hint.style.display = 'block';
  }

  btn.disabled = false;
  btn.textContent = 'Erneut prüfen';
}
</script>
{% endblock %}