<template>
  <section class="idea-detail-panel">
    <div class="detail-header">
      <h2 class="detail-title">{{ idea.title }}</h2>
      <div class="detail-header-actions">
        <!-- P0-② 转化为项目按钮前置到标题行右侧(原底部操作区按钮移入),保持 promoting 态 -->
        <button
          v-if="idea.status === 'approved' && !idea.promoted_to"
          class="btn btn-primary btn-sm"
          :disabled="promoting"
          @click="$emit('promote')"
        >
          {{ promoting ? $t('ideas.promoting') : $t('ideas.promoteToProject') }}
        </button>
        <router-link
          v-else-if="idea.promoted_to"
          class="btn btn-primary btn-sm"
          :to="`/projects/${idea.promoted_to}`"
        >
          🚀 {{ $t('ideas.promotedProject') }} →
        </router-link>
        <span class="status-tag" :class="'status-' + idea.status">{{ $t(statusLabelKey(idea.status)) }}</span>
      </div>
    </div>
    <!-- B-260615-25:灵感描述 Markdown 渲染,复用 useMarkdown composable(同 B-24 TaskDetail),空值回退 — -->
    <template v-if="editing">
      <textarea v-model="editDesc" class="detail-desc-edit" rows="4"></textarea>
      <div class="desc-edit-actions">
        <button class="btn btn-primary btn-sm" :disabled="savingDesc" @click="saveEdit">
          {{ savingDesc ? $t('common.loading') : $t('ideas.saveDesc') }}
        </button>
        <button class="btn btn-ghost btn-sm" :disabled="savingDesc" @click="cancelEdit">{{ $t('ideas.cancelEdit') }}</button>
      </div>
    </template>
    <template v-else>
      <!-- P1-③ 描述超阈值折叠:max-height:300px 截断,溢出显「展开/收起」(沿用 ProjectCard 测量模式) -->
      <div
        v-if="idea.description"
        class="detail-desc-wrap"
        :class="{ 'is-expanded': descExpanded }"
      >
        <p
          ref="descRef"
          class="detail-desc ai-md"
          v-html="renderedDesc"
        ></p>
        <button v-if="descOverflow" class="desc-toggle" @click="descExpanded = !descExpanded">
          {{ descExpanded ? $t('common.collapse') : $t('common.expand') }}
        </button>
      </div>
      <p v-else class="detail-desc">—</p>
      <button class="btn btn-ghost btn-sm desc-edit-btn" :disabled="savingDesc" @click="startEdit">{{ $t('ideas.editDesc') }}</button>
    </template>

    <!-- 对抗式评估 -->
    <div class="detail-section">
      <h3>{{ $t('ideas.adversarialTitle') }} <span class="eval-mode-tag">{{ $t(evalModeLabelKey()) }}</span></h3>
      <div v-if="adversarialEval" class="adversarial-eval">
        <!-- P0-① 评估结论前置:分析师结论(徽章/评分/倾向/摘要)提到正反方论据之前,
             一眼看到评估结果;详细论据(正反方/行动建议)折叠,点击展开 -->
        <div class="analyst-conclusion">
          <h4>{{ $t('ideas.analystTitle') }}</h4>
          <div class="assessment-badge" :class="assessmentClass(adversarialEval.recommendation)">
            {{ localAssessmentLabel(adversarialEval.recommendation) }}
          </div>
          <p class="final-score">{{ $t('ideas.finalScore', { score: adversarialEval.final_score.toFixed(1) }) }}</p>
          <div class="net-sentiment" :class="sentimentClass(adversarialEval.net_sentiment)">
            {{ $t('ideas.netSentiment', { tone: adversarialEval.net_sentiment > 0 ? $t('ideas.sentimentPositive') : (adversarialEval.net_sentiment < 0 ? $t('ideas.sentimentNegative') : $t('ideas.sentimentNeutral')), n: (adversarialEval.net_sentiment * 100).toFixed(0) }) }}
          </div>
          <p class="summary">{{ adversarialEval.analyst.summary }}</p>
        </div>

        <!-- 详细论据(正反方观点 + 行动建议):折叠态默认收起,降低首屏信息密度 -->
        <div class="debate-toggle-row">
          <button class="debate-toggle-btn" @click="debateExpanded = !debateExpanded">
            {{ debateExpanded ? $t('common.collapse') : $t('common.expand') }} · {{ $t('ideas.positive') }} / {{ $t('ideas.negative') }}
            <span class="debate-toggle-arrow" :class="{ 'is-open': debateExpanded }">▾</span>
          </button>
        </div>
        <div v-show="debateExpanded" class="debate-detail">
          <div class="debate-container">
            <div class="debate-column positive">
              <h4>{{ $t('ideas.positive') }}</h4>
              <div class="confidence-bar">
                <div class="confidence-fill" :style="{ width: (adversarialEval.positive_strength * 100) + '%' }"></div>
              </div>
              <div class="confidence-text">{{ $t('ideas.confidence', { n: (adversarialEval.positive_strength * 100).toFixed(0) }) }}</div>
              <p class="thesis">{{ adversarialEval.positive.thesis }}</p>
              <ul>
                <li v-for="evidence in adversarialEval.positive.evidence" :key="evidence">• {{ evidence }}</li>
              </ul>
            </div>

            <div class="debate-column negative">
              <h4>{{ $t('ideas.negative') }}</h4>
              <div class="confidence-bar">
                <div class="confidence-fill" :style="{ width: (adversarialEval.negative_strength * 100) + '%' }"></div>
              </div>
              <div class="confidence-text">{{ $t('ideas.confidence', { n: (adversarialEval.negative_strength * 100).toFixed(0) }) }}</div>
              <p class="thesis">{{ adversarialEval.negative.thesis }}</p>
              <ul>
                <li v-for="evidence in adversarialEval.negative.evidence" :key="evidence">• {{ evidence }}</li>
              </ul>
            </div>
          </div>

          <!-- 行动建议 -->
          <div class="action-recommendations">
            <h4>{{ $t('ideas.actionTitle') }}</h4>
            <ul>
              <li v-for="action in adversarialEval.action_items" :key="action">• {{ action }}</li>
            </ul>
          </div>
        </div>
      </div>
      <div v-else class="eval-report eval-report--muted">
        <button class="btn-evaluate" :disabled="evaluating" @click="$emit('evaluate')">
          {{ evaluating ? $t('ideas.evaluating') : $t('ideas.startEval') }}
        </button>
        <!-- P1-⑥ 重试样式:错误提示分两行,重试用 ghost btn-sm(替代突兀的内联 accent 按钮) -->
        <div v-if="evalError" class="eval-error">
          <p class="eval-error-msg">⚠️ {{ evalError }}</p>
          <button class="btn btn-ghost btn-sm btn-retry" :disabled="evaluating" @click="$emit('evaluate')">
            {{ $t('ideas.retryEval') }}
          </button>
        </div>
      </div>
    </div>

    <!-- 评估历史(版本时间线) -->
    <div class="detail-section">
      <h3>{{ $t('ideas.historyTitle') }}</h3>
      <div v-if="historyLoading" class="eval-report eval-report--muted">{{ $t('ideas.historyLoading') }}</div>
      <div v-else-if="evalHistory.length === 0" class="eval-report eval-report--muted">{{ $t('ideas.historyEmpty') }}</div>
      <div v-else class="eval-history-list">
        <div
          v-for="rec in evalHistory"
          :key="rec.id"
          class="eval-history-item"
          :class="{ expanded: expandedVersion === rec.version }"
          @click="toggleVersion(rec.version)"
        >
          <div class="history-row-main">
            <span class="version-badge">{{ $t('ideas.historyVersion') }} v{{ rec.version }}</span>
            <span v-if="rec.version === latestVersion" class="latest-tag">{{ $t('ideas.historyLatest') }}</span>
            <span class="history-eval-mode">{{ $t(evalModeLabelKeyFromStr(rec.evaluated_by)) }}</span>
            <span class="history-score">{{ rec.score == null ? '—' : rec.score.toFixed(1) }}</span>
            <span class="history-date">{{ formatDate(rec.evaluated_at) }}</span>
          </div>
          <div v-if="expandedVersion === rec.version" class="history-detail">
            <template v-if="historySummary(rec.ai_analysis)">
              <p class="history-summary">{{ historySummary(rec.ai_analysis)?.summary ?? '—' }}</p>
              <p v-if="historySummary(rec.ai_analysis)?.recommendation" class="history-rec">
                {{ historySummary(rec.ai_analysis)?.recommendation }}
              </p>
            </template>
            <p v-else class="history-summary">—</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 关联灵感 -->
    <div class="detail-section">
      <h3>{{ $t('ideas.relatedTitle') }}</h3>
      <!-- 展示态 -->
      <template v-if="!relatedEditing">
        <div v-if="relatedIds.length > 0" class="related-list">
          <template v-for="row in relatedRows" :key="row.id">
            <router-link
              v-if="row.title"
              class="related-chip"
              :to="`/ideas/${row.id}`"
            >{{ row.title }}</router-link>
            <span v-else class="related-chip related-chip-missing">#{{ row.id }}</span>
          </template>
        </div>
        <div v-else class="eval-report eval-report--muted">{{ $t('ideas.relatedEmpty') }}</div>
        <button class="btn btn-ghost btn-sm" @click="startRelateEdit">{{ $t('ideas.relatedManage') }}</button>
      </template>
      <!-- 编辑态 -->
      <template v-else>
        <div class="related-search" v-if="candidateIdeas.length > 0">
          <input
            v-model="relatedSearch"
            class="related-search-input"
            :placeholder="$t('ideas.relatedSearchPlaceholder')"
          />
        </div>
        <div v-if="filteredCandidates.length > 0" class="related-edit-list">
          <label
            v-for="idea in filteredCandidates"
            :key="idea.id"
            class="related-edit-item"
          >
            <input
              type="checkbox"
              :checked="relatedSelected.includes(idea.id)"
              @change="toggleSelect(idea.id)"
            />
            <span>{{ idea.title }}</span>
          </label>
        </div>
        <div v-else class="eval-report eval-report--muted">{{ $t('ideas.relatedEmpty') }}</div>
        <div class="related-edit-actions">
          <button class="btn btn-primary btn-sm" @click="confirmRelate">{{ $t('ideas.relatedConfirm') }}</button>
          <button class="btn btn-ghost btn-sm" @click="cancelRelate">{{ $t('ideas.relatedCancel') }}</button>
        </div>
      </template>
    </div>

    <!-- 传统评分条(score-bar,从旧评估体系保留,默认折叠以降低信息密度) -->
    <div class="detail-section">
      <h3>
        <button class="section-toggle-btn" @click="scoreBarExpanded = !scoreBarExpanded">
          {{ $t('ideas.multiScoreTitle') }}
          <span class="section-toggle-arrow" :class="{ 'is-open': scoreBarExpanded }">▾</span>
        </button>
      </h3>
      <div v-show="scoreBarExpanded" class="score-bar-chart" v-if="parseScores(idea.scores).length > 0">
        <div class="score-bar-row" v-for="dim in parseScores(idea.scores)" :key="dim.name">
          <span class="score-bar-label">{{ dim.name }}</span>
          <div class="score-bar-track">
            <div class="score-bar-fill" :style="{ width: dim.score + '%' }" :class="'fill-' + scoreTier(dim.score)"></div>
          </div>
          <span class="score-bar-value">{{ dim.score }}</span>
        </div>
      </div>
      <div v-else class="eval-report eval-report--muted">{{ $t('ideas.noEval') }}</div>
    </div>

    <!-- 标签 -->
    <div class="detail-section">
      <h3>{{ $t('ideas.tagsTitle') }}</h3>
      <template v-if="tagsEditing">
        <input
          v-model="tagsEditInput"
          class="detail-tags-edit-input"
          :placeholder="$t('ideas.tagsPlaceholder')"
          @keyup.enter="saveTagsEdit"
        />
        <div class="tags-edit-actions">
          <button class="btn btn-primary btn-sm" :disabled="savingTags" @click="saveTagsEdit">
            {{ savingTags ? $t('common.loading') : $t('common.save') }}
          </button>
          <button class="btn btn-ghost btn-sm" :disabled="savingTags" @click="cancelTagsEdit">{{ $t('common.cancel') }}</button>
        </div>
      </template>
      <template v-else>
        <div class="tag-list" v-if="parseTags(idea.tags).length > 0">
          <span class="tag" v-for="tag in parseTags(idea.tags)" :key="tag">{{ tag }}</span>
          <button class="btn btn-ghost btn-sm" @click="startTagsEdit">{{ $t('ideas.editTags') }}</button>
        </div>
        <div v-else class="eval-report eval-report--muted">
          {{ $t('ideas.noTags') }}
          <button class="btn btn-ghost btn-sm" @click="startTagsEdit">{{ $t('ideas.editTags') }}</button>
        </div>
      </template>
    </div>

    <!-- 状态管理:P1-④ select → badge 点击(当前态显色 badge,点击展开下拉选项) -->
    <div class="detail-section">
      <h3>{{ $t('ideas.statusTitle') }}</h3>
      <div class="status-controls">
        <div class="status-badge-select" v-click-outside="closeStatusMenu">
          <button
            class="status-tag status-current"
            :class="'status-' + idea.status"
            @click="statusMenuOpen = !statusMenuOpen"
          >
            {{ $t(statusLabelKey(idea.status)) }}
            <span class="status-caret" :class="{ 'is-open': statusMenuOpen }">▾</span>
          </button>
          <ul v-show="statusMenuOpen" class="status-menu">
            <li
              v-for="s in menuStatusOptions"
              :key="s.value"
              class="status-menu-item"
              :class="{ active: s.value === idea.status }"
              @click="pickStatus(s.value)"
            >
              <span class="status-tag" :class="'status-' + s.value">{{ $t(s.labelKey) }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 操作(P0-② 立项按钮已上移至标题行,此处仅留删除) -->
    <div class="detail-section" style="margin-top:8px">
      <div class="action-buttons">
        <button class="btn btn-ghost" :disabled="deleting" @click="$emit('delete')">
          {{ deleting ? $t('ideas.deleting') : $t('ideas.deleteIdea') }}
        </button>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { computed, ref, watch, onMounted, nextTick, type Directive } from 'vue'
import { useI18n } from 'vue-i18n'
import { parseTags } from '../../stores/knowledge'
import { useProjectStore } from '../../stores/project'
import { useRendered } from '../../composables/useMarkdown'
import { ideaApi } from '../../api'
import { formatDate } from '../../utils/time'
import { parseScores, assessmentClass, assessmentLabel, scoreTier } from '../../utils/ideaEval'
import type { IdeaRecord, IdeaStatus, IdeaEvaluationRecord } from '../../api/types'

const props = defineProps<{
  idea: IdeaRecord
  evaluating: boolean
  evalError: string
  promoting: boolean
  deleting: boolean
  statusOptions: { value: IdeaStatus; labelKey: string }[]
}>()

const emit = defineEmits<{
  (e: 'evaluate'): void
  (e: 'promote'): void
  (e: 'delete'): void
  (e: 'status-change', value: IdeaStatus): void
  (e: 'update-desc', value: string): void
  (e: 'update-related', ids: string[]): void
  (e: 'update-tags', tags: string): void
}>()

const { t } = useI18n()
const store = useProjectStore()

// 描述可编辑模式
const editing = ref(false)
const editDesc = ref('')
// P1-⑥ 描述编辑 loading:saveEdit 为异步(emit → 父 store.updateIdea → IPC),期间禁用按钮防双击
const savingDesc = ref(false)

function startEdit() {
  editDesc.value = props.idea.description ?? ''
  editing.value = true
}

// P1-⑥ saveEdit 改异步:emit 后父组件 store.updateIdea 是 Promise,但 emit 不回传结果;
// 这里用本地 savingDesc 包裹一个最小延迟窗口(等待父组件 patch 同步 props.idea.description
// 完成),保证 UI 反馈一致。父组件 updateIdea 失败会 throw 但不冒泡回子组件(沿用既有契约)。
async function saveEdit() {
  if (savingDesc.value) return
  savingDesc.value = true
  try {
    emit('update-desc', editDesc.value)
    editing.value = false
    // 等下一帧让父组件 patch 生效再释放(微观反馈,失败也释放不卡死)
    await nextTick()
  } finally {
    savingDesc.value = false
  }
}

function cancelEdit() {
  editing.value = false
}

// P1-③ 描述溢出测量(沿用 ProjectCard 测量模式):scrollHeight > clientHeight 说明被
// CSS max-height 截断。Markdown 异步渲染 + 切 idea 都需重测。
const descRef = ref<HTMLParagraphElement | null>(null)
const descOverflow = ref(false)
const descExpanded = ref(false)

// P0-① 详细论据(正反方/行动建议)折叠:默认收起,降低首屏信息密度,结论前置后用户按需展开
const debateExpanded = ref(false)
// score-bar 默认折叠(旧评估体系,降低信息密度)
const scoreBarExpanded = ref(false)

function measureDesc() {
  const el = descRef.value
  if (!el) return
  descOverflow.value = el.scrollHeight - el.clientHeight > 1
}

// 切换 idea 重置展开态 + 重测;描述 Markdown 异步渲染完成会触发 props.idea.description
// 不变但 DOM 文本变,因此额外 watch renderedDesc(渲染输出)重测 —— 见 useRendered 之后
watch(() => props.idea.id, () => {
  descExpanded.value = false
  debateExpanded.value = false
  scoreBarExpanded.value = false
  void nextTick(measureDesc)
})
watch(() => props.idea.description, () => void nextTick(measureDesc))

// P1-④ 状态切换 select → badge 点击:点击当前 badge 展开/收起下拉菜单,
// 选中项后 emit('status-change') 交父组件确认+落库(沿用既有契约,不破坏 statusOptions 来源)。
const statusMenuOpen = ref(false)
// WK-5:状态下拉排除 promoted(立项走独立 promoteToProject 流程,列表状态菜单同排除,
// 见 Ideas.vue onStatusChange 兜底);statusOptions 仍含 promoted 供 label 映射(已转立项的灵感 badge 正常显示)。
const menuStatusOptions = computed(() => props.statusOptions.filter(s => s.value !== 'promoted'))
function closeStatusMenu() {
  statusMenuOpen.value = false
}
function pickStatus(s: IdeaStatus) {
  statusMenuOpen.value = false
  if (s === props.idea.status) return
  emit('status-change', s)
}

// v-click-outside:轻量内联指令(状态菜单点击外部关闭),不引入新依赖。
// mounted 时绑定 mousedown 监听,点击落点不在 el 内 → 调 binding.value()。
interface ClickOutsideEl extends HTMLElement { _dfClickOutside?: ((e: MouseEvent) => void) | null }
const vClickOutside: Directive<HTMLElement, () => void> = {
  mounted(el, binding) {
    const host = el as ClickOutsideEl
    host._dfClickOutside = (e: MouseEvent) => {
      if (el.contains(e.target as Node)) return
      binding.value?.()
    }
    document.addEventListener('mousedown', host._dfClickOutside)
  },
  unmounted(el) {
    const host = el as ClickOutsideEl
    if (host._dfClickOutside) {
      document.removeEventListener('mousedown', host._dfClickOutside)
      host._dfClickOutside = null
    }
  },
}

// ===== 关联灵感(related_ids JSON 数组字符串)=====
// 关联编辑搜索
const relatedSearch = ref('')
const filteredCandidates = computed(() => {
  const q = relatedSearch.value.trim().toLowerCase()
  if (!q) return candidateIdeas.value
  return candidateIdeas.value.filter(
    i => (i.title ?? '').toLowerCase().includes(q) || (i.description ?? '').toLowerCase().includes(q),
  )
})
// 解析 props.idea.related_ids(JSON 字符串数组,null/空/非法 → [])
const relatedIds = computed<string[]>(() => {
  const raw = props.idea.related_ids
  if (!raw) return []
  try {
    const parsed = JSON.parse(raw)
    return Array.isArray(parsed) ? parsed.filter((x): x is string => typeof x === 'string') : []
  } catch {
    return []
  }
})

// 反查标题:relatedIds 在 store.ideas 中找对应灵感(找不到留待展示态显 #id)。
// 项3 DRY/性能:原模板 v-for 内对每个 id 调 relatedIdeas.find 两次(O(n)×2);
// 改为一次性构建 {id, title|null} 数组(保留原始顺序含缺失项),模板直接 v-for 对象,O(1)。
const relatedRows = computed<{ id: string; title: string | null }[]>(() => {
  // store.ideas → Map 一次构建,O(1) 查找,避免对每个 relatedId 线性扫 store.ideas
  const byId = new Map(store.ideas.map(i => [i.id, i.title] as const))
  return relatedIds.value.map(id => ({ id, title: byId.get(id) ?? null }))
})

// 编辑态
const relatedEditing = ref(false)
const relatedSelected = ref<string[]>([])

// 可选关联的其他灵感(排除当前灵感自身)
const candidateIdeas = computed(() => store.ideas.filter(i => i.id !== props.idea.id))

function startRelateEdit() {
  relatedSelected.value = [...relatedIds.value]
  relatedEditing.value = true
}

function confirmRelate() {
  emit('update-related', relatedSelected.value)
  relatedEditing.value = false
}

function cancelRelate() {
  relatedEditing.value = false
  relatedSearch.value = ''
}

function toggleSelect(id: string) {
  const idx = relatedSelected.value.indexOf(id)
  if (idx >= 0) {
    relatedSelected.value.splice(idx, 1)
  } else {
    relatedSelected.value.push(id)
  }
}

// ===== 标签编辑(show + edit 双态)=====
const tagsEditing = ref(false)
const tagsEditInput = ref('')
const savingTags = ref(false)

function startTagsEdit() {
  tagsEditInput.value = parseTags(props.idea.tags).join(', ')
  tagsEditing.value = true
}

async function saveTagsEdit() {
  if (savingTags.value) return
  savingTags.value = true
  try {
    const tags = tagsEditInput.value.split(',').map(t => t.trim()).filter(Boolean)
    emit('update-tags', JSON.stringify(tags))
    tagsEditing.value = false
    await nextTick()
  } finally {
    savingTags.value = false
  }
}

function cancelTagsEdit() {
  tagsEditing.value = false
}

// 任意 status 字符串 → 对应 i18n key;未知状态回退到原值显示
function statusLabelKey(status: IdeaStatus): string {
  return props.statusOptions.find(s => s.value === status)?.labelKey ?? status
}

// B-260615-25:灵感描述 Markdown 渲染(复用 AiChat/TaskDetail 同款渲染器,模块级单例),
// useRendered 封装 computed(读 mdReady 触发响应式 + renderMd)+ ensureLoaded(幂等预热)
// BUG-2026-07-08:原漏解构 ensureLoaded + onMounted 未调用,冷启动(marked 未被其他组件预热)
// 时 mdReady 永远 false,renderMd 走 escapeFallback 纯文本降级,Markdown 语法不渲染。
const { rendered: renderedDesc, ensureLoaded: ensureMdLoaded } = useRendered(
  () => props.idea.description ?? '',
)
// Markdown 异步渲染完成(renderedDesc 变化)后重测描述溢出(max-height 截断阈值依赖渲染后的高度)
watch(renderedDesc, () => void nextTick(measureDesc))

// parseScores / assessmentClass / assessmentLabel 抽到 ../../utils/ideaEval 复用(消除与 ProjectDetail 的 DRY 重复)。

interface AdversarialEval {
  positive_strength: number
  negative_strength: number
  net_sentiment: number
  recommendation: string
  final_score: number
  summary: string
  action_items: string[]
  positive: { thesis: string; evidence: string[] }
  negative: { thesis: string; evidence: string[] }
  analyst: { summary: string }
  evaluated_by?: string
}

// 对抗式评估数据持久化在 ai_analysis JSON 字段中，前端解析渲染
const adversarialEval = computed<AdversarialEval | null>(() => {
  if (!props.idea.ai_analysis) return null
  try {
    return JSON.parse(props.idea.ai_analysis) as AdversarialEval
  } catch {
    return null
  }
})

// 评估深度标签动态化(P0):根据 evaluated_by 字段映射 i18n key
// 'Llm' → LLM 深度评估;'HeuristicFallback' → 启发式降级;
// 其他(undefined / 'Heuristic' / 老数据无此字段)→ 启发式
// 映射逻辑与 evalModeLabelKeyFromStr 同,这里直接透传避免重复(项2 DRY)
function evalModeLabelKey(): string {
  return evalModeLabelKeyFromStr(adversarialEval.value?.evaluated_by)
}

// assessmentClass 直接复用 ../../utils/ideaEval(无 i18n 依赖,模板可直调)。
// assessmentLabel 需要 t 注入,这里留一个绑定 t 的薄包装,消除映射逻辑重复(项1 DRY)。
const localAssessmentLabel = (recommendation: string): string =>
  assessmentLabel(t, recommendation)

function sentimentClass(sentiment: number) {
  // 统一三档(FR-C2: 原 >=0 与模板 >0 矛盾，net_sentiment=0 时文案负面样式 positive)
  if (sentiment > 0) return 'positive'
  if (sentiment < 0) return 'negative'
  return 'neutral'
}

// (原 onStatusChange select 处理器已移除:状态切换改 badge 点击 pickStatus 触发 emit)

// ===== 评估历史(版本时间线)=====
const evalHistory = ref<IdeaEvaluationRecord[]>([])
const historyLoading = ref(false)
const expandedVersion = ref<number | null>(null)

async function loadHistory() {
  historyLoading.value = true
  try {
    evalHistory.value = await ideaApi.listEvaluations(props.idea.id)
  } catch {
    evalHistory.value = []
  } finally {
    historyLoading.value = false
  }
}

// 最新版本 = version 最大者(后端按 DESC 返回,首项即最新;这里用 max 兜底)
const latestVersion = computed(() =>
  evalHistory.value.reduce((max, r) => Math.max(max, r.version), -1),
)

function toggleVersion(v: number) {
  expandedVersion.value = expandedVersion.value === v ? null : v
}

// 针对字符串 evaluated_by 映射 i18n key(与 evalModeLabelKey 同映射规则,接收裸字符串)
function evalModeLabelKeyFromStr(source: string | null | undefined): string {
  if (source === 'Llm') return 'ideas.evalModeLlm'
  if (source === 'HeuristicFallback') return 'ideas.evalModeFallback'
  return 'ideas.evalModeHeuristic'
}

// 解析历史 ai_analysis JSON,取 summary / recommendation(对抗式评估格式)。
// 老数据或非 LLM 评估可能无该结构 → 返回 null。
interface HistorySummary { summary: string | null; recommendation: string | null }
function historySummary(aiAnalysis: string | null | undefined): HistorySummary | null {
  if (!aiAnalysis) return null
  try {
    const parsed = JSON.parse(aiAnalysis)
    if (typeof parsed !== 'object' || parsed === null) return null
    const obj = parsed as Record<string, unknown>
    const summary = typeof obj.summary === 'string' ? obj.summary
      : (typeof obj.analyst === 'object' && obj.analyst !== null
          && typeof (obj.analyst as Record<string, unknown>).summary === 'string'
        ? ((obj.analyst as Record<string, unknown>).summary as string)
        : null)
    const recommendation = typeof obj.recommendation === 'string' ? obj.recommendation : null
    if (!summary && !recommendation) return null
    return { summary, recommendation }
  } catch {
    return null
  }
}

onMounted(() => {
  ensureMdLoaded() // 后台预热 Markdown 渲染器(模块单例,与 AiChat/TaskDetail 共享),不阻塞
  loadHistory()
})
watch(() => props.idea.id, loadHistory)
</script>

<style scoped>
/* ===== 右侧详情 ===== */
.idea-detail-panel {
  background: var(--df-bg-card);
  border: 0.5px solid var(--df-border);
  border-radius: var(--df-radius-lg);
  padding: var(--df-pad-panel);
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--df-gap-head);
}
.detail-title { font-size: 20px; font-weight: 500; color: var(--df-text); flex: 1; min-width: 0; }
/* P0-② 标题行右侧操作组:立项按钮 + 状态 badge 一行排布 */
.detail-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* P1-③ 描述折叠容器:默认 max-height:300px 截断,展开态取消 */
.detail-desc-wrap {
  position: relative;
  margin-bottom: var(--df-gap-page);
}
.detail-desc-wrap .detail-desc { margin-bottom: 0; }
.detail-desc-wrap:not(.is-expanded) .detail-desc {
  max-height: 300px;
  overflow: hidden;
  /* 底部渐变提示「下方还有」,与 max-height 截断视觉呼应 */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
.desc-toggle {
  display: inline-block;
  margin-top: 6px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--df-accent);
  font-size: 12px;
  cursor: pointer;
  line-height: 1.4;
}
.desc-toggle:hover { text-decoration: underline; }

