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

{% block extra_head %}
<style>
  .settings-section { margin-bottom: 2rem; }
  .settings-section .section-header {
    border-bottom: 2px solid #dee2e6;
    padding-bottom: .5rem;
    margin-bottom: 1.25rem;
    font-weight: 700;
    font-size: 1rem;
    color: #212529;
  }
  .setting-row { margin-bottom: 1.25rem; }
  .setting-description { font-size: .82rem; color: #6c757d; margin-top: .25rem; }
</style>
{% endblock %}

{% block content %}

<div class="d-flex align-items-center justify-content-between mb-3">
  <h4 class="fw-bold mb-0"><i class="bi bi-gear-fill me-2 text-primary"></i>Settings</h4>
</div>

<div class="row g-3">
  <div class="col-lg-8">

    <!-- Settings Form -->
    <form method="POST" action="{{ url_for('settings.index') }}" novalidate>
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

      <!-- ===== SPAM SCORE THRESHOLDS ===== -->
      <div class="card border-0 shadow-sm settings-section mb-3">
        <div class="card-body">
          <div class="section-header">
            <i class="bi bi-speedometer2 me-2 text-warning"></i>Spam Score Thresholds
          </div>

          <div class="row">
            <div class="col-md-4 setting-row">
              <label class="form-label fw-semibold" for="spam_score_reject">
                Reject Score
              </label>
              <div class="input-group">
                <input type="number" step="0.1" min="0" max="100"
                       class="form-control" id="spam_score_reject" name="spam_score_reject"
                       value="{{ settings.spam_score_reject | default(15.0) }}">
                <span class="input-group-text bg-danger text-white">
                  <i class="bi bi-x-circle-fill"></i>
                </span>
              </div>
              <div class="setting-description">
                Messages scoring above this threshold are rejected outright.
              </div>
            </div>

            <div class="col-md-4 setting-row">
              <label class="form-label fw-semibold" for="spam_score_review">
                Review/Quarantine Score
              </label>
              <div class="input-group">
                <input type="number" step="0.1" min="0" max="100"
                       class="form-control" id="spam_score_review" name="spam_score_review"
                       value="{{ settings.spam_score_review | default(6.0) }}">
                <span class="input-group-text bg-warning text-dark">
                  <i class="bi bi-exclamation-circle-fill"></i>
                </span>
              </div>
              <div class="setting-description">
                Messages scoring above this are held for review in quarantine.
              </div>
            </div>

            <div class="col-md-4 setting-row">
              <label class="form-label fw-semibold" for="spam_score_tag">
                Tag Score
              </label>
              <div class="input-group">
                <input type="number" step="0.1" min="0" max="100"
                       class="form-control" id="spam_score_tag" name="spam_score_tag"
                       value="{{ settings.spam_score_tag | default(4.0) }}">
                <span class="input-group-text bg-info text-white">
                  <i class="bi bi-tag-fill"></i>
                </span>
              </div>
              <div class="setting-description">
                Messages above this score have spam headers added but are still delivered.
              </div>
            </div>
          </div>

          <div class="alert alert-light border small d-flex align-items-center gap-2 mt-1 mb-0">
            <i class="bi bi-info-circle text-info fs-5 flex-shrink-0"></i>
            <span>Score thresholds must satisfy: <strong>Tag &le; Review &le; Reject</strong></span>
          </div>
        </div>
      </div>

      <!-- ===== TESTING MODE ===== -->
      <div class="card border-0 shadow-sm settings-section mb-3
        {% if settings.hold_all == '1' %}border-warning border-2{% endif %}">
        <div class="card-body">
          <div class="section-header">
            <i class="bi bi-cone-striped me-2 text-warning"></i>Testing Mode
          </div>
          <div class="setting-row mb-0">
            <div class="form-check form-switch">
              <input class="form-check-input" type="checkbox" role="switch"
                     id="hold_all" name="hold_all" value="1"
                     {% if settings.hold_all == '1' %}checked{% endif %}>
              <label class="form-check-label fw-semibold" for="hold_all">
                Hold all mail - do not auto-release clean messages
              </label>
            </div>
            <div class="setting-description mt-1">
              When enabled, all messages (including clean ones) are held in quarantine
              and must be manually released via "Release to Recipient". Use during
              testing to prevent unreviewed mail from reaching your mail server.
            </div>
          </div>
        </div>
      </div>

      <!-- ===== QUARANTINE ===== -->
      <div class="card border-0 shadow-sm settings-section mb-3">
        <div class="card-body">
          <div class="section-header">
            <i class="bi bi-inbox-fill me-2 text-primary"></i>Quarantine
          </div>

          <div class="row">
            <div class="col-md-4 setting-row">
              <label class="form-label fw-semibold" for="quarantine_retention_days">
                Retention (Days)
              </label>
              <div class="input-group">
                <input type="number" min="1" max="365"
                       class="form-control" id="quarantine_retention_days" name="quarantine_retention_days"
                       value="{{ settings.quarantine_retention_days | default(30) }}">
                <span class="input-group-text bg-light">
                  <i class="bi bi-calendar-range text-muted"></i>
                </span>
              </div>
              <div class="setting-description">
                Quarantined messages older than this are automatically purged.
              </div>
            </div>

            <div class="col-md-4 setting-row">
              <label class="form-label fw-semibold" for="max_message_size_mb">
                Max Message Size (MB)
              </label>
              <div class="input-group">
                <input type="number" min="1" max="1000" step="1"
                       class="form-control" id="max_message_size_mb" name="max_message_size_mb"
                       value="{{ settings.max_message_size_mb | default(25) }}">
                <span class="input-group-text bg-light">MB</span>
              </div>
              <div class="setting-description">
                Messages larger than this size are rejected before scanning.
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- ===== CLUSTER SYNC ===== -->
      <div class="card border-0 shadow-sm settings-section mb-3">
        <div class="card-body">
          <div class="section-header">
            <i class="bi bi-arrow-repeat me-2 text-success"></i>Cluster Sync
          </div>

          <div class="row">
            <div class="col-md-4 setting-row">
              <label class="form-label fw-semibold" for="sync_interval_minutes">
                Sync Interval (Minutes)
              </label>
              <div class="input-group">
                <input type="number" min="1" max="1440"
                       class="form-control" id="sync_interval_minutes" name="sync_interval_minutes"
                       value="{{ settings.sync_interval_minutes | default(5) }}">
                <span class="input-group-text bg-light">
                  <i class="bi bi-clock text-muted"></i>
                </span>
              </div>
              <div class="setting-description">
                How frequently this node synchronises configuration with peer nodes (in minutes).
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- ===== RECIPIENT VERIFICATION ===== -->
      <div class="card border-0 shadow-sm settings-section mb-3">
        <div class="card-body">
          <div class="section-header">
            <i class="bi bi-person-check me-2 text-secondary"></i>Recipient Verification
          </div>

          <div class="row">
            <div class="col-md-4 setting-row">
              <label class="form-label fw-semibold" for="recipient_verify_dropafter">
                Drop After (Invalid Recipients)
              </label>
              <div class="input-group">
                <input type="number" min="1" max="100"
                       class="form-control" id="recipient_verify_dropafter" name="recipient_verify_dropafter"
                       value="{{ settings.recipient_verify_dropafter | default(10) }}">
                <span class="input-group-text bg-light">
                  <i class="bi bi-person-x text-muted"></i>
                </span>
              </div>
              <div class="setting-description">
                Drop the SMTP connection after this many invalid recipients in a single session.
              </div>
            </div>

            <div class="col-md-4 setting-row">
              <label class="form-label fw-semibold" for="recipient_verify_window_hours">
                Counting Window (Hours)
              </label>
              <div class="input-group">
                <input type="number" min="1" max="168"
                       class="form-control" id="recipient_verify_window_hours" name="recipient_verify_window_hours"
                       value="{{ settings.recipient_verify_window_hours | default(24) }}">
                <span class="input-group-text bg-light">
                  <i class="bi bi-clock-history text-muted"></i>
                </span>
              </div>
              <div class="setting-description">
                Sliding window (hours) for counting invalid-recipient events per sending IP.
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="d-flex gap-2 mb-3">
        <button type="submit" class="btn btn-primary">
          <i class="bi bi-save-fill me-2"></i>Save Settings
        </button>
        <a href="{{ url_for('settings.index') }}" class="btn btn-outline-secondary">
          <i class="bi bi-arrow-counterclockwise me-1"></i>Reset
        </a>
      </div>

    </form>

      <!-- ===== SECONDARY NODES ===== -->
      {% set sync_secs = ([settings.sync_interval_minutes | default(5) | int, 1] | max) * 60 %}
      <div class="card border-0 shadow-sm settings-section mb-3">
        <div class="card-body">
          <div class="d-flex align-items-center justify-content-between mb-3">
            <div class="section-header mb-0">
              <i class="bi bi-hdd-network me-2 text-secondary"></i>Secondary Nodes
            </div>
            {% if settings.node_role == 'main' %}
            <button class="btn btn-sm btn-outline-primary" type="button"
                    id="toggleAddSecondary">
              <i class="bi bi-plus-circle me-1"></i>Add Secondary
            </button>
            {% endif %}
          </div>

          {% if cluster_nodes %}
          <div class="table-responsive mb-3">
            <table class="table table-sm table-hover mb-0">
              <thead class="table-light">
                <tr>
                  <th>Hostname</th>
                  <th>IP Address</th>
                  <th>Role</th>
                  <th>Last Seen</th>
                  <th>Status</th>
                  {% if settings.node_role == 'main' %}<th></th>{% endif %}
                </tr>
              </thead>
              <tbody>
                {% for node in cluster_nodes %}
                {% if node.last_seen %}
                  {% set age_secs = (now - node.last_seen).total_seconds() %}
                {% else %}
                  {% set age_secs = -1 %}
                {% endif %}
                <tr>
                  <td class="font-monospace small">{{ node.hostname }}</td>
                  <td class="font-monospace small">{{ node.ip_address }}</td>
                  <td>{{ node.node_role }}</td>
                  <td class="small">
                    {% if node.last_seen %}
                      {{ node.last_seen.strftime('%Y-%m-%d %H:%M') }}
                    {% else %}-{% endif %}
                  </td>
                  <td>
                    {% if age_secs >= 0 and age_secs < sync_secs * 2 %}
                      <span class="badge bg-success">OK</span>
                    {% elif age_secs >= 0 and age_secs < sync_secs * 6 %}
                      <span class="badge bg-warning text-dark">Late</span>
                    {% elif age_secs >= 0 %}
                      <span class="badge bg-danger">Down</span>
                    {% else %}
                      <span class="badge bg-secondary">Unknown</span>
                    {% endif %}
                  </td>
                  {% if settings.node_role == 'main' %}
                  <td>
                    {% if node.node_role == 'secondary' %}
                    <form method="POST"
                          action="{{ url_for('settings.secondary_remove', node_id=node.id) }}"
                          data-confirm-msg="Remove {{ node.hostname | e }}? This will immediately revoke its database access."
                          onsubmit="return confirm(this.dataset.confirmMsg)">
                      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                      <button type="submit" class="btn btn-sm btn-outline-danger py-0"
                              title="Remove secondary">
                        <i class="bi bi-trash"></i>
                      </button>
                    </form>
                    {% endif %}
                  </td>
                  {% endif %}
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% else %}
          <p class="text-muted small mb-3">No secondary nodes registered yet.</p>
          {% endif %}

          {% if settings.node_role == 'main' %}
          <!-- Add Secondary Form -->
          <div id="addSecondaryPanel" class="border rounded p-3 bg-light mb-3"
               style="display:none">
            <h6 class="fw-semibold mb-3">
              <i class="bi bi-plus-circle me-2 text-primary"></i>Add Secondary Node
            </h6>
            <form method="POST" action="{{ url_for('settings.secondary_add') }}" novalidate>
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <div class="row g-2 mb-2">
                <div class="col-md-4">
                  <label class="form-label form-label-sm fw-semibold">
                    Secondary Hostname (FQDN)
                  </label>
                  <input type="text" name="hostname" class="form-control form-control-sm"
                         placeholder="mx2.example.com"
                         value="{{ secondary_form.hostname if secondary_form else '' }}">
                </div>
                <div class="col-md-3">
                  <label class="form-label form-label-sm fw-semibold">
                    Secondary IP Address
                  </label>
                  <input type="text" name="ip_address" class="form-control form-control-sm"
                         placeholder="10.0.0.201"
                         value="{{ secondary_form.ip_address if secondary_form else '' }}">
                </div>
                <div class="col-md-4">
                  <label class="form-label form-label-sm fw-semibold">DB Password</label>
                  <div class="input-group input-group-sm">
                    <input type="text" name="db_password" id="secDbPassword"
                           class="form-control form-control-sm font-monospace"
                           autocomplete="off"
                           value="{{ secondary_form.db_password if secondary_form else '' }}">
                    <button type="button" class="btn btn-sm btn-outline-secondary"
                            id="genSecPassword" title="Auto-generate password">
                      <i class="bi bi-arrow-repeat"></i>
                    </button>
                  </div>
                </div>
              </div>
              <button type="submit" class="btn btn-sm btn-primary">
                <i class="bi bi-eye me-1"></i>Preview SQL
              </button>
            </form>
          </div>

          <!-- SQL Preview Panel (shown after form submit) -->
          {% if sql_preview %}
          <div class="border rounded p-3 bg-white mb-3">
            <h6 class="fw-semibold mb-2">
              <i class="bi bi-code-square me-2 text-success"></i>SQL to Execute
            </h6>
            <pre class="bg-dark text-light rounded p-2 small mb-3"
                 id="sqlPreviewBlock">{{ sql_preview }}</pre>
            <form method="POST" action="{{ url_for('settings.secondary_execute') }}">
              <input type="hidden" name="csrf_token"  value="{{ csrf_token() }}">
              <input type="hidden" name="hostname"    value="{{ secondary_form.hostname }}">
              <input type="hidden" name="ip_address"  value="{{ secondary_form.ip_address }}">
              <input type="hidden" name="db_password" value="{{ secondary_form.db_password }}">
              <div class="d-flex gap-2">
                <button type="button" id="copySql" class="btn btn-sm btn-outline-secondary">
                  <i class="bi bi-clipboard me-1" id="copySqlIcon"></i><span
                  id="copySqlText">Copy SQL</span>
                </button>
                <button type="submit" class="btn btn-sm btn-success">
                  <i class="bi bi-play-fill me-1"></i>Execute
                </button>
              </div>
            </form>
          </div>
          {% endif %}
          {% endif %}

          <div class="setting-description mt-1">
            Status thresholds based on sync interval ({{ settings.sync_interval_minutes | default(5) }} min):
            <strong>OK</strong> = checked in within {{ sync_secs * 2 // 60 }} min,
            <strong>Late</strong> = within {{ sync_secs * 6 // 60 }} min,
            <strong>Down</strong> = overdue.
          </div>
        </div>
      </div>

  </div><!-- /col-lg-8 -->

  <!-- RIGHT COLUMN: API Token -->
  <div class="col-lg-4">
    <div class="card border-0 shadow-sm h-auto">
      <div class="card-header bg-dark text-white py-2">
        <h6 class="mb-0 fw-bold">
          <i class="bi bi-key-fill me-2 text-warning"></i>API Token
        </h6>
      </div>
      <div class="card-body">
        <p class="text-muted small">
          The API token is used to authenticate requests to the SpamGate REST API.
          Keep it secret - treat it like a password.
        </p>

        {% if settings is defined and settings.api_token %}
        <div class="mb-3">
          <label class="form-label form-label-sm fw-semibold text-muted">Current Token</label>
          <div class="input-group input-group-sm">
            <input type="password" class="form-control font-monospace"
                   id="apiTokenDisplay" value="{{ settings.api_token }}" readonly>
            <button class="btn btn-outline-secondary" type="button" id="toggleApiToken" title="Show/hide token">
              <i class="bi bi-eye" id="apiTokenIcon"></i>
            </button>
            <button class="btn btn-outline-secondary" type="button" id="copyApiToken" title="Copy to clipboard">
              <i class="bi bi-clipboard"></i>
            </button>
          </div>
        </div>
        {% else %}
        <p class="text-muted fst-italic small mb-3">API token is set but not displayed for security. Use Regenerate to issue a new token.</p>
        {% endif %}

        <div class="alert alert-warning border-warning small d-flex align-items-start gap-2 mb-3">
          <i class="bi bi-exclamation-triangle-fill text-warning flex-shrink-0 mt-1"></i>
          <div>
            <strong>Warning:</strong> Regenerating the token will immediately invalidate any existing integrations using the current token.
          </div>
        </div>

        <form method="POST" action="{{ url_for('settings.regenerate_token') }}"
              onsubmit="return confirm('Regenerate the API token? Any existing integrations using the current token will stop working immediately.')">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn btn-outline-danger w-100">
            <i class="bi bi-arrow-repeat me-2"></i>Regenerate Token
          </button>
        </form>
      </div>
    </div>

    <!-- Info Card -->
    <div class="card border-0 shadow-sm mt-3">
      <div class="card-header bg-white border-bottom py-2">
        <h6 class="mb-0 fw-semibold text-muted">
          <i class="bi bi-info-circle me-2"></i>About Settings
        </h6>
      </div>
      <div class="card-body small text-muted">
        <ul class="list-unstyled mb-0">
          <li class="mb-1"><i class="bi bi-dot"></i>Settings are applied immediately on save.</li>
          <li class="mb-1"><i class="bi bi-dot"></i>Postfix/Rspamd may require a reload to reflect score changes.</li>
          <li class="mb-1"><i class="bi bi-dot"></i>Retention purge runs on a daily schedule.</li>
        </ul>
      </div>
    </div>

  </div><!-- /col-lg-4 -->

</div><!-- /row -->

{% endblock %}

{% block extra_scripts %}
<script>
(function () {
  const tokenInput = document.getElementById('apiTokenDisplay');
  const tokenIcon  = document.getElementById('apiTokenIcon');
  const toggleBtn  = document.getElementById('toggleApiToken');
  const copyBtn    = document.getElementById('copyApiToken');

  if (toggleBtn && tokenInput) {
    toggleBtn.addEventListener('click', () => {
      const isPassword = tokenInput.type === 'password';
      tokenInput.type = isPassword ? 'text' : 'password';
      tokenIcon.className = isPassword ? 'bi bi-eye-slash' : 'bi bi-eye';
    });
  }

  if (copyBtn && tokenInput) {
    copyBtn.addEventListener('click', () => {
      navigator.clipboard.writeText(tokenInput.value).then(() => {
        const icon = copyBtn.querySelector('i');
        icon.className = 'bi bi-clipboard-check text-success';
        setTimeout(() => { icon.className = 'bi bi-clipboard'; }, 2000);
      });
    });
  }
})();
</script>
<script>
(function () {
  var toggleBtn = document.getElementById('toggleAddSecondary');
  var panel     = document.getElementById('addSecondaryPanel');
  if (toggleBtn && panel) {
    {% if secondary_form %}
    panel.style.display = 'block';
    {% endif %}
    toggleBtn.addEventListener('click', function () {
      panel.style.display = (panel.style.display === 'none') ? 'block' : 'none';
    });
  }

  var genBtn  = document.getElementById('genSecPassword');
  var pwField = document.getElementById('secDbPassword');
  if (genBtn && pwField) {
    genBtn.addEventListener('click', function () {
      var chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';
      var buf = new Uint8Array(24);
      crypto.getRandomValues(buf);
      var pw = '';
      for (var i = 0; i < 24; i++) {
        pw += chars.charAt(buf[i] % chars.length);
      }
      pwField.value = pw;
    });
  }

  var copyBtn  = document.getElementById('copySql');
  var sqlBlock = document.getElementById('sqlPreviewBlock');
  var copyIcon = document.getElementById('copySqlIcon');
  var copyText = document.getElementById('copySqlText');
  if (copyBtn && sqlBlock && copyIcon && copyText) {
    copyBtn.addEventListener('click', function () {
      navigator.clipboard.writeText(sqlBlock.textContent.trim()).then(function () {
        copyIcon.className = 'bi bi-clipboard-check me-1 text-success';
        copyText.textContent = 'Copied';
        setTimeout(function () {
          copyIcon.className = 'bi bi-clipboard me-1';
          copyText.textContent = 'Copy SQL';
        }, 2000);
      });
    });
  }
})();
</script>
{% endblock %}