// Assume sdk is initialized & authenticated
const userService = sdk.getUserService()
const dataService = sdk.getDataService()
const stateService = sdk.getStateService()

/**
 * Places an outbound call using the user's default campaign or a fallback.
 * @param to - Destination phone number in E.164 format (e.g., +1234567890)
 */
async function makeCall(to: string) {
  try {
    // 1) Retrieve list of outbound campaigns
    const outboundCampaigns = await dataService.getCampaigns('outbound')

    // 2) Retrieve user settings
    const userSettings = stateService.getUserSettings()

    // 3) Select campaign: default → first available
    const campaignId =
      userSettings?.general?.defaultCampaignId ?? outboundCampaigns?.[0]?._id

    if (!campaignId) throw new Error('No outbound campaign available.')

    // 4) Build payload
    const payload = {
      campaignId,
      conferenceWorkitemId: null,
      contactId: null,
      context: null,
      conversationId: '66fef3e78b64a853830343bb', // Example; replace in production
      force: true,
      name: null,
      option: DialTypes.Campaign.toString(),
      spoofWorkitemId: null,
      to,
      workitemId: null,
    }

    // 5) Dial
    const response = await userService.dial(payload)
    console.log('Call response:', response)
    console.log(`Dialing ${to} via campaign ${campaignId}`)
  } catch (err) {
    console.error('Failed to start call:', err)
  }
}

{
  "canDial": true,
  "consentType": 2,
  "conversationId": "66fef3e78b64a853830343bb",
  "overwriteUserId": "68d6710dcae6ac1855cd3680",
  "workitemId": "8b96c29c-9fd8-4578-a95f-4148033b3610"
}

import { useEffect } from 'react'
import { EventTypes, ofType, WorkitemStates } from '@nextiva/ncx-react-sdk'

// assuming ncxSDK is initialized
useEffect(() => {
  const sub = ncxSDK.events$
    .pipe(ofType([EventTypes.WorkitemStateChangeNotification]))
    .subscribe((event) => {
      const state = event?.data?.workitem?.state
      if (!state) return

      console.log('Call State Changed:', state)
      switch (state) {
        case WorkitemStates.Active:
          console.log('Call is active.')
          break
        case WorkitemStates.Terminated:
          console.log('Call has been terminated.')
          break
        default:
          console.log(`Call is in state: ${state}`)
      }
    })
  return () => sub.unsubscribe()
}, [])

import { EventTypes, WorkitemStates } from '@nextiva/ncx-web-sdk'

let subscription: { unsubscribe(): void } | null = null

function startListeningToCallStatus() {
  subscription = ncxSDK.events$.subscribe((event: any) => {
    if (event.name !== EventTypes.WorkitemStateChangeNotification) return
    const state = event.data?.workitem?.state

    if (state === WorkitemStates.Active) {
      console.log('Call status = Active')
    } else if (state === WorkitemStates.Terminated) {
      console.log('Call status = Terminated')
    } else {
      // other states
    }
  })
}

function cleanupOnUnload() {
  subscription?.unsubscribe()
}

startListeningToCallStatus()
window.addEventListener('beforeunload', cleanupOnUnload)

<script setup lang="ts">
import { onMounted, onBeforeUnmount } from 'vue'
import { EventTypes, WorkitemStates } from '@nextiva/ncx-web-sdk'

let subscription: { unsubscribe(): void } | null = null

onMounted(() => {
  subscription = ncxSDK.events$.subscribe((event: any) => {
    if (event.name !== EventTypes.WorkitemStateChangeNotification) return
    const state = event.data?.workitem?.state

    if (state === WorkitemStates.Active) {
      console.log('call status = Active')
    } else if (state === WorkitemStates.Terminated) {
      console.log('call status = Terminated')
    } else {
      // other states
    }
  })
})

onBeforeUnmount(() => subscription?.unsubscribe())
</script>

import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { useNcxSdk, useOffers } from '@nextiva/ncx-react-sdk'
import type { Offer } from '@nextiva/ncx-core-sdk';

