'use client'

import { useState, useEffect } from 'react'
import { Sparkles } from 'lucide-react'
import { cn } from '@/lib/utils'
import { useLanguage } from '@/lib/i18n/LanguageProvider'

interface ConnectionsBadgeProps {
  noteId: string
  onClick?: () => void
  className?: string
}

interface ConnectionData {
  noteId: string
  title: string | null
  content: string
  createdAt: Date
  similarity: number
  daysApart: number
}

interface ConnectionsResponse {
  connections: ConnectionData[]
  pagination: {
    total: number
    page: number
    limit: number
    totalPages: number
    hasNext: boolean
    hasPrev: boolean
  }
}

export function ConnectionsBadge({ noteId, onClick, className }: ConnectionsBadgeProps) {
  const { t } = useLanguage()
  const [connectionCount, setConnectionCount] = useState<number>(0)
  const [isLoading, setIsLoading] = useState(false)
  const [isHovered, setIsHovered] = useState(false)

  useEffect(() => {
    const fetchConnections = async () => {
      setIsLoading(true)
      try {
        const res = await fetch(`/api/ai/echo/connections?noteId=${noteId}&limit=1`)
        if (!res.ok) {
          throw new Error('Failed to fetch connections')
        }

        const data: ConnectionsResponse = await res.json()
        setConnectionCount(data.pagination.total || 0)
      } catch (error) {
        console.error('[ConnectionsBadge] Failed to fetch connections:', error)
        setConnectionCount(0)
      } finally {
        setIsLoading(false)
      }
    }

    fetchConnections()
  }, [noteId])

  // Don't render if no connections or still loading
  if (connectionCount === 0 || isLoading) {
    return null
  }

  const plural = connectionCount > 1 ? 's' : ''
  const badgeText = t('memoryEcho.connectionsBadge', { count: connectionCount, plural })

  return (
    <div
      className={cn(
        'px-1.5 py-0.5 rounded',
        'bg-amber-100 dark:bg-amber-900/30',
        'text-amber-700 dark:text-amber-400',
        'text-[10px] font-medium',
        'border border-amber-200 dark:border-amber-800',
        'cursor-pointer',
        'transition-all duration-150 ease-out',
        'hover:bg-amber-200 dark:hover:bg-amber-800/50',
        isHovered && 'scale-105',
        className
      )}
      onClick={onClick}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      title={badgeText}
    >
      <Sparkles className="h-2.5 w-2.5 inline-block mr-1" />
      {badgeText}
    </div>
  )
}