<script setup lang="ts">
import { computed, onMounted, reactive, 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 TaskContext = TaskWorkspaceContext

interface SearchDispatchResponse {
  success: boolean
  query: string
  research_task_id: string
}

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

const emit = defineEmits<{
  'task-prepared': [task: TaskContext]
  'crawler-synced': [task: TaskContext]
  'start-analysis': [task: TaskContext]
}>()

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

const errorMessage = ref('')
const selectedPlatforms = ref(['wb', 'xhs', 'dy'])
const draft = reactive({
  venueName: '',
  city: '',
  focusLabel: '',
})

const options = computed(() => controller.research.options.value)
const saving = computed(() => controller.research.saving.value)
const activeResearchTask = computed(() => controller.research.activeTask.value)
const activeTaskView = computed(() => taskViewModel.activeTaskView.value)
const activeCrawlerResource = computed(() => controller.research.activeTaskCrawlerResource.value)
const targetTaskId = computed(() => (
  String(props.selectedTask?.id || activeTaskView.value?.id || activeResearchTask.value?.task_id || '').trim()
))
const observeTaskView = computed<TaskViewModel | null>(() => taskViewModel.resolveTaskView(targetTaskId.value))
const observeTaskContext = computed<TaskContext | null>(() => (
  taskViewModel.resolveTaskContext(targetTaskId.value, props.selectedTask ?? null)
))
const currentTaskId = computed(() => (
  observeTaskContext.value?.id
  || observeTaskView.value?.id
  || activeResearchTask.value?.task_id
  || ''
))
const currentTaskQuery = computed(() => (
  observeTaskContext.value?.query
  || observeTaskView.value?.generatedQuery
  || `${draft.city} ${draft.venueName} ${draft.focusLabel}`.trim()
))

const taskScopedCrawlerPlatform = computed(() => (
  observeTaskContext.value?.crawlerPlatform
  || observeTaskView.value?.crawler.platform
  || activeCrawlerResource.value?.current_job?.platform
  || activeCrawlerResource.value?.summary.platform
  || ''
))

const taskScopedCrawlerKeywords = computed(() => {
  const activeKeywords = observeTaskView.value?.crawler.keywords ?? []
  if (activeKeywords.length > 0) {
    return activeKeywords.join(' / ')
  }

  const linkedKeywords = activeCrawlerResource.value?.current_job?.keywords ?? []
  if (linkedKeywords.length > 0) {
    return linkedKeywords.join(' / ')
  }

  return (
    observeTaskContext.value?.crawlerKeywords
    || currentTaskQuery.value
  )
})

const taskScopedCrawlerStatus = computed(() => (
  observeTaskView.value?.crawler.status
  || activeCrawlerResource.value?.status
  || (observeTaskContext.value?.status === 'crawling' ? 'running' : '')
  || (observeTaskContext.value?.status === 'crawled' ? 'completed' : '')
  || 'idle'
))

const taskScopedCrawlerMessage = computed(() => (
  observeTaskView.value?.crawler.detail
  || activeCrawlerResource.value?.summary.last_action
  || observeTaskContext.value?.recentAction
  || 'Waiting for crawler execution'
))

const taskScopedRecentAction = computed(() => (
  observeTaskContext.value?.recentAction
  || observeTaskView.value?.lastAction
  || activeCrawlerResource.value?.summary.last_action
  || 'Waiting for next action'
))

const taskDraftSource = computed(() => {
  if (observeTaskContext.value) {
    return {
      venueName: observeTaskContext.value.venueName,
      city: observeTaskContext.value.city,
      focusLabel: observeTaskContext.value.focusLabel,
    }
  }

  if (observeTaskView.value) {
    return {
      venueName: observeTaskView.value.venueName || observeTaskView.value.title,
      city: observeTaskView.value.city,
      focusLabel: observeTaskView.value.focusLabel,
    }
  }

  return null
})

function hydrateDraft(task?: TaskContext | null) {
  const source = task ?? taskDraftSource.value
  draft.venueName = source?.venueName ?? ''
  draft.city = source?.city ?? ''
  draft.focusLabel = source?.focusLabel ?? ''
}

watch(() => props.selectedTask, hydrateDraft, { immediate: true })
watch(() => observeTaskContext.value?.id, () => {
  if (!props.selectedTask) {
    hydrateDraft()
  }
})
watch(
  targetTaskId,
  async (taskId) => {
    if (!taskId) {
      return
    }

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

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

const hasPreparedTask = computed(() => Boolean(draft.venueName.trim()))
const isCrawling = computed(() => (
  taskScopedCrawlerStatus.value === 'running'
  || taskScopedCrawlerStatus.value === 'starting'
  || crawler.acting.value
))

const resolvedFocusValue = computed(() => {
  const matched = options.value.research_focuses.find((item) => item.label === draft.focusLabel || item.value === draft.focusLabel)
  return matched?.value ?? options.value.research_focuses[0]?.value ?? 'strengths_improvements'
})

const taskSummary = computed(() => {
  if (!hasPreparedTask.value) {
    return 'Create a research brief first so the crawler and analysis stages have a single task context.'
  }

  return `${draft.city} ${draft.venueName} / ${draft.focusLabel || 'Focus pending'}`
})

const platforms = computed(() => [
  { id: 'wb', name: 'Weibo', role: 'Heat, public discussion, and real-time sentiment' },
  { id: 'dy', name: 'Douyin', role: 'Short video, on-site experience, and viral spread' },
  { id: 'xhs', name: 'Xiaohongshu', role: 'Notes, reviews, and recommendation content' },
  { id: 'zhihu', name: 'Zhihu', role: 'Long-form viewpoints and deeper debate' },
])

const crawlSteps = computed(() => [
  {
    title: '1. Prepare brief',
    desc: hasPreparedTask.value ? `Ready: ${draft.venueName}` : 'Create a task with venue, city, and focus.',
    state: hasPreparedTask.value ? 'done' : 'active',
  },
  {
    title: '2. Sync crawler',
    desc: taskScopedCrawlerKeywords.value ? `Keywords ready: ${taskScopedCrawlerKeywords.value}` : 'Push the brief into crawler keywords and defaults.',
    state: taskScopedCrawlerKeywords.value ? 'done' : 'pending',
  },
  {
    title: '3. Collect data',
    desc: taskScopedCrawlerMessage.value || 'Crawler will move into live collection after launch.',
    state: taskScopedCrawlerStatus.value === 'running' ? 'active' : taskScopedCrawlerKeywords.value ? 'pending' : 'pending',
  },
  {
    title: '4. Handoff to agents',
    desc: 'Send crawler output and query context into Query, Media, Insight, and Forum.',
    state: observeTaskView.value?.stage === 'analysis' ? 'done' : 'pending',
  },
])

const recentCrawls = computed(() => {
  const linkedJobs = activeCrawlerResource.value?.jobs ?? []
  if (linkedJobs.length > 0) {
    return linkedJobs
      .slice()
      .sort((left, right) => (
        new Date(right.updated_at || right.created_at || 0).getTime()
        - new Date(left.updated_at || left.created_at || 0).getTime()
      ))
      .slice(0, 6)
      .map((job, idx) => ({
        id: job.id || `${job.updated_at || job.created_at || idx}`,
        platform: job.platform || taskScopedCrawlerPlatform.value || '-',
        keyword: job.keywords?.join(' / ') || taskScopedCrawlerKeywords.value || draft.venueName || '-',
        time: job.updated_at || job.created_at || '-',
        message: job.last_action || taskScopedCrawlerMessage.value,
      }))
  }

  const resourceSummary = activeCrawlerResource.value?.summary
  if (!resourceSummary?.last_action && !taskScopedCrawlerKeywords.value) {
    return []
  }

  return [{
    id: currentTaskId.value || 'task-crawler-summary',
    platform: taskScopedCrawlerPlatform.value || '-',
    keyword: taskScopedCrawlerKeywords.value || draft.venueName || '-',
    time: observeTaskContext.value?.updatedAt || observeTaskContext.value?.createdAt || '-',
    message: resourceSummary?.last_action || taskScopedCrawlerMessage.value,
  }]
})

function buildTaskContext(overrides: Partial<TaskContext> = {}): TaskContext {
  const taskContext = observeTaskContext.value
  const taskView = observeTaskView.value
  const now = new Date().toISOString()

  return {
    id: taskContext?.id || taskView?.id,
    venueName: draft.venueName,
    city: draft.city,
    focusLabel: draft.focusLabel,
    status: taskContext?.status || taskView?.status || 'draft',
    statusLabel: taskContext?.statusLabel || taskView?.statusLabel || 'Draft',
    progress: taskContext?.progress ?? taskView?.progress ?? 8,
    createdAt: taskContext?.createdAt || taskView?.createdAt || now,
    updatedAt: taskContext?.updatedAt || taskView?.updatedAt || now,
    hasReport: taskContext?.hasReport ?? taskView?.report.ready ?? false,
    reportStatus: taskContext?.reportStatus || taskView?.report.status || 'idle',
    reportProgress: taskContext?.reportProgress ?? taskView?.report.progress ?? 0,
    query: currentTaskQuery.value,
    recentAction: taskScopedRecentAction.value,
    crawlerKeywords: taskScopedCrawlerKeywords.value,
    crawlerPlatform: taskScopedCrawlerPlatform.value,
    ...overrides,
  }
}

async function prepareTask() {
  if (!hasPreparedTask.value) return

  errorMessage.value = ''
  controller.updateResearchDraft({
    ...controller.research.draft,
    task_id: currentTaskId.value,
    venue_name: draft.venueName,
    city: draft.city,
    research_focus: resolvedFocusValue.value,
    venue_type: controller.research.draft.venue_type || options.value.venue_types[0]?.value || 'museum',
    time_range: controller.research.draft.time_range || options.value.time_ranges[0]?.value || 'recent_90_days',
  })

  try {
    const savedTask = await controller.research.saveTask()
    await Promise.all([
      controller.research.refreshActiveTaskCrawlerResource(savedTask.task_id),
      controller.research.refreshActiveTaskReportResource(savedTask.task_id),
    ])
    crawler.syncFromResearchTask(savedTask)
    emit('task-prepared', buildTaskContext({
      id: savedTask.task_id,
      status: savedTask.status,
      statusLabel: savedTask.status_label,
      createdAt: savedTask.created_at,
      updatedAt: savedTask.updated_at,
      query: savedTask.generated_query,
      recentAction: savedTask.last_action || 'Task saved',
    }))
  } catch (error) {
    errorMessage.value = `Failed to save task: ${error instanceof Error ? error.message : 'unknown error'}`
  }
}

function togglePlatform(platformId: string) {
  if (selectedPlatforms.value.includes(platformId)) {
    selectedPlatforms.value = selectedPlatforms.value.filter((id) => id !== platformId)
    return
  }
  selectedPlatforms.value = [...selectedPlatforms.value, platformId]
}

async function syncCrawler() {
  if (!hasPreparedTask.value) return

  errorMessage.value = ''
  const primaryPlatform = selectedPlatforms.value[0] || 'xhs'
  const crawlerKeywords = taskScopedCrawlerKeywords.value || currentTaskQuery.value

  controller.updateCrawlerForm({
    ...crawler.form,
    platform: primaryPlatform,
    crawler_type: 'search',
    login_type: crawler.form.login_type || 'qrcode',
    keywords: crawlerKeywords,
  })
  controller.syncResearchToCrawler()

  emit('crawler-synced', buildTaskContext({
    status: 'queued',
    statusLabel: 'Crawler synced',
    progress: 30,
    query: taskScopedCrawlerKeywords.value,
    recentAction: 'Crawler context synced from the active research task',
  }))
}

async function startCrawl() {
  if (!hasPreparedTask.value) return

  errorMessage.value = ''
  try {
    emit('crawler-synced', buildTaskContext({
      status: 'crawling',
      statusLabel: 'Crawling',
      progress: 36,
      query: taskScopedCrawlerKeywords.value,
      recentAction: 'Crawler started and is collecting live data',
    }))

    await crawler.startCrawler(currentTaskId.value)
    await Promise.all([
      crawler.refreshState(),
      controller.research.refreshTasks(currentTaskId.value),
      controller.research.refreshActiveTaskCrawlerResource(currentTaskId.value),
    ])

    window.setTimeout(async () => {
      await Promise.all([
        crawler.refreshState(),
        controller.research.refreshTasks(currentTaskId.value),
        controller.research.refreshActiveTaskCrawlerResource(currentTaskId.value),
      ])

      emit('crawler-synced', buildTaskContext({
        status: 'crawled',
        statusLabel: 'Collected',
        progress: 44,
        query: taskScopedCrawlerKeywords.value,
        recentAction: taskScopedRecentAction.value || 'Crawler finished and analysis can continue',
      }))
    }, 1200)
  } catch (error) {
    errorMessage.value = `Failed to start crawler: ${error instanceof Error ? error.message : 'unknown error'}`
  }
}

async function handoffToAnalysis() {
  if (!hasPreparedTask.value || isCrawling.value) return

  errorMessage.value = ''
  try {
    const query = observeTaskView.value?.generatedQuery || taskScopedCrawlerKeywords.value || `${draft.city} ${draft.venueName} ${draft.focusLabel}`.trim()
    controller.updateSearchQuery(query)

    const payload = await controller.system.search(query, currentTaskId.value) as SearchDispatchResponse
    await Promise.all([
      controller.research.refreshTasks(currentTaskId.value),
      controller.research.refreshActiveTaskCrawlerResource(currentTaskId.value),
    ])

    emit('start-analysis', buildTaskContext({
      status: 'processing',
      statusLabel: 'Analyzing',
      progress: 56,
      query: payload.query,
      recentAction: observeTaskView.value?.lastAction || 'Analysis request has been dispatched',
    }))
  } catch (error) {
    errorMessage.value = `Failed to dispatch analysis: ${error instanceof Error ? error.message : 'unknown error'}`
  }
}

onMounted(async () => {
  await Promise.allSettled([
    controller.research.loadOptions(),
  ])
})
</script>

<template>
  <div class="observe-view">
    <div class="view-header">
      <div class="header-text">
        <h2 class="view-title">Task Intake And Collection</h2>
        <p class="view-desc">
          This page now reuses the shared workbench controller so the brief, crawler, and next handoff all stay inside one task context.
        </p>
        <div class="task-banner">
          <span class="task-banner__label">Current Brief</span>
          <strong>{{ taskSummary }}</strong>
        </div>
      </div>
      <div class="header-actions">
        <button class="btn btn--ghost" type="button" :disabled="!hasPreparedTask || saving" @click="prepareTask">
          <IconSet type="check" />
          {{ saving ? 'Saving...' : 'Save Brief' }}
        </button>
        <button class="btn btn--secondary" type="button" :disabled="!hasPreparedTask || isCrawling" @click="syncCrawler">
          <IconSet type="globe" />
          Sync Crawler
        </button>
        <button class="btn btn--secondary" type="button" :disabled="!hasPreparedTask || isCrawling || !taskScopedCrawlerKeywords" @click="startCrawl">
          <IconSet type="refresh" />
          {{ isCrawling ? 'Crawling...' : 'Start Crawl' }}
        </button>
        <button class="btn btn--primary" type="button" :disabled="!hasPreparedTask || isCrawling || !taskScopedCrawlerKeywords" @click="handoffToAnalysis">
          <IconSet type="arrow-right" />
          Handoff To Analysis
        </button>
      </div>
    </div>

    <div v-if="errorMessage" class="error-banner">{{ errorMessage }}</div>

    <div class="intake-grid">
      <div class="brief-card">
        <div class="section-header">
          <h3 class="section-title">Research Brief</h3>
          <span class="section-hint">This feeds the active research task</span>
        </div>

        <div class="brief-form">
          <label class="field">
            <span>Venue</span>
            <input v-model="draft.venueName" type="text" placeholder="For example: National Museum" />
          </label>
          <label class="field">
            <span>City</span>
            <input v-model="draft.city" type="text" placeholder="For example: Beijing" />
          </label>
          <label class="field field--full">
            <span>Focus</span>
            <input v-model="draft.focusLabel" type="text" placeholder="For example: queueing, service quality, visitor experience" />
          </label>
        </div>
      </div>

      <div class="flow-grid">
        <article v-for="step in crawlSteps" :key="step.title" class="flow-card" :data-state="step.state">
          <span class="flow-card__title">{{ step.title }}</span>
          <p>{{ step.desc }}</p>
        </article>
      </div>
    </div>

    <div class="platform-section">
      <div class="section-header">
        <h3 class="section-title">Platform Mix</h3>
        <div class="platform-actions">
          <span class="section-hint">Primary platform: {{ taskScopedCrawlerPlatform || 'Not set' }}</span>
          <span class="section-hint">Keywords: {{ taskScopedCrawlerKeywords || 'Pending' }}</span>
        </div>
      </div>

      <div class="platform-grid">
        <button
          v-for="platform in platforms"
          :key="platform.id"
          class="platform-card"
          :class="{ 'platform-card--active': selectedPlatforms.includes(platform.id) }"
          type="button"
          @click="togglePlatform(platform.id)"
        >
          <div class="platform-card__head">
            <strong>{{ platform.name }}</strong>
            <span>{{ selectedPlatforms.includes(platform.id) ? 'Enabled' : 'Idle' }}</span>
          </div>
          <p>{{ platform.role }}</p>
        </button>
      </div>
    </div>

    <div class="handoff-section">
      <div class="section-header">
        <h3 class="section-title">Crawler To Agent Handoff</h3>
      </div>

      <div class="handoff-grid">
        <div class="handoff-card">
          <span class="handoff-card__kicker">Crawler</span>
          <strong>What gets collected?</strong>
          <p>Posts, comments, interaction signals, and platform metadata that can be passed into the downstream engines.</p>
        </div>
        <div class="handoff-card">
          <span class="handoff-card__kicker">Query / Media / Insight</span>
          <strong>How do engines receive it?</strong>
          <p>Query focuses on retrieval context, Media handles rich content, and Insight picks up sentiment and structured patterns.</p>
        </div>
        <div class="handoff-card">
          <span class="handoff-card__kicker">Forum</span>
          <strong>How is it concluded?</strong>
          <p>Forum coordinates the cross-engine discussion and pulls the result toward a delivery-ready conclusion.</p>
        </div>
      </div>
    </div>

    <div class="recent-section">
      <div class="section-header">
        <h3 class="section-title">Recent Crawls</h3>
      </div>
      <div v-if="recentCrawls.length" class="recent-table">
        <div class="table-header">
          <span>Platform</span>
          <span>Keyword</span>
          <span>Status Log</span>
          <span>Time</span>
        </div>
        <div v-for="item in recentCrawls" :key="item.id" class="table-row">
          <span class="cell platform">{{ item.platform }}</span>
          <span class="cell keyword">{{ item.keyword }}</span>
          <span class="cell count">{{ item.message }}</span>
          <span class="cell time">{{ item.time }}</span>
        </div>
      </div>
      <div v-else class="empty-state">
        <IconSet type="warning" />
        <p>No crawler logs yet. Save a brief first, then start collection.</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.observe-view,
.header-text,
.flow-grid,
.platform-grid,
.handoff-grid,
.recent-table,
.brief-form {
  display: grid;
  gap: 20px;
}

.view-header,
.header-actions,
.section-header,
.table-header,
.table-row,
.platform-card__head,
.platform-actions {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

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

.view-desc,
.flow-card p,
.platform-card p,
.handoff-card p,
.empty-state p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.7;
}

.error-banner {
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(163, 74, 58, 0.2);
  background: rgba(163, 74, 58, 0.08);
  color: var(--danger);
  line-height: 1.6;
}

.task-banner,
.flow-card,
.platform-card,
.handoff-card,
.recent-section,
.brief-card {
  padding: 18px 20px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}

.task-banner__label,
.flow-card__title,
.handoff-card__kicker,
.section-hint {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.btn,
.mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--radius-full);
  cursor: pointer;
}

.btn--ghost,
.mini-btn {
  background: rgba(251, 247, 240, 0.88);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
}

.btn--secondary {
  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);
}

.btn:disabled,
.mini-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.intake-grid,
.handoff-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
}

