/**
 * React NodeView for TipTap mention nodes.
 * Renders colored inline labels by mention type.
 */

import type { ReactNodeViewProps } from '@tiptap/react';
import { NodeViewWrapper } from '@tiptap/react';

const TYPE_STYLE: Record<string, { bg: string; text: string; prefix: string }> = {
  user: { bg: 'bg-blue-100 dark:bg-blue-900/40', text: 'text-blue-700 dark:text-blue-300', prefix: '@' },
  ai: { bg: 'bg-indigo-100 dark:bg-indigo-900/40', text: 'text-indigo-700 dark:text-indigo-300', prefix: '@' },
  channel: { bg: 'bg-gray-100 dark:bg-gray-800', text: 'text-gray-600 dark:text-gray-400', prefix: '#' },
  special_here: { bg: 'bg-orange-100 dark:bg-orange-900/40', text: 'text-orange-700 dark:text-orange-300', prefix: '@' },
  special_channel: { bg: 'bg-orange-100 dark:bg-orange-900/40', text: 'text-orange-700 dark:text-orange-300', prefix: '@' },
  command: { bg: 'bg-amber-100 dark:bg-amber-900/30', text: 'text-amber-700 dark:text-amber-300', prefix: '/' },
};

export default function MentionView(props: ReactNodeViewProps) {
  const attrs = props.node.attrs as Record<string, string>;
  const label = attrs.label ?? '';
  const type = attrs.type ?? 'user';
  const style = TYPE_STYLE[type] ?? TYPE_STYLE.user;

  return (
    <NodeViewWrapper className="inline" as="span">
      <span
        className={`${style.bg} ${style.text} rounded px-1.5 py-0.5 text-sm font-medium select-none cursor-default inline-flex items-center leading-tight`}
        data-mention
        data-id={attrs.id}
        data-label={label}
        data-type={type}
      >
        {style.prefix}{label}
      </span>
    </NodeViewWrapper>
  );
}