'use client'

import { HeartbeatLevel } from '@/services/im'
import * as React from 'react'
import { Tag } from '../ui/tag'

interface AIRelationTagProps {
  heartbeatLevel: HeartbeatLevel
  heartbeatVal?: number
  showLevel?: boolean
  size?: 'small' | 'large' | 'mini'
  showText?: boolean
  hideIcon?: boolean
}

export const headerLevelDictMap = {
  [HeartbeatLevel.Level1]: {
    title: 'Meet',
    variant: 'default' as const,
  },
  [HeartbeatLevel.Level2]: {
    title: 'Meet',
    variant: 'default' as const,
  },
  [HeartbeatLevel.Level3]: {
    title: 'Friend',
    variant: 'violet' as const,
  },
  [HeartbeatLevel.Level4]: {
    title: 'Friend',
    variant: 'violet' as const,
  },
  [HeartbeatLevel.Level5]: {
    title: 'Flirting',
    variant: 'orange' as const,
  },
  [HeartbeatLevel.Level6]: {
    title: 'Flirting',
    variant: 'orange' as const,
  },
  [HeartbeatLevel.Level7]: {
    title: 'Couple',
    variant: 'magenta' as const,
  },
  [HeartbeatLevel.Level8]: {
    title: 'Couple',
    variant: 'magenta' as const,
  },
  [HeartbeatLevel.Level9]: {
    title: 'Married',
    variant: 'primary' as const,
  },
  [HeartbeatLevel.Level10]: {
    title: 'Married',
    variant: 'primary' as const,
  },
}

const AIRelationTag = ({
  heartbeatLevel,
  heartbeatVal,
  showLevel = true,
  size = 'large',
  showText = false,
  hideIcon = false,
}: AIRelationTagProps) => {
  const headerLevel = headerLevelDictMap[heartbeatLevel]

  if (showText) {
    return (
      <div className="text-primary-variant-normal txt-label-m cursor-pointer text-center">
        {showLevel && headerLevel.title}
        {showLevel && <span>{' · '}</span>}
        <span>{heartbeatVal?.toFixed(1) || '37.8'}℃</span>
        {!hideIcon && <span>&gt;</span>}
      </div>
    )
  }

  if (heartbeatVal) {
    return (
      <Tag className="flex" size={size} variant={headerLevel.variant}>
        <div className="flex items-center gap-1">
          {showLevel && <span>{headerLevel.title}</span>}
          {showLevel && <span>·</span>}
          <span>{heartbeatVal?.toFixed(1) || '37.8'}℃</span>
          {!hideIcon && <span>&gt;</span>}
        </div>
      </Tag>
    )
  }

  return (
    <Tag className="flex" variant={headerLevel.variant} size={size}>
      {headerLevel.title}
    </Tag>
  )
}

export default AIRelationTag
