<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'

import IconSet from '@/components/common/IconSet.vue'
import { useTaskViewModel, type TaskViewModel, type TaskWorkspaceContext } from '@/composables/useTaskViewModel'
import { useWorkbenchControllerContext } from '@/composables/useWorkbenchController'

type SelectedTaskContext = TaskWorkspaceContext

const props = defineProps<{
  selectedTask?: SelectedTaskContext | null
}>()

const emit = defineEmits<{
  'back-to-tasks': []
}>()

const controller = useWorkbenchControllerContext()
const taskViewModel = useTaskViewModel()

const {
  loading,
  generating,
  status,
  selectedTask: selectedReportTask,
  selectedTaskId,
  customTemplate,
  refreshStatus,
  generate,
  selectTask,
  download,
  stopPolling,
} = controller.reports

const stageHint = ref('')

const activeTaskView = computed(() => taskViewModel.activeTaskView.value)

const targetTaskId = computed(() => (
  String(props.selectedTask?.id || activeTaskView.value?.id || '').trim()
))

const deliverTaskView = computed<TaskViewModel | null>(() => {
  return taskViewModel.resolveTaskView(targetTaskId.value)
})

const taskScopedReport = computed(() => deliverTaskView.value?.report ?? null)

const currentTaskContext = computed<SelectedTaskContext | null>(() => {
  return taskViewModel.resolveTaskContext(
    targetTaskId.value,
    props.selectedTask ?? null,
  )
})

const preferredReportTaskId = computed(() => (
  taskScopedReport.value?.taskId || currentTaskContext.value?.reportId || ''
))

watch(
  targetTaskId,
  async (taskId) => {
    stageHint.value = ''

    if (!taskId) {
      return
    }

    if (controller.research.activeTask.value?.task_id !== taskId) {
      await controller.research.activateTask(taskId)
    }

    await Promise.all([
      controller.research.refreshTasks(taskId),
      controller.research.refreshActiveTaskReportResource(taskId),
      refreshStatus(),
    ])
  },
  { immediate: true },
)

watch(
  preferredReportTaskId,
  (reportTaskId) => {
    if (reportTaskId) {
      if (selectedTaskId.value !== reportTaskId) {
        selectTask(reportTaskId)
      }

      stageHint.value = currentTaskContext.value
        ? `Linked to ${currentTaskContext.value.venueName} report task.`
        : 'Linked to the related report task.'
      return
    }

    if (targetTaskId.value) {
      stageHint.value = deliverTaskView.value?.nextActions[0]?.description
        || 'No linked report yet. Generate one to continue delivery.'
      return
    }

    stageHint.value = ''
  },
  { immediate: true },
)

const reports = computed(() => status.value.tasks)

const activeReport = computed(() => {
  const reportTaskId = preferredReportTaskId.value
  if (reportTaskId) {
    return reports.value.find((item) => item.task_id === reportTaskId)
      || (selectedReportTask.value?.task_id === reportTaskId ? selectedReportTask.value : null)
  }

  if (generating.value && selectedReportTask.value) {
    return selectedReportTask.value
  }

  if (!targetTaskId.value) {
    return selectedReportTask.value
  }

  return null
})

const contextSummary = computed(() => {
  if (!currentTaskContext.value) {
    return '鍙粠浠诲姟涓績閫夋嫨鍘嗗彶浠诲姟锛岀洿鎺ユ煡鐪嬪搴旀姤鍛婃垨缁х画鐢熸垚浜や粯鐗┿€?'
  }
  return `${currentTaskContext.value.venueName} 路 ${currentTaskContext.value.city} 路 ${currentTaskContext.value.focusLabel}`
})

const defaultStageHint = computed(() => {
  if (!currentTaskContext.value) {
    return 'Select a historical task to preview an existing report or continue delivery.'
  }

  const preferredAction = deliverTaskView.value?.nextActions.find((action) => (
    action.key === 'open-report' || action.key === 'generate-report'
  ))

  return preferredAction?.description || ''
})

