<template>
  <div class="tooltip-wrapper" :class="['tooltip-' + position]">
    <span class="tooltip-trigger" tabindex="0" :aria-describedby="tooltipId">
      <slot></slot>
    </span>
    <span class="tooltip-text" role="tooltip" :id="tooltipId">
      {{ text }}
    </span>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

const props = defineProps({
  text: {
    type: String,
    required: true,
  },
  position: {
    type: String, // 'top', 'bottom', 'left', 'right'
    default: 'top',
    validator: (value: string) => ['top', 'bottom', 'left', 'right'].includes(value),
  },
  id: {
    type: String,
    default: null,
  },
});

const tooltipId = computed(() => {
  return props.id || `v-tooltip-${Math.random().toString(36).substring(2, 9)}`;
});

</script>

<style lang="scss" scoped>
// These styles should align with valerie-ui.scss's .tooltip definition.
// For this component, we'll define them here.
// A .tooltip-wrapper is used instead of .tooltip directly on the trigger's parent
// to give more flexibility if the trigger is an inline element.
.tooltip-wrapper {
  position: relative;
  display: inline-block; // Or 'block' or 'inline-flex' depending on how it should behave in layout
}

.tooltip-trigger {
  // display: inline-block; // Ensure it can have dimensions if it's an inline element like <span>
  cursor: help; // Or default, depending on trigger type
  // Ensure trigger is focusable for keyboard accessibility if it's not inherently focusable (e.g. a span)
  // tabindex="0" is added in the template.
  &:focus {
    outline: none; // Or a custom focus style if desired for the trigger itself
    // When trigger is focused, the tooltip-text should become visible (handled by CSS below)
  }
}

.tooltip-text {
  position: absolute;
  z-index: 1070; // High z-index to appear above other elements
  display: block;
  padding: 0.4em 0.8em;
  font-size: 0.875rem; // Slightly smaller font for tooltip
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: nowrap; // Tooltips are usually single-line, can be changed if multi-line is needed
  color: var(--tooltip-text-color, #fff); // Text color
  background-color: var(--tooltip-bg-color, #343a40); // Background color (dark gray/black)
  border-radius: 0.25rem; // Rounded corners

  // Visibility: hidden by default, shown on hover/focus of the wrapper/trigger
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;

  // Arrow (pseudo-element)
  &::after {
    content: "";
    position: absolute;
    border-width: 5px; // Size of the arrow
    border-style: solid;
  }
}

// Show tooltip on hover or focus of the wrapper (or trigger)
.tooltip-wrapper:hover .tooltip-text,
.tooltip-wrapper:focus-within .tooltip-text, // focus-within for keyboard nav on trigger
.tooltip-trigger:focus + .tooltip-text { // If trigger is focused directly
  visibility: visible;
  opacity: 1;
}


// Positioning
// TOP
.tooltip-top .tooltip-text {
  bottom: 100%; // Position above the trigger
  left: 50%;
  transform: translateX(-50%) translateY(-6px); // Center it and add margin from arrow

  &::after {
    top: 100%; // Arrow at the bottom of the tooltip text pointing down
    left: 50%;
    transform: translateX(-50%);
    border-color: var(--tooltip-bg-color, #343a40) transparent transparent transparent; // Arrow color
  }
}

// BOTTOM
.tooltip-bottom .tooltip-text {
  top: 100%; // Position below the trigger
  left: 50%;
  transform: translateX(-50%) translateY(6px); // Center it and add margin

  &::after {
    bottom: 100%; // Arrow at the top of the tooltip text pointing up
    left: 50%;
    transform: translateX(-50%);
    border-color: transparent transparent var(--tooltip-bg-color, #343a40) transparent;
  }
}

// LEFT
.tooltip-left .tooltip-text {
  top: 50%;
  right: 100%; // Position to the left of the trigger
  transform: translateY(-50%) translateX(-6px); // Center it and add margin

  &::after {
    top: 50%;
    left: 100%; // Arrow at the right of the tooltip text pointing right
    transform: translateY(-50%);
    border-color: transparent transparent transparent var(--tooltip-bg-color, #343a40);
  }
}

// RIGHT
.tooltip-right .tooltip-text {
  top: 50%;
  left: 100%; // Position to the right of the trigger
  transform: translateY(-50%) translateX(6px); // Center it and add margin

  &::after {
    top: 50%;
    right: 100%; // Arrow at the left of the tooltip text pointing left
    transform: translateY(-50%);
    border-color: transparent var(--tooltip-bg-color, #343a40) transparent transparent;
  }
}
</style>
