<script lang="ts">
	import { getButtonStyle, parseColorText, getSegmentStyle } from "./utils";
	import type { TooltipLine } from "./types";
	import "$lib/assets/css/tui-tooltip.css";

	interface Props {
		line: TooltipLine;
	}

	let { line }: Props = $props();

	let showTooltip = $state(false);
	let triggerEl: HTMLSpanElement | undefined = $state();
	let tooltipStyle = $state("");

	const contentSegments = $derived(parseColorText(line.content));
	const position = $derived(line.tooltipPosition || "top");

	function updateTooltipPosition() {
		if (!triggerEl) return;

		const rect = triggerEl.getBoundingClientRect();
		const scrollY = window.scrollY;
		const scrollX = window.scrollX;

		let top = 0;
		let left = 0;

		switch (position) {
			case "top":
				top = rect.top + scrollY - 8;
				left = rect.left + scrollX + rect.width / 2;
				tooltipStyle = `top: ${top}px; left: ${left}px; transform: translateX(-50%) translateY(-100%);`;
				break;
			case "bottom":
				top = rect.bottom + scrollY + 8;
				left = rect.left + scrollX + rect.width / 2;
				tooltipStyle = `top: ${top}px; left: ${left}px; transform: translateX(-50%);`;
				break;
			case "left":
				top = rect.top + scrollY + rect.height / 2;
				left = rect.left + scrollX - 8;
				tooltipStyle = `top: ${top}px; left: ${left}px; transform: translateX(-100%) translateY(-50%);`;
				break;
			case "right":
				top = rect.top + scrollY + rect.height / 2;
				left = rect.right + scrollX + 8;
				tooltipStyle = `top: ${top}px; left: ${left}px; transform: translateY(-50%);`;
				break;
		}
	}

	function handleMouseEnter() {
		updateTooltipPosition();
		showTooltip = true;
	}

	function handleMouseLeave() {
		showTooltip = false;
	}
</script>

<span
	class="tui-tooltip-trigger"
	style="--tooltip-color: {getButtonStyle(line.style)}"
	bind:this={triggerEl}
	onmouseenter={handleMouseEnter}
	onmouseleave={handleMouseLeave}
	role="button"
	tabindex="0"
	onfocus={handleMouseEnter}
	onblur={handleMouseLeave}
>
	<span class="trigger-text">
		{#each contentSegments as segment}
			{#if getSegmentStyle(segment)}
				<span style={getSegmentStyle(segment)}>{segment.text}</span>
			{:else}
				{segment.text}
			{/if}
		{/each}
	</span>
	<span class="tooltip-indicator">(?)</span>
</span>

{#if showTooltip && line.tooltipText}
	<span
		class="tooltip {position}"
		style="{tooltipStyle} --tooltip-color: {getButtonStyle(line.style)}"
	>
		{line.tooltipText}
		<span class="tooltip-arrow"></span>
	</span>
{/if}

<style>
	.tui-tooltip-trigger {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 0.25rem;
		cursor: help;
	}

	.trigger-text {
		border-bottom: 1px dotted var(--tooltip-color);
	}

	.tooltip-indicator {
		font-size: 0.7rem;
		color: var(--tooltip-color);
		opacity: 0.7;
	}

	.tooltip {
		position: fixed;
		z-index: 99999;
		padding: 0.5rem 0.75rem;
		background: var(--terminal-bg);
		border: 1px solid var(--tooltip-color);
		border-radius: 4px;
		font-size: 0.8rem;
		color: var(--terminal-text);
		white-space: nowrap;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
		animation: tooltipFadeIn 0.15s ease-out;
		pointer-events: none;
	}

	@keyframes tooltipFadeIn {
		from {
			opacity: 0;
			transform: scale(0.95);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	/* Arrow styles - simplified for fixed positioning */
	.tooltip-arrow {
		position: absolute;
		width: 8px;
		height: 8px;
		background: var(--terminal-bg);
		border: 1px solid var(--tooltip-color);
		border-top: none;
		border-left: none;
	}

	.tooltip.top .tooltip-arrow {
		bottom: -5px;
		left: 50%;
		transform: translateX(-50%) rotate(45deg);
	}

	.tooltip.bottom .tooltip-arrow {
		top: -5px;
		left: 50%;
		transform: translateX(-50%) rotate(-135deg);
	}

	.tooltip.left .tooltip-arrow {
		right: -5px;
		top: 50%;
		transform: translateY(-50%) rotate(-45deg);
	}

	.tooltip.right .tooltip-arrow {
		left: -5px;
		top: 50%;
		transform: translateY(-50%) rotate(135deg);
	}
</style>