type Offer = {
  _id: string
  workitem?: { from?: string }
}

export function IncomingOfferPanel() {
  const ncxSDK = useNcxSdk()
  const offers = useOffers<Offer>() // remove generic if not supported

  const activeOffer = useMemo(() => offers?.[0] ?? null, [offers])
  const fromLabel = activeOffer?.workitem?.from ?? 'Unknown caller'

  const [isSubmitting, setSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    if (activeOffer?._id) console.log('Incoming offer:', activeOffer)
  }, [activeOffer?._id])

  const onAccept = useCallback(async () => {
    if (!activeOffer) return
    setSubmitting(true); setError(null)
    try {
      await ncxSDK.getACDService().accept(activeOffer._id)
    } catch (err) {
      console.error('Failed to accept offer', err)
      setError('Failed to accept the offer. Please try again.')
    } finally {
      setSubmitting(false)
    }
  }, [activeOffer?._id, ncxSDK])

  const onReject = useCallback(async () => {
    if (!activeOffer) return
    setSubmitting(true); setError(null)
    try {
      await ncxSDK.getACDService().reject({ offerId: activeOffer._id })
    } catch (err) {
      console.error('Failed to reject offer', err)
      setError('Failed to reject the offer. Please try again.')
    } finally {
      setSubmitting(false)
    }
  }, [activeOffer?._id, ncxSDK])

  if (!activeOffer) return null

  return (
    <div role="dialog" aria-modal="true" aria-labelledby="offer-title" className="ncx-offer-modal">
      <h2 id="offer-title">Incoming Call</h2>
      <p><strong>From:</strong> {fromLabel}</p>

      {error && <p className="ncx-error" role="alert">{error}</p>}

      <div className="ncx-modal-actions">
        <button onClick={onAccept} disabled={isSubmitting} aria-busy={isSubmitting}>Accept</button>
        <button onClick={onReject} disabled={isSubmitting} aria-busy={isSubmitting}>Reject</button>
      </div>
    </div>
  )
}

const label = activeOffer?.workitem?.from ?? 'Unknown'
console.log('Offer coming from:', label)

import { EventTypes, Nextiva } from '@nextiva/ncx-web-sdk'

const sdk = new Nextiva({
  baseURL: `https://${import.meta.env.VITE_APP_HOST}`,
  debug: true,
  language: import.meta.env.VITE_APP_LANGUAGE,
  translator: new Translator(),
})

let subscription: { unsubscribe(): void } | undefined

async function initializeSDK() {
  try {
    await sdk.login(username, password)
    await sdk.init()

    subscription = sdk.events$.subscribe((event: any) => {
      if (event.name !== EventTypes.OffersChangedNotification) return
      const offers = event.data?.offers
      if (Array.isArray(offers)) {
        console.log('📞 Received incoming offers:', offers)
        // update your UI/store here
      }
    })

    console.log('SDK initialized and event listener attached.')
  } catch (error) {
    console.error('SDK initialization failed:', error)
  }
}

function cleanup() { subscription?.unsubscribe() }
window.addEventListener('beforeunload', cleanup)
initializeSDK()

import { onMounted, onBeforeUnmount } from 'vue'
import { EventTypes, Nextiva } from '@nextiva/ncx-web-sdk'

const sdk = new Nextiva({ /* ... */ })
let subscription: { unsubscribe(): void } | null = null

const initializeSDK = async () => {
  await sdk.login(username, password)
  await sdk.init()

  subscription = sdk.events$.subscribe((event: any) => {
    if (event.name !== EventTypes.OffersChangedNotification) return
    const offers = event?.data?.offers
    if (Array.isArray(offers)) {
      console.log('📞 Offers received:', offers)
      // store.commit('setOffers', offers) or a reactive ref
    }
  })
}

onMounted(() => initializeSDK())
onBeforeUnmount(() => subscription?.unsubscribe?.())

/** Accept an inbound offer */
ncxSDK.getACDService().accept(offerId: string): Promise<void>

