{% extends "base.html" %}
{% block title %}Settings — Neto{% endblock %}

{% block content %}
<div class="page-title">Settings</div>

<form method="post" action="/settings">
  <div class="form-section">
    <h3>📶 2.4 GHz band</h3>
    <div class="form-grid">
      <div class="form-group">
        <label>SSID (network name)</label>
        <input type="text" name="ssid_24" value="{{ cfg.ssid_24 }}" placeholder="MyNetwork">
      </div>
      <div class="form-group">
        <label>Password</label>
        <input type="password" name="pass_24" value="{{ cfg.pass_24 }}" placeholder="Leave blank for open networks">
      </div>
    </div>
  </div>

  <div class="form-section">
    <h3>📶 5 GHz band</h3>
    <div class="form-grid">
      <div class="form-group">
        <label>SSID (network name)</label>
        <input type="text" name="ssid_5" value="{{ cfg.ssid_5 }}" placeholder="MyNetwork_5G">
      </div>
      <div class="form-group">
        <label>Password</label>
        <input type="password" name="pass_5" value="{{ cfg.pass_5 }}" placeholder="Leave blank for open networks">
      </div>
    </div>
  </div>

  <div class="form-section">
    <h3>🔧 Test targets</h3>
    <div class="form-grid">
      <div class="form-group">
        <label>External ping IP</label>
        <input type="text" name="external_ip" value="{{ cfg.external_ip }}" placeholder="8.8.8.8">
      </div>
      <div class="form-group">
        <label>DNS resolution target</label>
        <input type="text" name="dns_host" value="{{ cfg.dns_host }}" placeholder="google.com">
      </div>
      <div class="form-group">
        <label>Curl / webpage URL</label>
        <input type="text" name="curl_url" value="{{ cfg.curl_url }}" placeholder="http://detectportal.firefox.com/success.txt">
      </div>
      <div class="form-group">
        <label>WiFi interface</label>
        <input type="text" name="iface" value="{{ cfg.iface }}" placeholder="wlan0">
      </div>
    </div>
  </div>

  <div class="form-section">
    <h3>⏱ Schedule</h3>
    <div class="form-grid">
      <div class="form-group">
        <label>Test interval (minutes)</label>
        <input type="number" name="interval_min" value="{{ cfg.interval_min }}" min="1" max="60">
      </div>
      <div class="form-group">
        <label>Ping packet count</label>
        <input type="number" name="ping_count" value="{{ cfg.ping_count }}" min="1" max="50">
      </div>
      <div class="form-group">
        <label>Speedtest</label>
        <select name="speedtest_enabled">
          <option value="true"  {% if cfg.speedtest_enabled == 'true'  %}selected{% endif %}>Enabled</option>
          <option value="false" {% if cfg.speedtest_enabled == 'false' %}selected{% endif %}>Disabled (faster runs)</option>
        </select>
      </div>
    </div>
  </div>

  <div class="form-section">
    <h3>🔄 Automatic updates</h3>
    <div class="form-grid">
      <div class="form-group">
        <label>Update channel</label>
        <select name="update_channel">
          <option value="stable" {% if cfg.update_channel == 'stable' %}selected{% endif %}>Stable</option>
          <option value="beta"   {% if cfg.update_channel == 'beta'   %}selected{% endif %}>Beta</option>
        </select>
      </div>
      <div class="form-group">
        <label>Auto-install updates</label>
        <select name="ota_auto_update">
          <option value="false" {% if cfg.ota_auto_update == 'false' %}selected{% endif %}>Notify only</option>
          <option value="true"  {% if cfg.ota_auto_update == 'true'  %}selected{% endif %}>Auto-install</option>
        </select>
      </div>
    </div>
  </div>

  <!-- Collector -->
  <div class="form-section" style="margin-top:24px">
    <h3>📡 Central collector</h3>

    {% if not lic or lic.state != 'active' %}
    <div style="background:var(--amber-lt);border:1px solid #fde68a;border-radius:8px;padding:12px 16px;font-size:13px;color:#92400e;margin-bottom:16px">
      ⚠️ A valid Neto licence is required to use the collector feature.
      <a href="/licence" style="color:#92400e;font-weight:600">Activate licence →</a>
    </div>
    <div style="opacity:.5;pointer-events:none">
    {% endif %}

    <!-- Mode toggle — outside main form to avoid nesting -->
    <div style="background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin-bottom:20px">
      <div style="display:flex;align-items:center;justify-content:space-between">
        <div>
          <div style="font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px">
            {% if collector_mode %}🟢 Collector mode is ON{% else %}⚪ Collector mode is OFF{% endif %}
          </div>
          <div style="font-size:13px;color:var(--muted)">
            {% if collector_mode %}
              This Pi is acting as a central collector. Other Pis send their data here.
            {% else %}
              This Pi sends its data to a central collector server.
            {% endif %}
          </div>
        </div>
        <a href="/settings/collector-mode"
           class="save-btn" style="margin:0;padding:8px 16px;font-size:13px;text-decoration:none">
          {% if collector_mode %}Disable collector mode{% else %}Enable collector mode{% endif %}
        </a>
      </div>
    </div>

    {% if collector_mode %}
    <!-- Collector mode ON -->
    <div style="background:#f0fdf4;border:1px solid #86efac;border-radius:8px;padding:14px 18px;margin-bottom:16px;font-size:13px;color:#15803d">
      ⚠️ <strong>Important:</strong> Other Pis must use this Pi's <strong>ethernet (eth0) IP address</strong> in the collector URL, not its WiFi IP.
      This Pi must have an ethernet cable connected to remain reachable while its WiFi is used for monitoring.
      {% if eth_ip %}<br><strong>Your ethernet IP: {{ eth_ip }}</strong>{% endif %}
    </div>
    <div class="form-group">
      <label>Collector URL — enter this on other Neto Pis</label>
      <input type="text" readonly value="http://{{ eth_ip or 'ethernet-ip-here' }}:8080/collector/ingest"
             style="background:var(--bg);font-family:monospace;font-size:13px" onclick="this.select()">
    </div>
    <div class="form-group">
      <label>API key — enter this on other Neto Pis</label>
      <input type="text" readonly value="{{ collector_api_key }}"
             style="background:var(--bg);font-family:monospace;font-size:13px" onclick="this.select()">
    </div>
    {% if not eth_ip %}
    <div style="background:var(--amber-lt);border:1px solid #fde68a;border-radius:8px;padding:12px 16px;font-size:13px;color:#92400e">
      ⚠️ No ethernet connection detected. Connect an ethernet cable to use collector mode reliably.
    </div>
    {% endif %}
    <p style="font-size:13px;color:var(--muted);margin-top:8px">
      Click any field to select all text. <a href="/collector" style="color:var(--accent)">View collector dashboard →</a>
    </p>

    {% else %}
    <!-- Normal mode — send to collector -->
    <p class="section-desc">Enter the URL and API key of the Neto collector.</p>
    <div class="form-row">
      <div class="form-group">
        <label>Collector URL</label>
        <input type="text" name="collector_url"
               value="{{ cfg.get('collector_url','') }}"
               placeholder="http://192.168.1.100:8080/collector/ingest">
      </div>
      <div class="form-group">
        <label>API key</label>
        <input type="text" name="collector_api_key"
               value="{{ cfg.get('collector_api_key','') }}"
               placeholder="Paste API key from collector">
      </div>
    </div>
    {% endif %}

    {% if not lic or lic.state != 'active' %}
    </div>
    {% endif %}

  </div>

  <button class="save-btn" type="submit">Save settings</button>
