<script setup lang="ts">
import { Calendar } from 'lucide-vue-next'

export interface KeyPoint {
  content: string
  source: string
}

export interface Suggestion {
  text: string
  type?: 'action' | 'info' | 'warning'
}

export interface DailyDigestData {
  date: string
  summary: string
  keyPoints: KeyPoint[]
  suggestions: Suggestion[]
}

defineProps<{
  digest?: DailyDigestData | null
  loading?: boolean
}>()
</script>

<template>
  <div v-if="loading" class="digest-card digest-loading">
    <div class="digest-skeleton header-skeleton"></div>
    <div class="digest-skeleton text-skeleton"></div>
    <div class="digest-skeleton text-skeleton short"></div>
  </div>

  <div v-else-if="digest" class="digest-card">
    <div class="digest-header">
      <div class="digest-date">
        <Calendar :size="14" class="date-icon" />
        <span class="date-label">{{ digest.date }}</span>
      </div>
      <div class="digest-badge">每日摘要</div>
    </div>

    <div class="digest-summary">
      {{ digest.summary }}
    </div>

    <div v-if="digest.keyPoints.length > 0" class="digest-section">
      <div class="section-label">KEY_INSIGHTS</div>
      <ul class="key-points-list">
        <li v-for="(point, index) in digest.keyPoints" :key="index" class="key-point-item">
          <span class="point-bullet">{{ String(index + 1).padStart(2, '0') }}</span>
          <div class="point-content">
            <span class="point-text">{{ point.content }}</span>
            <span v-if="point.source" class="point-source">{{ point.source }}</span>
          </div>
        </li>
      </ul>
    </div>

    <div v-if="digest.suggestions.length > 0" class="digest-section">
      <div class="section-label">SUGGESTIONS</div>
      <div class="suggestions-list">
        <div
          v-for="(suggestion, index) in digest.suggestions"
          :key="index"
          class="suggestion-item"
          :class="suggestion.type || 'info'"
        >
          <span class="suggestion-marker">{{ suggestion.type === 'action' ? '→' : suggestion.type === 'warning' ? '!' : '●' }}</span>
          <span class="suggestion-text">{{ suggestion.text }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.digest-card {
  margin: 16px 20px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(123, 44, 191, 0.15) 0%, rgba(59, 130, 246, 0.12) 50%, rgba(123, 44, 191, 0.08) 100%);
  border: 1px solid rgba(123, 44, 191, 0.25);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  animation: fade-in-up 0.4s ease-out;
}

.digest-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(123, 44, 191, 0.5), rgba(59, 130, 246, 0.5), transparent);
}

.digest-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(123, 44, 191, 0.1), transparent 50%);
  pointer-events: none;
}

.digest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.digest-date {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-icon {
  color: rgba(123, 44, 191, 0.8);
}

.date-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

.digest-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(123, 44, 191, 0.3), rgba(59, 130, 246, 0.25));
  border: 1px solid rgba(123, 44, 191, 0.4);
  color: #c4b5fd;
  text-shadow: 0 0 10px rgba(123, 44, 191, 0.5);
}

.digest-summary {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-primary);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.digest-section {
  margin-top: 16px;
  position: relative;
  z-index: 1;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: rgba(123, 44, 191, 0.7);
  margin-bottom: 12px;
}

.key-points-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.key-point-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(123, 44, 191, 0.15);
}

.point-bullet {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: rgba(123, 44, 191, 0.9);
  text-shadow: 0 0 8px rgba(123, 44, 191, 0.5);
  flex-shrink: 0;
  width: 20px;
}

.point-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.point-text {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.5;
}

.point-source {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}

.suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-sm);
  border-left: 2px solid;
}

.suggestion-item.info {
  border-left-color: rgba(59, 130, 246, 0.6);
}

.suggestion-item.action {
  border-left-color: rgba(0, 245, 212, 0.6);
}

.suggestion-item.warning {
  border-left-color: rgba(249, 168, 37, 0.6);
}

.suggestion-marker {
  font-family: var(--font-mono);
  font-size: 11px;
  flex-shrink: 0;
}

.suggestion-item.info .suggestion-marker {
  color: rgba(59, 130, 246, 0.9);
}

.suggestion-item.action .suggestion-marker {
  color: rgba(0, 245, 212, 0.9);
}

.suggestion-item.warning .suggestion-marker {
  color: rgba(249, 168, 37, 0.9);
}

.suggestion-text {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Loading skeleton */
.digest-loading {
  min-height: 180px;
}

.digest-skeleton {
  background: linear-gradient(90deg, rgba(123, 44, 191, 0.1) 25%, rgba(123, 44, 191, 0.2) 50%, rgba(123, 44, 191, 0.1) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

.header-skeleton {
  height: 24px;
  width: 60%;
}

.text-skeleton {
  height: 16px;
  width: 100%;
}

.text-skeleton.short {
  width: 75%;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
</style>
