<template>
  <div class="flex items-center gap-4 flex-wrap mb-4 px-[18px] py-3.5 bg-white/50 border border-white/35 rounded-lg max-md:flex-col max-md:items-stretch max-md:px-3 max-md:py-2.5 max-md:gap-2.5">
    <!-- Left: label + toggle -->
    <div class="flex items-center gap-3 flex-shrink-0">
      <span class="text-[15px] font-semibold text-apptext whitespace-nowrap">站点维护模式</span>
      <button
        class="px-4 py-1.5 rounded-full text-sm font-semibold border-none cursor-pointer transition"
        :class="enabled
          ? 'bg-[rgba(201,90,106,0.15)] text-[#c95a6a] hover:bg-[rgba(201,90,106,0.25)]'
          : 'bg-[rgba(100,185,140,0.15)] text-[#3a9a68] hover:bg-[rgba(100,185,140,0.25)]'"
        style="font-family: var(--font-serif);"
        type="button"
        @click="$emit('update:enabled', !enabled)"
      >{{ enabled ? '维护中' : '正常运行' }}</button>
      <span
        v-if="message"
        class="text-[15px] px-2.5 py-1 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>
    <!-- Right: reason input + save -->
    <div class="flex items-center gap-2.5 flex-1 min-w-0 max-md:flex-nowrap">
      <input
        :value="reason"
        @input="$emit('update:reason', $event.target.value)"
        class="flex-1 min-w-0 px-3 py-2 rounded-lg border border-white/35 bg-white/70 text-[15px] outline-none focus:border-accent transition max-md:text-sm max-md:py-1.5"
        style="font-family: var(--font-serif);"
        placeholder="维护原因（选填）"
      />
      <button class="ghost" type="button" @click="$emit('save')">保存</button>
    </div>
  </div>
</template>

<script setup>
defineProps({
  enabled: { type: Boolean, default: false },
  reason: { type: String, default: '' },
  message: { type: String, default: '' }
})
defineEmits(['update:enabled', 'update:reason', 'save'])
</script>