/** Reject an inbound offer */
ncxSDK.getACDService().reject(
  /** Payload for rejection */
  { offerId: string }
): Promise<void>

const onAccept = async (offerId: string) => {
  try {
    await ncxSDK.getACDService().accept(offerId);
    console.log('Offer accepted successfully.');
  } catch (error: unknown) {
    console.error('Failed to accept offer:', error);
  }
};

const onReject = async (offerId: string) => {
  try {
    await ncxSDK.getACDService().reject({ offerId });
    console.log('Offer rejected successfully.');
  } catch (error: unknown) {
    console.error('Failed to reject offer:', error);
  }
};

const callerName = offer.workitem?.from ?? 'Unknown Caller';
console.log('Incoming call from:', callerName);

export type WorkitemType = (typeof WorkitemTypes)[keyof typeof WorkitemTypes]

type ValidCallWorkitemTypes =
  | typeof WorkitemTypes.InboundCall
  | typeof WorkitemTypes.OutboundCall
  | typeof WorkitemTypes.InboundExtensionCall
  | typeof WorkitemTypes.OutboundExtensionCall
  | typeof WorkitemTypes.PredictiveCall
  | typeof WorkitemTypes.PreviewCall
  | typeof WorkitemTypes.ProgressiveCall
  | typeof WorkitemTypes.SystemCall

const validCallWorkitemTypesSet = new Set<WorkitemType>([
  WorkitemTypes.InboundCall,
  WorkitemTypes.OutboundCall,
  WorkitemTypes.InboundExtensionCall,
  WorkitemTypes.OutboundExtensionCall,
  WorkitemTypes.PredictiveCall,
  WorkitemTypes.PreviewCall,
  WorkitemTypes.ProgressiveCall,
  WorkitemTypes.SystemCall,
])

export function validateCallWorkitemType(
  workitemType: WorkitemType,
): workitemType is ValidCallWorkitemTypes {
  return validCallWorkitemTypesSet.has(workitemType)
}

/**
 * Returns the most recent *call* workitem in "active" or "directconnect" state.
 */
export const getLatestCallWorkItem = async (sdk: Nextiva): Promise<any | null> => {
  try {
    const response = await sdk.getWorkitemsService().fetchWorkitems()
    const workitems: any[] = response.objects ?? []

    return [...workitems]
      .reverse()
      .find(
        (w) =>
          validateCallWorkitemType(w.type) &&
          (w.state === 'active' || w.state === 'directconnect'),
      ) ?? null
  } catch (error) {
    console.error('Failed to fetch latest call work item:', error)
    return null
  }
}

/**
 * Ends the call and (optionally) submits a disposition.
 */
export const handleHangUp = async (
  ncxSDK: any,
  latestCallWorkItem: any | null,
  number: string,
) => {
  if (!latestCallWorkItem) return

  const workitemsService = ncxSDK.getWorkitemsService?.()
  const dispositionService = ncxSDK.getDispositionService?.()
  const userService = ncxSDK.getUserService?.()

  if (!workitemsService?.hangUp) {
    console.error('handleHangUp - hangUp not available on workitemsService')
    return
  }

  try {
    await workitemsService.hangUp(latestCallWorkItem)
    // OR: await workitemsService.hangUp(latestCallWorkItem.workitemId)

    if (userService?.hasDispositionEnabled?.()) {
      if (!dispositionService?.disposition) {
        console.error('handleHangUp - disposition method not available')
        return
      }
      try {
        await dispositionService.disposition({
          action: DispositionActions.ConnectedCallback,
          callbackDate: Date.now(),
          callbackTime: Date.now(),
          connectAgain: false,
          phoneNumber: number,
          useCallbackNumberOnly: false,
          workitemId: latestCallWorkItem.workitemId,
        })
      } catch (err) {
        console.error('handleHangUp - disposition error', err)
      }
    }
  } catch (err) {
    console.error('handleHangUp - hangUp failed', err)
  }
}

<button
  aria-label="Hang up"
  onClick={() => handleHangUp(ncxSDK, latestCallWorkItem, number)}
>
  Hang Up
</button>

