<template>
  <div class="tooltip-wrapper" @mouseenter="showTooltip" @mouseleave="hideTooltip">
    <!-- Slot für den Trigger-Inhalt -->
    <slot></slot>

    <div
        v-if="visible"
        :class="tooltipClasses"
        :style="tooltipStyles"
        class="tooltip"
    >
      {{ text }}
      <!-- Pfeil -->
      <div :class="`tooltip-arrow tooltip-arrow-${position}`"></div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Tooltip',
  props: {
    text: {
      type: String,
      required: true
    },
    position: {
      type: String,
      default: 'top',
      validator(value) {
        return ['top', 'bottom', 'left', 'right'].includes(value)
      }
    },
    delay: {
      type: Number,
      default: 200
    },
    disabled: {
      type: Boolean,
      default: false
    },
    minWidth: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      visible: false,
      timeoutId: null
    }
  },
  computed: {
    tooltipClasses() {
      return `tooltip-${this.position}`
    },
    tooltipStyles() {
      return {
        minWidth: this.minWidth
      }
    }
  },
  methods: {
    showTooltip() {
      if (this.disabled) return

      if (this.delay > 0) {
        this.timeoutId = setTimeout(() => {
          this.visible = true
        }, this.delay)
      } else {
        this.visible = true
      }
    },
    hideTooltip() {
      if (this.timeoutId) {
        clearTimeout(this.timeoutId)
        this.timeoutId = null
      }
      this.visible = false
    }
  },
  beforeUnmount() {
    if (this.timeoutId) {
      clearTimeout(this.timeoutId)
    }
  }
}
</script>

<style scoped>
.tooltip-wrapper {
  position: relative;
  display: flex;
}

.tooltip {
  position: absolute;
  background-color: #001D33;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.4;
  z-index: 1000;
  white-space: normal; /* Changed from nowrap to normal */
  word-wrap: break-word; /* Only break very long words */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  max-width: 800px; /* Further increased default max width */
}

/* Positionierung */
.tooltip-top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
}

.tooltip-bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
}

.tooltip-left {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 8px;
}

.tooltip-right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
}

/* Pfeile */
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
}

.tooltip-arrow-top {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #001D33; /* Fixed color to match background */
}

.tooltip-arrow-bottom {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #001D33; /* Fixed color to match background */
}

.tooltip-arrow-left {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #001D33; /* Fixed color to match background */
}

.tooltip-arrow-right {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #001D33; /* Fixed color to match background */
}

/* Animation */
.tooltip {
  opacity: 0;
  animation: tooltipFadeIn 0.2s ease-out forwards;
  font-weight: 300;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.tooltip-bottom {
  animation: tooltipFadeInBottom 0.2s ease-out forwards;
}

@keyframes tooltipFadeInBottom {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.tooltip-left {
  animation: tooltipFadeInLeft 0.2s ease-out forwards;
}

@keyframes tooltipFadeInLeft {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(2px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

.tooltip-right {
  animation: tooltipFadeInRight 0.2s ease-out forwards;
}

@keyframes tooltipFadeInRight {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* Responsive Verhalten */
@media (max-width: 768px) {
  .tooltip {
    font-size: 12px;
    padding: 6px 10px;
    max-width: 350px; /* Increased mobile max width */
    white-space: normal; /* Ensure line breaks on mobile */
  }
}
</style>