<template>
  <Container
    v-if="props.character"
    :x="currentX"
    :y="currentY"
  >
    <RoundRectangle :origin-x="0.5" :origin-y="16" :fillColor="0xffffff" :width="74" :height="8" :radius="4" />
    <RoundRectangle :origin-x="0.5" :origin-y="31.5" :fillColor="0x09ad19" :width="70" :height="4" :radius="4" />
    <Text
      @create="createText"
      :text="props.character.name"
      :origin-x="0.5"
      :origin-y="7.5"
      :style="{
        fontFamily: 'Helvetica, Arial',
        color: '#FFF',
        fontSize: '14px'
      }"
    />
    <Image v-if="!props.character.characterType" texture="character" :origin-y="1" />
    <Sprite
      v-else
      :texture="charTexture"
      :play="props.character.isMoving ? charTexture : undefined"
      :origin-y="1"
      :flipX="props.character.rotation === 6 || props.character.rotation === 4"
      :flipY="false"
    />
  </Container>
</template>

<script lang="ts" setup>
import { Container, Image, RoundRectangle, Sprite, Text } from 'phavuer'
import { type ExtendedCharacter as CharacterT } from '@/types'
import { tileToWorldX, tileToWorldY } from '@/services/zone'
import { watch, computed, ref, onMounted, onUnmounted } from 'vue'

interface Props {
  layer: Phaser.Tilemaps.TilemapLayer
  character?: CharacterT
}

const props = withDefaults(defineProps<Props>(), {
  character: undefined
})

const currentX = ref(0)
const currentY = ref(0)
const tween = ref<Phaser.Tweens.Tween | null>(null)

const updatePosition = (x: number, y: number) => {
  const targetX = tileToWorldX(props.layer, x, y)
  const targetY = tileToWorldY(props.layer, x, y)

  if (tween.value && tween.value.isPlaying()) {
    tween.value.stop()
  }

  tween.value = props.layer.scene.tweens.add({
    targets: { x: currentX.value, y: currentY.value },
    x: targetX,
    y: targetY,
    duration: 200,
    ease: 'Linear',
    onUpdate: (tween) => {
      currentX.value = tween.targets[0].x ?? 0
      currentY.value = tween.targets[0].y ?? 0
    },
  })
}

watch(() => props.character, (newChar) => {
  if (newChar) {
    updatePosition(newChar.position_x, newChar.position_y)
  }
}, { immediate: true, deep: true })

const charTexture = computed(() => {
  if (!props.character?.characterType?.sprite) {
    return 'idle_left_down'
  }

  const rotation = props.character.rotation
  const spriteId = props.character.characterType.sprite.id
  const action = props.character.isMoving ? 'walk' : 'idle'

  if (rotation === 2 || rotation === 4) {
    return `${spriteId}-${action}_left_down`
  } else if (rotation === 0 || rotation === 6) {
    return `${spriteId}-${action}_right_up`
  }

  return `${spriteId}-${action}_left_down` // Default fallback
})

const createText = (text: Phaser.GameObjects.Text) => {
  text.setLetterSpacing(1.5)
}

onMounted(() => {
  if (props.character) {
    updatePosition(props.character.position_x, props.character.position_y)
  }
})

onUnmounted(() => {
  if (tween.value) {
    tween.value.stop()
  }
})
</script>