<script setup lang="ts">
import { nextTick, onMounted, reactive, ref, watch, computed } from 'vue'
import { marked } from 'marked'
import { ElMessage } from 'element-plus'
import { listScores, listContracts, type Score } from '@/api/scores'
import { runPipeline, type RunResponse } from '@/api/run'
import ScoreDetailDrawer from '@/components/ScoreDetailDrawer.vue'
import { parseTsCode } from '@/utils/contract'
import { useMobile } from '@/composables/useMobile'

const { isMobile } = useMobile()

const EXCHANGES = [
  { code: 'ZCE', name: '郑商所' },
  { code: 'SHF', name: '上期所' },
  { code: 'DCE', name: '大商所' },
]

const SYMBOLS_BY_EXCHANGE: Record<string, string[]> = {
  ZCE: ['FG', 'SA', 'MA', 'CF'],
  SHF: ['RB'],
  DCE: ['M'],
}

// 品种打分
const selectedExchange = ref('')
const selectedSymbol = ref('')
const scoring = ref(false)
const scoreResult = ref<RunResponse | null>(null)
const resultRef = ref<HTMLElement | null>(null)

const availableSymbols = computed(() => {
  if (!selectedExchange.value) return []
  return SYMBOLS_BY_EXCHANGE[selectedExchange.value] || []
})

watch(selectedExchange, () => {
  selectedSymbol.value = ''
})

async function handleScore() {
  if (!selectedSymbol.value) {
    ElMessage.warning('请选择品种')
    return
  }
  scoring.value = true
  scoreResult.value = null
  try {
    const resp = await runPipeline({ symbol: selectedSymbol.value })
    scoreResult.value = resp
    ElMessage.success('打分完成')
    await nextTick()
    resultRef.value?.scrollIntoView({ behavior: 'smooth', block: 'start' })
  } catch (err: any) {
    const msg = err?.response?.data?.error || err.message || '请求失败'
    ElMessage.error(msg)
  } finally {
    scoring.value = false
  }
}

function signalTagType(s: string) {
  if (s.includes('强烈看多')) return 'success'
  if (s.includes('偏多')) return ''
  if (s.includes('偏空')) return 'warning'
  if (s.includes('强烈看空')) return 'danger'
  return 'info'
}

function signalIcon(s: string) {
  if (s.includes('强烈看多')) return '📈📈'
  if (s.includes('偏多')) return '📈'
  if (s.includes('偏空')) return '📉'
  if (s.includes('强烈看空')) return '📉📉'
  return ''
}

// AI 分析
const aiLoading = ref(false)
const aiContent = ref('')
const aiError = ref('')
let aiES: EventSource | null = null

function closeAI() {
  aiES?.close()
  aiES = null
  aiLoading.value = false
}

async function askAI() {
  if (!scoreResult.value) return
  closeAI()
  aiLoading.value = true
  aiContent.value = ''
  aiError.value = ''

  const ts = encodeURIComponent(scoreResult.value.ts_code)
  const td = encodeURIComponent(scoreResult.value.trade_date)
  aiES = new EventSource(`/api/ai/analyze?ts_code=${ts}&trade_date=${td}`)
  aiES.addEventListener('token', (e) => { aiContent.value += e.data })
  aiES.addEventListener('error', (e) => {
    aiError.value = (e as any)?.data || '请求失败'
    closeAI()
  })
  aiES.addEventListener('done', () => closeAI())
  aiES.onerror = () => {
    if (!aiContent.value && !aiError.value) aiError.value = '连接中断'
    closeAI()
  }
}

// 历史查询（折叠）
const showHistory = ref(false)
const historyFilter = reactive<{
  ts_code?: string
  range: [string, string] | []
  signal?: string
  limit: number
}>({
  ts_code: undefined,
  range: [],
  signal: undefined,
  limit: 50,
})

const contracts = ref<string[]>([])
const historyRows = ref<Score[]>([])
const historyLoading = ref(false)
const drawerScoreId = ref<number | null>(null)

async function reloadHistory(silent = false) {
  if (!silent) historyLoading.value = true
  try {
    const [start, end] = historyFilter.range || []
    historyRows.value = await listScores({
      ts_code: historyFilter.ts_code,
      start: start || undefined,
      end: end || undefined,
      signal: historyFilter.signal,
      limit: historyFilter.limit,
    })
  } finally {
    if (!silent) historyLoading.value = false
  }
}

