<script setup lang="ts">
import { ref, computed, nextTick, watch } from 'vue'
import { useRoute } from 'vue-router'
import { http } from '../services/api'

// 获取路由参数，确定分析类型
const route = useRoute()
const analysisType = computed(() => (route.params.type as string) || 'crypto')

// 分析标的代码
const symbolCode = ref('')
const isAnalyzing = ref(false)
const analysisContent = ref('')
const analysisContainer = ref<HTMLElement | null>(null)
const currentThought = ref('')
const showInitialView = ref(true)
const copySuccess = ref(false)

// 根据环境选择API基础URL
const apiBaseUrl =
  import.meta.env.MODE === 'development' ? 'http://127.0.0.1:8000' : 'https://api.ibtc.work'

// 根据类型设置页面标题和预设列表
const pageTitle = computed(() => {
  switch (analysisType.value) {
    case 'stock':
      return 'A股股票分析智能体'
    case 'crypto':
    default:
      return '加密货币分析智能体'
  }
})

const pageDescription = computed(() => {
  switch (analysisType.value) {
    case 'stock':
      return '获取A股上市公司的深度AI智能分析'
    case 'crypto':
    default:
      return '获取加密货币的深度AI智能分析'
  }
})

const inputPlaceholder = computed(() => {
  switch (analysisType.value) {
    case 'stock':
      return '请输入上市公司股票代码'
    case 'crypto':
    default:
      return '请输入BTC、ETH， 一次只能分析一个币种'
  }
})

// 是否为股票分析模式
const isStockMode = computed(() => analysisType.value === 'stock')

// 常见标的列表
const commonItemsList = computed(() => {
  switch (analysisType.value) {
    case 'stock':
      return [
        { code: '000001', label: '平安银行' },
        { code: '000651', label: '格力电器' },
        { code: '601318', label: '中国平安' },
        { code: '600519', label: '贵州茅台' },
        { code: '601888', label: '中国中免' },
        { code: '000858', label: '五粮液' },
        { code: '600276', label: '恒瑞医药' },
        { code: '002594', label: '比亚迪' },
        { code: '600036', label: '招商银行' },
        { code: '603288', label: '海天味业' },
      ]
    case 'crypto':
    default:
      return [
        { code: 'BTC', label: 'BTC' },
        { code: 'ETH', label: 'ETH' },
        { code: 'SOL', label: 'SOL' },
        { code: 'SUI', label: 'SUI' },
        { code: 'TRX', label: 'TRX' },
        { code: 'XRP', label: 'XRP' },
        { code: 'BNB', label: 'BNB' },
        { code: 'ADA', label: 'ADA' },
        { code: 'DOGE', label: 'DOGE' },
        { code: 'SHIB', label: 'SHIB' },
      ]
  }
})

// 滚动到底部
const scrollToBottom = async () => {
  await nextTick()
  if (analysisContainer.value) {
    analysisContainer.value.scrollTop = analysisContainer.value.scrollHeight
  }
}

// 处理回车键
const handleKeydown = (event: KeyboardEvent) => {
  if (event.key === 'Enter') {
    event.preventDefault()
    handleAnalysis()
  }
}

// 处理错误消息的显示
const setErrorMessage = (message: string) => {
  analysisContent.value = `错误: ${message}`
  currentThought.value = '分析失败'
}

