import { MESSAGE_CUSTOM_TYPE } from '@linktr.ee/messaging-taxonomy'
import { GiftIcon } from '@phosphor-icons/react'
import { LocalMessage } from 'stream-chat'

interface MessageTagProps {
  message: LocalMessage
  /** When true, renders sender-side chatbot variants */
  isMyMessage?: boolean
  /** Whether the message includes an attachment */
  hasAttachment?: boolean
}

const SparkleIcon = ({ size = 15 }: { size?: number }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 15 15"
    fill="none"
    aria-hidden="true"
  >
    <path
      d="M12.003 9a.985.985 0 0 1-.652.934l-3.223 1.191-1.188 3.226a.995.995 0 0 1-1.867 0l-1.195-3.226L.65 9.937a.995.995 0 0 1 0-1.867l3.227-1.195 1.187-3.226a.995.995 0 0 1 1.868 0l1.195 3.226 3.226 1.187a.99.99 0 0 1 .649.938m3-5.83a.52.52 0 0 1-.344.492l-1.702.63-.627 1.703a.525.525 0 0 1-.986 0l-.63-1.704-1.704-.627a.525.525 0 0 1 0-.986l1.703-.63.627-1.704a.526.526 0 0 1 .986 0l.631 1.703 1.704.627a.52.52 0 0 1 .342.495"
      fill="currentColor"
      fillOpacity={0.55}
    />
  </svg>
)

/** Check if a message is a paid message based on metadata */
const isPaidMessage = (message: LocalMessage): boolean => {
  return message.metadata?.custom_type === MESSAGE_CUSTOM_TYPE.PAID
}

/** Check if a message is a chatbot message based on metadata */
export const isChatbotMessage = (message: LocalMessage): boolean => {
  return message.metadata?.custom_type === MESSAGE_CUSTOM_TYPE.CHATBOT
}

/** Check if a message is a locked attachment */
export const isAttachmentMessage = (message: LocalMessage): boolean => {
  return message.metadata?.custom_type === MESSAGE_CUSTOM_TYPE.ATTACHMENT
}

export const isTextAttachmentMessage = (message: LocalMessage): boolean => {
  return (
    isAttachmentMessage(message) &&
    message.metadata?.attachment_content_type === 'text'
  )
}

export const isMediaAttachmentMessage = (message: LocalMessage): boolean => {
  return (
    isAttachmentMessage(message) &&
    message.metadata?.attachment_content_type !== 'text'
  )
}

/** Check if the footer tag on this message already reads "Delivered with …" */
export const hasPaidDeliveryTag = (message: LocalMessage): boolean => {
  return isPaidMessage(message) && !!message.metadata?.amount_text
}

export const MessageTag = ({
  message,
  isMyMessage = false,
  hasAttachment = false,
}: MessageTagProps) => {
  const isPaid = isPaidMessage(message)
  const isChatbot = isChatbotMessage(message)

  if (!isPaid && !isChatbot) {
    return null
  }

  if (isPaid) {
    const amountText = message.metadata?.amount_text
    if (!amountText) return null

    return (
      <div className="message-tag--paid inline-flex items-center gap-1 text-[12px] font-medium leading-[2] text-[#016630]">
        <GiftIcon size={12} />
        <span>Delivered with {amountText} message</span>
      </div>
    )
  }

  const isSenderAttachmentVariant = isMyMessage && hasAttachment
  const chatbotLabel = isSenderAttachmentVariant
    ? 'Sent with AI'
    : 'Sent by AI Assistant'

  const chatbotBase =
    'inline-flex items-center text-[10px] font-normal leading-4 tracking-[0.2px]'
  const chatbotVariant = isSenderAttachmentVariant
    ? 'justify-end gap-2 text-black/30'
    : isMyMessage
      ? 'w-full justify-start gap-1.5 mt-3 px-4 text-white/55'
      : 'w-full justify-start gap-1.5 mt-3 px-4 text-black/30'

  const label = <span className="text-left">{chatbotLabel}</span>
  const icon = (
    <span className="inline-flex items-center leading-none">
      <SparkleIcon size={isSenderAttachmentVariant ? 12 : 15} />
    </span>
  )

  return (
    <div
      className={`${chatbotBase} ${chatbotVariant}`}
      data-testid="message-chatbot-indicator"
    >
      {isMyMessage && !isSenderAttachmentVariant ? (
        <>
          {label}
          {icon}
        </>
      ) : (
        <>
          {icon}
          {label}
        </>
      )}
    </div>
  )
}