<template>
  <div v-if="show" class="flex items-end gap-3.5 mb-4 p-4 bg-white/50 border border-white/35 rounded-lg flex-wrap max-md:flex-col max-md:items-stretch max-md:p-3">
    <div class="form-field flex-1 max-w-[460px] !mb-0 max-md:max-w-full">
      <label>管理 Token</label>
      <div class="flex gap-2 items-center">
        <input
          class="flex-1"
          :value="token"
          @input="$emit('update:token', $event.target.value)"
          placeholder="粘贴管理员令牌后自动加载…"
        />
      </div>
    </div>
    <p
      v-if="message"
      class="text-[15px] px-2.5 py-1 rounded bg-[rgba(217,168,120,0.12)] whitespace-nowrap"
      :class="message.includes('失败') || message.includes('错误') ? 'text-[#c95a6a] bg-[rgba(201,90,106,0.08)]' : 'text-accent2'"
    >{{ message }}</p>
  </div>
  <p
    v-if="inlineMessage"
    class="text-[15px] mb-3"
    :class="inlineMessage.includes('失败') || inlineMessage.includes('错误') ? 'text-[#c95a6a]' : 'text-accent2'"
  >{{ inlineMessage }}</p>
</template>

<script setup>
defineProps({
  show: { type: Boolean, default: true },
  token: { type: String, default: '' },
  message: { type: String, default: '' },
  inlineMessage: { type: String, default: '' }
})
defineEmits(['update:token'])
</script>
