import { useCallback } from 'react';
import { AtSign, Hash, User, GitBranch, Bug } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { MentionData } from './parser';

const entityIcons: Record<string, React.ComponentType<{ className?: string }>> = {
  user: User,
  repo: GitBranch,
  issue: Bug,
  pr: GitBranch,
  room: Hash,
};

const entityColors: Record<string, string> = {
  user: 'text-info dark:text-info bg-info/10 dark:bg-info/20',
  repo: 'text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950',
  issue: 'text-orange-600 dark:text-orange-400 bg-orange-50 dark:bg-orange-950',
  pr: 'text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-950',
  room: 'text-info dark:text-info bg-info/10 dark:bg-info/20',
};

interface Props {
  entityType: string;
  entityId: string;
  entityLabel: string;
  onClick?: (mention: MentionData) => void;
}

export function MentionChip({ entityType, entityId, entityLabel, onClick }: Props) {
  const Icon = entityIcons[entityType] ?? AtSign;
  const colorClass = entityColors[entityType] ?? 'text-muted-foreground bg-muted';

  const handleClick = useCallback((e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    onClick?.({ entityType, entityId, entityLabel });
  }, [entityType, entityId, entityLabel, onClick]);

  return (
    <span
      className={cn(
        'inline-flex cursor-pointer items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium transition-colors hover:opacity-80',
        colorClass,
      )}
      onClick={handleClick}
      role="button"
      tabIndex={0}
    >
      <Icon className="size-3" />
      {entityLabel}
    </span>
  );
}