.detail-desc {
  font-size: 14px;
  color: var(--df-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--df-gap-page);
}

/* ===== 灵感描述 Markdown 渲染(B-260615-25,基础样式收敛至全局 ai-md.css) ===== */
.detail-desc.ai-md { white-space: normal; color: var(--df-text-secondary); }

.detail-section {
  margin-bottom: var(--df-gap-page);
}
.detail-section h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--df-text);
  margin-bottom: 12px;
}

.eval-report {
  font-size: 13px;
  color: var(--df-text-secondary);
  line-height: 1.6;
  padding: 14px 16px;
  background: var(--df-accent-bg);
  border-left: 3px solid var(--df-accent);
  border-radius: 0 8px 8px 0;
}
/* 弱化态(空数据/加载中占位,原 inline opacity:0.5 统一为 class) */
.eval-report--muted { opacity: 0.5; }

/* ===== 状态标签已提取到 styles/components.css 全局(.status-tag 系列) ===== */

/* ===== 对抗式评估 ===== */
.adversarial-eval {
  background: var(--df-bg-raised);
  border: 0.5px solid var(--df-border);
  border-radius: var(--df-radius);
  padding: 1rem;
  margin-bottom: 1rem;
}

.debate-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.debate-column {
  padding: 1rem;
  border-radius: var(--df-radius);
  position: relative;
}

