import type { ProjectRole } from "@qjclaw/shared-types"
import { renderRoleIcon } from "../chat/roleIconPaths"

interface RoleTeamPanelProps {
  roles: ProjectRole[]
  onRoleClick?: (role: ProjectRole) => void
  activeRoleId?: string
  isStreaming?: boolean
}

function RoleIcon({ icon }: { icon: string }) {
  return (
    <span className="role-card-icon" aria-hidden="true">
      {renderRoleIcon(icon, { width: 22, height: 22, strokeWidth: 1.6 })}
    </span>
  )
}

function getDotState(roleId: string, activeRoleId: string | undefined, isStreaming: boolean | undefined): string {
  if (!isStreaming) return "idle"
  if (activeRoleId === roleId) return "active"
  return "idle"
}

export function RoleTeamPanel({ roles, onRoleClick, activeRoleId, isStreaming }: RoleTeamPanelProps) {
  if (!roles || roles.length === 0) return null

  return (
    <div className="role-team-panel">
      <div className="role-team-header">
        <span className="role-team-label">运营团队</span>
      </div>
      <div className="role-team-grid">
        {roles.map((role) => {
          const dotState = getDotState(role.id, activeRoleId, isStreaming)
          return (
            <button
              key={role.id}
              type="button"
              className="role-card"
              onClick={() => onRoleClick?.(role)}
              title={`${role.name}：${role.description}`}
              aria-label={`${role.name} - ${role.description}`}
            >
              <RoleIcon icon={role.icon} />
              <div className="role-card-body">
                <strong className="role-card-name">{role.name}</strong>
                <span className="role-card-desc">{role.description}</span>
              </div>
              <span
                className={`role-status-dot ${dotState}`}
                aria-label={dotState === "active" ? "工作中" : "待命中"}
                title={dotState === "active" ? "工作中" : "待命中"}
              />
            </button>
          )
        })}
      </div>
    </div>
  )
}