.field {
  display: grid;
  gap: 8px;
}

.field--full {
  grid-column: 1 / -1;
}

.field span {
  font-size: 13px;
  color: var(--text-secondary);
}

.field input {
  height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--border-medium);
  background: rgba(255, 255, 255, 0.76);
  color: var(--text-primary);
}

.flow-grid {
  grid-template-columns: 1fr;
}

.flow-card[data-state='done'] {
  border-color: rgba(61, 139, 110, 0.22);
}

.flow-card[data-state='active'] {
  border-color: rgba(196, 149, 106, 0.32);
  background: rgba(196, 149, 106, 0.08);
}

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

.platform-card {
  text-align: left;
  cursor: pointer;
}

.platform-card--active {
  border-color: rgba(13, 33, 28, 0.2);
  background: rgba(13, 33, 28, 0.04);
}

.recent-section,
.empty-state {
  display: grid;
  gap: 16px;
}

.table-header,
.table-row {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(251, 247, 240, 0.84);
}

.table-header {
  font-size: 12px;
  color: var(--text-muted);
}

.empty-state {
  justify-items: start;
}

@media (max-width: 1180px) {
  .intake-grid,
  .handoff-grid,
  .platform-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .view-header,
  .header-actions,
  .section-header,
  .table-header,
  .table-row,
  .platform-card__head,
  .platform-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>