<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { api, type TaskFull, type PipelineStep } from '../api'
import Badge from '../components/Badge.vue'
import Modal from '../components/Modal.vue'

const props = defineProps<{ id: string }>()

const task = ref<TaskFull | null>(null)
const loading = ref(true)
const error = ref('')
const selectedStep = ref<PipelineStep | null>(null)
const polling = ref(false)
let pollTimer: ReturnType<typeof setInterval> | null = null

// Approve modal
const showApprove = ref(false)
const approveForm = ref({ title: '', description: '', type: 'decision' })

// Reject modal
const showReject = ref(false)
const rejectReason = ref('')

async function load() {
  try {
    loading.value = true
    task.value = await api.taskFull(props.id)
  } catch (e: any) {
    error.value = e.message
  } finally {
    loading.value = false
  }
}

onMounted(load)

function statusColor(s: string) {
  const m: Record<string, string> = {
    pending: 'gray', in_progress: 'blue', review: 'yellow',
    done: 'green', blocked: 'red', decomposed: 'purple',
  }
  return m[s] || 'gray'
}

const roleIcons: Record<string, string> = {
  pm: '\u{1F9E0}', security: '\u{1F6E1}', debugger: '\u{1F50D}',
  frontend_dev: '\u{1F4BB}', backend_dev: '\u{2699}', tester: '\u{2705}',
  reviewer: '\u{1F4CB}', architect: '\u{1F3D7}',
}

function stepStatusClass(step: PipelineStep) {
  if (step.success) return 'border-green-700 bg-green-950/30'
  return 'border-red-700 bg-red-950/30'
}

function stepStatusIcon(step: PipelineStep) {
  return step.success ? '\u2713' : '\u2717'
}

function stepStatusColor(step: PipelineStep) {
  return step.success ? 'text-green-400' : 'text-red-400'
}

function formatOutput(text: string | null): string {
  if (!text) return ''
  // Try to detect and format JSON
  try {
    const parsed = JSON.parse(text)
    return JSON.stringify(parsed, null, 2)
  } catch {
    return text
  }
}

async function approve() {
  if (!task.value) return
  try {
    const data = approveForm.value.title
      ? { decision_title: approveForm.value.title, decision_description: approveForm.value.description, decision_type: approveForm.value.type }
      : undefined
    await api.approveTask(props.id, data)
    showApprove.value = false
    approveForm.value = { title: '', description: '', type: 'decision' }
    await load()
  } catch (e: any) {
    error.value = e.message
  }
}

async function reject() {
  if (!task.value || !rejectReason.value) return
  try {
    await api.rejectTask(props.id, rejectReason.value)
    showReject.value = false
    rejectReason.value = ''
    await load()
  } catch (e: any) {
    error.value = e.message
  }
}

async function runPipeline() {
  try {
    await api.runTask(props.id)
    polling.value = true
    pollTimer = setInterval(async () => {
      await load()
      if (task.value && !['in_progress'].includes(task.value.status)) {
        stopPolling()
      }
    }, 3000)
  } catch (e: any) {
    error.value = e.message
  }
}

function stopPolling() {
  polling.value = false
  if (pollTimer) { clearInterval(pollTimer); pollTimer = null }
}

const hasSteps = computed(() => (task.value?.pipeline_steps?.length ?? 0) > 0)
</script>

