const { createApp } = Vue
const API = ''

createApp({
  delimiters: ['[[', ']]'],
  
  data() {
    return {
      missionState: 'idle',
      progress: 0,
      tasks: [],
      report: null,
      agvPreviewUrl: API + '/api/camera/preview',
      armPreviewUrl: API + '/api/camera/arm_refresh',
      polling: null,
      logs: [],
      showQrModal: false,
      qrValue: '',
      // 错误弹窗 / 单步执行
      waitingError: false,
      errorMsg: '',
      waitingStep: false,
      stepLabel: '',
      // 任务步骤控制开关（机械臂初始化并入AGV移动）
      agvMoveEnabled: true,
      qrScanEnabled: true,
      frontPhotoEnabled: true,
      backPhotoEnabled: true,
    }
  },
  computed: {
    missionStateText() {
      const map = {
        idle: '空闲',
        running: '任务运行中',
        paused: '已暂停',
        completed: '已完成',
        waiting_qr: '等待输入二维码',
        waiting_error: '⚠️ 执行错误',
        waiting_step: '🦶 等待步骤确认',
      }
      return map[this.missionState] || '未知'
    },
  },
  mounted() {
    this.poll()
  },
  beforeUnmount() {
    if (this.polling) clearInterval(this.polling)
  },
  methods: {
    poll() {
      this.refresh()
      this.pollLogs()
      this.polling = setInterval(() => {
        this.refresh()
        this.pollLogs()
      }, 2000)
    },
    async refresh() {
      try {
        const res = await fetch(API + '/api/mission/state')
        const data = await res.json()
        this.missionState = data.status || 'idle'
        this.progress = data.progress || 0
        if (data.tasks) this.tasks = data.tasks

        // 错误弹窗
        if (data.waiting_error) {
          this.waitingError = true
          this.errorMsg = data.error_msg || '任务执行出错'
        } else {
          this.waitingError = false
        }

        // 步骤确认弹窗
        if (data.waiting_step) {
          this.waitingStep = true
          this.stepLabel = data.step_label || ''
        } else {
          this.waitingStep = false
        }

        // QR 弹窗
        if (this.missionState === 'waiting_qr' && !this.showQrModal) {
          this.showQrModal = true
          this.qrValue = ''
        }

        // 完成后获取报告
        if (this.missionState === 'idle' && this.tasks.length > 0) {
          const reportRes = await fetch(API + '/api/mission/report')
          const reportData = await reportRes.json()
          this.report = reportData.report
        }
      } catch (e) {}
    },
    async pollLogs() {
      if (this.missionState !== 'running' && this.missionState !== 'waiting_qr' && this.missionState !== 'waiting_error' && this.missionState !== 'waiting_step') return
      try {
        const res = await fetch(API + '/api/mission/log')
        const data = await res.json()
        if (data.log) this.logs = data.log
        if (data.progress != null) this.progress = data.progress
        if (data.tasks) this.tasks = data.tasks
        // 自动滚到底
        this.$nextTick(() => {
          const box = this.$refs.logBox
          if (box) box.scrollTop = box.scrollHeight
        })
      } catch (e) {}
    },
    async startMission() {
      if (this.missionState !== 'idle') return
      this.logs = []
      this.progress = 0
      this.report = null
      this.showQrModal = false
      await fetch(API + '/api/mission/start', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          agv_move: this.agvMoveEnabled,
          qr_scan: this.qrScanEnabled,
          front_photo: this.frontPhotoEnabled,
          back_photo: this.backPhotoEnabled,
        })
      })
      this.missionState = 'running'
    },
    async startSingleStep() {
      if (this.missionState !== 'idle') return
      this.logs = []
      this.progress = 0
      this.report = null
      this.showQrModal = false
      await fetch(API + '/api/mission/start', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ single_step: true })
      })
      if (this.polling) clearInterval(this.polling)
      this.poll()
    },
    async skipError() {
      await fetch(API + '/api/mission/error-skip', { method: 'POST' })
      this.waitingError = false
    },
    async abortError() {
      await fetch(API + '/api/mission/error-abort', { method: 'POST' })
      this.waitingError = false
    },
    async confirmStep() {
      await fetch(API + '/api/mission/singlestep/confirm', { method: 'POST' })
      this.waitingStep = false
    },
    async retryStep() {
      await fetch(API + '/api/mission/singlestep/retry', { method: 'POST' })
      this.waitingStep = false
    },
    async abortStep() {
      await fetch(API + '/api/mission/singlestep/abort', { method: 'POST' })
      this.waitingStep = false
    },
    async pauseMission() {
      await fetch(API + '/api/mission/pause', { method: 'POST' })
      this.missionState = 'paused'
    },
    async resumeMission() {
      await fetch(API + '/api/mission/resume', { method: 'POST' })
      this.missionState = 'running'
      this.showQrModal = false
    },
    async stopMission() {
      await fetch(API + '/api/mission/stop', { method: 'POST' })
      this.missionState = 'idle'
      this.showQrModal = false
      this.waitingError = false
      this.waitingStep = false
    },
    async submitQr() {
      const val = this.qrValue.trim()
      await fetch(API + '/api/mission/manual-qr', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ qr: val || ' ' })
      })
      this.showQrModal = false
      this.qrValue = ''
    },
    cancelQr() {
      this.showQrModal = false
      this.qrValue = ''
      fetch(API + '/api/mission/manual-qr', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ qr: 'SKIP' })
      })
    },
    onAgvPreviewError(e) {
      e.target.style.display = 'none'
    },
    onArmPreviewError(e) {
      e.target.style.display = 'none'
    }
  }
}).mount('#app')