'use client'

import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import Image from 'next/image'
import { useEffect, useState } from 'react'
import { useGetHeartbeatRank } from '@/hooks/useIm'
import numeral from 'numeral'

interface RenderContactStatusTextProps {
  hasContacts: boolean
}

const RenderContactStatusText = ({ hasContacts }: RenderContactStatusTextProps) => {
  const [isFirstView, setIsFirstView] = useState<boolean>(() => {
    // 初始化时检查 localStorage，如果没有记录说明是第一次访问
    return !localStorage.getItem('contact-first-view-dismissed')
  })

  const { data: heartbeatRank } = useGetHeartbeatRank()
  console.log('heartbeatRank', heartbeatRank)

  useEffect(() => {
    localStorage.setItem('contact-first-view-dismissed', 'true')
  }, [])

  console.log(isFirstView)

  const handleDismiss = () => {
    setIsFirstView(false)
    // 标记用户已经看过并关闭了提示
    localStorage.setItem('contact-first-view-dismissed', 'true')
  }

  if (isFirstView) {
    return (
      <div className="bg-primary-normal flex items-center justify-between gap-4 rounded-sm px-4 py-3">
        <div className="flex flex-1 items-center gap-2">
          <Image src="/icons/contact-heart.svg" alt="Heart-rate" width={24} height={24} />
          <div className="txt-label-m text-txt-primary-normal">
            Characters with a Crush Value of 15.0 °C or higher will appear in the list.
          </div>
        </div>
        <i className="iconfont icon-close" onClick={handleDismiss} />
      </div>
    )
  }

  // 当联系人列表为空或 heartbeatRank 为空时不展示排名信息
  if (!hasContacts) {
    return null
  }

  return (
    <div className="bg-surface-base-normal flex items-center justify-between gap-4 rounded-sm px-4 py-3">
      <div className="txt-label-m text-txt-primary-normal">{`Total Crush Value Ranking: Top ${numeral(heartbeatRank || 0).format('0,0.00%')}`}</div>
      <Tooltip>
        <TooltipTrigger>
          <Image src="/icons/question-border.svg" alt="Question-border" width={16} height={16} />
        </TooltipTrigger>
        <TooltipContent>
          <div className="max-w-[300px] space-y-1 py-2">
            <p>
              Only characters with a Crush Value of 15.0 °C or higher are considered for ranking.
              Rankings are based on the total Crush Value of these characters.
            </p>
          </div>
        </TooltipContent>
      </Tooltip>
    </div>
  )
}

export default RenderContactStatusText
