<template>
  <div class="smtp-row">
    <div class="smtp-header">
      <span class="smtp-label">邮件通知配置</span>
      <span class="smtp-desc tag">下单/发货时自动给用户发送通知邮件（支持 QQ / 163 / Gmail / 自定义域名邮箱）</span>
      <span v-if="message" class="msg-tag" :class="{ error: message.includes('失败') }">{{ message }}</span>
    </div>
    <div class="smtp-enable-row">
      <label class="smtp-toggle">
        <input type="checkbox" v-model="form.enabled" />
        <span>启用邮件通知</span>
      </label>
      <span class="smtp-status-tag" :class="form.enabled ? 'tag-on' : 'tag-off'">
        {{ form.enabled ? '已启用' : '已关闭' }}
      </span>
    </div>
    <div class="smtp-fields" :class="{ 'smtp-fields-disabled': !form.enabled }">
      <label class="smtp-field">
        <span>发件邮箱</span>
        <input v-model="form.email" type="email" placeholder="noreply@yourdomain.com" :disabled="!form.enabled" />
      </label>
      <label class="smtp-field">
        <span>SMTP 密码 / 授权码</span>
        <input v-model="form.password" type="password" placeholder="QQ/163 填授权码；其他填密码" autocomplete="new-password" :disabled="!form.enabled" />
      </label>
      <label class="smtp-field">
        <span>发件人名称</span>
        <input v-model="form.fromName" type="text" placeholder="萌芽小店" :disabled="!form.enabled" />
      </label>
      <label class="smtp-field">
        <span>SMTP 主机</span>
        <input v-model="form.host" type="text" placeholder="smtp.qq.com" :disabled="!form.enabled" />
      </label>
      <label class="smtp-field smtp-field-port">
        <span>端口</span>
        <input v-model="form.port" type="text" placeholder="465" :disabled="!form.enabled" />
      </label>
      <button class="primary smtp-save-btn" type="button" :disabled="saving" @click="save">
        {{ saving ? '保存中...' : '保存配置' }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'

const props = defineProps({
  config: { type: Object, default: () => ({}) },
  message: { type: String, default: '' }
})

const emit = defineEmits(['save'])

const saving = ref(false)

const form = reactive({
  enabled:  true,
  email:    '',
  password: '',
  fromName: '',
  host:     'smtp.qq.com',
  port:     '465'
})

watch(() => props.config, (cfg) => {
  if (!cfg) return
  form.enabled  = cfg.enabled  !== false
  form.email    = cfg.email    || ''
  form.password = cfg.password || ''
  form.fromName = cfg.fromName || ''
  form.host     = cfg.host     || 'smtp.qq.com'
  form.port     = cfg.port     || '465'
}, { immediate: true })

const save = async () => {
  saving.value = true
  try {
    await emit('save', { ...form })
  } finally {
    saving.value = false
  }
}
</script>

<style scoped>
.smtp-row {
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 16px;
}

.smtp-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.smtp-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.smtp-desc {
  font-size: 13px;
  color: var(--muted);
}

.smtp-enable-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.smtp-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.smtp-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.smtp-status-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}

.tag-on {
  background: rgba(74, 222, 128, 0.15);
  color: #2d8a4e;
}

.tag-off {
  background: rgba(0,0,0,0.06);
  color: #888;
}

.smtp-fields {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.smtp-fields-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.smtp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 160px;
}

.smtp-field-port {
  max-width: 90px;
  flex: 0 0 90px;
}

.smtp-field span {
  font-size: 13px;
  color: var(--muted);
}

.smtp-field input {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
  font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.smtp-field input:focus {
  border-color: var(--accent);
}

.smtp-save-btn {
  align-self: flex-end;
  padding: 8px 18px;
  font-size: 14px;
  white-space: nowrap;
}

.msg-tag {
  font-size: 14px;
  color: var(--accent-2);
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(145, 168, 208, 0.1);
  white-space: nowrap;
}

.msg-tag.error {
  color: #c95a6a;
  background: rgba(201, 90, 106, 0.08);
}

@media (max-width: 900px) {
  .smtp-fields {
    flex-direction: column;
  }

  .smtp-field {
    min-width: 0;
    width: 100%;
  }

  .smtp-field-port {
    max-width: 100%;
    flex: 1;
  }
}
</style>