export const handleMute = async (sdk: any) => {
  try {
    const response = await sdk.getUserService().mute()
    console.log('Mute response:', response)
  } catch (error) {
    console.error('Mute failed:', error)
  }
}

export const handleUnmute = async (sdk: any) => {
  try {
    const response = await sdk.getUserService().unMute()
    console.log('Unmute response:', response)
  } catch (error) {
    console.error('Unmute failed:', error)
  }
}

const subscription = sdk.events$.subscribe((event: any) => {
  if (event.name === EventTypes.PhoneStateNotification) {
    const { mute } = event.data || {}
    if (typeof mute === 'boolean') {
      console.log('Muted:', mute)
      // Update UI state accordingly (e.g., toggle mute icon)
    }
  }
})

// Later, to clean up:
subscription.unsubscribe()

import { EventTypes } from '@nextiva/ncx-web-sdk'

const subscription = sdk.events$.subscribe((event: any) => {
  if (event.name === EventTypes.PhoneStateNotification) {
    const { mute } = event.data || {}
    if (typeof mute === 'boolean') {
      console.log('Muted:', mute)
    }
  }
})
// unsubscribe later
subscription.unsubscribe()

import { useEffect, useState } from 'react'
import { EventTypes } from '@nextiva/ncx-web-sdk'

export function usePhoneMuteStatus(sdk: any) {
  const [isMuted, setIsMuted] = useState(false)

  useEffect(() => {
    const sub = sdk.events$?.subscribe((event: any) => {
      if (event.name === EventTypes.PhoneStateNotification) {
        const { mute } = event.data || {}
        if (typeof mute === 'boolean') setIsMuted(mute)
      }
    })
    return () => sub?.unsubscribe()
  }, [sdk])

  return isMuted
}

/**
 * Put a workitem (call) on hold.
 * @param model - Workitem object or workitemId string
 */
export async function holdWorkitem(workitemsService: any, model: any | string) {
  return workitemsService.hold(model)
}

/**
 * Resume a held workitem (call).
 * @param model - Workitem object or workitemId string
 */
export async function resumeWorkitem(workitemsService: any, model: any | string) {
return workitemsService.active(model);
}

// React: import from '@nextiva/ncx-react-sdk'
// Non-React: import from '@nextiva/ncx-web-sdk'
import type { WorkitemRecordingOption, WarmTransferPayload } from '@nextiva/ncx-web-sdk'

/**
 * Handles a warm transfer operation.
 */
export const handleWarmTransfer = async (ncxSDK: any, payload: WarmTransferPayload) => {
  try {
    const workitemsService = ncxSDK.getWorkitemsService()
    const result = await workitemsService.warmTransfer(payload)
    console.log('Warm transfer result:', result)
  } catch (error) {
    console.error('Error during warm transfer:', error)
  }
}

// React: import from '@nextiva/ncx-react-sdk'
// Non-React: import from '@nextiva/ncx-web-sdk'
import type { TransferToAgentPayload } from '@nextiva/ncx-web-sdk'

export const handleTransferToAgent = async (
  ncxSDK: any,
  agentName: string,
  activeWorkitem: { from?: string } | null,
) => {
  if (!agentName || !activeWorkitem?.from) {
    console.warn('Missing agent name or active workitem.')
    return
  }

  try {
    const schemaType = ncxSDK.getDataService().getSchemaType('user')
    const agents = await schemaType.search({ q: agentName })
    if (!Array.isArray(agents) || agents.length === 0) {
      console.warn('No agents found for query:', agentName)
      return
    }

    const targetAgent = agents[0] // TODO: improve selection logic
    const workitemId = activeWorkitem.from as string

    const payload: TransferToAgentPayload = {
      userId: targetAgent._id,
      workitemId,
      // recording: 'keepCurrent',
      // eventName: 'transferRequested',
    }

    await ncxSDK.getWorkitemsService().transferToAgent(payload)
    console.log('Work item transferred to agent:', targetAgent)
  } catch (error) {
    console.error('Transfer to agent failed:', error)
  }
}