/**
 * Main application entry point.
 * Creates the Vue app, registers components, and mounts.
 */

import { CollectView } from './collect.js'
import { TrainView } from './train.js'
import { VerifyView } from './verify.js'

const { createApp, ref, reactive, onMounted } = Vue

const app = createApp({
  setup() {
    const view = ref('collect')
    const status = reactive({ trace_count: 0, model_trained: false })
    const scrollStatus = reactive({ trace_count: 0, model_trained: false })

    async function refreshAll() {
      try {
        const r = await axios.get('/api/status')
        status.trace_count = r.data.trace_count
        status.model_trained = r.data.model_trained
      } catch (_) {}
      try {
        const r = await axios.get('/api/scroll/status')
        scrollStatus.trace_count = r.data.trace_count
        scrollStatus.model_trained = r.data.model_trained
      } catch (_) {}
    }

    function switchView(v) {
      view.value = v
      refreshAll()
    }

    onMounted(() => { refreshAll() })

    return { view, status, scrollStatus, switchView, refreshAll }
  }
})

app.component('collect-view', CollectView)
app.component('train-view', TrainView)
app.component('verify-view', VerifyView)

app.mount('#app')