.debate-column.positive {
  background: rgba(61, 219, 160, 0.08);
  border: 0.5px solid rgba(61, 219, 160, 0.2);
}

.debate-column.negative {
  background: rgba(240, 101, 101, 0.08);
  border: 0.5px solid rgba(240, 101, 101, 0.2);
}

.debate-column h4 {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.confidence-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--df-radius-xs);
  margin-bottom: 0.25rem;
  overflow: hidden;
}

.confidence-fill {
  height: 100%;
  border-radius: var(--df-radius-xs);
  transition: width 0.4s;
}

.debate-column.positive .confidence-fill { background: var(--df-success); }
.debate-column.negative .confidence-fill { background: var(--df-danger); }

.confidence-text {
  font-size: 11px;
  color: var(--df-text-dim);
  margin-bottom: 0.5rem;
}

.debate-column .thesis {
  font-size: 12px;
  color: var(--df-text);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.debate-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.debate-column li {
  font-size: 11px;
  color: var(--df-text-secondary);
  margin-bottom: 0.25rem;
  padding-left: 0.5rem;
}

.analyst-conclusion {
  background: var(--df-bg-card);
  border: 0.5px solid var(--df-border);
  border-radius: var(--df-radius);
  padding: 1rem;
  margin-bottom: 1rem;
}

/* assessment-badge 系列已提取到 styles/components.css 全局 */

.final-score {
  font-size: 14px;
  font-weight: 500;
  color: var(--df-text);
  margin: 0.5rem 0;
}

.net-sentiment {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: var(--df-radius-xs);
  display: inline-block;
  margin: 0.5rem 0;
}

.net-sentiment.positive { background: rgba(61, 219, 160, 0.15); color: var(--df-success); }
.net-sentiment.negative { background: rgba(240, 101, 101, 0.15); color: var(--df-danger); }
.net-sentiment.neutral { background: var(--df-bg-raised); color: var(--df-text-secondary); }

.summary {
  font-size: 12px;
  color: var(--df-text-secondary);
  line-height: 1.5;
  margin: 0.5rem 0;
}

.action-recommendations {
  background: var(--df-bg-raised);
  border: 0.5px solid var(--df-border);
  border-radius: var(--df-radius);
  padding: 1rem;
}

.action-recommendations h4 {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 0.5rem;
}

.action-recommendations ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.action-recommendations li {
  font-size: 12px;
  color: var(--df-text-secondary);
  margin-bottom: 0.25rem;
  padding-left: 0.5rem;
}

/* P0-① 详细论据折叠切换条 */
.debate-toggle-row { margin-bottom: 0.75rem; }
.debate-toggle-btn {
  background: transparent;
  border: none;
  color: var(--df-accent);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.debate-toggle-btn:hover { text-decoration: underline; }
.debate-toggle-arrow {
  font-size: 10px;
  transition: transform 0.15s;
}
.debate-toggle-arrow.is-open { transform: rotate(180deg); }
.debate-detail { margin-top: 0.5rem; }
.debate-detail .debate-container { margin-bottom: 0.75rem; }

.btn-evaluate {
  background: var(--df-accent);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: var(--df-radius);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-evaluate:hover {
  background: var(--df-accent-hover);
}

/* P1-⑥ 重试样式:错误提示与重试按钮分行,重试用 ghost btn-sm(替代突兀的内联 accent 按钮) */
.eval-error {
  margin-top: 8px;
  font-size: 12px;
  color: var(--df-danger);
}
.eval-error-msg { margin: 0 0 8px; }
.btn-retry { margin-top: 4px; }

.eval-mode-tag {
  font-size: 11px;
  font-weight: 400;
  padding: 1px 8px;
  border-radius: var(--df-radius-xs);
  background: rgba(255, 217, 61, 0.15);
  color: var(--df-warning);
  margin-left: 6px;
  vertical-align: middle;
}

/* ===== 评估历史(版本时间线)===== */
.eval-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eval-history-item {
  background: var(--df-bg-raised);
  border: 0.5px solid var(--df-border);
  border-radius: var(--df-radius);
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.eval-history-item:hover {
  background: var(--df-bg-card);
  border-color: var(--df-accent);
}
.eval-history-item.expanded {
  border-color: var(--df-accent);
}
.history-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}
.version-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--df-radius-xs);
  background: var(--df-accent-soft);
  color: var(--df-accent);
}
.latest-tag {
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: var(--df-radius-xs);
  background: rgba(100, 255, 218, 0.15);
  color: var(--df-success);
}
.history-eval-mode {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: var(--df-radius-xs);
  background: rgba(255, 217, 61, 0.12);
  color: var(--df-warning);
}
.history-score {
  font-size: 12px;
  font-weight: 500;
  color: var(--df-text);
  min-width: 32px;
}
.history-date {
  font-size: 11px;
  color: var(--df-text-dim);
  margin-left: auto;
}
.history-detail {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 0.5px solid var(--df-border);
}
.history-summary {
  font-size: 12px;
  color: var(--df-text-secondary);
  line-height: 1.5;
  margin: 0;
}
.history-rec {
  font-size: 11px;
  color: var(--df-accent);
  margin: 6px 0 0;
}

/* ===== 多维评分条已提取到 styles/components.css 全局(.score-bar-* 系列) ===== */

/* ===== 标签 ===== */
.tag-list { display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
  font-size: 12px; padding: 4px 10px;
  border-radius: var(--df-radius-xs);
  background: var(--df-accent-bg);
  color: var(--df-accent);
}

/* ===== 关联灵感 ===== */
.related-list { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.related-chip {
  font-size: 12px; padding: 4px 10px;
  border-radius: var(--df-radius-xs);
  background: var(--df-accent-bg);
  color: var(--df-accent);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.related-chip:hover { background: var(--df-accent-soft); }
.related-chip-missing { cursor: default; opacity: 0.6; }

.related-edit-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.related-edit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--df-text-secondary);
  cursor: pointer;
}
.related-edit-item input { cursor: pointer; }
.related-edit-actions { display: flex; gap: 8px; }
/* 关联编辑搜索框 */
.related-search { margin-bottom: 8px; }
.related-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 0.5px solid var(--df-border);
  border-radius: var(--df-radius-sm);
  background: var(--df-bg);
  color: var(--df-text);
  font-size: 13px;
  outline: none;
}
.related-search-input:focus {
  border-color: var(--df-accent);
}