const reportPreviewUrl = computed(() => {
  const reportReady = taskScopedReport.value?.ready ?? activeReport.value?.has_result ?? false
  const reportTaskId = activeReport.value?.task_id

  return reportReady && reportTaskId ? `/api/report/result/${reportTaskId}` : ''
})

const readyStateLabel = computed(() => {
  const reportReady = taskScopedReport.value?.ready ?? activeReport.value?.has_result ?? false
  const reportStatus = taskScopedReport.value?.status || activeReport.value?.status || ''

  if (!currentTaskContext.value && !activeReport.value) return '鏈€夋嫨鎶ュ憡'
  if (reportReady) return '鎶ュ憡灏辩华锛屽彲棰勮鍜屽鍑恒€?'
  if (reportStatus === 'error') return '鎶ュ憡鐢熸垚澶辫触锛岃妫€鏌ラ厤缃拰鏃ュ織銆?'
  if (reportStatus === 'cancelled') return '鎶ュ憡宸插彇娑堬紝璇烽噸鏂板彂璧风敓鎴愩€?'
  return '鎶ュ憡鐢熸垚涓紝瀹屾垚鍚庝細鑷姩鍙瑙堛€?'
})

async function reloadReports() {
  const taskId = targetTaskId.value || controller.research.activeTask.value?.task_id || ''
  await Promise.all([
    refreshStatus(),
    taskId ? controller.research.refreshTasks(taskId) : Promise.resolve(),
    taskId ? controller.research.refreshActiveTaskReportResource(taskId) : Promise.resolve(),
  ])
}

async function generateReport() {
  const query = currentTaskContext.value?.query || ''
  if (!query) return

  const researchTaskId = targetTaskId.value || controller.research.activeTask.value?.task_id || ''
  await generate(query, researchTaskId)
  if (researchTaskId) {
    await Promise.all([
      controller.research.refreshTasks(researchTaskId),
      controller.research.refreshActiveTaskReportResource(researchTaskId),
    ])
  }
  stageHint.value = 'Report generation requested. Polling for progress now.'
}

function downloadReport(format: 'html' | 'pdf' | 'md') {
  const reportTaskId = activeReport.value?.task_id || preferredReportTaskId.value
  if (!reportTaskId) return
  download(format, reportTaskId)
}

function getStatusClass(statusValue: string): string {
  if (statusValue === 'completed') return 'status--success'
  if (statusValue === 'error') return 'status--danger'
  return 'status--running'
}

function getStatusLabel(statusValue: string): string {
  switch (statusValue) {
    case 'completed':
      return '宸插畬鎴?Completed'
    case 'error':
      return '澶辫触 Error'
    case 'cancelled':
      return '宸插彇娑?Cancelled'
    default:
      return '鐢熸垚涓?Generating'
  }
}

onMounted(async () => {
  await reloadReports()
})

onBeforeUnmount(() => {
  stopPolling()
})
</script>

