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

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

type TaskContext = TaskWorkspaceContext

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

const emit = defineEmits<{
  'go-deliver': [task: TaskContext]
}>()

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

	const activeTaskView = computed(() => taskViewModel.activeTaskView.value)
	const activeResearchTask = computed(() => controller.research.activeTask.value)
	const targetTaskId = computed(() => (
	  String(props.selectedTask?.id || activeResearchTask.value?.task_id || activeTaskView.value?.id || '').trim()
	))

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

const activeIssues = computed(() => analyzeTaskView.value?.errors ?? [])
const nextActions = computed(() => analyzeTaskView.value?.nextActions ?? [])

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

const engineResults = computed(() => {
  const runningEngines = new Set(analyzeTaskView.value?.analysis.enginesRunning ?? [])

  return system.appCards.value.map((card) => {
    const isRunning = runningEngines.has(card.name)
    const isStarting = card.status === 'starting'
    const progress = isRunning ? 78 : isStarting ? 36 : 0
    const status = isRunning ? 'running' : isStarting ? 'pending' : 'idle'

    return {
      id: card.name,
      name: appLabel(card.name),
      status,
      summary: isRunning
        ? `${appLabel(card.name)} is currently active for the selected task.`
        : isStarting
          ? `${appLabel(card.name)} is booting and will join the analysis flow shortly.`
          : `${appLabel(card.name)} is not active for the current task yet.`,
      progress,
      findings: [
        { label: 'System status', value: card.status },
        { label: 'Endpoint', value: card.url || 'embedded runtime' },
      ],
    }
  })
})

const handoffSummary = computed(() => {
  const task = selectedTaskContext.value
  if (!task) {
    return 'Pick or prepare a task first so the analysis workspace has a stable context.'
  }
  return `${task.city} ${task.venueName} / ${task.focusLabel || 'Focus pending'}`
})

const forumMessages = computed(() => {
  const taskMessages = analyzeTaskView.value?.analysis.forumMessages ?? []
  if (taskMessages.length > 0) {
    return taskMessages.slice().reverse().map((item) => ({
      sender: item.sender,
      type: item.type,
      content: item.content,
      time: formatTimeLabel(item.timestamp),
    }))
  }

  if (!selectedTaskContext.value) {
    return [
      { sender: 'System', type: 'host', content: 'No active analysis task yet.', time: '--:--' },
    ]
  }

  return [
    { sender: 'System', type: 'host', content: 'Forum has not produced fresh messages yet. The workspace is currently showing runtime readiness.', time: 'Live' },
  ]
})

const systemNotice = computed(() => {
  if (system.systemStatus.value.starting) {
    return 'The system is still starting. Query, Media, Insight, and Forum will join the workflow as they come online.'
  }
  if (!system.systemStatus.value.started) {
    return 'The system is not fully started. Analysis can be prepared, but the engines will not continue the mainline until the runtime is available.'
  }
  if (activeIssues.value.length > 0) {
    return activeIssues.value[0]?.message || 'There are open issues in the current workflow.'
  }
  return 'This view is now driven by the shared workbench runtime and the unified task view model.'
})

async function refreshAnalysisState() {
  const taskId = targetTaskId.value
  await Promise.all([
    system.refreshSystemStatus(),
    system.refreshAppStatus(),
    system.refreshConsole(),
    taskId ? controller.research.refreshTasks(taskId) : Promise.resolve(),
    taskId ? controller.research.refreshActiveTaskCrawlerResource(taskId) : Promise.resolve(),
    taskId ? controller.research.refreshActiveTaskReportResource(taskId) : Promise.resolve(),
  ])
}

function getEngineStatusClass(status: string): string {
  return `engine-card--${status}`
}

function getProgressClass(progress: number): string {
  if (progress >= 100) return 'progress--complete'
  if (progress > 0) return 'progress--running'
  return 'progress--pending'
}

function goDeliver() {
  if (!selectedTaskContext.value) return
  emit('go-deliver', selectedTaskContext.value)
}

watch(
  targetTaskId,
  async (taskId) => {
    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.refreshActiveTaskCrawlerResource(taskId),
      controller.research.refreshActiveTaskReportResource(taskId),
    ])
  },
  { immediate: true },
)

onMounted(() => {
  system.selectApp('forum')
  void refreshAnalysisState()
})
</script>