/* ===== 标签编辑 ===== */
.detail-tags-edit-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 0.5px solid var(--df-border);
  border-radius: var(--df-radius-sm);
  background: var(--df-bg);
  color: var(--df-text);
  font-size: 13px;
  outline: none;
}
.detail-tags-edit-input:focus {
  border-color: var(--df-accent);
}
.tags-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.tag-list .btn-ghost {
  font-size: 11px;
  padding: 2px 8px;
}
.eval-report .btn-ghost {
  font-size: 11px;
  padding: 2px 8px;
  margin-left: 6px;
}

/* ===== 按钮已提取到 global.css 全局(.btn/.btn-primary/.btn-ghost/.btn-sm) ===== */
/* IdeaDetail 特有按钮定位 */
.desc-edit-btn { margin-bottom: var(--df-gap-page); margin-top: 4px; }
.desc-edit-actions { display: flex; gap: 8px; margin-bottom: var(--df-gap-page); margin-top: 8px; }

/* 描述编辑 textarea */
.detail-desc-edit {
  width: 100%;
  padding: 8px 10px;
  border: 0.5px solid var(--df-border);
  border-radius: var(--df-radius-sm);
  background: var(--df-bg);
  color: var(--df-text);
  font-size: 14px;
  line-height: 1.6;
  font-family: inherit;
  resize: vertical;
  margin-bottom: var(--df-gap-page);
  box-sizing: border-box;
}
.detail-desc-edit:focus {
  outline: none;
  border-color: var(--df-accent);
  background: var(--df-bg-raised);
}

