<template>
  <div class="flow-preview">
    <div class="flow-info">
      <h3>{{ flow.name }}</h3>
      <p v-if="flow.description">{{ flow.description }}</p>
    </div>

    <el-timeline>
      <el-timeline-item
        v-for="(step, index) in flow.steps"
        :key="step.step_id"
        :type="getStepType(index)"
        :size="index === currentStep ? 'large' : 'normal'"
        :hollow="index !== currentStep"
      >
        <div class="step-card" :class="{ active: index === currentStep }">
          <div class="step-header">
            <span class="step-number">步骤 {{ index + 1 }}</span>
            <el-tag v-if="step.wait_input" size="small" type="info">等待输入</el-tag>
          </div>
          <div class="step-content">
            <pre>{{ step.content }}</pre>
          </div>
          <div class="step-config" v-if="step.wait_input">
            <div class="config-item">
              <span class="label">超时时间:</span>
              <span class="value">{{ step.timeout_seconds }}秒</span>
            </div>
            <div class="config-item">
              <span class="label">超时动作:</span>
              <span class="value">{{ getTimeoutActionLabel(step.timeout_action) }}</span>
            </div>
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>

    <div class="preview-controls" v-if="flow.steps.length > 0">
      <el-button :disabled="currentStep <= 0" @click="prevStep">上一步</el-button>
      <span class="step-indicator">{{ currentStep + 1 }} / {{ flow.steps.length }}</span>
      <el-button :disabled="currentStep >= flow.steps.length - 1" @click="nextStep">下一步</el-button>
      <el-button type="primary" @click="resetPreview">重置</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { TIMEOUT_ACTION_OPTIONS } from '@/types/script-flow'
import type { ScriptFlowDetail } from '@/types/script-flow'

const props = defineProps<{
  flow: ScriptFlowDetail
}>()

const currentStep = ref(0)

const getStepType = (index: number): 'primary' | 'success' | 'warning' | 'danger' | 'info' => {
  if (index === currentStep.value) return 'primary'
  if (index < currentStep.value) return 'success'
  return 'info'
}

const getTimeoutActionLabel = (action?: string) => {
  if (!action) return '-'
  const opt = TIMEOUT_ACTION_OPTIONS.find(o => o.value === action)
  return opt?.label || action
}

const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--
  }
}

const nextStep = () => {
  if (currentStep.value < props.flow.steps.length - 1) {
    currentStep.value++
  }
}

const resetPreview = () => {
  currentStep.value = 0
}
</script>

<style scoped>
.flow-preview {
  padding: 0 16px;
}

.flow-info {
  margin-bottom: 24px;
}

.flow-info h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.flow-info p {
  margin: 0;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

.step-card {
  background-color: var(--el-fill-color-blank);
  border: 1px solid var(--el-border-color-light);
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s;
}

.step-card.active {
  border-color: var(--el-color-primary);
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.2);
}

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background-color: var(--el-fill-color-light);
  border-bottom: 1px solid var(--el-border-color-light);
}

.step-number {
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.step-content {
  padding: 16px;
}

.step-content pre {
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--el-text-color-regular);
}

.step-config {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  background-color: var(--el-fill-color-lighter);
  border-top: 1px solid var(--el-border-color-light);
}

.config-item {
  font-size: 13px;
}

.config-item .label {
  color: var(--el-text-color-secondary);
  margin-right: 4px;
}

.config-item .value {
  color: var(--el-text-color-primary);
}

.preview-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--el-border-color-light);
}

.step-indicator {
  font-size: 14px;
  color: var(--el-text-color-secondary);
}
</style>
