<script setup>
import { ref, onMounted } from 'vue'
import Vapi from '@vapi-ai/web'
import debug from '~/composables/console_'
import { get_runtime_config } from '~/composables/synaptic_'

let vapi = ref(null)
let connected = ref(false)
let connecting = ref(false)

const assistant_id = 'b18f2895-495c-4eec-bcab-55e7cf52c1d6'
const VAPI_PUBLIC_API_KEY = get_runtime_config()?.public?.VAPI_PUBLIC_API_KEY

const init_vapi = () => {
  if (!VAPI_PUBLIC_API_KEY) return
  vapi.value = new Vapi(VAPI_PUBLIC_API_KEY)

  vapi.value.on('call-start', () => {
    connecting.value = false
    connected.value = true
  })

  vapi.value.on('call-end', () => {
    connecting.value = false
    connected.value = false
  })

  vapi.value.on('error', (error) => {
    debug.error('VAPI error:', error)
    connecting.value = false
  })
}

const start_call = async () => {
  if (!vapi.value) return
  connecting.value = true
  try {
    await vapi.value.start(assistant_id)
  } catch (error) {
    debug.error('Start call error:', error)
    connecting.value = false
  }
}

const end_call = () => {
  if (!vapi.value || !connected.value) return
  vapi.value.stop()
}

onMounted(() => {
  init_vapi()
})
</script>

<template>
  <div>
    <button v-if="!connected" @click="start_call" :disabled="connecting">
      {{ connecting ? 'Connecting...' : 'Start Call' }}
    </button>
    <button v-else @click="end_call">
      End Call
    </button>
  </div>
</template>