function toggleSignal(s: string) {
  historyFilter.signal = historyFilter.signal === s ? undefined : s
  reloadHistory(true)
}

onMounted(async () => {
  contracts.value = await listContracts().catch(() => [])
})
</script>

<template>
  <div class="page">
    <!-- 品种打分 -->
    <el-card shadow="never">
      <template #header>
        <span>品种打分</span>
      </template>
      <el-form :inline="!isMobile">
        <el-form-item label="交易所">
          <el-select
            v-model="selectedExchange"
            placeholder="选择交易所"
            clearable
            :style="{ width: isMobile ? '100%' : '160px' }"
          >
            <el-option
              v-for="ex in EXCHANGES"
              :key="ex.code"
              :label="ex.name"
              :value="ex.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="品种">
          <el-select
            v-model="selectedSymbol"
            placeholder="选择品种"
            :disabled="!selectedExchange"
            :style="{ width: isMobile ? '100%' : '120px' }"
          >
            <el-option
              v-for="s in availableSymbols"
              :key="s"
              :label="s"
              :value="s"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :loading="scoring"
            :disabled="!selectedSymbol"
            @click="handleScore"
          >
            打分
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 打分结果 -->
    <div v-if="scoreResult" ref="resultRef">
      <el-card shadow="never" class="result-card">
        <template #header>
          <span>打分结果</span>
        </template>
        <el-descriptions :column="isMobile ? 1 : 2" border>
          <el-descriptions-item label="品种">
            {{ parseTsCode(scoreResult.ts_code).symbol }}
          </el-descriptions-item>
          <el-descriptions-item label="合约">
            {{ parseTsCode(scoreResult.ts_code).contract }}
          </el-descriptions-item>
          <el-descriptions-item label="日期">{{ scoreResult.trade_date }}</el-descriptions-item>
          <el-descriptions-item label="收盘">{{ scoreResult.close }}</el-descriptions-item>
          <el-descriptions-item label="持仓">{{ scoreResult.oi }}</el-descriptions-item>
          <el-descriptions-item label="短期(7d)">{{ scoreResult.short_term }}</el-descriptions-item>
          <el-descriptions-item label="中期(15d)">{{ scoreResult.medium_term }}</el-descriptions-item>
          <el-descriptions-item label="长期(30d)">{{ scoreResult.long_term }}</el-descriptions-item>
          <el-descriptions-item label="综合">
            <strong>{{ scoreResult.composite }}</strong>
          </el-descriptions-item>
          <el-descriptions-item label="信号" :span="isMobile ? 1 : 2">
            <el-tag :type="signalTagType(scoreResult.signal)">
              {{ signalIcon(scoreResult.signal) }} {{ scoreResult.signal }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>

        <div class="ai-section">
          <el-button
            v-if="!aiLoading && !aiContent && !aiError"
            type="primary"
            :loading="aiLoading"
            @click="askAI"
          >
            🤖 AI 分析当前打分
          </el-button>
          <div v-if="aiLoading || aiContent || aiError" class="ai-card">
            <div class="ai-header">
              <span>🤖 AI 分析</span>
              <el-button v-if="aiLoading" text size="small" @click="closeAI">取消</el-button>
            </div>
            <div class="ai-body">
              <div v-if="aiContent" class="ai-text" v-html="marked(aiContent)" />
              <div v-if="aiError" class="ai-error">{{ aiError }}</div>
              <div v-if="aiLoading && !aiContent" class="ai-loading">⏳ 正在分析...</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 历史查询（折叠） -->
    <el-card shadow="never">
      <template #header>
        <div class="history-header" @click="showHistory = !showHistory">
          <span>历史打分查询</span>
          <span>{{ showHistory ? '▲' : '▼' }}</span>
        </div>
      </template>
      <div v-if="showHistory">
        <el-form :inline="!isMobile">
          <el-form-item label="合约">
            <el-select
              v-model="historyFilter.ts_code"
              placeholder="全部合约"
              clearable
              filterable
              :style="{ width: isMobile ? '100%' : '200px' }"
            >
              <el-option v-for="c in contracts" :key="c" :label="c" :value="c" />
            </el-select>
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker
              v-model="historyFilter.range"
              type="daterange"
              value-format="YYYYMMDD"
              range-separator="→"
              start-placeholder="起"
              end-placeholder="止"
              :style="{ width: isMobile ? '100%' : 'auto' }"
            />
          </el-form-item>
          <el-form-item label="条数">
            <el-input-number v-model="historyFilter.limit" :min="10" :max="500" :step="50" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="historyLoading" style="width: 88px" @click="reloadHistory">
              查询
            </el-button>
          </el-form-item>
          <el-form-item label="快捷" class="signal-item">
            <el-button-group class="signal-group" :size="isMobile ? 'small' : 'default'">
              <el-button
                :type="historyFilter.signal === '强烈看多' ? 'success' : ''"
                @click="toggleSignal('强烈看多')"
              >
                强烈看多
              </el-button>
              <el-button
                :type="historyFilter.signal === '偏多' ? 'primary' : ''"
                @click="toggleSignal('偏多')"
              >
                偏多
              </el-button>
              <el-button
                :type="historyFilter.signal === '偏空' ? 'warning' : ''"
                @click="toggleSignal('偏空')"
              >
                偏空
              </el-button>
              <el-button
                :type="historyFilter.signal === '强烈看空' ? 'danger' : ''"
                @click="toggleSignal('强烈看空')"
              >
                强烈看空
              </el-button>
            </el-button-group>
          </el-form-item>
        </el-form>

        <div class="table-wrapper" v-loading="historyLoading">
          <el-table :data="historyRows" stripe class="score-table">
            <el-table-column prop="trade_date" label="日期" width="100" />
            <el-table-column label="品种" width="80">
              <template #default="{ row }">
                {{ parseTsCode(row.ts_code).symbol }}
              </template>
            </el-table-column>
            <el-table-column label="合约" width="80">
              <template #default="{ row }">
                {{ parseTsCode(row.ts_code).contract }}
              </template>
            </el-table-column>
            <el-table-column prop="close" label="收盘" width="90" />
            <el-table-column prop="oi" label="持仓" width="100" />
            <el-table-column prop="oi_chg" label="持仓变化" width="100" />
            <el-table-column prop="short_term" label="短期(7d)" width="90" />
            <el-table-column prop="medium_term" label="中期(15d)" width="90" />
            <el-table-column prop="long_term" label="长期(30d)" width="90" />
            <el-table-column prop="composite" label="综合" width="80">
              <template #default="{ row }">
                <strong>{{ row.composite.toFixed(2) }}</strong>
              </template>
            </el-table-column>
            <el-table-column prop="signal" label="信号" min-width="160">
              <template #default="{ row }">
                <el-tag :type="signalTagType(row.signal)">
                  {{ signalIcon(row.signal) }} {{ row.signal }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80" fixed="right">
              <template #default="{ row }">
                <el-button type="primary" link @click="drawerScoreId = row.id">明细</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>

    <ScoreDetailDrawer :score-id="drawerScoreId" @close="drawerScoreId = null" />
  </div>
</template>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.result-card {
  margin-top: 4px;
}
.ai-section {
  margin-top: 12px;
}
.ai-card {
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
  margin-top: 8px;
  overflow: hidden;
}
.ai-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--el-fill-color-light);
  font-weight: 600;
}
.ai-body {
  padding: 12px;
}
.ai-text {
  line-height: 1.5;
}
.ai-error {
  color: var(--el-color-danger);
}
.ai-loading {
  color: var(--el-text-color-secondary);
}
.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.filter-card :deep(.el-card__body) {
  padding: 12px 16px;
}
.signal-group :deep(.el-button) {
  transition: none !important;
}
.signal-group :deep(.el-button:focus),
.signal-group :deep(.el-button:active) {
  outline: none;
  box-shadow: none;
}
.table-wrapper {
  background: var(--el-bg-color);
  border-radius: 4px;
  overflow-x: auto;
}
.score-table {
  min-width: 960px;
}

@media (max-width: 768px) {
  .signal-item {
    flex-wrap: wrap;
  }
  .signal-group {
    flex-wrap: wrap;
  }
}
</style>

<style>
/* AI Markdown 输出段落间距（非 scoped，确保 v-html 生效） */
.ai-text p { margin: 3px 0; }
.ai-text h1, .ai-text h2, .ai-text h3, .ai-text h4 { margin: 16px 0 6px; font-size: inherit; }
.ai-text ul, .ai-text ol { margin: 3px 0; padding-left: 18px; }
.ai-text li { margin: 1px 0; }
.ai-text strong { color: var(--el-color-primary, #409eff); }
</style>
