"use client"

import { useEffect, useState } from "react"

import { Badge } from "@/shared/components/ui/badge"

import { getUnreadMessageCountAction } from "../actions"

/**
 * 未读消息计数徽章
 *
 * 在侧边栏 Messages 导航项旁显示未读私信数。
 * 每 POLL_INTERVAL_MS 毫秒轮询一次以保持计数更新。
 *
 * 注意：当前 SSE 端点（/api/notifications/stream）仅推送通知数据，
 * 不包含私信未读数，因此本组件仍使用轮询模式。轮询间隔与通知组件
 * 保持一致（30 秒），未来可扩展 SSE 端点同时推送消息未读数以实现实时更新。
 */
const POLL_INTERVAL_MS = 30_000

export function UnreadMessageBadge() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    let active = true

    const fetchCount = async () => {
      const res = await getUnreadMessageCountAction()
      if (!active) return
      if (res.success && typeof res.data === "number") {
        setCount(res.data)
      }
    }

    void fetchCount()

    const timer = setInterval(() => {
      void fetchCount()
    }, POLL_INTERVAL_MS)

    return () => {
      active = false
      clearInterval(timer)
    }
  }, [])

  if (count <= 0) return null

  return (
    <Badge
      variant="destructive"
      className="ml-auto flex h-5 min-w-5 items-center justify-center px-1.5 text-[10px]"
    >
      {count > 99 ? "99+" : count}
    </Badge>
  )
}
