<template>
  <div class="class-summary">
    <div class="class-summary__head">
      <span class="class-summary__title">{{ lang.ssArticleClassSummary }}</span>
      <div class="class-summary__meta">
        <!-- 定时刷新已有总结时只在头部转小圈：正文原地留着，不清掉老师读到一半的字 -->
        <span v-if="loading && summary" class="class-summary__spinner"></span>
        <span v-if="generatedAt" class="class-summary__time">{{ formatTime(generatedAt) }}</span>
        <button class="class-summary__refresh" :disabled="loading" @click="emit('refresh')">
          {{ summary ? lang.ssArticleRefresh : lang.ssArticleGenerate }}
        </button>
      </div>
    </div>

    <!-- 整块 loading / 错误只在还没有任何总结时出现；已有总结时失败靠下次定时 tick 重试 -->
    <div v-if="loading && !summary" class="class-summary__loading">
      <span class="class-summary__spinner"></span>
      {{ lang.ssArticleSummarizing }}
    </div>

    <div v-else-if="error && !summary" class="class-summary__error">
      <span>{{ lang.ssArticleSummaryFailed }}</span>
      <button @click="emit('refresh')">{{ lang.ssArticleRetry }}</button>
    </div>

    <!-- 后端固定中文输出，前端逐字显示，不切成条目也不机器翻译 -->
    <p v-else-if="summary" class="class-summary__text">{{ summary }}</p>

    <p v-else class="class-summary__empty">{{ lang.ssArticleSummaryEmpty }}</p>
  </div>
</template>

<script lang="ts" setup>
import { lang } from '@/main'

defineProps<{
  summary: string
  loading: boolean
  error: string | null
  generatedAt: string | null
}>()

const emit = defineEmits<{ refresh: [] }>()

function formatTime(iso: string): string {
  const date = new Date(iso)
  if (Number.isNaN(date.getTime())) return ''
  const hh = String(date.getHours()).padStart(2, '0')
  const mm = String(date.getMinutes()).padStart(2, '0')
  return `${hh}:${mm}`
}
</script>

<style lang="scss" scoped>
.class-summary {
  flex-shrink: 0;
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  background: #fff7ed;
}

.class-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.class-summary__title {
  font-size: 12px;
  font-weight: 600;
  color: #c2410c;
}

.class-summary__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.class-summary__time {
  font-size: 11px;
  color: #9ca3af;
}

.class-summary__refresh {
  padding: 2px 10px;
  border: 1px solid #fdba74;
  border-radius: 999px;
  background: #fff;
  color: #ea580c;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.2s;

  &:hover:not(:disabled) { background: #ffedd5; }
  &:disabled { opacity: 0.5; cursor: not-allowed; }
}

.class-summary__loading,
.class-summary__error {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #9ca3af;

  button {
    padding: 2px 10px;
    border: 1px solid #fdba74;
    border-radius: 999px;
    background: #fff;
    color: #ea580c;
    font-size: 11px;
    cursor: pointer;
  }
}

.class-summary__spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fb923c;
  border-top-color: transparent;
  animation: article-summary-spin 0.7s linear infinite;
}

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

.class-summary__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
  color: #7c2d12;
}

.class-summary__empty {
  margin: 0;
  font-size: 12px;
  color: #9ca3af;
}
</style>
