'use client';

import { cn } from '@/lib/utils';
import type { MentionType } from '@/lib/mention';

interface MentionBadgeProps {
  type: MentionType;
  label: string;
  onClick?: (type: MentionType, id: string, label: string) => void;
  id: string;
  className?: string;
}

const TYPE_STYLE: Record<MentionType, { light: string; dark?: string; prefix: string }> = {
  user: {
    light: 'bg-blue-50 text-blue-600',
    dark: 'dark:bg-blue-900/30 dark:text-blue-300',
    prefix: '@',
  },
  channel: {
    light: 'bg-gray-50 text-gray-600',
    dark: 'dark:bg-gray-800 dark:text-gray-300',
    prefix: '#',
  },
  ai: {
    light: 'bg-green-50 text-green-600',
    dark: 'dark:bg-green-900/30 dark:text-green-300',
    prefix: '@',
  },
  command: {
    light: 'bg-amber-50 text-amber-600',
    dark: 'dark:bg-amber-900/30 dark:text-amber-300',
    prefix: '/',
  },
  special_here: {
    light: 'bg-orange-50 text-orange-600',
    dark: 'dark:bg-orange-900/30 dark:text-orange-300',
    prefix: '@',
  },
  special_channel: {
    light: 'bg-orange-50 text-orange-600',
    dark: 'dark:bg-orange-900/30 dark:text-orange-300',
    prefix: '@',
  },
  repo: {
    light: 'bg-teal-50 text-teal-600',
    dark: 'dark:bg-teal-900/30 dark:text-teal-300',
    prefix: '@',
  },
};

export function MentionBadge({ type, label, onClick, id, className }: MentionBadgeProps) {
  const style = TYPE_STYLE[type] ?? TYPE_STYLE['user'];
  const isInteractive = !!onClick;

  return (
    <span
      role={isInteractive ? 'button' : undefined}
      tabIndex={isInteractive ? 0 : undefined}
      className={cn(
        'inline-flex items-center gap-0.5 rounded px-1 py-0.5 font-medium text-xs mx-0.5',
        style.light,
        style.dark,
        isInteractive && 'cursor-pointer hover:opacity-80 transition-opacity',
        className,
      )}
      onClick={isInteractive ? () => onClick(type, id, label) : undefined}
      onKeyDown={
        isInteractive
          ? (e) => {
              if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                onClick(type, id, label);
              }
            }
          : undefined
      }
    >
      {style.prefix}
      {label}
    </span>
  );
}

/** Get mention style class names for direct use (without the component wrapper). */
export function getMentionStyleClasses(type: MentionType): string {
  const style = TYPE_STYLE[type] ?? TYPE_STYLE['user'];
  return cn(style.light, style.dark);
}
