<template>
  <Teleport to="body">
    <Transition name="modal">
      <div
        v-if="open"
        class="admin-modal fixed inset-0 z-[1000] flex items-center justify-center bg-apptext/35 backdrop-blur-lg"
        @click.self="close"
      >
        <div class="admin-modal relative w-[360px] max-w-[90vw] px-8 pt-9 pb-7 glass-strong rounded-xl shadow-[0_24px_60px_rgba(33,33,40,0.22)] text-center">
          <button
            class="absolute top-3 right-4 bg-transparent border-none text-[22px] text-muted hover:text-apptext cursor-pointer px-2 py-1 rounded leading-none transition-colors"
            @click="close"
          >&times;</button>
          <div class="inline-flex items-center justify-center w-14 h-14 rounded-[10px] bg-gradient-to-br from-accent to-accent2 text-white mb-4">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
          </div>
          <h3 class="text-[22px] mb-1.5">管理员验证</h3>
          <p class="text-[15px] text-muted mb-5">请输入管理员令牌以访问后台</p>
          <form @submit.prevent="emit('submit')">
            <input
              ref="inputRef"
              :value="token"
              type="password"
              class="w-full px-4 py-3 rounded-lg border border-white/35 bg-white/65 text-center tracking-widest text-[18px] outline-none transition focus:border-accent focus:shadow-[0_0_0_3px_rgba(217,168,120,0.22)]"
              style="font-family: var(--font-serif);"
              placeholder="输入 Token…"
              autocomplete="off"
              @input="emit('update:token', $event.target.value)"
            />
            <p v-if="error" class="text-[15px] text-[#d4566a] mt-2">{{ error }}</p>
            <button type="submit" class="primary w-full mt-4 py-3 text-[17px]" :disabled="!token.trim()">
              进入后台
            </button>
          </form>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

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

const props = defineProps({
  open: { type: Boolean, default: false },
  token: { type: String, default: '' },
  error: { type: String, default: '' }
})

const emit = defineEmits(['update:open', 'update:token', 'submit'])

const inputRef = ref(null)

function close() {
  emit('update:open', false)
}

watch(
  () => props.open,
  (o) => {
    if (o) nextTick(() => inputRef.value?.focus())
  }
)
</script>
