<template>
  <div class="maintenance-row">
    <div class="maintenance-left">
      <span class="maintenance-label">站点维护模式</span>
      <button
        :class="['maintenance-toggle', enabled ? 'toggle-on' : 'toggle-off']"
        type="button"
        @click="$emit('update:enabled', !enabled)"
      >
        {{ enabled ? '维护中' : '正常运行' }}
      </button>
      <span
        v-if="message"
        class="msg-tag"
        :class="{ error: message.includes('失败') }"
      >{{ message }}</span>
    </div>
    <div class="maintenance-right">
      <input
        :value="reason"
        @input="$emit('update:reason', $event.target.value)"
        class="maintenance-reason-input"
        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>

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

.maintenance-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.maintenance-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.maintenance-toggle {
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
}

.toggle-on {
  background: rgba(201, 90, 106, 0.15);
  color: #c95a6a;
}

.toggle-on:hover {
  background: rgba(201, 90, 106, 0.25);
}

.toggle-off {
  background: rgba(100, 185, 140, 0.15);
  color: #3a9a68;
}

.toggle-off:hover {
  background: rgba(100, 185, 140, 0.25);
}

.maintenance-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.maintenance-reason-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
  font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s ease;
}

.maintenance-reason-input:focus {
  border-color: var(--accent);
}

.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);
}

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

  .maintenance-right {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .maintenance-reason-input {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    padding: 7px 10px;
  }
}
</style>
