<template>
  <div v-if="phase" class="phase-card" :class="borderColorClass">
    <div class="phase-header flex-display-start">
      <div>
        <h3 class="phase-title main-color text-title-2-bold">{{ phase.title }}</h3>
        <p class="text-tip-2 text-primary-50-clor">{{ phase.description }}</p>
      </div>
      <div class="phase-status">
        <span class="risk-badge" :class="riskColorClass">{{ riskLabel }}</span>
        <div class="progress-bar-container">
          <div 
            v-for="i in 3" 
            :key="i" 
            class="progress-segment"
            :class="getSegmentClass(i)"
          ></div>
        </div>
        <p v-if="phase.riskLevel !== 'passed'" class="text-tip-2 text-primary-50-clor">{{ phase.estimatedDays }}</p>
      </div>
    </div>
    <div class="model-inputs-box">
      <div class="box-header flex-display-start">
        <div class="box-title-row flex-display-center">
          <img src="../assets/input.svg" />
          <span class="text-compact-bold">预测模型数据输入</span>
        </div>
        <div class="box-hint flex-display-center text-tip-2 text-primary-50-clor">
          <img src="../assets/importent.svg"/>
          <span>此阶段预测基于以下多维特征</span>
        </div>
      </div>
      <div class="model-inputs">
        <p 
          v-for="(input, index) in phase.modelInputs" 
          :key="index" 
          class="text-tip-2 text-primary-65-clor"
        >
          {{ input }}
        </p>
      </div>
    </div>
    <div class="facts-section">
      <div class="box-header flex-display-start">
        <div class="box-title-row flex-display-center">
          <img src="../assets/icon1.svg"/>
          <span class="text-compact-bold">{{ phase.supportingFacts.title }}</span>
        </div>
        <div class="box-hint flex-display-center text-tip-2 text-primary-50-clor">
          <img src="../assets/importent.svg"/>
          <span>{{ phase.supportingFacts.basedOn }}</span>
        </div>
      </div>
      <div class="stats-grid">
        <div 
          v-for="(stat, index) in phase.supportingFacts.stats" 
          :key="index" 
          class="stat-card"
        >
          <div class="stat-value main-color">{{ stat.value }}</div>
          <div class="text-tip-3 text-primary-65-clor">{{ stat.label }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { PredictionPhase } from '../api'

const props = defineProps<{
  phase: PredictionPhase
}>()

// 根据风险等级返回边框颜色类
const borderColorClass = computed(() => {
  if (!props.phase) return ''
  switch (props.phase.riskLevel) {
    case 'passed':
      return 'border-primary'
    case 'high':
      return 'border-high'
    case 'medium':
      return 'border-medium'
    case 'low':
      return 'border-low'
    default:
      return ''
  }
})

// 根据索引和progressLevel返回进度条格子的类名
function getSegmentClass(index: number) {
  if (!props.phase) return 'segment-inactive'
  const level = props.phase.progressLevel
  const isActive = index <= level
  
  if (!isActive) {
    return 'segment-inactive'
  }
  
  switch (props.phase.riskLevel) {
    case 'passed':
      return 'segment-primary'
    case 'high':
      return 'segment-high'
    case 'medium':
      return 'segment-medium'
    case 'low':
      return 'segment-low'
    default:
      return 'segment-inactive'
  }
}

// 根据风险等级返回文字颜色类
const riskColorClass = computed(() => {
  if (!props.phase) return ''
  switch (props.phase.riskLevel) {
    case 'passed':
      return 'main-color'
    case 'high':
      return 'color-red-100'
    case 'medium':
      return 'color-orange-100'
    case 'low':
      return 'color-green-100'
    default:
      return ''
  }
})

// 根据风险等级返回标签文字
const riskLabel = computed(() => {
  if (!props.phase) return ''
  switch (props.phase.riskLevel) {
    case 'passed':
      return '已通过'
    case 'high':
      return '高'
    case 'medium':
      return '中'
    case 'low':
      return '低'
    default:
      return ''
  }
})
</script>

<style scoped>
.phase-card {
  padding-left: 24px;
  padding-bottom: 32px;
}

.border-primary {
  border-left-color: var(--color-primary-100);
}

.border-high {
  border-left-color: var(--color-red-100);
}

.border-medium {
  border-left-color: var(--color-orange-100);
}

.border-low {
  border-left-color: var(--color-green-100);
}

.phase-header {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.phase-header > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.phase-title {
  font-size: 18px;
  font-weight: bold;
}

.phase-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.progress-bar-container {
  display: flex;
  gap: 4px;
}

.progress-segment {
  width: 50px;
  height: 4px;
  border-radius: 2px;
}

.segment-inactive {
  background-color: var(--bg-black-5);
}

.segment-primary {
  background-color: var(--color-primary-100);
}

.segment-high {
  background-color: var(--color-red-100);
}

.segment-medium {
  background-color: var(--color-orange-100);
}

.segment-low {
  background-color: var(--color-green-100);
}

.risk-badge {
  font-size: 20px;
  font-weight: bold;
}

.model-inputs-box {
  background-color: var(--bg-black-2);
  border-radius: var(--radius-10);
  padding: 16px;
  margin-bottom: 16px;
}

.box-header {
  justify-content: space-between;
  margin-bottom: 12px;
}

.box-title-row {
  gap: 8px;
}

.box-hint {
  gap: 4px;
}

.model-inputs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.model-inputs p {
  line-height: 1.6;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.stat-card {
  background-color: var(--color-primary-2); 
  border: 1px;
  padding: 12px;
  text-align: center;
  border : 1px solid var(--color-primary-10);
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
}

.icon {
  width: 16px;
  height: 16px;
  color: var(--text-primary-65-color);
}
</style>
