<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'

import type { CardTone } from '@/composables/useWorkbenchController'
import { useWorkbenchControllerContext } from '@/composables/useWorkbenchController'
import { formatTimeLabel, statusTone } from '@/utils/format'

const controller = useWorkbenchControllerContext()
const router = useRouter()

const activeTask = computed(() => controller.research.activeTask.value)
const currentReportTask = computed(() => controller.currentReportTask.value)
const recentResearchTasks = computed(() => controller.research.tasks.value.slice(0, 4))
const recentCrawlerHistory = computed(() => controller.crawlerHistory.value.slice(0, 4))

const clockLabel = computed(() => new Intl.DateTimeFormat('zh-CN', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
}).format(new Date()))

const focusTags = computed(() => {
  if (!activeTask.value) {
    return ['等待任务创建', '采集尚未同步', '引擎未分发']
  }

  return [
    activeTask.value.research_focus_label,
    activeTask.value.time_range_label,
    activeTask.value.city || '待定城市',
  ].filter(Boolean)
})

const focusSummary = computed(() => {
  if (!activeTask.value) {
    return '先在任务中心创建研究对象，系统会自动把它同步到采集、三引擎分析和报告生成流程。'
  }

  return activeTask.value.summary_text || activeTask.value.generated_query || '已创建研究任务，等待下一步推进。'
})

const engineCards = computed(() => controller.engineOverview.value)

const activityItems = computed(() => {
  const researchItems = recentResearchTasks.value.map((task) => ({
    id: `research-${task.task_id}`,
    title: task.summary_text || task.venue_name,
    detail: `${task.city || '未填写城市'} · ${task.last_action || task.research_focus_label}`,
    timestamp: task.updated_at,
    tone: statusTone(task.status),
  }))

  const crawlerItems = recentCrawlerHistory.value.map((item) => ({
    id: `crawler-${item.id}`,
    title: `${item.platform_label} · ${item.kind}`,
    detail: item.message || '暂无详细记录',
    timestamp: item.updated_at,
    tone: statusTone(item.status),
  }))

  return [...researchItems, ...crawlerItems]
    .sort((left, right) => (
      new Date(right.timestamp || 0).getTime() - new Date(left.timestamp || 0).getTime()
    ))
    .slice(0, 5)
})

const pipelineSteps = computed(() => {
  const progress = currentReportTask.value?.progress ?? 0

  return [
    { label: '数据聚合', state: progress >= 15 ? 'done' : 'todo' },
    { label: '引擎综合', state: progress >= 45 ? 'done' : progress > 0 ? 'active' : 'todo' },
    { label: '报告校审', state: progress >= 80 ? 'active' : progress >= 45 ? 'todo' : 'todo' },
    { label: '最终交付', state: progress >= 100 ? 'done' : 'todo' },
  ]
})

function metricToneLabel(tone: CardTone) {
  if (tone === 'success') {
    return '稳定'
  }
  if (tone === 'running') {
    return '处理中'
  }
  if (tone === 'danger') {
    return '关注'
  }
  return '待推进'
}

function navigateTo(path: string) {
  void router.push(path)
}
</script>

