{{--
    Tooltip Component (Alpine.js)
    Props:
      $text     – tooltip text content
      $position – top|bottom|left|right (default: top)

    Usage:
      <x-utility.tooltip text="Delete this item" position="top">
          <x-buttons.icon variant="danger">
              <svg>...</svg>
          </x-buttons.icon>
      </x-utility.tooltip>
--}}
@props(['text' => '', 'position' => 'top'])

<div
    x-data="{ 
        show: false,
        updatePosition() {
            if (!this.show) return;
            const trigger = this.$refs.trigger.getBoundingClientRect();
            const tooltip = this.$refs.tooltip.getBoundingClientRect();
            
            let top, left;
            if ('{{ $position }}' === 'top') {
                top = trigger.top - tooltip.height - 8;
                left = trigger.left + (trigger.width / 2) - (tooltip.width / 2);
            } else if ('{{ $position }}' === 'bottom') {
                top = trigger.bottom + 8;
                left = trigger.left + (trigger.width / 2) - (tooltip.width / 2);
            } else if ('{{ $position }}' === 'left') {
                top = trigger.top + (trigger.height / 2) - (tooltip.height / 2);
                left = window.__direction === 'rtl' ? trigger.right + 8 : trigger.left - tooltip.width - 8;
            } else {
                top = trigger.top + (trigger.height / 2) - (tooltip.height / 2);
                left = window.__direction === 'rtl' ? trigger.left - tooltip.width - 8 : trigger.right + 8;
            }
            
            if (left < 8) left = 8;
            if (top < 8) top = 8;
            if (left + tooltip.width > window.innerWidth - 8) left = window.innerWidth - tooltip.width - 8;
            if (top + tooltip.height > window.innerHeight - 8) top = window.innerHeight - tooltip.height - 8;

            this.$refs.tooltip.style.top = top + 'px';
            this.$refs.tooltip.style.left = left + 'px';
        }
    }"
    @mouseenter="show = true; $nextTick(() => updatePosition())"
    @mouseleave="show = false"
    @focus="show = true; $nextTick(() => updatePosition())"
    @blur="show = false"
    @scroll.window="updatePosition()"
    @resize.window="updatePosition()"
    x-ref="trigger"
    {{ $attributes->merge(['class' => 'relative inline-flex']) }}>

    {{ $slot }}

    <template x-teleport="body">
        <div
            x-ref="tooltip"
            x-cloak
            x-show="show"
            x-transition:enter="transition-opacity duration-150"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="transition-opacity duration-100"
            x-transition:leave-end="opacity-0"
            role="tooltip"
            @mouseenter="show = true"
            @mouseleave="show = false"
            class="fixed z-[100]
                   w-max max-w-xs max-h-64 overflow-y-auto whitespace-normal break-words rounded-lg bg-surface-900 dark:bg-surface-100
                   px-3 py-2 text-xs font-medium text-white dark:text-surface-900
                   shadow-lg custom-scrollbar">
            {{ $text }}
        </div>
    </template>
</div>