<script lang="ts">
	import { portal } from '$lib/portal';

	let { text = '' } = $props<{ text: string }>();
	let visible = $state(false);
	let tooltipStyle = $state('');
	let btnEl = $state<HTMLButtonElement | undefined>();
	const tooltipId = `hint-${Math.random().toString(36).slice(2, 9)}`;

	function show() {
		if (!btnEl) return;
		visible = true;
		const rect = btnEl.getBoundingClientRect();
		const tooltipWidth = 272;
		let left = rect.left + rect.width / 2 - tooltipWidth / 2;
		if (left < 8) left = 8;
		if (left + tooltipWidth > window.innerWidth - 8) left = window.innerWidth - tooltipWidth - 8;
		tooltipStyle = `position:fixed; z-index:9999; bottom:${window.innerHeight - rect.top + 8}px; left:${left}px; width:${tooltipWidth}px;`;
	}

	function hide() {
		visible = false;
	}
</script>

<button type="button" bind:this={btnEl}
	class="hint-btn inline-flex items-center justify-center w-4 h-4 rounded-full text-[11px] font-bold leading-none
		focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)]
		transition-colors cursor-help align-middle ml-2 flex-shrink-0"
	onmouseenter={show}
	onmouseleave={hide}
	onfocus={show}
	onblur={hide}
	aria-label={text}
	aria-describedby={visible ? tooltipId : undefined}
	title={text}
	tabindex="0"
>?</button>

{#if visible}
	<div use:portal>
		<div id={tooltipId} role="tooltip" style={tooltipStyle} class="hint-tooltip">
			{text}
		</div>
	</div>
{/if}

<style>
	.hint-btn {
		border: 1px solid var(--color-border);
		background: var(--color-glass-strong);
		color: var(--color-muted-foreground);
	}
	.hint-btn:hover {
		background: var(--color-glass-elev);
		color: var(--color-foreground);
		border-color: var(--color-rule-strong);
	}
	.hint-tooltip {
		background: var(--hint-solid-bg, #131520);
		color: var(--color-foreground);
		border: 1px solid var(--color-rule-strong);
		box-shadow: var(--shadow-card), 0 12px 30px -10px rgba(0, 0, 0, 0.5);
		padding: 0.7rem 0.85rem;
		border-radius: 12px;
		font-size: 0.8125rem;
		white-space: normal;
		line-height: 1.55;
		pointer-events: none;
	}
	:global([data-theme="light"]) .hint-tooltip { --hint-solid-bg: #fafafe; }
</style>