// 分析逻辑
const handleAnalysis = async () => {
  const code = symbolCode.value.trim()
  if (!code || isAnalyzing.value) return

  // 股票模式下验证股票代码格式
  if (isStockMode.value && !/^\d{6}$/.test(code)) {
    setErrorMessage('请输入正确的6位股票代码')
    return
  }

  // 先切换到分析视图，再设置分析状态
  showInitialView.value = false
  isAnalyzing.value = true
  analysisContent.value = ''
  currentThought.value = '准备开始分析...'

  try {
    let response

    // 根据分析类型调用不同的API
    if (isStockMode.value) {
      // 调用A股分析接口
      response = await http.post(`${apiBaseUrl}/adata/${code}/analysis`, {})
    } else {
      // 调用加密货币分析接口
      const requestData = {
        symbol: code.toUpperCase(),
      }
      response = await http.post(`${apiBaseUrl}/crypto/analysis_v2`, requestData)
    }

    if (!response.ok) {
      // 解析错误响应
      try {
        const errorData = await response.json()
        if (errorData && errorData.detail) {
          setErrorMessage(errorData.detail)
        } else {
          setErrorMessage(`请求失败，状态码: ${response.status}`)
        }
      } catch {
        setErrorMessage(`请求失败，状态码: ${response.status}`)
      }
      return
    }

    const reader = response.body?.getReader()
    if (!reader) {
      throw new Error('无法获取响应流')
    }

    const decoder = new TextDecoder()
    let buffer = ''

    while (true) {
      const { done, value } = await reader.read()
      if (done) break

      const chunk = decoder.decode(value, { stream: true })
      buffer += chunk

      const lines = buffer.split('\n')
      buffer = lines.pop() || ''

      for (const line of lines) {
        if (!line.trim() || !line.startsWith('data: ')) continue

        try {
          const jsonStr = line.slice(6)
          const data = JSON.parse(jsonStr)

          switch (data.event) {
            case 'workflow_started':
              currentThought.value = 'Agent 正在分析...'
              break
            case 'node_started':
              currentThought.value = `Agent 调用： ${data.data.title}`
              break
            case 'node_finished':
              currentThought.value = `Agent 完成： ${data.data.title}`
              break
            case 'node_failed':
              currentThought.value = `Agent 分析失败 ${data.data.title}`
              break

            case 'text_chunk':
              if (data.data && data.data.text) {
                analysisContent.value += data.data.text
                await scrollToBottom()
              }
              break

            case 'workflow_finished':
              if (data.data && data.data.outputs && data.data.outputs.text) {
                if (analysisContent.value !== data.data.outputs.text) {
                  analysisContent.value = data.data.outputs.text
                  await scrollToBottom()
                }
                currentThought.value = `分析完成 (用时 ${Math.round(data.data.elapsed_time)}秒)`
              }
              break

            case 'error':
              const errorMessage = data.error || '未知错误'
              setErrorMessage(errorMessage)
              await scrollToBottom()
              break
          }
        } catch (error) {
          console.error('解析响应数据出错:', error)
          setErrorMessage('解析响应数据时出错，请稍后重试')
        }
      }
    }
  } catch {
    setErrorMessage('抱歉，分析请求失败，请稍后重试')
  } finally {
    isAnalyzing.value = false
    await scrollToBottom()
  }
}

const resetView = () => {
  showInitialView.value = true
  symbolCode.value = ''
  analysisContent.value = ''
  currentThought.value = ''
  isAnalyzing.value = false
}

// 清除输入
const clearInput = () => {
  symbolCode.value = ''
  analysisContent.value = ''
  currentThought.value = ''
}

const copyAnalysis = async () => {
  if (!analysisContent.value) return

  try {
    const tempDiv = document.createElement('div')
    tempDiv.innerHTML = analysisContent.value
    const textContent = tempDiv.textContent || tempDiv.innerText || ''

    await navigator.clipboard.writeText(textContent)
    copySuccess.value = true
    setTimeout(() => {
      copySuccess.value = false
    }, 2000)
  } catch {
    console.error('复制失败')
  }
}

// 处理快速分析项的点击
const handleCommonAnalysis = (item: { code: string }) => {
  symbolCode.value = item.code
  handleAnalysis()
}

// 监听路由变化，重置视图
watch(
  () => route.params.type,
  () => {
    resetView()
  },
)
</script>

