/**
 * 人設頁島嶼插畫
 * - 本地 Noto Emoji 3D SVG（public/illustrations/island/）
 * - framer-motion：飄浮／登島動畫
 */

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

const ASSETS = {
  desertIsland: '/illustrations/island/desert-island.svg',
  sun: '/illustrations/island/sun.svg',
  cloud: '/illustrations/island/cloud.svg',
  airplane: '/illustrations/island/airplane.svg',
  waterWave: '/illustrations/island/water-wave.svg',
  passport: '/illustrations/island/passport.svg',
  hut: '/illustrations/island/hut.svg',
  magnifyingGlass: '/illustrations/island/magnifying-glass.svg',
  bell: '/illustrations/island/bell.svg',
  herb: '/illustrations/island/herb.svg',
} as const

function SceneImg({
  src,
  width,
  height,
  className = '',
}: {
  src: string
  width: number
  height: number
  className?: string
}) {
  return (
    <img
      src={src}
      width={width}
      height={height}
      className={`select-none ${className}`}
      alt=""
      draggable={false}
      decoding="async"
    />
  )
}

const float = (reduce: boolean, y = 5, duration = 4.5) =>
  reduce
    ? undefined
    : {
        y: [0, -y, 0],
        transition: { duration, repeat: Infinity, ease: 'easeInOut' as const },
      }

const drift = (reduce: boolean, x = 10, duration = 7) =>
  reduce
    ? undefined
    : {
        x: [0, x, 0],
        transition: { duration, repeat: Infinity, ease: 'easeInOut' as const },
      }

export function PassportIslandArt({ className = '' }: { className?: string }) {
  const reduce = useReducedMotion()

  return (
    <div className={`ac-persona-passport-scene ${className}`} aria-hidden>
      <motion.div className="ac-persona-passport-scene__sun" animate={float(!!reduce, 3, 5.5)}>
        <SceneImg src={ASSETS.sun} width={58} height={58} />
      </motion.div>

      <motion.div
        className="ac-persona-passport-scene__cloud ac-persona-passport-scene__cloud--1"
        animate={drift(!!reduce, 10, 8)}
      >
        <SceneImg src={ASSETS.cloud} width={46} height={46} />
      </motion.div>
      <motion.div
        className="ac-persona-passport-scene__cloud ac-persona-passport-scene__cloud--2"
        animate={drift(!!reduce, -8, 9.5)}
      >
        <SceneImg src={ASSETS.cloud} width={34} height={34} />
      </motion.div>

      <motion.div
        className="ac-persona-passport-scene__plane"
        animate={
          reduce
            ? undefined
            : {
                x: [-12, 18, -12],
                y: [0, -6, 0],
                transition: { duration: 10, repeat: Infinity, ease: 'easeInOut' },
              }
        }
      >
        <SceneImg src={ASSETS.airplane} width={42} height={42} />
      </motion.div>

      <motion.div className="ac-persona-passport-scene__island" animate={float(!!reduce, 6, 4.2)}>
        <SceneImg src={ASSETS.desertIsland} width={160} height={160} />
      </motion.div>

      <motion.div
        className="ac-persona-passport-scene__wave"
        animate={
          reduce
            ? undefined
            : {
                x: [0, -6, 0],
                transition: { duration: 3.5, repeat: Infinity, ease: 'easeInOut' },
              }
        }
      >
        <SceneImg src={ASSETS.waterWave} width={124} height={50} />
      </motion.div>

      <motion.div
        className="ac-persona-passport-scene__passport"
        animate={
          reduce
            ? undefined
            : {
                rotate: [-5, 5, -5],
                y: [0, -3, 0],
                transition: { duration: 5.5, repeat: Infinity, ease: 'easeInOut' },
              }
        }
      >
        <SceneImg src={ASSETS.passport} width={54} height={54} />
      </motion.div>
    </div>
  )
}

export function ResearchHutArt({ className = '' }: { className?: string }) {
  const reduce = useReducedMotion()

  return (
    <motion.div
      className={`ac-persona-research-scene ${className}`}
      aria-hidden
      animate={float(!!reduce, 4, 5)}
    >
      <SceneImg src={ASSETS.hut} width={96} height={96} />
      <motion.span
        className="ac-persona-research-scene__glass"
        animate={
          reduce
            ? undefined
            : {
                rotate: [-8, 8, -8],
                transition: { duration: 4, repeat: Infinity, ease: 'easeInOut' },
              }
        }
      >
        <SceneImg src={ASSETS.magnifyingGlass} width={38} height={38} />
      </motion.span>
    </motion.div>
  )
}

export function StampBellArt({ className = '' }: { className?: string }) {
  return <SceneImg src={ASSETS.bell} width={18} height={18} className={className} />
}

export function LeafSparkleArt({ className = '' }: { className?: string }) {
  const reduce = useReducedMotion()
  return (
    <motion.div animate={float(!!reduce, 3, 3.8)}>
      <SceneImg src={ASSETS.herb} width={44} height={44} className={className} />
    </motion.div>
  )
}