import React, { useEffect, useRef } from 'react';
import Avatar from './Avatar';

const MentionMenu = ({ items, selectedIndex, onSelect, onHover }) => {
    const scrollerRef = useRef(null);

    useEffect(() => {
        if (!scrollerRef.current) return;
        const selected = scrollerRef.current.querySelector('.mention-menu-row.selected');
        if (selected) selected.scrollIntoView({ block: 'nearest' });
    }, [selectedIndex]);

    if (!items || items.length === 0) return null;

    const roleItems = items.filter(i => i.type === 'role');
    const memberItems = items.filter(i => i.type === 'member');

    let globalIndex = 0;

    return (
        <div className="mention-menu">
            <div className="mention-menu-scroller" ref={scrollerRef}>
                {roleItems.length > 0 && (
                    <>
                        <div className="mention-menu-section-header">Roles</div>
                        {roleItems.map((role) => {
                            const idx = globalIndex++;
                            const displayName = role.name.startsWith('@') ? role.name : `@${role.name}`;
                            return (
                                <div
                                    key={`role-${role._id}`}
                                    className={`mention-menu-row${idx === selectedIndex ? ' selected' : ''}`}
                                    onMouseDown={(e) => e.preventDefault()}
                                    onClick={() => onSelect(role)}
                                    onMouseEnter={() => onHover(idx)}
                                >
                                    <div
                                        className="mention-menu-role-icon"
                                        style={{ backgroundColor: role.color || '#99aab5' }}
                                    >
                                        @
                                    </div>
                                    <span
                                        className="mention-menu-row-primary"
                                        style={role.color ? { color: role.color } : undefined}
                                    >
                                        {displayName}
                                    </span>
                                </div>
                            );
                        })}
                    </>
                )}
                {memberItems.length > 0 && (
                    <>
                        <div className="mention-menu-section-header">Members</div>
                        {memberItems.map((member) => {
                            const idx = globalIndex++;
                            const topRole = member.roles && member.roles.length > 0 ? member.roles[0] : null;
                            const nameColor = topRole?.color || undefined;
                            return (
                                <div
                                    key={member.id}
                                    className={`mention-menu-row${idx === selectedIndex ? ' selected' : ''}`}
                                    onMouseDown={(e) => e.preventDefault()}
                                    onClick={() => onSelect(member)}
                                    onMouseEnter={() => onHover(idx)}
                                >
                                    <Avatar username={member.username} avatarUrl={member.avatarUrl} size={24} />
                                    <span className="mention-menu-row-primary" style={nameColor ? { color: nameColor } : undefined}>
                                        {member.displayName || member.username}
                                    </span>
                                    <span className="mention-menu-row-secondary">{member.username}</span>
                                </div>
                            );
                        })}
                    </>
                )}
            </div>
        </div>
    );
};

export default MentionMenu;
