<template>
  <div class="mail-panel-container">
    <!-- Card 1: SMTP Server Configuration -->
    <section class="settings-card">
      <div class="card-head">
        <div class="card-title-with-icon">
          <div class="model-icon-box slate">
            <i class="mdi mdi-send-outline"></i>
          </div>
          <div>
            <h4>发信服务器配置</h4>
            <p>维护系统发信的 SMTP 服务端点、网络端口与身份验证凭证。</p>
          </div>
        </div>
      </div>

      <div class="form-grid">
        <label class="field">
          <span><em>*</em> SMTP Host</span>
          <input v-model="mailForm.smtpHost" type="text" placeholder="例如 smtp.exmail.qq.com" />
        </label>

        <label class="field">
          <span><em>*</em> 端口</span>
          <input v-model.number="mailForm.port" type="number" min="1" max="65535" placeholder="SSL 默认 465" />
        </label>

        <label class="field">
          <span>加密方式</span>
          <EnterpriseSelect
            v-model="mailForm.encryption"
            :options="encryptionOptions"
            placeholder="选择加密方式"
          />
        </label>

        <label class="field">
          <span><em>*</em> 登录账号</span>
          <input v-model="mailForm.username" type="text" placeholder="请输入 SMTP 登录账号，通常为发信邮箱" />
        </label>

        <label class="field field-full">
          <span>SMTP 密码</span>
          <input
            v-model="mailForm.password"
            type="password"
            autocomplete="new-password"
            :placeholder="mailForm.passwordConfigured ? '已配置，如需修改请重新输入' : '请输入 SMTP 密码或客户端授权码'"
          />
          <small v-if="mailForm.passwordConfigured" class="secret-bound-state">
            <i class="mdi mdi-database-lock"></i>
            <span>密保已加密安全托管</span>
          </small>
        </label>
      </div>
    </section>

    <!-- Card 2: Sender Identity Card -->
    <section class="settings-card">
      <div class="card-head">
        <div class="card-title-with-icon">
          <div class="model-icon-box slate">
            <i class="mdi mdi-account-outline"></i>
          </div>
          <div>
            <h4>发信身份配置</h4>
            <p>设置邮件外显名称及默认的邮件接收账户。</p>
          </div>
        </div>
      </div>

      <div class="form-grid">
        <label class="field">
          <span>发件人名称</span>
          <input v-model="mailForm.senderName" type="text" placeholder="例如 X-Financial 财务系统" />
        </label>

        <label class="field">
          <span><em>*</em> 发件人邮箱</span>
          <input v-model="mailForm.senderAddress" type="email" placeholder="例如 admin@company.com" />
        </label>

        <label class="field field-full">
          <span>默认接收邮箱</span>
          <input v-model="mailForm.defaultReceiver" type="email" placeholder="审批待办等默认分发邮箱" />
        </label>
      </div>
    </section>

    <!-- Card 3: Notification Policy Card -->
    <section class="settings-card notice-card">
      <div class="card-head">
        <div class="card-title-with-icon">
          <div class="model-icon-box slate">
            <i class="mdi mdi-bell-ring-outline"></i>
          </div>
          <div>
            <h4>通知策略</h4>
            <p>控制各类业务消息是否通过邮件通知以及定时摘要发送频率。</p>
          </div>
        </div>
      </div>

      <div class="switch-group">
        <button class="switch-row" type="button" @click="toggleField('alertEnabled')">
          <span class="switch-copy">
            <strong>启用系统通知</strong>
            <small>审批申请、异常告警和核心系统事件可通过邮件实时触达用户。</small>
          </span>
          <span class="switch-btn" :class="{ active: mailForm.alertEnabled }"><i></i></span>
        </button>

        <button class="switch-row" type="button" @click="toggleField('digestEnabled')">
          <span class="switch-copy">
            <strong>启用日报摘要</strong>
            <small>每天定时发送系统运行概况与待办任务列表的邮件摘要。</small>
          </span>
          <span class="switch-btn" :class="{ active: mailForm.digestEnabled }"><i></i></span>
        </button>
      </div>

      <div class="digest-time-wrapper">
        <div class="form-grid">
          <label class="field" :class="{ disabled: !mailForm.digestEnabled }">
            <span>摘要发送时间</span>
            <input v-model="mailForm.digestTime" type="time" :disabled="!mailForm.digestEnabled" />
            <small>设定每日发送邮件简报的具体时间点。</small>
          </label>
        </div>
      </div>
    </section>
  </div>
</template>

<script src="./scripts/MailSettingsPanel.js"></script>

<style scoped src="../assets/styles/views/settings-view-form.css"></style>
<style scoped src="../assets/styles/views/settings-view.css"></style>

<style scoped>
.mail-panel-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.notice-card .switch-group {
  margin-bottom: 20px;
}

.digest-time-wrapper {
  margin-top: 4px;
}

.field.disabled {
  opacity: 0.6;
}

.field.disabled input {
  background: #f1f5f9;
  cursor: not-allowed;
}
</style>
