{layout admin/layout}

<div class="nv-page-head">
  <div>
    <div class="nv-page-title">{lang admin.menu_mail}</div>
    <div class="nv-page-desc">{lang admin.mail_desc_1} {lang admin.mail_desc_2}</div>
  </div>
</div>

<div class="nv-card">
  <form method="post" action="{$entry_prefix}/admin/mail" id="nv-mail-form">
    <input type="hidden" name="_token" value="{$csrf}">
    <input type="hidden" name="_form_token" value="{$mail_token}">

    <div class="nv-card-body">
      <div class="nv-tips" style="margin-bottom:16px;line-height:1.8">
        {lang admin.mail_current_status}<strong>{if $cfg.driver == 'smtp'}{lang admin.mail_status_smtp}{elseif $cfg.driver == 'mail'}{lang admin.mail_status_mail}{else}{lang admin.mail_status_log}{/if}</strong>
      </div>

      <div class="nv-form-item">
        <label class="nv-label" for="mail_driver">{lang admin.mail_driver}</label>
        <div class="nv-control">
          <select class="nv-input" id="mail_driver" name="driver">
            <option value="smtp" {if $cfg.driver == 'smtp'}selected{/if}>{lang admin.mail_opt_smtp}</option>
            <option value="mail" {if $cfg.driver == 'mail'}selected{/if}>{lang admin.mail_opt_mail}</option>
            <option value="log" {if $cfg.driver == 'log'}selected{/if}>{lang admin.mail_opt_log}</option>
          </select>
          <p class="nv-tips">{lang admin.mail_smtp_fields_hint}</p>
        </div>
      </div>

      <div class="nv-form-item" data-mail-depends="smtp">
        <label class="nv-label" for="mail_host">{lang admin.mail_host}</label>
        <div class="nv-control">
          <input class="nv-input" type="text" id="mail_host" name="host" value="{$cfg.host}" placeholder="smtp.example.com">
        </div>
      </div>

      <div class="nv-form-item" data-mail-depends="smtp">
        <label class="nv-label" for="mail_port">{lang admin.mail_port}</label>
        <div class="nv-control">
          <input class="nv-input nv-input-sm" type="number" id="mail_port" name="port" value="{$cfg.port}" placeholder="465">
          <p class="nv-tips">{lang admin.mail_port_hint}</p>
        </div>
      </div>

      <div class="nv-form-item" data-mail-depends="smtp">
        <label class="nv-label" for="mail_encryption">{lang admin.mail_encryption}</label>
        <div class="nv-control">
          <select class="nv-input" id="mail_encryption" name="encryption">
            <option value="ssl" {if $cfg.encryption == 'ssl'}selected{/if}>{lang admin.mail_enc_ssl}</option>
            <option value="tls" {if $cfg.encryption == 'tls'}selected{/if}>{lang admin.mail_enc_tls}</option>
            <option value="none" {if $cfg.encryption == 'none'}selected{/if}>{lang admin.mail_enc_none}</option>
          </select>
        </div>
      </div>

      <div class="nv-form-item" data-mail-depends="smtp">
        <label class="nv-label" for="mail_auth">{lang admin.mail_auth}</label>
        <div class="nv-control">
          <select class="nv-input" id="mail_auth" name="auth">
            <option value="login" {if $cfg.auth == 'login'}selected{/if}>{lang admin.mail_auth_login}</option>
            <option value="plain" {if $cfg.auth == 'plain'}selected{/if}>plain</option>
          </select>
        </div>
      </div>

      <div class="nv-form-item" data-mail-depends="smtp">
        <label class="nv-label" for="mail_username">{lang admin.mail_username}</label>
        <div class="nv-control">
          <input class="nv-input" type="text" id="mail_username" name="username" value="{$cfg.username}" placeholder="{lang admin.mail_username_ph}">
        </div>
      </div>

      <div class="nv-form-item" data-mail-depends="smtp">
        <label class="nv-label" for="mail_password">{lang admin.mail_password}</label>
        <div class="nv-control">
          <input class="nv-input" type="password" id="mail_password" name="password" value=""
                 autocomplete="new-password"
                 placeholder="{if $has_password}{lang admin.mail_pass_saved}{else}{lang admin.mail_pass_ph}{/if}">
          <p class="nv-tips">{lang admin.mail_pass_hint_1} {lang admin.mail_pass_hint_2}</p>
        </div>
      </div>

      <div class="nv-form-item">
        <label class="nv-label" for="mail_from_address">{lang admin.mail_from_address}</label>
        <div class="nv-control">
          <input class="nv-input" type="text" id="mail_from_address" name="from_address" value="{$cfg.from.address}" placeholder="no-reply@example.com">
        </div>
      </div>

      <div class="nv-form-item">
        <label class="nv-label" for="mail_from_name">{lang admin.mail_from_name}</label>
        <div class="nv-control">
          <input class="nv-input" type="text" id="mail_from_name" name="from_name" value="{$cfg.from.name}" placeholder="{lang admin.mail_from_name_ph}">
        </div>
      </div>

      <div class="nv-form-item">
        <label class="nv-label" for="mail_timeout">{lang admin.mail_timeout}</label>
        <div class="nv-control">
          <input class="nv-input nv-input-sm" type="number" id="mail_timeout" name="timeout" value="{$cfg.timeout}" placeholder="10">
        </div>
      </div>
    </div>

    <div class="nv-toolbar">
      <button class="nv-btn nv-btn-primary" type="submit">{lang admin.save_config}</button>
      <button class="nv-btn" type="button" id="nv-mail-test">{lang admin.mail_send_test}</button>
      <span class="nv-hint" id="nv-mail-test-result"></span>
    </div>
  </form>
