import { motion, useReducedMotion } from 'framer-motion'

type IslanderAvatarProps = {
  thinking?: boolean
  size?: 'full' | 'chip'
  className?: string
}

export function IslanderAvatar({ thinking, size = 'full', className = '' }: IslanderAvatarProps) {
  const reduceMotion = useReducedMotion()
  const chip = size === 'chip'

  return (
    <motion.span
      className={`ac-islander-avatar ac-islander-avatar--${size} ${className}`.trim()}
      animate={reduceMotion || chip ? undefined : { y: thinking ? [0, -2, 0] : [0, -6, 0] }}
      transition={
        reduceMotion || chip
          ? undefined
          : {
              duration: thinking ? 0.75 : 2.8,
              repeat: Infinity,
              ease: 'easeInOut',
            }
      }
    >
      <svg viewBox="0 0 88 108" fill="none" aria-hidden className="ac-islander-avatar__svg">
        {!chip ? (
          <ellipse cx="44" cy="100" rx="20" ry="4" className="ac-islander-avatar__shadow" />
        ) : null}

        <motion.g
          animate={
            thinking && !reduceMotion
              ? { rotate: [0, 6, -4, 0] }
              : undefined
          }
          transition={
            thinking && !reduceMotion
              ? { duration: 1.15, repeat: Infinity, ease: 'easeInOut' }
              : undefined
          }
          style={{ transformOrigin: '68px 72px' }}
        >
          <path
            d="M66 68c10 2 14 10 12 20-2 8-8 14-16 14-3 0-6-1-8-3 4-6 9-9 12-9 2 0 0-14 0-22Z"
            className="ac-islander-avatar__tail"
          />
        </motion.g>

        <ellipse cx="32" cy="94" rx="9" ry="5" className="ac-islander-avatar__foot" />
        <ellipse cx="56" cy="94" rx="9" ry="5" className="ac-islander-avatar__foot" />

        <path
          d="M34 78h20c6 0 10 4 10 10v4c0 4-4 7-10 7H34c-6 0-10-3-10-7v-4c0-6 4-10 10-10Z"
          className="ac-islander-avatar__shorts"
        />

        <path
          d="M30 54c-2 14-1 26 2 32 3 4 10 6 14 6s11-2 14-6c3-6 4-18 2-32-3-12-12-18-16-18s-13 6-16 18Z"
          className="ac-islander-avatar__body"
        />
        <path
          d="M36 58c0-10 5-15 12-15s12 5 12 15c0 8-5 13-12 13s-12-5-12-13Z"
          className="ac-islander-avatar__belly"
        />

        <path
          d="M28 56c-8 4-12 14-10 24 1 4 4 6 7 6 2 0 3-1 3-2-3-8-2-18 0-28Z"
          className="ac-islander-avatar__arm ac-islander-avatar__arm--left"
        />
        <ellipse cx="22" cy="78" rx="5.5" ry="6" className="ac-islander-avatar__paw" />

        <motion.g
          animate={
            thinking && !reduceMotion
              ? { rotate: [0, -8, 5, 0] }
              : undefined
          }
          transition={
            thinking && !reduceMotion
              ? { duration: 1, repeat: Infinity, ease: 'easeInOut' }
              : undefined
          }
          style={{ transformOrigin: '66px 58px' }}
        >
          <path
            d="M60 56c8 4 12 14 10 24-1 4-4 6-7 6-2 0-3-1-3-2 3-8 2-18 0-28Z"
            className="ac-islander-avatar__arm ac-islander-avatar__arm--right"
          />
          <ellipse cx="66" cy="78" rx="5.5" ry="6" className="ac-islander-avatar__paw" />
        </motion.g>

        <path
          d="M26 50c2 6 8 10 18 10s16-4 18-10c-1-8-8-14-18-14s-17 6-18 14Z"
          className="ac-islander-avatar__vest"
        />
        <circle cx="30" cy="52" r="3.2" className="ac-islander-avatar__badge" />
        {!chip ? (
          <path
            d="M28.4 52.2 30 50.2l1.6 2 2.4-3.2"
            className="ac-islander-avatar__badge-mark"
          />
        ) : null}

        <circle cx="44" cy="30" r="23" className="ac-islander-avatar__head" />

        <motion.g
          animate={
            thinking && !reduceMotion
              ? { rotate: [0, -4, 3, 0] }
              : undefined
          }
          transition={
            thinking && !reduceMotion
              ? { duration: 0.9, repeat: Infinity, ease: 'easeInOut' }
              : undefined
          }
          style={{ transformOrigin: '24px 18px' }}
        >
          <path
            d="M22 28 16 10c-1-5 3-9 9-8 3 1 6 3 7 6l-3 14c-2 3-7 3-9 0l-2-4Z"
            className="ac-islander-avatar__ear ac-islander-avatar__ear--left"
          />
          <path d="M20 14c2.5-2.5 6-2.5 8.5-0.5" className="ac-islander-avatar__ear-inner" />
        </motion.g>

        <motion.g
          animate={
            thinking && !reduceMotion
              ? { rotate: [0, 4, -3, 0] }
              : undefined
          }
          transition={
            thinking && !reduceMotion
              ? { duration: 0.9, repeat: Infinity, ease: 'easeInOut', delay: 0.1 }
              : undefined
          }
          style={{ transformOrigin: '64px 18px' }}
        >
          <path
            d="M66 28 72 10c1-5-3-9-9-8-3 1-6 3-7 6l3 14c2 3 7 3 9 0l2-4Z"
            className="ac-islander-avatar__ear ac-islander-avatar__ear--right"
          />
          <path d="M59 14c2.5-2.5 6-2.5 8.5-0.5" className="ac-islander-avatar__ear-inner" />
        </motion.g>

        <path
          d="M34 16c3-5 8-8 14-8 4 0 8 2 11 6"
          className="ac-islander-avatar__stripe ac-islander-avatar__stripe--forehead"
        />
        <path
          d="M30 24c5-2 9-3 14-3"
          className="ac-islander-avatar__stripe"
        />

        <ellipse cx="44" cy="36" rx="11" ry="9" className="ac-islander-avatar__muzzle" />

        <ellipse cx="33" cy="34" rx="6" ry="4.5" className="ac-islander-avatar__cheek" />
        <ellipse cx="55" cy="34" rx="6" ry="4.5" className="ac-islander-avatar__cheek" />

        <ellipse cx="34" cy="28" rx="6.5" ry="7.5" className="ac-islander-avatar__eye-white" />
        <ellipse cx="54" cy="28" rx="6.5" ry="7.5" className="ac-islander-avatar__eye-white" />
        <ellipse cx="35" cy="30" rx="3.8" ry="4.5" className="ac-islander-avatar__eye" />
        <ellipse cx="55" cy="30" rx="3.8" ry="4.5" className="ac-islander-avatar__eye" />
        <circle cx="36.2" cy="28.5" r="1.3" className="ac-islander-avatar__eye-shine" />
        <circle cx="56.2" cy="28.5" r="1.3" className="ac-islander-avatar__eye-shine" />

        <path d="M44 35.5 41.8 39h4.4L44 35.5Z" className="ac-islander-avatar__nose" />
        <path d="M40 41.5c2.5 2.5 5.5 2.5 8 0" className="ac-islander-avatar__mouth" />

        {!chip ? (
          <>
            <path d="M30 37h-7" className="ac-islander-avatar__whisker" />
            <path d="M30 40h-8" className="ac-islander-avatar__whisker" />
            <path d="M58 37h7" className="ac-islander-avatar__whisker" />
            <path d="M58 40h8" className="ac-islander-avatar__whisker" />
          </>
        ) : null}

        <path
          d="M38 8c2-4 6-6 10-6 3 0 6 2 8 5"
          className="ac-islander-avatar__sprout"
        />
        {!chip ? (
          <path d="M44 6v7M41 8.5h6" className="ac-islander-avatar__sprout-vein" />
        ) : null}
      </svg>
    </motion.span>
  )
}