<template>
  <aside class="fusion-panel">
    <!-- 头部 -->
    <header class="panel-header">
      <h1 class="header-title">
        <IconLibrary name="sparkles" :size="20" />
        <span>文章融合</span>
      </h1>
      <span class="badge badge-primary">Beta</span>
    </header>

    <!-- 内容区 -->
    <div class="panel-content">
      <!-- 文章 A -->
      <section class="article-section">
        <div class="section-header">
          <label class="section-label">
            <span class="label-badge a">A</span>
            文章 A
          </label>
          <span class="char-count">{{ articleA.length }} 字</span>
        </div>
        <input 
          v-model="titleA"
          type="text"
          class="title-input"
          placeholder="文章 A 标题（可选）"
        />
        <textarea 
          v-model="articleA"
          class="article-textarea"
          placeholder="粘贴第一篇文章内容..."
          rows="8"
        ></textarea>
      </section>

      <!-- 文章 B -->
      <section class="article-section">
        <div class="section-header">
          <label class="section-label">
            <span class="label-badge b">B</span>
            文章 B
          </label>
          <span class="char-count">{{ articleB.length }} 字</span>
        </div>
        <input 
          v-model="titleB"
          type="text"
          class="title-input"
          placeholder="文章 B 标题（可选）"
        />
        <textarea 
          v-model="articleB"
          class="article-textarea"
          placeholder="粘贴第二篇文章内容..."
          rows="8"
        ></textarea>
      </section>

      <!-- 融合选项 -->
      <section class="options-section">
        <label class="section-label">融合偏好</label>
        <div class="options-grid">
          <label class="option-item" :class="{ active: fusionMode === 'balanced' }">
            <input type="radio" v-model="fusionMode" value="balanced" />
            <IconLibrary name="compare" :size="16" />
            <span>均衡融合</span>
          </label>
          <label class="option-item" :class="{ active: fusionMode === 'preferA' }">
            <input type="radio" v-model="fusionMode" value="preferA" />
            <span class="label-badge a small">A</span>
            <span>偏重 A</span>
          </label>
          <label class="option-item" :class="{ active: fusionMode === 'preferB' }">
            <input type="radio" v-model="fusionMode" value="preferB" />
            <span class="label-badge b small">B</span>
            <span>偏重 B</span>
          </label>
        </div>
      </section>
    </div>

    <!-- 底部操作 -->
    <footer class="panel-footer">
      <button 
        @click="startFusion"
        :disabled="!canFusion || isAnalyzing"
        class="fusion-button"
        :class="{ 'loading': isAnalyzing }"
      >
        <IconLibrary v-if="!isAnalyzing" name="sparkles" :size="16" />
        <span v-else class="animate-spin">↻</span>
        {{ buttonText }}
      </button>
    </footer>
  </aside>
</template>

<script setup>
import { ref, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useAppStore } from '../../stores/app'
import IconLibrary from '../icons/IconLibrary.vue'

const appStore = useAppStore()
const { articleFusionState } = storeToRefs(appStore)

// 本地状态
const titleA = ref('')
const titleB = ref('')
const articleA = ref('')
const articleB = ref('')
const fusionMode = ref('balanced') // balanced | preferA | preferB

// 计算属性
const isAnalyzing = computed(() => articleFusionState.value.isAnalyzing)
const canFusion = computed(() => articleA.value.trim().length > 50 && articleB.value.trim().length > 50)
const buttonText = computed(() => {
  if (isAnalyzing.value) {
    return articleFusionState.value.stage === 'analyzing' ? '分析中...' : '融合中...'
  }
  return '开始分析融合'
})

// 开始融合
const startFusion = async () => {
  if (!canFusion.value || isAnalyzing.value) return
  
  try {
    await appStore.startArticleFusionAction({
      titleA: titleA.value,
      titleB: titleB.value,
      articleA: articleA.value,
      articleB: articleB.value,
      fusionMode: fusionMode.value
    })
  } catch (error) {
    console.error('融合失败:', error)
    alert('融合失败: ' + error.message)
  }
}
</script>

<style scoped>
.fusion-panel {
  width: 400px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-default);
  background: var(--bg-secondary);
  flex-shrink: 0;
  height: 100vh;
}

.panel-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-title {
  font-weight: var(--font-semibold);
  font-size: var(--text-lg);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.article-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.label-badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  color: white;
}

.label-badge.a {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.label-badge.b {
  background: linear-gradient(135deg, #10b981, #06b6d4);
}

.label-badge.small {
  width: 16px;
  height: 16px;
  font-size: 8px;
}

.char-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.title-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  outline: none;
}

.title-input:focus {
  border-color: var(--accent-primary);
}

.article-textarea {
  width: 100%;
  padding: var(--space-3);
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-size: var(--text-sm);
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
  outline: none;
}

.article-textarea:focus {
  border-color: var(--accent-primary);
}

.options-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.option-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.option-item input {
  display: none;
}

.option-item:hover {
  border-color: var(--border-strong);
}

.option-item.active {
  border-color: var(--accent-primary);
  background: var(--info-bg);
  color: var(--accent-primary);
}

.panel-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--border-default);
  background: var(--bg-secondary);
}

.fusion-button {
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  font-weight: var(--font-semibold);
  color: var(--text-inverse);
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: all var(--transition-normal);
  border: none;
  cursor: pointer;
}

.fusion-button:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}

.fusion-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fusion-button.loading {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.badge-primary {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: white;
  font-weight: 600;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>
