
import { cn } from '../../lib/utils';
import { Target, Cpu, Wrench, Search, Shield, Zap } from 'lucide-react';

export type EntityType = 'requirement' | 'capability' | 'tool' | 'knowledge' | 'generic';
export type BadgeStatus = 'Ready' | 'In Progress' | 'Not Started' | 'Error' | '未接入' | '正常' | '异常' | string;

interface EntityTagProps {
  type: EntityType;
  label: string;
  status?: BadgeStatus;
  onClick?: () => void;
  className?: string;
  count?: number;
}

const typeConfig = {
  requirement: { icon: Target, bgColor: 'bg-indigo-50 hover:bg-indigo-100', txColor: 'text-indigo-700' },
  capability: { icon: Cpu, bgColor: 'bg-emerald-50 hover:bg-emerald-100', txColor: 'text-emerald-700' },
  tool: { icon: Wrench, bgColor: 'bg-amber-50 hover:bg-amber-100', txColor: 'text-amber-700' },
  knowledge: { icon: Search, bgColor: 'bg-rose-50 hover:bg-rose-100', txColor: 'text-rose-700' },
  generic: { icon: Zap, bgColor: 'bg-slate-100 hover:bg-slate-200', txColor: 'text-slate-700' }
};

export const getStatusColors = (status: BadgeStatus) => {
  const normStatus = status?.toLowerCase();
  if (normStatus === 'ready' || normStatus === 'approved' || normStatus === '正常') {
    return 'bg-emerald-100 text-emerald-700';
  }
  if (normStatus === 'in progress' || normStatus === 'pending' || normStatus === '部分匹配') {
    return 'bg-amber-100 text-amber-700';
  }
  if (normStatus === 'error' || normStatus === '未满足' || normStatus === '异常') {
    return 'bg-rose-100 text-rose-700';
  }
  return 'bg-slate-100 text-slate-600'; // Default, Not Started, 未接入
};

export function EntityTag({ type, label, status, onClick, className, count }: EntityTagProps) {
  const config = typeConfig[type] || typeConfig.generic;
  const Icon = config.icon;

  return (
    <div 
      className={cn(
        "inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-transparent transition-colors",
        config.bgColor,
        config.txColor,
        onClick ? "cursor-pointer hover:border-black/5" : "",
        className
      )}
      onClick={onClick}
    >
      <Icon size={14} className="opacity-70" />
      <span className="text-sm font-semibold whitespace-nowrap">{label}</span>
      {count !== undefined && (
        <span className="ml-1 text-[10px] bg-white/60 px-1.5 py-0.5 rounded-full font-bold">
          {count}
        </span>
      )}
    </div>
  );
}

export function StatusBadge({ status, className }: { status: BadgeStatus; className?: string }) {
  if (!status) return null;
  return (
    <span className={cn(
      "px-2.5 py-1 text-xs font-bold rounded-full whitespace-nowrap",
      getStatusColors(status),
      className
    )}>
      {status}
    </span>
  );
}
