<template>
  <div class="px-[18px] py-3.5 bg-white/50 border border-white/35 rounded-lg mb-4">
    <!-- Header -->
    <div class="flex items-center gap-3 flex-wrap mb-3">
      <span class="text-[15px] font-semibold text-apptext whitespace-nowrap">邮件通知配置</span>
      <span class="text-[13px] text-muted">下单/发货时自动给用户发送通知邮件（支持 QQ / 163 / Gmail / 自定义域名邮箱）</span>
      <span
        v-if="message"
        class="text-sm px-2 py-0.5 rounded whitespace-nowrap"
        :class="message.includes('失败') ? 'text-[#c95a6a] bg-[rgba(201,90,106,0.08)]' : 'text-accent2 bg-[rgba(217,168,120,0.1)]'"
      >{{ message }}</span>
    </div>

    <!-- Enable toggle -->
    <div class="flex items-center gap-2.5 mb-3">
      <label class="flex items-center gap-1.5 cursor-pointer text-sm text-apptext font-medium">
        <input type="checkbox" v-model="form.enabled" class="w-4 h-4 accent-accent cursor-pointer" />
        <span>启用邮件通知</span>
      </label>
      <span
        class="text-xs font-semibold px-2 py-0.5 rounded-full"
        :class="form.enabled ? 'bg-[rgba(74,222,128,0.15)] text-[#2d8a4e]' : 'bg-black/[0.06] text-[#888]'"
      >{{ form.enabled ? '已启用' : '已关闭' }}</span>
    </div>

    <!-- Fields -->
    <div
      class="flex gap-2.5 flex-wrap items-end max-md:flex-col"
      :class="{ 'opacity-45 pointer-events-none': !form.enabled }"
    >
      <label class="flex flex-col gap-1 flex-1 min-w-[160px] max-md:min-w-0 max-md:w-full">
        <span class="text-[13px] text-muted">发件邮箱</span>
        <input v-model="form.email" type="email" placeholder="noreply@yourdomain.com" :disabled="!form.enabled" class="px-2.5 py-2 rounded-lg border border-white/35 bg-white/70 text-sm outline-none focus:border-accent transition w-full" style="font-family: var(--font-serif);" />
      </label>
      <label class="flex flex-col gap-1 flex-1 min-w-[160px] max-md:min-w-0 max-md:w-full">
        <span class="text-[13px] text-muted">SMTP 密码 / 授权码</span>
        <input v-model="form.password" type="password" placeholder="QQ/163 填授权码；其他填密码" autocomplete="new-password" :disabled="!form.enabled" class="px-2.5 py-2 rounded-lg border border-white/35 bg-white/70 text-sm outline-none focus:border-accent transition w-full" style="font-family: var(--font-serif);" />
      </label>
      <label class="flex flex-col gap-1 flex-1 min-w-[160px] max-md:min-w-0 max-md:w-full">
        <span class="text-[13px] text-muted">发件人名称</span>
        <input v-model="form.fromName" type="text" placeholder="萌芽小店" :disabled="!form.enabled" class="px-2.5 py-2 rounded-lg border border-white/35 bg-white/70 text-sm outline-none focus:border-accent transition w-full" style="font-family: var(--font-serif);" />
      </label>
      <label class="flex flex-col gap-1 flex-1 min-w-[160px] max-md:min-w-0 max-md:w-full">
        <span class="text-[13px] text-muted">SMTP 主机</span>
        <input v-model="form.host" type="text" placeholder="smtp.qq.com" :disabled="!form.enabled" class="px-2.5 py-2 rounded-lg border border-white/35 bg-white/70 text-sm outline-none focus:border-accent transition w-full" style="font-family: var(--font-serif);" />
      </label>
      <label class="flex flex-col gap-1 w-[90px] flex-shrink-0 max-md:w-full">
        <span class="text-[13px] text-muted">端口</span>
        <input v-model="form.port" type="text" placeholder="465" :disabled="!form.enabled" class="px-2.5 py-2 rounded-lg border border-white/35 bg-white/70 text-sm outline-none focus:border-accent transition w-full" style="font-family: var(--font-serif);" />
      </label>
      <button class="primary self-end px-[18px] py-2 text-sm whitespace-nowrap" 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>