<template>
  <section class="dashboard-page">
    <div class="dashboard-hero archive-shell-block">
      <div class="dashboard-hero__copy">
        <p class="archive-kicker">Observatory Post 04</p>
        <h2 class="archive-page-title">The Archivist's Overview</h2>
        <p class="archive-copy">
          把研究任务、采集状态、引擎运行与报告交付聚合在一张总控台里，让团队一眼知道“现在进行到哪里、下一步该做什么”。
        </p>
        <div class="dashboard-hero__tags">
          <span
            v-for="tag in focusTags"
            :key="tag"
            class="archive-chip"
          >
            <span class="archive-chip__dot" />
            {{ tag }}
          </span>
        </div>
      </div>

      <div class="dashboard-hero__aside">
        <div class="dashboard-hero__pulse">
          <span class="archive-kicker">System Pulse</span>
          <strong>{{ clockLabel }}</strong>
          <span>{{ controller.busy.value ? '当前有任务正在推进，建议优先关注运行状态。' : '系统处于可继续推进的稳定状态。' }}</span>
        </div>
        <div class="dashboard-hero__actions">
          <button class="archive-button" type="button" @click="navigateTo('/tasks')">进入任务中心</button>
          <button class="archive-button--ghost" type="button" @click="navigateTo('/crawler')">查看采集状态</button>
          <button class="archive-button--ghost" type="button" @click="navigateTo('/reports')">打开报告中心</button>
        </div>
      </div>
    </div>

    <div class="dashboard-metrics">
      <article
        v-for="metric in controller.overviewMetrics.value"
        :key="metric.label"
        class="archive-stat"
      >
        <p>{{ metric.label }}</p>
        <strong>{{ metric.value }}</strong>
        <span>{{ metric.detail }}</span>
        <small class="dashboard-metrics__tone">{{ metricToneLabel(metric.tone) }}</small>
      </article>
    </div>

    <div class="dashboard-grid">
      <article class="archive-panel dashboard-focus">
        <div class="dashboard-section-head">
          <div>
            <p class="archive-kicker">Active Research Focus</p>
            <h3 class="archive-card-title">
              {{ activeTask?.venue_name || '等待激活研究任务' }}
            </h3>
          </div>
          <span class="archive-chip" :data-tone="statusTone(activeTask?.status || 'draft')">
            <span class="archive-chip__dot" />
            {{ activeTask?.status_label || '草稿' }}
          </span>
        </div>

        <p class="dashboard-focus__summary">
          {{ focusSummary }}
        </p>

        <div class="dashboard-focus__meta">
          <div class="focus-meta-card">
            <span class="archive-kicker">Research Query</span>
            <strong>{{ activeTask?.generated_query || '保存任务后自动生成可分发研究指令。' }}</strong>
          </div>
          <div class="focus-meta-card">
            <span class="archive-kicker">Benchmarks</span>
            <strong>{{ activeTask?.benchmark_venues_text || '暂无标杆场馆，建议补充竞品样本。' }}</strong>
          </div>
        </div>
      </article>

      <article class="archive-panel dashboard-engines">
        <div class="dashboard-section-head">
          <div>
            <p class="archive-kicker">Engine Status</p>
            <h3 class="archive-card-title">分析引擎运行矩阵</h3>
          </div>
          <button class="archive-button--quiet" type="button" @click="navigateTo('/engines')">进入工作台</button>
        </div>

        <div class="dashboard-engines__grid">
          <button
            v-for="engine in engineCards"
            :key="engine.name"
            class="engine-state-card"
            type="button"
            @click="navigateTo('/engines')"
          >
            <span class="engine-state-card__dot" :data-tone="engine.tone" />
            <strong>{{ engine.label }}</strong>
            <small>{{ engine.status }}</small>
          </button>
        </div>

        <div class="dashboard-note">
          <p class="archive-kicker">Archivist Note</p>
          <span>
            {{ controller.crawler.primaryAction.value.description }}
          </span>
        </div>
      </article>
    </div>

    <div class="dashboard-grid">
      <article class="archive-panel">
        <div class="dashboard-section-head">
          <div>
            <p class="archive-kicker">Recent Activity</p>
            <h3 class="archive-card-title">最近研究与采集轨迹</h3>
          </div>
          <button class="archive-button--quiet" type="button" @click="navigateTo('/tasks')">查看更多</button>
        </div>

        <div v-if="activityItems.length" class="activity-list">
          <div
            v-for="item in activityItems"
            :key="item.id"
            class="activity-item"
          >
            <span class="activity-item__dot" :data-tone="item.tone" />
            <div class="activity-item__copy">
              <strong>{{ item.title }}</strong>
              <span>{{ item.detail }}</span>
            </div>
            <time>{{ formatTimeLabel(item.timestamp) }}</time>
          </div>
        </div>

        <div v-else class="archive-empty">
          <p>还没有可展示的研究活动。</p>
        </div>
      </article>

      <article class="archive-panel">
        <div class="dashboard-section-head">
          <div>
            <p class="archive-kicker">Report Delivery Pipeline</p>
            <h3 class="archive-card-title">当前报告交付进度</h3>
          </div>
          <span class="archive-chip" :data-tone="statusTone(currentReportTask?.status || 'pending')">
            <span class="archive-chip__dot" />
            {{ currentReportTask?.status || 'waiting' }}
          </span>
        </div>

        <div class="pipeline-track">
          <div
            v-for="step in pipelineSteps"
            :key="step.label"
            class="pipeline-step"
            :class="`pipeline-step--${step.state}`"
          >
            <span class="pipeline-step__bullet" />
            <strong>{{ step.label }}</strong>
          </div>
        </div>

        <div class="pipeline-progress">
          <div class="pipeline-progress__head">
            <strong>{{ currentReportTask?.query || '等待生成新的场馆报告' }}</strong>
            <span>{{ currentReportTask?.progress ?? 0 }}%</span>
          </div>
          <div class="archive-progress">
            <div class="archive-progress__bar" :style="{ width: `${currentReportTask?.progress ?? 0}%` }" />
          </div>
          <p class="archive-copy">
            {{ currentReportTask?.error_message || controller.overviewMetrics.value[3]?.detail }}
          </p>
        </div>
      </article>
    </div>
  </section>