<template>
  <div v-if="loading" class="text-gray-500 text-sm">Loading...</div>
  <div v-else-if="error" class="text-red-400 text-sm">{{ error }}</div>
  <div v-else-if="task">
    <!-- Header -->
    <div class="mb-6">
      <div class="flex items-center gap-2 mb-1">
        <router-link :to="`/project/${task.project_id}`" class="text-gray-600 hover:text-gray-400 text-sm no-underline">
          &larr; {{ task.project_id }}
        </router-link>
      </div>
      <div class="flex items-center gap-3 mb-2">
        <h1 class="text-xl font-bold text-gray-100">{{ task.id }}</h1>
        <span class="text-gray-400">{{ task.title }}</span>
        <Badge :text="task.status" :color="statusColor(task.status)" />
        <span class="text-xs text-gray-600">pri {{ task.priority }}</span>
      </div>
      <div v-if="task.brief" class="text-xs text-gray-500 mb-1">
        Brief: {{ JSON.stringify(task.brief) }}
      </div>
      <div v-if="task.assigned_role" class="text-xs text-gray-500">
        Assigned: {{ task.assigned_role }}
      </div>
    </div>

    <!-- Pipeline Graph -->
    <div v-if="hasSteps" class="mb-6">
      <h2 class="text-sm font-semibold text-gray-300 mb-3">Pipeline</h2>
      <div class="flex items-center gap-1 overflow-x-auto pb-2">
        <template v-for="(step, i) in task.pipeline_steps" :key="step.id">
          <!-- Arrow -->
          <div v-if="i > 0" class="text-gray-600 text-lg shrink-0 px-1">&rarr;</div>
          <!-- Step card -->
          <button
            @click="selectedStep = selectedStep?.id === step.id ? null : step"
            class="border rounded-lg px-3 py-2 min-w-[120px] text-left transition-all shrink-0"
            :class="[
              stepStatusClass(step),
              selectedStep?.id === step.id ? 'ring-1 ring-blue-500' : '',
            ]"
          >
            <div class="flex items-center gap-1.5 mb-1">
              <span class="text-base">{{ roleIcons[step.agent_role] || '\u{1F916}' }}</span>
              <span class="text-xs font-medium text-gray-300">{{ step.agent_role }}</span>
              <span :class="stepStatusColor(step)" class="text-xs ml-auto">{{ stepStatusIcon(step) }}</span>
            </div>
            <div class="flex gap-2 text-[10px] text-gray-500">
              <span v-if="step.duration_seconds">{{ step.duration_seconds }}s</span>
              <span v-if="step.tokens_used">{{ step.tokens_used?.toLocaleString() }}tk</span>
              <span v-if="step.cost_usd">${{ step.cost_usd?.toFixed(3) }}</span>
            </div>
          </button>
        </template>
      </div>
    </div>

    <!-- No pipeline -->
    <div v-else class="mb-6 text-sm text-gray-600">
      No pipeline steps yet.
    </div>

    <!-- Selected step output -->
    <div v-if="selectedStep" class="mb-6">
      <h2 class="text-sm font-semibold text-gray-300 mb-2">
        Output: {{ selectedStep.agent_role }}
        <span class="text-xs text-gray-600 font-normal ml-2">{{ selectedStep.created_at }}</span>
      </h2>
      <div class="border border-gray-800 rounded-lg bg-gray-900/50 overflow-hidden">
        <pre class="p-4 text-xs text-gray-300 overflow-x-auto whitespace-pre-wrap max-h-[600px] overflow-y-auto">{{ formatOutput(selectedStep.output_summary) }}</pre>
      </div>
    </div>

    <!-- Related Decisions -->
    <div v-if="task.related_decisions?.length" class="mb-6">
      <h2 class="text-sm font-semibold text-gray-300 mb-2">Related Decisions</h2>
      <div class="space-y-1">
        <div v-for="d in task.related_decisions" :key="d.id"
          class="px-3 py-2 border border-gray-800 rounded text-xs">
          <Badge :text="d.type" :color="d.type === 'gotcha' ? 'red' : 'blue'" />
          <span class="text-gray-300 ml-2">{{ d.title }}</span>
        </div>
      </div>
    </div>

    <!-- Actions Bar -->
    <div class="sticky bottom-0 bg-gray-950 border-t border-gray-800 py-3 flex gap-3 -mx-6 px-6 mt-8">
      <button v-if="task.status === 'review'"
        @click="showApprove = true"
        class="px-4 py-2 text-sm bg-green-900/50 text-green-400 border border-green-800 rounded hover:bg-green-900">
        &#10003; Approve
      </button>
      <button v-if="task.status === 'review' || task.status === 'in_progress'"
        @click="showReject = true"
        class="px-4 py-2 text-sm bg-red-900/50 text-red-400 border border-red-800 rounded hover:bg-red-900">
        &#10007; Reject
      </button>
      <button v-if="task.status === 'pending' || task.status === 'blocked'"
        @click="runPipeline"
        :disabled="polling"
        class="px-4 py-2 text-sm bg-blue-900/50 text-blue-400 border border-blue-800 rounded hover:bg-blue-900 disabled:opacity-50">
        {{ polling ? 'Running...' : '&#9654; Run Pipeline' }}
      </button>
    </div>

    <!-- Approve Modal -->
    <Modal v-if="showApprove" title="Approve Task" @close="showApprove = false">
      <form @submit.prevent="approve" class="space-y-3">
        <p class="text-sm text-gray-400">Optionally record a decision from this task:</p>
        <input v-model="approveForm.title" placeholder="Decision title (optional)"
          class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 placeholder-gray-600" />
        <textarea v-if="approveForm.title" v-model="approveForm.description" placeholder="Description"
          class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 placeholder-gray-600 resize-y" rows="2"></textarea>
        <button type="submit"
          class="w-full py-2 bg-green-900/50 text-green-400 border border-green-800 rounded text-sm hover:bg-green-900">
          Approve &amp; mark done
        </button>
      </form>
    </Modal>

    <!-- Reject Modal -->
    <Modal v-if="showReject" title="Reject Task" @close="showReject = false">
      <form @submit.prevent="reject" class="space-y-3">
        <textarea v-model="rejectReason" placeholder="Why are you rejecting this?" rows="3" required
          class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 placeholder-gray-600 resize-y"></textarea>
        <button type="submit"
          class="w-full py-2 bg-red-900/50 text-red-400 border border-red-800 rounded text-sm hover:bg-red-900">
          Reject &amp; return to pending
        </button>
      </form>
    </Modal>
  </div>
</template>
