<template>
  <div :class="`webchat-${classType}-template-root`">
    <!-- Text content -->
    <TextMessage
      v-if="text"
      :content="text"
      :className="`webchat-${classType}-template-header`"
      :id="webchatButtonTemplateTextId"
      ignoreLiveRegion
    />

    <!-- Buttons (hidden while progressive rendering is animating) -->
    <ActionButtons
      v-if="buttons.length > 0 && !isStillAnimating"
      :payload="buttons"
      :action="modifiedAction"
      :buttonClassName="buttonClassName"
      :containerClassName="containerClassName"
      :containerStyle="containerStyle"
      :config="config"
      :on-emit-analytics="onEmitAnalytics"
      :templateTextId="webchatButtonTemplateTextId"
      :open-x-app-overlay="openXAppOverlay"
      showUrlIcon
    />
  </div>
</template>

<script setup lang="ts">
import { computed, useCssModule } from 'vue'
import TextMessage from './TextMessage.vue'
import ActionButtons from '../common/ActionButtons.vue'
import { useMessageContext } from '../../composables/useMessageContext'
import { getChannelPayload } from '../../utils/matcher'
import { getRandomId } from '../../utils/helpers'
import type { IWebchatTemplateAttachment, IWebchatButton, IWebchatQuickReply, IStreamingMessage } from '../../types'

// Message context
const { message, config, action, onEmitAnalytics, messageParams, openXAppOverlay } = useMessageContext()

const $style = useCssModule()

// Get payload data
const payload = computed(() => getChannelPayload(message, config))

// Get attachment data
const attachment = computed(() => payload.value?.message?.attachment as IWebchatTemplateAttachment | undefined)

// Get text content
const text = computed(() => {
  return attachment.value?.payload?.text || payload.value?.message?.text || ''
})

// Get buttons (either from buttons or quick_replies)
const buttons = computed(() => {
  const payloadButtons = attachment.value?.payload?.buttons
  const quickReplies = payload.value?.message?.quick_replies
  return (payloadButtons || quickReplies || []) as (IWebchatButton | IWebchatQuickReply)[]
})

// Determine if this is quick replies
const isQuickReplies = computed(() => {
  return payload.value?.message?.quick_replies && payload.value.message.quick_replies.length > 0
})

// Determine class type
const classType = computed(() => {
  return isQuickReplies.value ? 'quick-reply' : 'buttons'
})

// For quick replies, disable if there's already a reply or the conversation has ended
const modifiedAction = computed(() => {
  const shouldBeDisabled =
    (isQuickReplies.value && messageParams?.hasReply) ||
    messageParams?.isConversationEnded
  return shouldBeDisabled ? undefined : action
})

// Generate unique ID for accessibility
const webchatButtonTemplateTextId = getRandomId('webchatButtonTemplateHeader')

// Get bot output max width
const botOutputMaxWidthPercentage = config?.settings?.layout?.botOutputMaxWidthPercentage
const isBotMessage = message.source === 'bot'
const isEngagementMessage = message.source === 'engagement'

// Container style for max width
const containerStyle = computed(() => {
  if ((isBotMessage || isEngagementMessage) && botOutputMaxWidthPercentage) {
    return { maxWidth: `${botOutputMaxWidthPercentage}%` }
  }
  return {}
})

// Direction mapping for button alignment
const directionMapping = config?.settings?.widgetSettings?.sourceDirectionMapping
const messageDirection = computed(() => {
  if (message.source === 'user') return directionMapping?.user || 'outgoing'
  if (message.source === 'bot') return directionMapping?.bot || 'incoming'
  if (message.source === 'agent') return directionMapping?.agent || 'incoming'
  return 'incoming'
})

// Button class name
const buttonClassName = computed(() => {
  return `${$style.button} webchat-${classType.value}-template-button`
})

// Container class name
const containerClassName = computed(() => {
  return `${$style.buttons} ${$style[messageDirection.value]} webchat-${classType.value}-template-replies-container`
})

// Progressive message rendering — hide buttons while message text is still animating
const isStillAnimating = computed(() => {
  if (!config?.settings?.behavior?.progressiveMessageRendering) return false
  const animState = (message as IStreamingMessage).animationState
  return animState === 'animating' || animState === 'start'
})
</script>

<style module>
.buttons {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 10px;
  max-width: 295px;
}

.button {
  /* Button styles are inherited from ActionButton component */
}

.incoming {
  justify-content: flex-start;
}

.outgoing {
  justify-content: flex-end;
}
</style>
