<script setup lang="ts">
import { CDRAGON_BASE, mapPath } from '~/utils/cdragon'

interface Props {
  item: Item | null
  show: boolean
  x: number
  y: number
}

const props = defineProps<Props>()

// Parse description and convert to styled HTML
const formatDescription = (description?: string) => {
  if (!description) return ''

  // Replace <br> and other structural tags
  const html = description
    .replace(/<br\s*\/?>/gi, '<br>')
    .replace(/<br><br><br>/gi, '') // Remove triple breaks
    .replace(/<br><br>/gi, '') // Remove double breaks
    .replace(/<mainText>/gi, '')
    .replace(/<\/mainText>/gi, '')
    .replace(/<stats>/gi, '<div class="tooltip-stats">')
    .replace(/<\/stats>/gi, '</div>')
    .replace(/<passive>/gi, '<span class="tag-passive">')
    .replace(/<\/passive>/gi, '</span>:')
    .replace(/<active>/gi, '<span class="tag-active">')
    .replace(/<\/active>/gi, '</span>')
    .replace(/<keyword>/gi, '<span class="tag-keyword">')
    .replace(/<\/keyword>/gi, '</span>')
    .replace(/<attention>/gi, '<span class="stat-highlight">')
    .replace(/<\/attention>/gi, '</span>')
    .replace(/<keywordMajor>/gi, '<span class="tag-keyword-major">')
    .replace(/<\/keywordMajor>/gi, '</span>')
    .replace(/<keywordStealth>/gi, '<span class="tag-keyword-stealth">')
    .replace(/<\/keywordStealth>/gi, '</span>')
    .replace(/<status>/gi, '<span class="tag-status">')
    .replace(/<\/status>/gi, '</span>')
    .replace(/<speed>/gi, '<span class="tag-speed">')
    .replace(/<\/speed>/gi, '</span>')
    .replace(/<scaleMana>/gi, '<span class="tag-scale-mana">')
    .replace(/<\/scaleMana>/gi, '</span>')
    .replace(/<scaleHealth>/gi, '<span class="tag-scale-health">')
    .replace(/<\/scaleHealth>/gi, '</span>')
    .replace(/<scaleAP>/gi, '<span class="tag-scale-ap">')
    .replace(/<\/scaleAP>/gi, '</span>')
    .replace(/<scaleAD>/gi, '<span class="tag-scale-ad">')
    .replace(/<\/scaleAD>/gi, '</span>')
    .replace(/<scaleArmor>/gi, '<span class="tag-scale-armor">')
    .replace(/<\/scaleArmor>/gi, '</span>')
    .replace(/<scaleMR>/gi, '<span class="tag-scale-mr">')
    .replace(/<\/scaleMR>/gi, '</span>')
    .replace(/<scaleLevel>/gi, '<span class="tag-scale-level">')
    .replace(/<\/scaleLevel>/gi, '</span>')
    .replace(/<spellName>/gi, '<span class="tag-spellname">')
    .replace(/<\/spellName>/gi, '</span>')
    .replace(/<unique>/gi, '<span class="tag-unique">UNIQUE</span>')
    .replace(/<\/unique>/gi, '')
    .replace(/<rarityMythic>/gi, '<span class="tag-rarity-mythic">Mythic</span>')
    .replace(/<\/rarityMythic>/gi, '')
    .replace(/<rarityLegendary>/gi, '<span class="tag-rarity-legendary">Legendary</span>')
    .replace(/<\/rarityLegendary>/gi, '')
    .replace(/<rarityGeneric>/gi, '<span class="tag-rarity-generic">Epic</span>')
    .replace(/<\/rarityGeneric>/gi, '')
    .replace(/<rules>/gi, '<div class="tag-rules">')
    .replace(/<\/rules>/gi, '</div>')
    .replace(/<flavorText>/gi, '<div class="tag-flavor">')
    .replace(/<\/flavorText>/gi, '</div>')
    .replace(/<li>/gi, '<div class="tag-list">')
    .replace(/<\/li>/gi, '</div>')
    .replace(/<font color='([^']+)'>/gi, '<span style="color: $1">')
    .replace(/<\/font>/gi, '</span>')
    .replace(/<b>/gi, '<strong>')
    .replace(/<\/b>/gi, '</strong>')
    .replace(/\[@@[^@]*@@\]/g, ' ') // Remove stat placeholders
    .trim()

  return html
}

const formattedDescription = computed(() =>
  props.item ? formatDescription(props.item.description) : ''
)
</script>

