'use client'

import { useState, useEffect, useRef } from 'react'
import { FaUsers } from 'react-icons/fa'
import { FiUser } from 'react-icons/fi'
import Image from 'next/image'

interface MentionUser {
    userId: string
    name: string
    avatarUrl?: string | null
}

interface MentionDropdownProps {
    users: MentionUser[]
    selectedIndex: number
    onSelect: (user: MentionUser) => void
    position: { top: number; left: number }
    isMobile?: boolean
}

export default function MentionDropdown({ users, selectedIndex, onSelect, position, isMobile = false }: MentionDropdownProps) {
    const [avatarCache, setAvatarCache] = useState<Map<string, string | null>>(new Map())
    const requestedUserIdsRef = useRef<Set<string>>(new Set())

    useEffect(() => {
        const usersWithoutAvatar = users.filter(
            (user) => user.userId !== '@everyone' && !user.avatarUrl && !requestedUserIdsRef.current.has(user.userId)
        )
        if (usersWithoutAvatar.length === 0) return
        usersWithoutAvatar.forEach((user) => {
            requestedUserIdsRef.current.add(user.userId)
        })
        const fetchAvatars = async () => {
            try {
                const userIds = usersWithoutAvatar.map((u) => u.userId).join(',')
                const res = await fetch(`/api/users/info?ids=${encodeURIComponent(userIds)}`)
                const data = await res.json()

                if (data.users && Array.isArray(data.users)) {
                    setAvatarCache((prevCache) => {
                        const newCache = new Map(prevCache)
                        data.users.forEach((user: { id: string; avatar: string | null }) => {
                            newCache.set(user.id, user.avatar)
                        })
                        return newCache
                    })
                }
            } catch (error) {
                console.error('Failed to fetch user avatars:', error)
            }
        }

        fetchAvatars()
    }, [users])

    if (users.length === 0) return null

    return (
        <div
            className="absolute z-[150] w-[280px] max-h-[200px] overflow-y-auto bg-white dark:bg-[#0c0d0e] border border-gray-200 dark:border-gray-800 rounded-lg shadow-lg"
            style={{
                bottom: '100%',
                left: `${position.left}px`,
                marginBottom: '8px',
            }}
        >
            <div className="py-1">
                {users.map((user, index) => {
                    const isEveryone = user.userId === '@everyone'
                    const avatarUrl = user.avatarUrl || avatarCache.get(user.userId) || null
                    return (
                        <button
                            key={user.userId}
                            type="button"
                            onClick={() => onSelect(user)}
                            className={`w-full px-3 py-2 flex items-center gap-2 hover:bg-gray-100 dark:hover:bg-[#1a1c21] transition-colors ${index === selectedIndex ? 'bg-gray-100 dark:bg-[#1a1c21]' : ''
                                } ${isEveryone ? 'bg-yellow-50 dark:bg-yellow-900/10' : ''}`}
                        >
                            <span className="w-8 h-8 rounded-full overflow-hidden bg-gray-200 dark:bg-neutral-900 flex-shrink-0 border border-gray-200 dark:border-gray-800 flex items-center justify-center">
                                {isEveryone ? (
                                    <FaUsers className="w-4 h-4 text-gray-400 dark:text-gray-500" />
                                ) : avatarUrl ? (
                                    <Image
                                        src={avatarUrl}
                                        alt=""
                                        width={32}
                                        height={32}
                                        className="w-full h-full object-cover"
                                        unoptimized
                                    />
                                ) : (
                                    <FiUser className="w-4 h-4 text-gray-400 dark:text-gray-500" />
                                )}
                            </span>
                            <span className="text-sm truncate text-gray-900 dark:text-white">{user.name}</span>
                        </button>
                    )
                })}
            </div>
        </div>
    )
}