</template>

<style scoped>
.dashboard-page,
.dashboard-metrics,
.dashboard-grid,
.dashboard-focus__meta,
.dashboard-engines__grid,
.activity-list,
.pipeline-track,
.dashboard-hero__tags {
  display: grid;
  gap: 18px;
}

.dashboard-page {
  max-width: 1560px;
  margin: 0 auto;
}

.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: 26px;
  padding: 30px;
  border-radius: 30px;
  background:
    radial-gradient(circle at top right, rgba(180, 135, 83, 0.18), transparent 24%),
    linear-gradient(135deg, rgba(255, 251, 246, 0.94), rgba(244, 238, 228, 0.9));
}

.dashboard-hero__copy {
  display: grid;
  gap: 14px;
}

.dashboard-hero__aside,
.dashboard-hero__pulse,
.dashboard-hero__actions {
  display: grid;
  gap: 14px;
}

.dashboard-hero__aside {
  align-content: space-between;
}

.dashboard-hero__pulse {
  padding: 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(24, 35, 31, 0.08);
}

.dashboard-hero__pulse strong {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--primary);
}

.dashboard-hero__pulse span:last-child {
  color: var(--text-muted);
  line-height: 1.7;
}

.dashboard-hero__actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-metrics__tone {
  display: block;
  margin-top: 10px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dashboard-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-section-head,
.pipeline-progress__head,
.activity-item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.dashboard-section-head {
  margin-bottom: 18px;
}

.dashboard-focus__summary {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text);
}

.dashboard-focus__meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.focus-meta-card,
.dashboard-note,
.activity-item,
.pipeline-progress {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(24, 35, 31, 0.08);
  background: rgba(255, 255, 255, 0.66);
}

.focus-meta-card {
  display: grid;
  gap: 10px;
}

.focus-meta-card strong {
  font-size: 15px;
  line-height: 1.8;
  color: var(--primary);
}

.dashboard-engines__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 18px;
}

.engine-state-card {
  display: grid;
  gap: 8px;
  align-items: start;
  padding: 18px;
  border: 1px solid rgba(24, 35, 31, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.68);
  text-align: left;
  cursor: pointer;
}

.engine-state-card__dot,
.activity-item__dot,
.pipeline-step__bullet {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(24, 35, 31, 0.18);
}

.engine-state-card__dot[data-tone='success'],
.activity-item__dot[data-tone='success'],
.pipeline-step--done .pipeline-step__bullet {
  background: var(--success);
}

.engine-state-card__dot[data-tone='running'],
.activity-item__dot[data-tone='running'],
.pipeline-step--active .pipeline-step__bullet {
  background: var(--warning);
}

.engine-state-card__dot[data-tone='danger'],
.activity-item__dot[data-tone='danger'] {
  background: var(--danger);
}

.engine-state-card strong {
  font-size: 16px;
  color: var(--primary);
}

.engine-state-card small {
  color: var(--text-muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.dashboard-note {
  display: grid;
  gap: 10px;
  background:
    radial-gradient(circle at top right, rgba(180, 135, 83, 0.14), transparent 26%),
    rgba(22, 52, 45, 0.92);
  color: rgba(250, 244, 236, 0.92);
}

.dashboard-note p,
.dashboard-note span {
  color: inherit;
}

.activity-list {
  gap: 12px;
}

.activity-item {
  align-items: center;
}

.activity-item__copy {
  flex: 1;
  display: grid;
  gap: 6px;
}

.activity-item__copy strong {
  color: var(--primary);
}

.activity-item__copy span,
.activity-item time {
  color: var(--text-muted);
  line-height: 1.7;
}

.activity-item time {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pipeline-track {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.pipeline-step {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}

.pipeline-step strong {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.pipeline-progress {
  display: grid;
  gap: 14px;
}

.pipeline-progress__head strong {
  color: var(--primary);
}

.pipeline-progress__head span {
  font-family: var(--font-mono);
  color: var(--accent);
}

@media (max-width: 1280px) {
  .dashboard-hero,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-metrics,
  .dashboard-focus__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .dashboard-hero,
  .dashboard-engines__grid,
  .dashboard-metrics,
  .dashboard-focus__meta,
  .pipeline-track,
  .dashboard-hero__actions {
    grid-template-columns: 1fr;
  }

  .dashboard-hero {
    padding: 22px;
  }
}
</style>