<template>
  <div class="universal-analysis-view">
    <div class="content-container">
      <!-- 初始视图 -->
      <div v-if="showInitialView" class="initial-content">
        <div class="header-section">
          <h1 class="title">{{ pageTitle }}</h1>
          <p class="description">{{ pageDescription }}</p>
        </div>

        <div class="search-section">
          <div class="search-container">
            <div class="input-wrapper">
              <div class="input-container">
                <div class="input-area">
                  <input
                    v-model="symbolCode"
                    type="text"
                    class="search-input"
                    :placeholder="inputPlaceholder"
                    @keydown="handleKeydown"
                    :disabled="isAnalyzing"
                    :maxlength="isStockMode ? 6 : undefined"
                  />
                  <button
                    v-if="symbolCode.trim() || analysisContent"
                    class="clear-button"
                    @click="clearInput"
                    :disabled="isAnalyzing"
                  >
                    <svg
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <line x1="18" y1="6" x2="6" y2="18"></line>
                      <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                  </button>
                </div>
                <button
                  class="analyze-button"
                  @click="handleAnalysis"
                  :disabled="isAnalyzing || !symbolCode.trim()"
                >
                  {{ isAnalyzing ? '正在跳转...' : '开始分析' }}
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 快速分析列表 -->
        <div class="common-analysis-section">
          <div class="common-analysis-container">
            <div class="section-header">
              <span class="section-title">点击直接快速分析</span>
            </div>
            <div class="common-analysis-list">
              <button
                v-for="item in commonItemsList"
                :key="item.label"
                class="common-analysis-item"
                @click="handleCommonAnalysis(item)"
                :disabled="isAnalyzing"
              >
                {{ item.label }}
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 分析视图 -->
      <div v-else class="analysis-view">
        <div class="analysis-header">
          <div class="target-info">
            <span class="label">正在分析：</span>
            <span class="value">{{ symbolCode.toUpperCase() }}</span>
          </div>
          <div class="action-buttons" v-if="!isAnalyzing">
            <button class="action-button" @click="resetView">
              <svg
                class="icon"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <polyline points="22 12 18 12 15 12"></polyline>
                <path d="M11.5 3a17 17 0 0 0-6.5 2.5L2 8"></path>
                <path d="M2 3v5h5"></path>
                <path d="M13.5 21a17 17 0 0 0 6.5-2.5L22 16"></path>
                <path d="M22 21v-5h-5"></path>
              </svg>
              <span>重新分析</span>
            </button>
            <button
              class="action-button copy"
              @click="copyAnalysis"
              :class="{ success: copySuccess }"
            >
              <span v-if="!copySuccess">复制结果</span>
              <span v-else>复制成功</span>
            </button>
          </div>
        </div>

        <div v-if="isAnalyzing" class="analysis-status">
          <div class="simple-loader"></div>
          <div class="status-text">
            <div class="thought-text" v-if="currentThought">{{ currentThought }}</div>
          </div>
        </div>

        <div
          class="analysis-container"
          ref="analysisContainer"
          :class="{ 'fade-in': analysisContent }"
        >
          <div v-if="analysisContent.startsWith('错误:')" class="error-message">
            {{ analysisContent.substring(4) }}
          </div>
          <div v-else class="analysis-content">
            {{ analysisContent }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
:root {
  --color-accent-rgb: 51, 85, 255; /* 假设accent颜色为#3355ff */
}

.universal-analysis-view {
  min-height: 100vh;
  height: 100vh;
  background-color: var(--color-bg-primary);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-container {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  justify-content: center;
}

.initial-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15vh;
  gap: 1.5rem;
  transition: all 0.5s ease;
}

.header-section {
  text-align: center;
  transition: all 0.5s ease;
}

.title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
  transition: all 0.5s ease;
}

.description {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  transition: all 0.5s ease;
}

.search-section {
  width: 100%;
  max-width: 800px;
  transition: all 0.5s ease;
  padding: 0 1.5rem;
}

.search-container {
  position: relative;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.input-wrapper {
  position: relative;
  margin-bottom: 0;
}

.input-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 5.5rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--border-radius);
  background-color: var(--color-bg-primary);
  padding: 0.75rem 1rem;
  transition: all 0.3s ease;
  gap: 0.75rem;
}

.input-area {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
}

.search-input {
  flex: 1;
  border: none;
  background: none;
  padding: 0;
  font-size: 0.95rem;
  color: var(--color-text-primary);
  outline: none;
  height: 2.5rem;
}

.clear-button {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--color-text-secondary);
  opacity: 0.6;
  transition: all 0.2s ease;
}

.clear-button:hover:not(:disabled) {
  opacity: 1;
}

.clear-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.clear-button svg {
  width: 16px;
  height: 16px;
}

.analyze-button {
  width: 100%;
  padding: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: white;
  background-color: var(--color-accent);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.2s ease;
}

.analyze-button:hover:not(:disabled) {
  background-color: var(--color-accent-hover);
}

.analyze-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* 分析视图样式 */
.analysis-view {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 2rem);
  padding: 0.5rem;
  animation: fadeIn 0.3s ease-out;
}

.analysis-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: var(--color-bg-secondary);
  border-radius: var(--border-radius);
  flex-shrink: 0;
}

.analysis-status {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 1rem;
  text-align: left;
  gap: 1rem;
  margin-top: 1rem;
  background: transparent;
  border-radius: var(--border-radius);
}

.simple-loader {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text-secondary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.status-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
}

.thought-text {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  position: relative;
  padding-right: 0.5rem;
  animation: none;
}

.analysis-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border-radius: var(--border-radius);
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
}

