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

import ResearchWorkspace from '@/components/research/ResearchWorkspace.vue'
import ReportTaskTable from '@/components/tasks/ReportTaskTable.vue'
import ResearchTaskTable from '@/components/tasks/ResearchTaskTable.vue'
import { useTaskViewModel } from '@/composables/useTaskViewModel'
import { useWorkbenchControllerContext } from '@/composables/useWorkbenchController'

const controller = useWorkbenchControllerContext()
const taskViewModel = useTaskViewModel()
const activeTaskView = computed(() => taskViewModel.activeTaskView.value)
const activeTaskIssues = computed(() => activeTaskView.value?.errors ?? [])
const activeTaskActions = computed(() => activeTaskView.value?.nextActions ?? [])

const activeTable = shallowRef<'research' | 'report'>('research')

const activeResearchTaskId = computed(() => controller.research.activeTask.value?.task_id || '')
const reportCount = computed(() => controller.reports.status.value.tasks.length)
const completedReports = computed(() => (
  controller.reports.status.value.tasks.filter((item) => item.status === 'completed').length
))
const runningReports = computed(() => (
  controller.reports.status.value.tasks.filter((item) => ['pending', 'running'].includes(item.status)).length
))
</script>

<template>
  <section class="task-page">
    <div class="task-hero archive-shell-block">
      <div class="task-hero__copy">
        <p class="archive-kicker">Dossier Operations</p>
        <h2 class="archive-page-title">Task Center</h2>
        <p class="archive-copy">
          这里专注处理“创建任务、切换任务、继续任务”三类动作。研究任务与报告任务都在同一个节奏里推进，但编辑上下文始终只保留一份。
        </p>
      </div>

      <div class="task-hero__stats">
        <article class="archive-stat">
          <p>Research Tasks</p>
          <strong>{{ controller.research.tasks.value.length }}</strong>
          <span>全部研究对象与历史场馆档案。</span>
        </article>
        <article class="archive-stat">
          <p>Report Tasks</p>
          <strong>{{ reportCount }}</strong>
          <span>包括生成中与已完成的交付任务。</span>
        </article>
        <article class="archive-stat">
          <p>Completed</p>
          <strong>{{ completedReports }}</strong>
          <span>已可直接预览或下载的报告成果。</span>
        </article>
        <article class="archive-stat">
          <p>In Flight</p>
          <strong>{{ runningReports }}</strong>
          <span>当前仍在生成链路中的报告任务。</span>
        </article>
      </div>
    </div>

    <div class="task-layout">
      <section class="archive-panel task-records">
        <div class="task-records__head">
          <div>
            <p class="archive-kicker">Task Ledger</p>
            <h3 class="archive-card-title">研究与报告队列</h3>
          </div>
          <div class="task-tabs">
            <button
              class="task-tabs__item"
              :class="{ 'task-tabs__item--active': activeTable === 'research' }"
              type="button"
              @click="activeTable = 'research'"
            >
              Research Tasks
            </button>
            <button
              class="task-tabs__item"
              :class="{ 'task-tabs__item--active': activeTable === 'report' }"
              type="button"
              @click="activeTable = 'report'"
            >
              Report Tasks
            </button>
          </div>
          <div v-if="activeTaskIssues.length > 0" class="task-view-model__issues">
            <p class="archive-kicker">Open Issues</p>
            <div class="task-view-model__issue-list">
              <article
                v-for="issue in activeTaskIssues"
                :key="`${issue.source}-${issue.message}`"
                class="task-view-model__issue"
                :class="`task-view-model__issue--${issue.severity}`"
              >
                <span>{{ issue.source }}</span>
                <strong>{{ issue.message }}</strong>
              </article>
            </div>
          </div>
          <div v-if="activeTaskActions.length > 0" class="task-view-model__actions">
            <p class="archive-kicker">Next Actions</p>
            <div class="task-view-model__action-list">
              <article
                v-for="action in activeTaskActions"
                :key="action.key"
                class="task-view-model__action"
              >
                <strong>{{ action.label }}</strong>
                <small>{{ action.description }}</small>
              </article>
            </div>
          </div>
        </div>

        <div v-if="activeTaskView" class="task-view-model">
          <div class="task-view-model__head">
            <div>
              <p class="archive-kicker">Unified Task View</p>
              <h4>{{ activeTaskView.title }}</h4>
            </div>
            <span class="task-view-model__badge">{{ activeTaskView.stage }}</span>
          </div>
          <p class="task-view-model__brief">{{ activeTaskView.brief }}</p>
          <div class="task-view-model__grid">
            <article>
              <span>Research</span>
              <strong>{{ activeTaskView.statusLabel || activeTaskView.status }}</strong>
              <small>{{ activeTaskView.generatedQuery || '待生成研究指令' }}</small>
            </article>
            <article>
              <span>Crawler</span>
              <strong>{{ activeTaskView.crawler.label }}</strong>
              <small>{{ activeTaskView.crawler.detail }}</small>
            </article>
            <article>
              <span>Analysis</span>
              <strong>{{ activeTaskView.analysis.label }}</strong>
              <small>{{ activeTaskView.analysis.enginesRunning.join(' / ') || '待启动' }}</small>
            </article>
            <article>
              <span>Report</span>
              <strong>{{ activeTaskView.report.label }}</strong>
              <small>{{ activeTaskView.report.fileName || '待生成交付文件' }}</small>
            </article>
          </div>
          <p class="task-view-model__last-action">
            <span>Recent Action</span>
            <strong>{{ activeTaskView.lastAction }}</strong>
          </p>
        </div>

        <ResearchTaskTable
          v-show="activeTable === 'research'"
          :tasks="controller.research.tasks.value"
          :active-task-id="activeResearchTaskId"
          :loading="controller.research.loading.value"
          @activate="controller.activateResearchTask"
        />

        <ReportTaskTable
          v-show="activeTable === 'report'"
          :tasks="controller.reports.status.value.tasks"
          :selected-task-id="controller.reports.selectedTaskId.value"
          :loading="controller.reports.loading.value"
          @select="controller.updateSelectedReportTask"
          @download="controller.reports.download"
        />
      </section>

      <ResearchWorkspace
        :draft="controller.research.draft"
        :options="controller.research.options.value"
        :active-task="controller.research.activeTask.value"
        :tasks="controller.research.tasks.value"
        :summary-items="controller.research.summaryItems.value"
        :search-query="controller.research.searchQuery.value"
        :loading="controller.research.loading.value"
        :saving="controller.research.saving.value"
        @update:draft="controller.updateResearchDraft"
        @update:search-query="controller.updateSearchQuery"
        @save="controller.saveResearchTask"
        @activate="controller.activateResearchTask"
        @sync-crawler="controller.syncResearchToCrawler"
        @search="controller.runResearch"
      />
    </div>
  </section>
