<template>
  <view :class="['gen-badge', status]">
    <text class="gen-icon">{{ icon }}</text>
    <text class="gen-label">{{ label }}</text>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = withDefaults(defineProps<{
  status: string;
  // 可覆盖默认映射
  customMap?: Record<string, { icon: string; label: string }>;
}>(), {
  customMap: () => ({}),
});

const statusDisplayMap: Record<string, { icon: string; label: string }> = {
  // 统一状态（推荐）
  idle:        { icon: '○', label: '未开始' },
  queued:      { icon: '⏳', label: '排队中' },
  processing:  { icon: '⚡', label: '生成中' },
  retrying:    { icon: '🔄', label: '重试中' },
  completed:   { icon: '✓',  label: '已完成' },
  failed:      { icon: '✗',  label: '失败'   },
  cancelled:   { icon: '—',  label: '已取消' },

  // 兼容旧状态名
  draft:       { icon: '📝', label: '草稿' },
  planning:    { icon: '📋', label: '规划中' },
  pending:     { icon: '○',  label: '待处理' },
  generating:  { icon: '⚡', label: '生成中' },
  running:     { icon: '⚡', label: '运行中' },
  success:     { icon: '✓',  label: '成功' },
  paid:        { icon: '✓',  label: '已支付' },
  refunded:    { icon: '↩',  label: '已退款' },
  uploading:   { icon: '↑',  label: '上传中' },
  published:   { icon: '🌐', label: '已公开' },
  paused:      { icon: '⏸',  label: '已暂停' },
  interrupted:  { icon: '⏹',  label: '已中断' },

  // 线性阶段状态（genStage）- Book级别
  outlining:         { icon: '⚡', label: '生成大纲' },
  outline_completed: { icon: '✓',  label: '大纲完成' },
  content_generating:{ icon: '⚡', label: '生成内容' },
  content_completed: { icon: '✓',  label: '内容完成' },
  audio_generating: { icon: '🎵', label: '生成音频' },
  audio_completed:   { icon: '✓',  label: '音频完成' },
  video_generating: { icon: '🎬', label: '生成视频' },
  video_completed:   { icon: '✓',  label: '全部完成' },

  // 线性阶段状态 - Chapter级别（复用部分）
  content_completed_chapter: { icon: '✓',  label: '内容完成' },
  audio_generating_chapter:   { icon: '⚡', label: '音频生成' },
  audio_completed_chapter:    { icon: '✓',  label: '音频完成' },
  video_generating_chapter:   { icon: '⚡', label: '视频生成' },
  video_completed_chapter:    { icon: '✓',  label: '已完成' },
};

const merged = computed(() => ({ ...statusDisplayMap, ...props.customMap }));

const display = computed(() => {
  const s = props.status || '';
  return merged.value[s] || { icon: '?', label: s };
});

const icon = computed(() => display.value.icon);
const label = computed(() => display.value.label);
</script>

<style scoped>
.gen-badge {
  display: inline-flex;
  align-items: center;
  gap: 6rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.gen-icon {
  font-size: 20rpx;
}

.gen-label {
  /* 由父级控制文字颜色 */
}

/* ===== 状态颜色 ===== */

/* 未开始类 */
.gen-badge.idle,
.gen-badge.pending,
.gen-badge.paused {
  background: #f3f4f6;
  color: #6b7280;
}

/* 排队中 */
.gen-badge.queued {
  background: #f3f4f6;
  color: #9ca3af;
}

/* 生成中/上传中 - 带呼吸动画 */
.gen-badge.generating,
.gen-badge.processing,
.gen-badge.running,
.gen-badge.uploading {
  background: #fef3c7;
  color: #d97706;
  animation: gen-pulse 1.5s ease-in-out infinite;
}

/* 重试中 - 带旋转动画 */
.gen-badge.retrying {
  background: #fff7ed;
  color: #ea580c;
  animation: gen-pulse 1.5s ease-in-out infinite;
}
.gen-badge.retrying .gen-icon {
  animation: gen-spin 1s linear infinite;
}

/* 已完成/成功 */
.gen-badge.completed,
.gen-badge.success,
.gen-badge.paid {
  background: #d1fae5;
  color: #059669;
}

/* 已发布 */
.gen-badge.published {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  font-weight: 600;
}

/* 失败 */
.gen-badge.failed {
  background: #fee2e2;
  color: #dc2626;
}

/* 已取消/已中断 */
.gen-badge.cancelled,
.gen-badge.interrupted,
.gen-badge.refunded {
  background: #f3f4f6;
  color: #9ca3af;
  text-decoration: line-through;
}

/* 草稿/规划中 */
.gen-badge.draft {
  background: #e5e7eb;
  color: #6b7280;
}
.gen-badge.planning {
  background: #e0e7ff;
  color: #4338ca;
}

/* ===== 动画 ===== */
@keyframes gen-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

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