</form>



<!-- Credentials -->
<div style="margin-top:32px;padding-top:24px;border-top:1px solid var(--border)">
  <div class="form-section">
    <h3>🔒 Login credentials</h3>
    <form method="post" action="/settings">
      <div class="form-grid">
        <div class="form-group">
          <label>Username</label>
          <input type="text" name="auth_user" value="{{ cfg.auth_user }}" autocomplete="off">
        </div>
        <div class="form-group">
          <label>New password</label>
          <input type="password" name="auth_pass" placeholder="Leave blank to keep current" autocomplete="new-password">
        </div>
      </div>
      <!-- Hidden fields to preserve other settings on this form submit -->
      {% for key in ['ssid_24','pass_24','ssid_5','pass_5','external_ip','dns_host','curl_url','iface','interval_min','speedtest_enabled','ping_count'] %}
        <input type="hidden" name="{{ key }}" value="{{ cfg[key] }}">
      {% endfor %}
      <button class="save-btn" type="submit" style="margin-top:16px">Update credentials</button>
    </form>
  </div>
</div>

<!-- Danger zone -->
<div style="margin-top:32px;padding-top:24px;border-top:1px solid var(--border)">
  <h3 style="font-size:15px;font-weight:500;color:#b91c1c;margin-bottom:14px">⚠️ Danger zone</h3>
  <div style="background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap">
    <div>
      <div style="font-weight:500;font-size:14px">Clear all results</div>
      <div style="font-size:13px;color:var(--muted);margin-top:2px">Permanently deletes all WiFi test and system stats data. Cannot be undone.</div>
    </div>
    <button onclick="showModal()"
      style="background:#dc2626;color:#fff;border:none;padding:9px 18px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:500;white-space:nowrap">
      Clear all results
    </button>
  </div>
</div>

<!-- Confirm modal -->
<div id="clear-modal" style="visibility:hidden;pointer-events:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:1000;display:flex;align-items:center;justify-content:center">
  <div style="background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:28px 32px;max-width:400px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,0.12)">
    <h3 style="font-size:17px;margin-bottom:8px">Clear all results?</h3>
    <p style="font-size:14px;color:var(--muted);margin-bottom:24px;line-height:1.6">This will permanently delete all WiFi test results and system stats. Your settings and credentials will be kept.</p>
    <div style="display:flex;gap:10px;justify-content:flex-end">
      <button onclick="hideModal()"
        style="background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:9px 18px;border-radius:7px;cursor:pointer;font-size:13px">
        Cancel
      </button>
      <form method="post" action="/clear-results" style="margin:0">
        <input type="hidden" name="confirm" value="yes">
        <button type="submit" style="background:#dc2626;color:#fff;border:none;padding:9px 18px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:500">
          Yes, clear everything
        </button>
      </form>
    </div>
  </div>
</div>
<div style="margin-top:32px;padding-top:20px;border-top:1px solid var(--border);display:flex;gap:20px;font-size:13px">
  <a href="/eula" style="color:var(--muted)">Terms of Use</a>
  <a href="/oss" style="color:var(--muted)">Open Source Notices</a>
</div>

<script>
function showModal() {
  const m = document.getElementById('clear-modal');
  m.style.visibility = 'visible';
  m.style.pointerEvents = 'auto';
}
function hideModal() {
  const m = document.getElementById('clear-modal');
  m.style.visibility = 'hidden';
  m.style.pointerEvents = 'none';
}
document.addEventListener('DOMContentLoaded', hideModal);
</script>

{% endblock %}