import { renderRoleIcon } from "./roleIconPaths"

const ROLE_COLORS: Record<string, string> = {
  "诊断师": "#3b82f6",
  "策略师": "#f59e0b",
  "内容师": "#10b981",
  "技术顾问": "#8b5cf6",
}

export interface AgentActivationBadgeProps {
  role: {
    name: string
    icon: string
  }
  statusLabel: string
  statusDetail?: string
  visible: boolean
}

function getRoleColor(roleName: string): string {
  return ROLE_COLORS[roleName] ?? "#6b7280"
}

export function AgentActivationBadge({ role, statusLabel, statusDetail, visible }: AgentActivationBadgeProps) {
  const accentColor = getRoleColor(role.name)

  return (
    <div
      className={"agent-activation-card" + (visible ? " agent-card-visible" : " agent-card-hidden")}
      style={{ "--agent-accent-color": accentColor } as React.CSSProperties}
      aria-label={`${role.name}正在工作：${statusLabel}`}
    >
      <div className="agent-card-accent" aria-hidden="true" />
      <div className="agent-card-body">
        <div className="agent-card-icon-wrap" style={{ color: accentColor }}>
          {renderRoleIcon(role.icon, { width: 22, height: 22, strokeWidth: 1.6 })}
        </div>
        <div className="agent-card-info">
          <div className="agent-card-header">
            <span className="agent-card-role-name">{role.name}</span>
            <span className="agent-card-working-badge" aria-hidden="true">
              <span className="agent-card-working-dot" />
              <span className="agent-card-working-text">工作中</span>
            </span>
          </div>
          <p className="agent-card-status">{statusLabel}</p>
          {statusDetail ? <p className="agent-card-detail">{statusDetail}</p> : null}
        </div>
      </div>
    </div>
  )
}