.analysis-container.fade-in {
  background-color: var(--color-bg-secondary);
}

.analysis-content {
  font-size: 1rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-text-primary);
  padding: 1.5rem 2rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.error-message {
  color: #ff3333;
  font-weight: 500;
  padding: 1rem;
  background-color: rgba(255, 51, 51, 0.08);
  border: 1px solid rgba(255, 51, 51, 0.2);
  border-radius: 0.5rem;
  margin: 1rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
}

.error-message::before {
  content: '⚠️ ';
}

.target-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.target-info .label {
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

.target-info .value {
  color: var(--color-accent);
  font-weight: 500;
  font-size: 0.9rem;
}

.action-buttons {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.action-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--border-radius);
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  font-weight: 500;
}

.action-button:hover {
  background-color: var(--color-accent);
  color: white;
}

.action-button.copy {
  background-color: var(--color-accent);
  color: white;
}

.action-button.copy:hover {
  opacity: 0.9;
}

.action-button.copy.success {
  background-color: #4caf50;
  border-color: #4caf50;
}

.action-button .icon {
  width: 16px;
  height: 16px;
}

/* 快速分析列表样式 */
.common-analysis-section {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.common-analysis-container {
  width: 100%;
  padding: 0 1.5rem;
  margin-bottom: 1.5rem;
}

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

.section-title {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.common-analysis-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.common-analysis-item {
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  color: var(--color-accent);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-accent);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.2s ease;
}

.common-analysis-item:hover:not(:disabled) {
  background-color: var(--color-accent);
  color: white;
}

.common-analysis-item:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .universal-analysis-view {
    padding: 0.75rem;
  }

  .analysis-view {
    padding: 0.5rem;
    margin-top: 4.5rem;
  }

  .analysis-header {
    padding: 1rem;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }

  .action-buttons {
    width: 100%;
    flex-direction: row;
    gap: 0.75rem;
  }

  .action-button {
    flex: 1;
    justify-content: center;
    padding: 0.6rem;
    font-size: 0.85rem;
  }

  .analysis-content {
    padding: 1.25rem 1.5rem;
    font-size: 0.95rem;
  }

  .initial-content {
    margin-bottom: 12vh;
    gap: 1.5rem;
  }

  .title {
    font-size: 1.75rem;
  }

  .description {
    font-size: 0.9rem;
  }

  .search-input {
    font-size: 0.9rem;
  }

  .analyze-button {
    font-size: 0.85rem;
  }

  .search-container {
    padding: 1rem;
  }

  .search-section {
    padding: 0 1rem;
  }

  .common-analysis-section {
    padding: 0 1rem;
  }

  .common-analysis-container {
    padding: 0 1rem;
  }

  .analysis-status {
    padding: 1rem;
    margin-top: 0.75rem;
  }

  .simple-loader {
    width: 14px;
    height: 14px;
    border-width: 2px;
  }

  .thought-text {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .universal-analysis-view {
    padding: 0.5rem;
  }

  .analysis-view {
    padding: 0.5rem;
  }

  .analysis-header {
    padding: 1rem;
  }

  .target-info {
    flex-wrap: wrap;
  }

  .target-info .label {
    font-size: 0.8rem;
  }

  .target-info .value {
    font-size: 0.85rem;
  }

  .analysis-content {
    padding: 1rem;
    font-size: 0.9rem;
    line-height: 2;
  }

  .initial-content {
    margin-bottom: 10vh;
    gap: 1rem;
  }

  .title {
    font-size: 1.5rem;
  }

  .description {
    font-size: 0.85rem;
  }

  .search-input {
    font-size: 0.85rem;
  }

  .analyze-button {
    font-size: 0.85rem;
    padding: 0.6rem;
  }

  .action-buttons {
    gap: 0.5rem;
  }

  .action-button {
    padding: 0.5rem;
    font-size: 0.8rem;
  }

  .search-container {
    padding: 0.75rem;
  }

  .search-section {
    padding: 0 0.75rem;
  }

  .common-analysis-section {
    padding: 0 0.75rem;
  }

  .common-analysis-container {
    padding: 0 0.75rem;
  }

  .common-analysis-item {
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
  }

  .analysis-status {
    padding: 0.75rem;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
  }

  .simple-loader {
    width: 12px;
    height: 12px;
    border-width: 1.5px;
    margin: 0 auto;
  }

  .thought-text {
    font-size: 0.8rem;
    text-align: center;
  }
}
</style>
