<template>
  <!-- ═══ 统一设置行(UX 重构阶段5):封装 label/desc + control slot + 即时生效反馈 ═══ -->
  <div class="setting-row">
    <div class="setting-info">
      <span class="setting-label">
        {{ label }}
        <span v-if="nextRound" class="next-round-badge">{{ $t('settings.nextRoundBadge') }}</span>
      </span>
      <span v-if="desc" class="setting-desc">{{ desc }}</span>
    </div>
    <div class="setting-control">
      <slot />
      <Transition name="saved-fade">
        <span v-if="savedVisible" class="saved-hint">{{ $t('settings.savedHint') }}</span>
      </Transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'

// ============================================================
// 统一设置行:label/desc 入 props,控件走默认 slot,变更后父级调 markSaved() 显反馈。
// nextRound=true 显"下次对话生效" badge(性能域并发/轮次/重试白名单项)。
// savedVisible 用 shallowRef(布尔翻转无深响应需求);timer ref 持有供连续触发时清旧。
// ============================================================
defineProps<{
  /** 设置项标题 */
  label: string
  /** 设置项描述(可空,如 toggle 无需描述) */
  desc?: string
  /** 是否显示"下次对话生效" badge(后端快照锁定边界的设置项,如并发/轮次/重试) */
  nextRound?: boolean
}>()

const savedVisible = shallowRef(false)
const timer = shallowRef<ReturnType<typeof setTimeout> | null>(null)

/** 显"✓已保存"行内提示,2s 后消失。连续触发清旧 timer 防提前消失。 */
function markSaved() {
  savedVisible.value = true
  if (timer.value) clearTimeout(timer.value)
  timer.value = setTimeout(() => {
    savedVisible.value = false
    timer.value = null
  }, 2000)
}

defineExpose({ markSaved })
</script>

<style scoped>
/* 反馈位"✓已保存" — 行内紧贴控件右侧,2s 淡出 */
.saved-hint {
  margin-left: 10px;
  font-size: 12px;
  color: var(--df-accent);
  white-space: nowrap;
}
/* badge"下次对话生效" — label 右侧小标 */
.next-round-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 400;
  color: var(--df-text-dim);
  background: var(--df-bg);
  border: 0.5px solid var(--df-border);
  border-radius: var(--df-radius-sm);
  vertical-align: middle;
}

/* Transition:淡入淡出 */
.saved-fade-enter-active,
.saved-fade-leave-active {
  transition: opacity 0.25s ease;
}
.saved-fade-enter-from,
.saved-fade-leave-to {
  opacity: 0;
}
</style>