<template>
  <div class="analyze-view">
    <div class="view-header">
      <div class="header-text">
        <h2 class="view-title">Analysis Workspace</h2>
        <p class="view-desc">
          This page now reads from the shared workbench controller and the unified task view model instead of managing a separate system state.
        </p>
        <div class="context-banner">
          <span class="context-label">Current Analysis Task</span>
          <strong>{{ handoffSummary }}</strong>
        </div>
      </div>
      <div class="header-actions">
        <button class="btn btn--secondary" type="button" @click="refreshAnalysisState">
          <IconSet type="refresh" />
          Refresh
        </button>
        <button class="btn btn--primary" type="button" :disabled="!selectedTaskContext" @click="goDeliver">
          <IconSet type="document" />
          Go Deliver
        </button>
      </div>
    </div>

    <div v-if="!system.systemStatus.value.started" class="error-banner">
      The runtime is not fully started, so engine status and forum output may remain partial.
    </div>

    <div class="system-notice">
      {{ systemNotice }}
    </div>

    <div class="context-grid">
      <div class="context-card">
        <span class="context-card__label">Task ID</span>
        <strong>{{ selectedTaskContext?.id || 'Pending' }}</strong>
      </div>
      <div class="context-card">
        <span class="context-card__label">Generated Query</span>
        <strong>{{ selectedTaskContext?.query || 'Pending' }}</strong>
      </div>
      <div class="context-card">
        <span class="context-card__label">Crawler Keywords</span>
        <strong>{{ selectedTaskContext?.crawlerKeywords || 'Pending' }}</strong>
      </div>
      <div class="context-card">
        <span class="context-card__label">Recent Action</span>
        <strong>{{ selectedTaskContext?.recentAction || 'No activity yet' }}</strong>
      </div>
    </div>

    <div v-if="activeIssues.length > 0" class="signal-grid">
      <article
        v-for="issue in activeIssues"
        :key="`${issue.source}-${issue.message}`"
        class="signal-card signal-card--warning"
      >
        <span class="signal-card__label">{{ issue.source }}</span>
        <strong>{{ issue.message }}</strong>
      </article>
    </div>

    <div v-if="nextActions.length > 0" class="signal-grid">
      <article
        v-for="action in nextActions"
        :key="action.key"
        class="signal-card"
      >
        <span class="signal-card__label">{{ action.label }}</span>
        <strong>{{ action.description }}</strong>
      </article>
    </div>

    <div class="engine-grid">
      <div
        v-for="engine in engineResults"
        :key="engine.id"
        class="engine-card"
        :class="getEngineStatusClass(engine.status)"
      >
        <div class="engine-header">
          <div class="engine-info">
            <span class="engine-name">{{ engine.name }}</span>
            <span class="engine-status-badge" :class="getEngineStatusClass(engine.status)">
              {{ engine.status === 'running' ? 'Running' : engine.status === 'pending' ? 'Pending' : 'Idle' }}
            </span>
          </div>
          <span class="engine-progress">{{ engine.progress }}%</span>
        </div>

        <p class="engine-summary">{{ engine.summary }}</p>

        <div class="progress-track">
          <div class="progress-fill" :class="getProgressClass(engine.progress)" :style="{ width: `${engine.progress}%` }" />
        </div>

        <div class="findings-grid">
          <div v-for="finding in engine.findings" :key="finding.label" class="finding-item">
            <span class="finding-value">{{ finding.value }}</span>
            <span class="finding-label">{{ finding.label }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="forum-section">
      <div class="section-header">
        <h3 class="section-title">Forum Discussion</h3>
        <span class="section-badge">Live</span>
      </div>

      <div class="forum-feed">
        <div
          v-for="(msg, idx) in forumMessages"
          :key="idx"
          class="forum-message"
          :class="{ 'forum-message--agent': msg.type === 'agent' }"
        >
          <div class="message-header">
            <span class="message-sender">{{ msg.sender }}</span>
            <span class="message-time">{{ msg.time }}</span>
          </div>
          <p class="message-content">{{ msg.content }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.analyze-view {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

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

.header-text,
.engine-info,
.forum-feed,
.context-grid,
.signal-grid {
  display: grid;
  gap: 12px;
}

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

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

.context-card,
.signal-card {
  padding: 16px 18px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  display: grid;
  gap: 8px;
}

.signal-card--warning {
  border-color: rgba(196, 149, 106, 0.28);
  background: rgba(196, 149, 106, 0.08);
}

.context-card__label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

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

.view-desc,
.engine-summary,
.message-content,
.system-notice {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.7;
}

.context-banner,
.system-notice,
.engine-card,
.forum-section,
.error-banner {
  padding: 18px 20px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}

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

.context-label,
.section-badge,
.finding-label,
.message-time,
.signal-card__label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

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

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

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

.engine-grid,
.findings-grid {
  display: grid;
  gap: 16px;
}

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

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

.engine-name,
.finding-value,
.signal-card strong {
  color: var(--text-primary);
  font-weight: 600;
}

.engine-status-badge,
.finding-item,
.forum-message {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(251, 247, 240, 0.84);
}

.progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(24, 35, 31, 0.08);
  overflow: hidden;
  margin: 14px 0;
}

.progress-fill {
  height: 100%;
  border-radius: inherit;
}

.progress--complete {
  background: var(--success);
}

.progress--running {
  background: linear-gradient(90deg, var(--accent), var(--primary));
}

.progress--pending {
  background: rgba(24, 35, 31, 0.12);
}

.forum-message--agent {
  border-left: 3px solid rgba(196, 149, 106, 0.5);
}

.engine-card--running {
  border-color: rgba(196, 149, 106, 0.24);
}

.engine-card--pending {
  border-color: var(--border-subtle);
}

.engine-card--idle {
  border-color: var(--border-subtle);
}

@media (max-width: 980px) {
  .engine-grid,
  .findings-grid,
  .signal-grid,
  .context-grid {
    grid-template-columns: 1fr;
  }
}

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