/* (旧 .btn-retry 内联 accent 按钮样式已废弃:重试改用 ghost btn-sm,统一样式收敛) */

/* ===== 状态管理:P1-④ select → badge 点击下拉 ===== */
.status-controls {
  margin-top: 8px;
}

.status-badge-select {
  position: relative;
  display: inline-block;
}

/* 当前态 badge:点击展开下拉(复用全局 .status-tag 显色,加 cursor + caret) */
.status-current {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  border: 0.5px solid transparent;
  transition: border-color 0.15s;
}
.status-current:hover { border-color: var(--df-accent); }

.status-caret {
  font-size: 10px;
  opacity: 0.7;
  transition: transform 0.15s;
}
.status-caret.is-open { transform: rotate(180deg); }

/* 下拉菜单(绝对定位浮层) */
.status-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 10;
  list-style: none;
  margin: 0;
  padding: 6px;
  min-width: 160px;
  background: var(--df-bg-card);
  border: 0.5px solid var(--df-border);
  border-radius: var(--df-radius-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.status-menu-item {
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--df-radius-xs);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  transition: background 0.15s;
}
.status-menu-item:hover { background: var(--df-accent-bg); }
.status-menu-item.active { background: var(--df-accent-soft); font-weight: 500; }
/* menu 内 badge 取消 emoji 之外的全局 hover 等副作用,仅作色标 */
.status-menu-item .status-tag { cursor: pointer; }

/* ═══ 响应式:窄屏对抗式评估双栏堆叠 ═══ */
@media (max-width: 760px) {
  .debate-container {
    grid-template-columns: 1fr;
  }
}
</style>