</div>

<script>
(function () {
  // 按驱动折叠无关字段：选 log / mail 时隐藏 SMTP 凭证输入
  var driver = document.getElementById('mail_driver');
  function syncDepends() {
    if (!driver) { return; }
    var items = document.querySelectorAll('[data-mail-depends]');
    for (var i = 0; i < items.length; i++) {
      items[i].style.display = (items[i].getAttribute('data-mail-depends') === driver.value) ? '' : 'none';
    }
  }
  if (driver) {
    driver.addEventListener('change', syncDepends);
    syncDepends();
  }

  // 发送测试邮件：用当前表单（可能未保存）的值，不要求先保存
  var btn = document.getElementById('nv-mail-test');
  var out = document.getElementById('nv-mail-test-result');
  if (!btn) { return; }

  // 一次性令牌用完即换：任何一次测试/保存之后都来这里领新票，
  // 否则「点一次测试再点保存」就会撞上「表单已过期」。
  function refreshToken() {
    fetch('{$entry_prefix}/admin/mail/token', {
      method: 'GET',
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      credentials: 'same-origin'
    }).then(function (r) { return r.json(); }).then(function (res) {
      var t = res && res.data && res.data.form_token;
      var hidden = document.querySelector('#nv-mail-form input[name="_form_token"]');
      if (t && hidden) { hidden.value = t; }
    }).catch(function () {});
  }

  btn.addEventListener('click', function () {
    var to = prompt('{lang admin.mail_test_to_prompt}');
    if (!to) { return; }
    to = to.trim();
    if (to === '') { return; }

    btn.disabled = true;
    out.style.color = '#6b7280';
    out.textContent = '{lang admin.mail_sending}';

    var f = document.getElementById('nv-mail-form');
    var body = new URLSearchParams();
    body.append('_token', f.querySelector('input[name="_token"]').value);
    body.append('_form_token', f.querySelector('input[name="_form_token"]').value);
    body.append('test_to', to);
    body.append('driver', f.driver.value);
    body.append('host', f.host.value);
    body.append('port', f.port.value);
    body.append('encryption', f.encryption.value);
    body.append('auth', f.auth.value);
    body.append('username', f.username.value);
    body.append('password', f.password.value);
    body.append('from_address', f.from_address.value);
    body.append('from_name', f.from_name.value);

    fetch('{$entry_prefix}/admin/mail/test', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
        'X-Requested-With': 'XMLHttpRequest'
      },
      credentials: 'same-origin',
      body: body.toString()
    }).then(function (r) { return r.json(); }).then(function (res) {
      var ok = res && res.code === 0;
      var detail = (res && res.data && res.data.detail) ? res.data.detail : (res && res.message ? res.message : '{lang admin.unknown_result}');
      out.style.color = ok ? '#1a7f37' : '#c0392b';
      out.textContent = detail;
    }).catch(function () {
      out.style.color = '#c0392b';
      out.textContent = '{lang admin.request_failed}';
    }).then(function () {
      btn.disabled = false;
      refreshToken();
    });
  });
})();
</script>