<template>
  <Teleport to="body">
    <Transition name="fade">
      <div
        v-if="show && item"
        class="item-tooltip"
        :style="{
          left: x + 'px',
          top: y + 'px'
        }"
        @mouseenter.stop
      >
        <div class="tooltip-header">
          <NuxtImg class="tooltip-icon" :src="CDRAGON_BASE + mapPath(item.iconPath)" />
          <div class="tooltip-title">
            <h3>{{ item.name || 'Unknown Item' }}</h3>
            <span v-if="item.priceTotal" class="tooltip-gold"> {{ item.priceTotal }} Gold </span>
          </div>
        </div>

        <div v-if="item.plaintext" class="tooltip-plaintext">
          {{ item.plaintext }}
        </div>

        <!-- eslint-disable vue/no-v-html -->
        <div
          v-if="formattedDescription"
          class="tooltip-description"
          v-html="formattedDescription"
        ></div>
        <!-- eslint-enable vue/no-v-html -->
      </div>
    </Transition>
  </Teleport>
</template>

<style scoped>
.item-tooltip {
  position: fixed;
  z-index: 1000;
  background: var(--color-surface);
  border: 1px solid var(--color-on-surface);
  border-radius: 8px;
  padding: 12px;
  max-width: 300px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.tooltip-header {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}

.tooltip-icon {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  border: 1px solid var(--color-on-surface);
  flex-shrink: 0;
}

.tooltip-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tooltip-title h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-on-surface);
  line-height: 1.2;
}

.tooltip-gold {
  font-size: 0.85rem;
  color: var(--color-gold);
  margin-top: 4px;
}

.tooltip-plaintext {
  font-size: 0.85rem;
  color: var(--color-on-surface);
  opacity: 0.8;
  margin-bottom: 8px;
  font-style: italic;
}

.tooltip-description {
  font-size: 0.85rem;
  color: var(--color-on-surface);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Stats section */
.tooltip-stats {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-on-surface-dim);
}

.tooltip-stats :deep(.stat-highlight) {
  color: #ffcc00;
  font-weight: 600;
}

/* Tag styles */
.tooltip-description :deep(.tag-passive) {
  color: #4a9eff;
  font-weight: 600;
}

.tooltip-description :deep(.tag-active) {
  color: #ff6b6b;
  font-weight: 600;
}

.tooltip-description :deep(.tag-keyword) {
  color: #ffd700;
  font-weight: 600;
}

.tooltip-description :deep(.tag-keyword-major) {
  color: #ff8c00;
  font-weight: 700;
  font-style: italic;
}

.tooltip-description :deep(.tag-keyword-stealth) {
  color: #9b59b6;
  font-weight: 600;
}

.tooltip-description :deep(.tag-status) {
  color: #e74c3c;
  font-weight: 500;
  font-style: italic;
}

.tooltip-description :deep(.tag-speed),
.tooltip-description :deep(.tag-scale-mana),
.tooltip-description :deep(.tag-scale-health),
.tooltip-description :deep(.tag-scale-ap),
.tooltip-description :deep(.tag-scale-ad),
.tooltip-description :deep(.tag-scale-armor),
.tooltip-description :deep(.tag-scale-mr),
.tooltip-description :deep(.tag-scale-level) {
  color: #3498db;
  font-style: italic;
  font-weight: 500;
}

.tooltip-description :deep(.tag-healing),
.tooltip-description :deep(.tag-health) {
  color: #2ecc71;
  font-weight: 500;
}

.tooltip-description :deep(.tag-shield) {
  color: #3498db;
  font-weight: 500;
}

.tooltip-description :deep(.tag-magic-damage) {
  color: #9b59b6;
  font-weight: 500;
}

.tooltip-description :deep(.tag-physical-damage) {
  color: #e67e22;
  font-weight: 500;
}

.tooltip-description :deep(.tag-true-damage) {
  color: #c0392b;
  font-weight: 600;
}

.tooltip-description :deep(.tag-onhit) {
  background: rgba(52, 152, 219, 0.1);
  color: #3498db;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 500;
}

.tooltip-description :deep(.tag-spellname) {
  color: #1abc9c;
  font-weight: 600;
  font-style: italic;
}

.tooltip-description :deep(.tag-unique) {
  color: #f39c12;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

.tooltip-description :deep(.tag-rarity-mythic) {
  color: #ff5252;
  font-weight: 700;
  font-size: 0.85rem;
}

.tooltip-description :deep(.tag-rarity-legendary) {
  color: #ff9800;
  font-weight: 600;
  font-size: 0.85rem;
}

.tooltip-description :deep(.tag-rarity-generic) {
  color: #ffd54f;
  font-weight: 500;
  font-size: 0.85rem;
}

.tooltip-description :deep(.tag-rules) {
  margin-top: 8px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-left: 2px solid var(--color-on-surface-dim);
  font-size: 0.8rem;
  font-style: italic;
  opacity: 0.8;
}

.tooltip-description :deep(.tag-flavor) {
  margin-top: 10px;
  padding: 6px;
  background: rgba(74, 222, 255, 0.1);
  border-left: 2px solid #4a9eff;
  font-size: 0.8rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
}

.tooltip-description :deep(.tag-list) {
  margin: 4px 0;
  padding-left: 12px;
  position: relative;
}

.tooltip-description strong {
  font-weight: 600;
  color: var(--color-on-surface);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.15s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