<template>
  <div class="deliver-view">
    <div class="view-header">
      <div class="header-text">
        <h2 class="view-title">鎶ュ憡浜や粯涓績 Deliver Center</h2>
        <p class="view-desc">閫夋嫨妯℃澘銆佺敓鎴愭姤鍛娿€侀瑙堝苟瀵煎嚭鏈€缁堜氦浠樼墿 路 Build, preview and export final deliverables</p>

        <div class="context-banner">
          <span class="context-label">褰撳墠浠诲姟 Current Task</span>
          <span class="context-value">{{ contextSummary }}</span>
        </div>

        <div class="trace-grid">
          <div class="trace-item">
            <span class="trace-label">Task ID</span>
            <strong>{{ currentTaskContext?.id || '寰呯敓鎴? }}</strong>
          </div>
          <div class="trace-item">
            <span class="trace-label">Query</span>
            <strong>{{ currentTaskContext?.query || '寰呯敓鎴? }}</strong>
          </div>
          <div class="trace-item">
            <span class="trace-label">Crawler Keywords</span>
            <strong>{{ currentTaskContext?.crawlerKeywords || '寰呭悓姝? }}</strong>
          </div>
          <div class="trace-item">
            <span class="trace-label">Recent Action</span>
            <strong>{{ currentTaskContext?.recentAction || readyStateLabel }}</strong>
          </div>
        </div>

        <div class="stage-hint">{{ stageHint || defaultStageHint || readyStateLabel }}</div>
      </div>

      <div class="header-actions">
        <button class="btn btn--secondary" type="button" @click="emit('back-to-tasks')">
          <IconSet type="list" />
          杩斿洖浠诲姟 Back
        </button>
        <button class="btn btn--secondary" type="button" @click="reloadReports" :disabled="loading">
          <IconSet type="refresh" />
          {{ loading ? '鍒锋柊涓?Refreshing...' : '鍒锋柊鐘舵€?Refresh' }}
        </button>
        <button class="btn btn--primary" type="button" :disabled="generating || !currentTaskContext?.query" @click="generateReport">
          <IconSet type="play" />
          {{ generating ? '鐢熸垚涓?Generating...' : '鐢熸垚鎶ュ憡 Generate' }}
        </button>
      </div>
    </div>

    <div v-if="taskScopedReport?.status === 'error' || activeReport?.status === 'error'" class="error-banner">
      褰撳墠鎶ュ憡鐢熸垚澶辫触锛岃鍏堟鏌ユā鍨嬮厤缃€佸紩鎿庣姸鎬佹垨鎶ュ憡鏃ュ織锛屽啀閲嶆柊鐢熸垚銆?
    </div>

    <div class="deliver-layout">
      <aside class="reports-panel">
        <div class="panel-header">
          <h3 class="panel-title">鍘嗗彶鎶ュ憡 Historical Reports</h3>
        </div>

        <div class="reports-list">
          <div
            v-for="report in reports"
            :key="report.task_id"
            class="report-item"
            :class="{ 'report-item--selected': selectedTaskId === report.task_id }"
            @click="selectTask(report.task_id)"
          >
            <div class="report-info">
              <span class="report-title">{{ report.report_file_name || report.query }}</span>
              <span class="report-meta">{{ report.created_at }} 路 {{ report.has_result ? 'HTML Ready' : 'Pending' }}</span>
            </div>
            <span class="report-status" :class="getStatusClass(report.status)">
              {{ getStatusLabel(report.status) }}
            </span>
          </div>
        </div>
      </aside>

      <section class="editor-panel">
        <div class="template-section">
          <div class="section-header">
            <h3 class="section-title">妯℃澘缂栬緫 Template</h3>
            <span class="section-hint">鍙€?Optional锛氳緭鍏ヨ嚜瀹氫箟妯℃澘瑕佹眰</span>
          </div>
          <textarea
            v-model="customTemplate"
            class="template-input"
            placeholder="渚嬪锛氫紭鍏堢獊鍑烘帓闃熶綋楠屻€佸姩绾挎晥鐜囥€佽瘎璁烘儏缁垎姝э紝浠ュ強褰撳墠鍦洪涓庣珵鍝佷箣闂寸殑宸紓鍖栬〃鐜?.."
          />
        </div>

        <div class="preview-section">
          <div class="section-header">
            <h3 class="section-title">鎶ュ憡棰勮 Preview</h3>
            <div class="preview-actions">
              <button class="action-btn" type="button" :disabled="!activeReport || !activeReport.has_result" @click="downloadReport('html')">HTML</button>
              <button class="action-btn" type="button" :disabled="!activeReport || !activeReport.has_result" @click="downloadReport('pdf')">PDF</button>
              <button class="action-btn" type="button" :disabled="!activeReport || !activeReport.has_result" @click="downloadReport('md')">MD</button>
            </div>
          </div>

          <div class="preview-frame">
            <iframe v-if="reportPreviewUrl" :src="reportPreviewUrl" class="report-iframe" title="report preview" />
            <div v-else-if="activeReport" class="preview-empty">
              <IconSet type="refresh" />
              <p>{{ readyStateLabel }}<br />{{ activeReport.status }}</p>
            </div>
            <div v-else class="preview-empty">
              <IconSet type="document" />
              <p>閫夋嫨涓€涓姤鍛婃煡鐪嬮瑙?br />Select a report to preview</p>
            </div>
          </div>
        </div>
      </section>
    </div>

    <div class="deliver-dock">
      <div class="dock-info">
        <span class="dock-label">褰撳墠鐘舵€?Current Status</span>
        <span class="dock-status" :class="activeReport?.has_result ? 'status--success' : activeReport?.status === 'error' ? 'status--danger' : 'status--running'">
          {{ readyStateLabel }}
        </span>
      </div>
      <div class="dock-actions">
        <button class="btn btn--outline" type="button" :disabled="!activeReport || !activeReport.has_result" @click="downloadReport('html')">
          <IconSet type="document" />
          瀵煎嚭 HTML
        </button>
        <button class="btn btn--primary" type="button" :disabled="!activeReport || !activeReport.has_result" @click="downloadReport('pdf')">
          <IconSet type="document" />
          瀵煎嚭 PDF
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.deliver-view {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
}

.view-header,
.panel-header,
.section-header,
.deliver-dock {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.header-text,
.reports-list,
.report-info,
.editor-panel {
  display: grid;
  gap: 16px;
}

.view-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
}

.view-desc,
.context-value,
.stage-hint,
.report-meta,
.section-hint,
.preview-empty,
.dock-status {
  color: var(--text-secondary);
}

.context-banner,
.stage-hint,
.trace-item,
.reports-panel,
.template-section,
.preview-section,
.deliver-dock,
.error-banner {
  padding: 16px 18px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}

.context-banner {
  border-color: rgba(196, 149, 106, 0.25);
  background: rgba(196, 149, 106, 0.08);
}

.error-banner {
  border-color: rgba(163, 74, 58, 0.2);
  background: rgba(163, 74, 58, 0.08);
  color: var(--danger);
}

.context-label,
.dock-label,
.trace-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

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

.trace-item {
  background: rgba(13, 33, 28, 0.04);
}

.header-actions,
.preview-actions,
.dock-actions {
  display: flex;
  gap: 12px;
}

.deliver-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  flex: 1;
  min-height: 0;
}

.panel-title,
.section-title,
.report-title {
  color: var(--text-primary);
  font-weight: 600;
}

.report-item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(251, 247, 240, 0.84);
  cursor: pointer;
}

.report-item--selected {
  border: 1px solid rgba(141, 103, 56, 0.24);
  background: rgba(141, 103, 56, 0.08);
}

.report-status,
.btn,
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.template-input {
  width: 100%;
  min-height: 120px;
  padding: 14px;
  resize: vertical;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.preview-frame {
  min-height: 420px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(251, 247, 240, 0.84);
}

.report-iframe {
  width: 100%;
  min-height: 420px;
  height: 100%;
  border: none;
}

.preview-empty {
  min-height: 420px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 10px;
}

.btn,
.action-btn {
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--radius-full);
  cursor: pointer;
}

.btn--secondary,
.btn--outline,
.action-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
}

.btn--primary {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: var(--text-inverse);
}

.status--success {
  color: var(--success);
}

.status--danger {
  color: var(--danger);
}

.status--running {
  color: var(--warning);
}

@media (max-width: 1120px) {
  .deliver-layout,
  .trace-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .view-header,
  .panel-header,
  .section-header,
  .deliver-dock,
  .header-actions,
  .preview-actions,
  .dock-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>