@props(['hint'])

<div class="relative" x-cloak x-data="{
    showTooltip: false,
    tooltipPinned: false,
    isHoveringTooltip: false
}"
    @click.away="if (tooltipPinned) { tooltipPinned = false; showTooltip = false }">
    <button type="button" @mouseenter="if (!tooltipPinned) showTooltip = true"
        @mouseleave="if (!tooltipPinned) { setTimeout(() => { if (!isHoveringTooltip) showTooltip = false }, 100) }"
        @click.stop="
            if (tooltipPinned) {
                tooltipPinned = false;
                showTooltip = false;
            } else {
                tooltipPinned = true;
                showTooltip = true;
            }
        "
        aria-label="Show help information" tabindex="0"
        class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400 rounded-full p-1 transition-colors duration-200 hover:bg-blue-50 dark:hover:bg-blue-900 relative">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd"
                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
                clip-rule="evenodd" />
        </svg>
    </button>

    <div x-show="showTooltip" @mouseenter="isHoveringTooltip = true"
        @mouseleave="isHoveringTooltip = false; if (!tooltipPinned) showTooltip = false"
        x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
        class="fixed top-auto bottom-auto right-10 left-auto w-72 p-4 mt-1 text-sm text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 z-[99999]"
        style="max-width: 90vw;" role="tooltip" tabindex="-1">
        <div class="absolute right-2 top-2 flex space-x-2">
            <button @click.stop="tooltipPinned = false; showTooltip = false"
                class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 rounded"
                aria-label="Close tooltip">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        <div class="flex items-start">
            <svg xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 mr-2 text-blue-600 dark:text-blue-300 flex-shrink-0 mt-0.5" fill="none"
                viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <div class="text-justify">{{ $hint }}</div>
        </div>
    </div>
</div>