{% extends "base.html" %}
{% block title %}Settings — Website Checker{% endblock %}
{% block content %}
<div class="page-header"><h1 class="page-title">Application Settings</h1></div>

<div class="settings-grid">
  <!-- Email Settings -->
  <div class="card">
    <div class="card-header"><h2 class="card-title">📧 Email Report Settings</h2></div>
    <form method="post" action="{{ url_for('admin_settings.save_email') }}">
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">Enable Email Reports</label>
          <select class="form-control" name="email_enabled">
            <option value="1" {{ 'selected' if email.get('email.enabled')=='1' }}>Enabled</option>
            <option value="0" {{ 'selected' if email.get('email.enabled')!='1' }}>Disabled</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">SMTP Host</label>
          <input class="form-control" name="email_smtp_host" value="{{ email.get('email.smtp_host','') }}">
        </div>
        <div class="form-row">
          <div class="form-group flex-1">
            <label class="form-label">Port</label>
            <input class="form-control" name="email_smtp_port" value="{{ email.get('email.smtp_port','587') }}">
          </div>
          <div class="form-group flex-1">
            <label class="form-label">Security</label>
            <select class="form-control" name="email_security">
              {% for mode in ['starttls','ssl','none'] %}
              <option {{ 'selected' if email.get('email.security')==mode }}>{{ mode }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">SMTP Username</label>
          <input class="form-control" name="email_smtp_user" value="{{ email.get('email.smtp_user','') }}">
        </div>
        <div class="form-group">
          <label class="form-label">SMTP Password</label>
          <input class="form-control" type="password" name="email_smtp_password" placeholder="(unchanged)">
        </div>
        <div class="form-group">
          <label class="form-label">From Address</label>
          <input class="form-control" type="email" name="email_smtp_from"
                 value="{{ email.get('email.smtp_from','') }}"
                 placeholder="noreply@yourdomain.com">
        </div>
        <div class="form-group">
          <label class="form-label">Recipients (comma-separated)</label>
          <input class="form-control" name="email_recipients" value="{{ email.get('email.recipients','') }}">
        </div>
        <div class="form-group">
          <label class="form-label">Send Time (HH:MM)</label>
          <input class="form-control" type="time" name="email_send_time" value="{{ email.get('email.send_time','08:00') }}">
        </div>
      </div>
      <div class="modal-footer">
        <span id="email-test-status" class="settings-test-status"></span>
        <button type="button" class="btn btn-ghost" onclick="testConnection('email')">📬 Test</button>
        <button class="btn btn-primary" type="submit">Save Email Settings</button>
      </div>
    </form>
  </div>

  <!-- Groq / AI Settings -->
  <div class="card">
    <div class="card-header"><h2 class="card-title">🤖 Groq AI Settings</h2></div>
    <form method="post" action="{{ url_for('admin_settings.save_groq') }}">
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">Groq API Key</label>
          <input class="form-control" type="password" name="groq_api_key"
                 placeholder="{{ '(key set)' if groq.get('groq.api_key') else 'Enter API key' }}">
        </div>
        <div class="form-group">
          <label class="form-label">Default Model</label>
          <select class="form-control" name="groq_model">
            {% for m in ['llama-3.3-70b-versatile','llama-3.1-8b-instant','gemma2-9b-it'] %}
            <option {{ 'selected' if groq.get('groq.model')==m }}>{{ m }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <span id="groq-test-status" class="settings-test-status"></span>
        <button type="button" class="btn btn-ghost" onclick="testConnection('groq')">🔌 Test</button>
        <button class="btn btn-primary" type="submit">Save AI Settings</button>
      </div>
    </form>
  </div>
</div>

<script>
function testConnection(type) {
  var url    = type === 'email' ? '/admin/settings/test-email' : '/admin/settings/test-groq';
  var status = document.getElementById(type + '-test-status');
  var btn    = event.target;
  btn.disabled    = true;
  btn.textContent = '…';
  status.textContent = '';
  status.className = 'settings-test-status';
  fetch(url, { method: 'POST', headers: { 'X-CSRFToken': getCsrfToken() } })
    .then(function(r) { return r.json(); })
    .then(function(d) {
      if (d.ok) {
        status.classList.add('ok');
        status.textContent = type === 'email'
          ? '✓ Test email sent to ' + d.to
          : '✓ Connected — model: ' + d.model;
      } else {
        status.classList.add('err');
        status.textContent = '✕ ' + d.error;
      }
    })
    .catch(function() {
      status.classList.add('err');
      status.textContent = '✕ Request failed';
    })
    .finally(function() {
      btn.disabled    = false;
      btn.textContent = type === 'email' ? '📬 Test' : '🔌 Test';
    });
}
</script>

<style>
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.settings-test-status { font-size: .78rem; margin-right: auto; max-width: 260px; }
.settings-test-status.ok  { color: var(--success, #16a34a); }
.settings-test-status.err { color: var(--danger,  #dc2626); }
@media(max-width:760px) { .settings-grid { grid-template-columns: 1fr; } }
</style>
{% endblock %}