<template>
    <div class="relative" v-if="gameStore.uiSettings.isCharacterProfileOpen" :style="modalStyle">
        <img src="/assets/profile-ui-box-outer.svg" class="absolute w-full h-full" />
        <img src="/assets/profile-ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" />
        <div @mousedown="startDrag" class="cursor-move px-5 py-2.5 flex justify-between items-center relative">
            <span class="text-xs text-white font-thin">Character Profile [Alt+C]</span>
            <button @click="gameStore.uiSettings.isCharacterProfileOpen = false" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
                <img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
            </button>
        </div>
        <div class="py-4 px-6 flex flex-col gap-7 relative z-10">
            <div class="flex flex-col gap-2.5">
                <div class="flex justify-between">
                    <div>
                        <p class="text-sm m-0 font-bold text-white tracking-wide">{{ gameStore.character?.name }}</p>
                        <span class="text-xs">{{ gameStore.character?.experience }} / 18.600XP</span>
                    </div>
                    <a class="group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-small.svg')] bg-no-repeat block w-8 h-8 relative">
                        <img class="group-hover:drop-shadow-default w-3.5 h-3.5 m-[9px] object-contain" draggable="false" src="/assets/icons/plus-green-icon.svg" />
                    </a>
                </div>
                <div class="flex justify-between">
                    <div class="flex flex-col gap-0.5">
                        <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative">
                            <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">CROWN</span>
                        </div>
                        <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative">
                            <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">R-HAND</span>
                        </div>
                        <div class="flex gap-0.5 items-end">
                            <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative">
                                <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">L-HAND</span>
                            </div>
                            <div class="w-6 h-6 border border-solid border-gray-500 rounded-sm bg-gray relative">
                                <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">RING</span>
                            </div>
                        </div>
                    </div>
                    <img src="/assets/placeholders/inventory_player.png" class="w-8 h-auto"/>
                    <div class="flex flex-col items-end gap-0.5">
                        <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative">
                            <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">CROWN</span>
                        </div>
                        <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative">
                            <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">R-HAND</span>
                        </div>
                        <div class="flex gap-0.5 items-end">
                            <div class="w-6 h-6 border border-solid border-gray-500 rounded-sm bg-gray relative">
                                <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">RING</span>
                            </div>
                            <div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative">
                                <span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">L-HAND</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div></div>
            </div>
            <div></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, watch, computed } from 'vue'
import { useGameStore } from '@/stores/gameStore'

const gameStore = useGameStore()

let startX = 0
let startY = 0
let initialX = 0
let initialY = 0
let modalPositionX = 0
let modalPositionY = 0
let modalWidth = 277
let modalHeight = 473

const width = ref(modalWidth)
const height = ref(modalHeight)
const x = ref(0)
const y = ref(0)
const isDragging = ref(false)

const modalStyle = computed(() => ({
  top: `${y.value}px`,
  left: `${x.value}px`,
  width: `${width.value}px`,
  height: `${height.value}px`,
  maxWidth: '100vw',
  maxHeight: '100vh'
}))

function startDrag(event: MouseEvent) {
  isDragging.value = true
  startX = event.clientX
  startY = event.clientY
  initialX = x.value
  initialY = y.value
  event.preventDefault()
}

function drag(event: MouseEvent) {
  if (!isDragging.value) return
  const dx = event.clientX - startX
  const dy = event.clientY - startY
  x.value = initialX + dx
  y.value = initialY + dy
  adjustPosition()
}

function stopDrag() {
  isDragging.value = false
}

function adjustPosition() {
  x.value = Math.max(0, Math.min(x.value, window.innerWidth - width.value))
  y.value = Math.max(0, Math.min(y.value, window.innerHeight - height.value))
}

function initializePosition() {
  width.value = Math.min(modalWidth, window.innerWidth)
  height.value = Math.min(modalHeight, window.innerHeight)
  if (modalPositionX !== 0 && modalPositionY !== 0) {
    console.log(modalPositionX)
    console.log(modalPositionY)
    x.value = modalPositionX
    y.value = modalPositionY
  } else {
    x.value = (window.innerWidth - width.value) / 2
    y.value = (window.innerHeight - height.value) / 2
  }
}

watch(
  () => gameStore.uiSettings.isCharacterProfileOpen,
  (value) => {
    gameStore.uiSettings.isCharacterProfileOpen = value
    if (value) {
      initializePosition()
    }
  }
)

watch(
  () => modalWidth,
  (value) => {
    width.value = Math.min(value, window.innerWidth)
  }
)

watch(
  () => modalHeight,
  (value) => {
    height.value = Math.min(value, window.innerHeight)
  }
)

watch(
  () => modalPositionX,
  (value) => {
    x.value = value
  }
)

watch(
  () => modalPositionY,
  (value) => {
    y.value = value
  }
)

onMounted(() => {
  window.addEventListener('mousemove', drag)
  window.addEventListener('mouseup', stopDrag)
  initializePosition()
})

onUnmounted(() => {
  window.removeEventListener('mousemove', drag)
  window.removeEventListener('mouseup', stopDrag)
})
</script>