<script setup lang="ts">
import { computed } from 'vue'
import { formatClock, formatDateCompact, formatDateTime } from '../../lib/format'
import type { ReportDocument, Sentiment } from '../../types'

interface Props {
  report: ReportDocument | null
  loading: boolean
  selectedDate: string
  availableDates: string[]
}

const props = defineProps<Props>()

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

const visibleDates = computed(() => props.availableDates.slice(0, 8))

function sentimentClass(sentiment: Sentiment) {
  return {
    'sentiment--positive': sentiment === '看多',
    'sentiment--negative': sentiment === '看空',
    'sentiment--neutral': sentiment === '中性',
  }
}
</script>

<template>
  <section class="panel">
    <div class="panel-head">
      <div class="head-copy">
        <p class="eyebrow">Opinion Daily</p>
        <h2 class="panel-title">大V日报</h2>
        <p class="panel-subtitle">每篇文章独立展示账号、时间、情绪、摘要和对应板块，减少错位和重复信息。</p>
      </div>

      <div class="date-tabs hide-scrollbar">
        <button
          v-for="dateValue in visibleDates"
          :key="dateValue"
          class="date-tab"
          :class="{ 'date-tab--active': dateValue === props.selectedDate }"
          type="button"
          @click="emit('selectDate', dateValue)"
        >
          {{ formatDateCompact(dateValue) }}
        </button>
      </div>
    </div>

    <div v-if="props.report" class="content-shell">
      <article class="summary-strip">
        <div class="summary-topline">
          <p class="summary-date">生成时间 {{ formatDateTime(props.report.generated_at) }}</p>
          <div class="summary-stats">
            <div class="stat-card">
              <span class="stat-label">文章数</span>
              <strong class="stat-value">{{ props.report.article_count }}</strong>
            </div>
            <div class="stat-card">
              <span class="stat-label">账号数</span>
              <strong class="stat-value">{{ props.report.account_count }}</strong>
            </div>
          </div>
        </div>

        <div class="summary-body">
          <p class="summary-copy">{{ props.report.summary }}</p>
          <div class="focus-panel">
            <span class="focus-label">核心板块</span>
            <div class="sector-row">
              <span v-for="sector in props.report.focus_sectors" :key="sector" class="sector-tag">
                {{ sector }}
              </span>
            </div>
          </div>
        </div>
      </article>

      <div class="article-list">
        <article v-for="article in props.report.articles" :key="article.id" class="article-card">
          <div class="article-head">
            <div class="title-group">
              <h3 class="article-title">{{ article.title }}</h3>
              <div class="meta-line">
                <span>{{ article.account_name }}</span>
                <span>{{ article.article_type }}</span>
                <span>{{ formatClock(article.published_at) }}</span>
              </div>
            </div>
            <span class="sentiment" :class="sentimentClass(article.sentiment)">{{ article.sentiment }}</span>
          </div>

          <div class="article-body">
            <div class="summary-panel">
              <span class="panel-label">观点摘要</span>
              <p class="article-summary">{{ article.summary }}</p>
            </div>

            <div class="sector-panel">
              <span class="panel-label">对应板块</span>
              <div class="sector-row">
                <span v-for="sector in article.sectors" :key="sector" class="sector-tag">
                  {{ sector }}
                </span>
              </div>
            </div>
          </div>

          <div class="article-foot">
            <span class="article-link-copy">查看原文链接</span>
            <a class="link-button" :href="article.source_url" target="_blank" rel="noreferrer">
              打开原文
            </a>
          </div>
        </article>
      </div>
    </div>

    <div v-else class="empty-state">
      <p>{{ props.loading ? '日报加载中...' : '当前日期暂无日报内容。' }}</p>
    </div>
  </section>
</template>

<style scoped>
.panel {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  min-height: 0;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: var(--bg-panel);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.panel-head {
  display: grid;
  gap: 8px;
}

.head-copy {
  display: grid;
  gap: 4px;
}

.eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.panel-title {
  margin: 0;
  font-family: "Palatino Linotype", "STSong", "Songti SC", serif;
  font-size: 24px;
  color: var(--ink-strong);
}

.panel-subtitle {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.date-tabs {
  display: flex;
  gap: 8px;
  overflow: auto hidden;
}

.date-tab {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--ink-soft);
  background: rgba(252, 244, 233, 0.88);
}

.date-tab--active {
  color: white;
  background: var(--accent);
}

.content-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  min-height: 0;
}

.summary-strip {
  display: grid;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-panel-strong);
}

.summary-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.summary-date {
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
}

.summary-body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.75fr);
  gap: 12px;
  align-items: start;
}

.summary-copy {
  margin: 0;
  font-size: 13px;
  line-height: 1.58;
  color: var(--ink-main);
}

.summary-stats {
  display: flex;
  gap: 8px;
}

.stat-card {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 82px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: rgba(248, 240, 229, 0.9);
}

.stat-label {
  font-size: 12px;
  color: var(--ink-soft);
}

.stat-value {
  font-size: 20px;
  color: var(--ink-strong);
}

.focus-panel {
  display: grid;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(255, 252, 247, 0.72);
}

.focus-label,
.panel-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.article-list {
  display: grid;
  gap: 9px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.article-card {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: rgba(255, 248, 239, 0.84);
}

.article-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.title-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.article-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.36;
  color: var(--ink-strong);
}

.meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--ink-soft);
}

.article-body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.7fr);
  gap: 10px;
}

.summary-panel,
.sector-panel {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 9px 11px;
  border-radius: 16px;
  background: rgba(255, 252, 247, 0.72);
}

.article-summary {
  margin: 0;
  font-size: 13px;
  line-height: 1.58;
  color: var(--ink-main);
}

.sector-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sector-tag {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--accent);
  background: var(--accent-soft);
}

.article-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.article-link-copy {
  font-size: 12px;
  color: var(--ink-soft);
}

.link-button {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--ink-strong);
  background: rgba(0, 0, 0, 0.05);
}

.sentiment {
  flex: 0 0 auto;
  width: fit-content;
  padding: 3px 9px;
  border-radius: 999px;
}

.sentiment--positive {
  color: var(--positive);
  background: rgba(27, 122, 94, 0.12);
}

.sentiment--negative {
  color: var(--negative);
  background: rgba(154, 75, 69, 0.12);
}

.sentiment--neutral {
  color: var(--neutral);
  background: rgba(103, 100, 93, 0.12);
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 240px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--ink-soft);
}

@media (max-width: 1260px) {
  .summary-body,
  .article-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .summary-topline,
  .article-head,
  .article-foot {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>
