<template>
  <div v-if="show" class="token-row">
    <div class="form-field token-field">
      <label>管理 Token</label>
      <div class="token-input-wrap">
        <input :value="token" @input="$emit('update:token', $event.target.value)" placeholder="粘贴管理员令牌后自动加载…" />
      </div>
    </div>
    <p
      v-if="message"
      class="msg-tag"
      :class="{ error: message.includes('失败') || message.includes('错误') }"
    >{{ message }}</p>
  </div>
  <p
    v-if="inlineMessage"
    class="msg-inline"
    :class="{ error: inlineMessage.includes('失败') || inlineMessage.includes('错误') }"
  >{{ 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>

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

.token-field {
  flex: 1;
  max-width: 460px;
  margin-bottom: 0;
}

.token-input-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}

.token-input-wrap input {
  flex: 1;
}

.msg-tag {
  font-size: 15px;
  color: var(--accent-2);
  padding: 4px 10px;
  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);
}

.msg-inline {
  font-size: 15px;
  color: var(--accent-2);
  margin-bottom: 12px;
}

.msg-inline.error {
  color: #c95a6a;
}

.small {
  padding: 7px 13px;
  font-size: 13px;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .token-row {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 12px;
  }

  .token-field {
    max-width: 100%;
  }
}
</style>