</template>

<style scoped>
.task-page,
.task-hero,
.task-hero__stats {
  display: grid;
  gap: 18px;
}

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

.task-hero {
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
  padding: 30px;
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(22, 52, 45, 0.12), transparent 24%),
    linear-gradient(135deg, rgba(255, 251, 246, 0.94), rgba(243, 236, 226, 0.92));
}

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

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

.task-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 18px;
  align-items: start;
}

.task-view-model {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid rgba(24, 35, 31, 0.08);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 240, 232, 0.72));
}

.task-view-model__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.task-view-model__head h4 {
  margin: 4px 0 0;
  font-size: 18px;
  color: var(--primary);
}

.task-view-model__badge {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(24, 35, 31, 0.08);
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.task-view-model__brief {
  margin: 0;
  color: var(--text-soft);
}

.task-view-model__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.task-view-model__grid article {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.task-view-model__grid span,
.task-view-model__grid small {
  color: var(--text-muted);
}

.task-view-model__grid strong {
  color: var(--text-primary);
}

.task-view-model__last-action {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(24, 35, 31, 0.04);
}

.task-view-model__last-action span {
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.task-view-model__last-action strong {
  color: var(--text-primary);
  font-weight: 600;
}

.task-view-model__issues,
.task-view-model__actions {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.task-view-model__issue-list,
.task-view-model__action-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.task-view-model__issue,
.task-view-model__action {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
}

.task-view-model__issue span,
.task-view-model__action small {
  color: var(--text-muted);
}

.task-view-model__issue strong,
.task-view-model__action strong {
  color: var(--text-primary);
}

.task-view-model__issue--warning {
  border: 1px solid rgba(190, 142, 47, 0.28);
  background: rgba(255, 248, 225, 0.92);
}

.task-view-model__issue--error {
  border: 1px solid rgba(168, 66, 49, 0.22);
  background: rgba(255, 241, 238, 0.94);
}

.task-records__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.task-tabs {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(24, 35, 31, 0.04);
}

.task-tabs__item {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.task-tabs__item--active {
  background: rgba(255, 255, 255, 0.82);
  color: var(--primary);
  box-shadow: 0 10px 22px rgba(27, 28, 25, 0.08);
}

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

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

  .task-hero {
    padding: 22px;
  }

  .task-records__head {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>