<template>
  <div class="conflict-resolver" v-if="conflicts.length > 0">
    <div class="conflict-header">
      <span class="conflict-title">⚠ {{ t('aiChat.conflictsPending', { n: conflicts.length }) }}</span>
    </div>
    <div v-for="c in conflicts" :key="c.id" class="conflict-item">
      <div class="conflict-file conflict-file--toggle" @click="toggleConflict(c.id)">
        <span class="conflict-arrow" :class="{ 'conflict-arrow--open': isExpanded(c.id) }">▸</span>
        <span class="conflict-type-badge" :class="'badge--' + c.conflict_type">
          {{ c.conflict_type === 'semantic' ? '语义' : '文件' }}
        </span>
        <code class="conflict-filepath">{{ c.file_path }}</code>
        <span class="conflict-toggle-text">{{ isExpanded(c.id) ? t('aiChat.collapse') : t('aiChat.expand') }}</span>
      </div>
      <template v-if="isExpanded(c.id)">
        <div class="conflict-diffs" v-if="c.diff_a || c.diff_b">
          <div class="diff-panel diff-panel--a">
            <div class="diff-panel-label">Agent A ({{ c.subtask_a || '?' }})</div>
            <pre class="diff-content">{{ c.diff_a || '(无改动)' }}</pre>
          </div>
          <div class="diff-panel diff-panel--b">
            <div class="diff-panel-label">Agent B ({{ c.subtask_b || '?' }})</div>
            <pre class="diff-content">{{ c.diff_b || '(无改动)' }}</pre>
          </div>
        </div>
        <div class="conflict-actions">
          <button class="btn btn-sm btn-ghost" @click="emit('resolve', { id: c.id, resolution: 'a' })">
            {{ t('aiChat.acceptA') }}
          </button>
          <button class="btn btn-sm btn-ghost" @click="emit('resolve', { id: c.id, resolution: 'b' })">
            {{ t('aiChat.acceptB') }}
          </button>
          <button class="btn btn-sm btn-ghost" @click="emit('resolve', { id: c.id, resolution: 'merged' })">
            {{ t('aiChat.mergeBoth') }}
          </button>
          <button class="btn btn-sm btn-ghost" @click="emit('resolve', { id: c.id, resolution: 'manual' })">
            {{ t('aiChat.manualResolve') }}
          </button>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import type { ConflictInfo } from '@/api/types'

const { t } = useI18n()

const props = defineProps<{
  conflicts: ConflictInfo[]
}>()

const emit = defineEmits<{
  (e: 'resolve', payload: { id: string; resolution: string }): void
}>()

// 多冲突折叠态:以稳定 id 为 key(避免 index 在列表变化时错位)
const expandedConflicts = ref<Set<string>>(new Set())

// 阈值:冲突数 >= 3 时默认全折叠(M6 撑爆对话区只在多冲突场景发生);
// 单/双冲突信息量小,直接展开省一次点击
const COLLAPSE_THRESHOLD = 3

function isExpanded(id: string): boolean {
  return expandedConflicts.value.has(id)
}

function toggleConflict(id: string): void {
  const next = new Set(expandedConflicts.value)
  if (next.has(id)) {
    next.delete(id)
  } else {
    next.add(id)
  }
  expandedConflicts.value = next
}

// 冲突列表变化(新增/减少)时重置默认态:< 阈值全展开,否则全折叠
const defaultExpanded = computed(() => props.conflicts.length < COLLAPSE_THRESHOLD)

watch(
  () => props.conflicts.map((c) => c.id).join('|'),
  () => {
    const next = new Set<string>()
    if (defaultExpanded.value) {
      props.conflicts.forEach((c) => next.add(c.id))
    }
    expandedConflicts.value = next
  },
  { immediate: true },
)
</script>

<style scoped>
.conflict-resolver {
  border: 1px solid var(--df-warning, #ffc107);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 8px 0;
  background: var(--df-bg-secondary);
}
.conflict-header {
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--df-warning, #ffc107);
}
.conflict-item {
  border-top: 1px solid var(--df-border);
  padding: 8px 0;
}
.conflict-file {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.conflict-file--toggle {
  cursor: pointer;
  user-select: none;
}
.conflict-file--toggle:hover .conflict-filepath,
.conflict-file--toggle:hover .conflict-toggle-text {
  color: var(--df-primary);
}
.conflict-arrow {
  display: inline-block;
  font-size: 10px;
  color: var(--df-text-dim);
  transition: transform 0.15s ease;
  width: 10px;
}
.conflict-arrow--open {
  transform: rotate(90deg);
}
.conflict-toggle-text {
  margin-left: auto;
  font-size: 11px;
  color: var(--df-text-dim);
}
.conflict-type-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
}
.badge--file { background: rgba(255, 193, 7, 0.15); color: #ffc107; }
.badge--semantic { background: rgba(220, 53, 69, 0.15); color: #dc3545; }
.conflict-file code { font-size: 12px; color: var(--df-text); }
.conflict-diffs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.diff-panel {
  border: 1px solid var(--df-border);
  border-radius: 4px;
  overflow: hidden;
}
.diff-panel--a { border-left: 3px solid var(--df-primary); }
.diff-panel--b { border-left: 3px solid var(--df-success); }
.diff-panel-label {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--df-bg);
  color: var(--df-text-dim);
}
.diff-content {
  font-size: 11px;
  padding: 4px 8px;
  margin: 0;
  max-height: 200px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.conflict-actions {
  display: flex;
  gap: 4px;
}
</style>
