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

{% block content %}
<div class="p-6 space-y-6" x-data="emailSettings()">

  <!-- Header -->
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-2xl font-bold text-gray-900">Email Settings</h1>
      <p class="mt-1 text-sm text-gray-500">
        SMTP configuration and security notification settings.
        Values are loaded from environment variables — edit your
        <code class="bg-gray-100 px-1 py-0.5 rounded text-xs font-mono">.env</code> file to change them.
      </p>
    </div>
    <!-- SMTP status badge -->
    {% if smtp_enabled %}
    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
      <i class="fas fa-check-circle mr-2 text-green-500"></i> SMTP Configured
    </span>
    {% else %}
    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
      <i class="fas fa-exclamation-triangle mr-2 text-yellow-500"></i> SMTP Not Configured
    </span>
    {% endif %}
  </div>

  <!-- SMTP Configuration Card -->
  <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-100 flex items-center space-x-3">
      <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
        <i class="fas fa-server text-blue-600 text-sm"></i>
      </div>
      <div>
        <p class="text-sm font-semibold text-gray-900">SMTP Configuration</p>
        <p class="text-xs text-gray-400">Set via environment variables</p>
      </div>
    </div>
    <div class="px-5 py-4">
      <dl class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <dt class="text-xs font-medium text-gray-500 uppercase tracking-wide">Host</dt>
          <dd class="mt-1 text-sm font-mono text-gray-900">
            {{ smtp_host or '—' }}:{{ smtp_port }}
          </dd>
        </div>
        <div>
          <dt class="text-xs font-medium text-gray-500 uppercase tracking-wide">Username</dt>
          <dd class="mt-1 text-sm font-mono text-gray-900">
            {% if smtp_user %}{{ smtp_user }}{% else %}<span class="text-gray-400 font-sans">Not set</span>{% endif %}
          </dd>
        </div>
        <div>
          <dt class="text-xs font-medium text-gray-500 uppercase tracking-wide">From Address</dt>
          <dd class="mt-1 text-sm font-mono text-gray-900">{{ smtp_from_name }} &lt;{{ smtp_from_email }}&gt;</dd>
        </div>
        <div>
          <dt class="text-xs font-medium text-gray-500 uppercase tracking-wide">Password</dt>
          <dd class="mt-1 text-sm text-gray-900">
            {% if smtp_user %}
              <span class="font-mono">••••••••</span>
              <span class="text-xs text-gray-400 ml-2">(set via SMTP_PASSWORD)</span>
            {% else %}
              <span class="text-gray-400">Not set</span>
            {% endif %}
          </dd>
        </div>
      </dl>

      {% if not smtp_enabled %}
      <div class="mt-4 bg-yellow-50 border border-yellow-200 rounded-lg p-4 text-sm text-yellow-800">
        <i class="fas fa-exclamation-triangle mr-2"></i>
        <strong>SMTP not configured.</strong> Add <code class="font-mono">SMTP_USER</code> and
        <code class="font-mono">SMTP_PASSWORD</code> to your <code class="font-mono">.env</code> file
        to enable email sending.
      </div>
      {% endif %}
    </div>
  </div>

  <!-- Security Notifications Card -->
  <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-100 flex items-center space-x-3">
      <div class="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0">
        <i class="fas fa-shield-alt text-indigo-600 text-sm"></i>
      </div>
      <div>
        <p class="text-sm font-semibold text-gray-900">Security Notifications</p>
        <p class="text-xs text-gray-400">Emails sent automatically on security events</p>
      </div>
    </div>
    <div class="divide-y divide-gray-100">
      {% set notifications = [
        ("Password changed", "Sent when a user changes or resets their password", "fa-key", True),
        ("2FA enabled", "Sent when two-factor authentication is enabled on an account", "fa-mobile-alt", True),
        ("2FA disabled", "Sent when two-factor authentication is disabled on an account", "fa-mobile-alt", True),
        ("Account locked", "Sent when an account is locked due to failed login attempts", "fa-lock", True),
        ("New login", "Sent on every login (optional, off by default)", "fa-sign-in-alt", False),
      ] %}
      {% for label, description, icon, is_default in notifications %}
      <div class="px-5 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-3">
          <i class="fas {{ icon }} text-gray-400 w-4"></i>
          <div>
            <p class="text-sm font-medium text-gray-900">{{ label }}</p>
            <p class="text-xs text-gray-500">{{ description }}</p>
          </div>
        </div>
        <div class="flex items-center space-x-2">
          {% if security_notifications_enabled %}
            {% if is_default or security_login_notifications %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">
              <i class="fas fa-circle mr-1 text-xs text-green-500"></i>Active
            </span>
            {% else %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-500">
              Disabled
            </span>
            {% endif %}
          {% else %}
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-500">
            Off (master switch)
          </span>
          {% endif %}
        </div>
      </div>
      {% endfor %}
    </div>
    <div class="px-5 py-3 bg-gray-50 border-t border-gray-100 text-xs text-gray-500">
      Controlled by <code class="font-mono">SECURITY_NOTIFICATIONS_ENABLED</code> and
      <code class="font-mono">SECURITY_LOGIN_NOTIFICATIONS</code> in your
      <code class="font-mono">.env</code> file.
    </div>
  </div>

  <!-- Test Email Card -->
  <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-100 flex items-center space-x-3">
      <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
        <i class="fas fa-paper-plane text-green-600 text-sm"></i>
      </div>
      <div>
        <p class="text-sm font-semibold text-gray-900">Send Test Email</p>
        <p class="text-xs text-gray-400">Verify your SMTP configuration is working</p>
      </div>
    </div>
    <div class="px-5 py-4">
      <div class="flex items-end space-x-3">
        <div class="flex-1">
          <label class="block text-sm font-medium text-gray-700 mb-1">Recipient address</label>
          <input type="email" x-model="testEmail" placeholder="you@example.com"
                 class="block w-full border border-gray-300 rounded-lg shadow-sm py-2 px-3
                        text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
        </div>
        <button @click="sendTest()" :disabled="sending || !testEmail"
                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium
                       rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none
                       focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50
                       disabled:cursor-not-allowed transition-colors">
          <span x-show="!sending"><i class="fas fa-paper-plane mr-2"></i>Send Test</span>
          <span x-show="sending"><i class="fas fa-spinner fa-spin mr-2"></i>Sending…</span>
        </button>
      </div>

      <!-- Result message -->
      <div x-show="resultMsg" x-transition
           :class="resultOk ? 'bg-green-50 border-green-200 text-green-800' : 'bg-red-50 border-red-200 text-red-800'"
           class="mt-4 border rounded-lg px-4 py-3 text-sm">
        <i :class="resultOk ? 'fas fa-check-circle text-green-500' : 'fas fa-times-circle text-red-500'"
           class="mr-2"></i>
        <span x-text="resultMsg"></span>
      </div>
    </div>
  </div>

  <!-- Quick Reference -->
  <div class="bg-blue-50 border border-blue-100 rounded-xl p-5">
    <h3 class="text-sm font-semibold text-blue-900 mb-3">
      <i class="fas fa-book mr-2"></i>Environment Variables Reference
    </h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs font-mono">
      <div class="space-y-1">
        <p class="text-gray-700">SMTP_HOST=smtp.gmail.com</p>
        <p class="text-gray-700">SMTP_PORT=587</p>
        <p class="text-gray-700">SMTP_USER=you@gmail.com</p>
        <p class="text-gray-700">SMTP_PASSWORD=app-password</p>
        <p class="text-gray-700">SMTP_FROM_EMAIL=noreply@app.com</p>
        <p class="text-gray-700">SMTP_FROM_NAME=MyApp</p>
      </div>
      <div class="space-y-1">
        <p class="text-gray-700">SECURITY_NOTIFICATIONS_ENABLED=true</p>
        <p class="text-gray-700">SECURITY_LOGIN_NOTIFICATIONS=false</p>
      </div>
    </div>
  </div>

</div>

<script>
function emailSettings() {
  return {
    testEmail: '',
    sending: false,
    resultMsg: '',
    resultOk: false,

    async sendTest() {
      if (!this.testEmail) return;
      this.sending = true;
      this.resultMsg = '';
      try {
        const resp = await fetch('/api/v1/admin/email/test', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${getAdminToken()}`,
          },
          body: JSON.stringify({ to_email: this.testEmail }),
        });
        const data = await resp.json();
        if (resp.ok) {
          this.resultOk = true;
          this.resultMsg = data.message;
        } else {
          this.resultOk = false;
          this.resultMsg = data.detail || 'Failed to send test email.';
        }
      } catch (e) {
        this.resultOk = false;
        this.resultMsg = 'Request failed: ' + e.message;
      } finally {
        this.sending = false;
      }
    },
  };
}

function getAdminToken() {
  return localStorage.getItem('access_token') || '';
}
</script>
{% endblock %}