<script setup lang="ts">
/**
 * ChartTooltip — the single tooltip used by every chart (Line, Bar, Donut,
 * Funnel). Renders a label header, optional hero value, per-series rows
 * (dot · name · value), an optional total row, and an optional stats block.
 *
 * Positioned by the host via `style` (absolute left/top); the host owns
 * mouse tracking. Non-interactive (pointer-events: none).
 */
import { useI18n } from '@bagelink/vue'

export interface TipRow { name: string; color?: string; value: string }
export interface TipStat { label: string; value: string }

defineOptions({ name: 'BglChartTooltip' })

const { $t } = useI18n()

withDefaults(defineProps<{
	label?: string
	/** Big focal number (used by single-value charts like the funnel). */
	hero?: string
	rows?: TipRow[]
	total?: string | null
	stats?: TipStat[]
	/** Float above the anchor point instead of below it. */
	above?: boolean
}>(), {
	rows: () => [],
	stats: () => [],
})
</script>

<template>
	<div class="bgl-tip absolute pointer-events-none nowrap z-5 color-white line-height-13" :class="{ 'bgl-tip--above': above }">
		<p v-if="label" class="bgl-tip__label m-0">{{ label }}</p>
		<p v-if="hero" class="bgl-tip__hero m-0 tabular-nums">{{ hero }}</p>

		<p v-for="(r, i) in rows" :key="i" class="bgl-tip__row flex align-items-center m-0">
			<span v-if="r.color" class="bgl-tip__dot flex-shrink-0" :style="{ background: r.color }" />
			<span v-if="rows.length > 1" class="bgl-tip__name">{{ r.name }}</span>
			<span class="bgl-tip__val tabular-nums">{{ r.value }}</span>
		</p>

		<p v-if="total" class="bgl-tip__row bgl-tip__total flex align-items-center m-0">
			<span class="bgl-tip__name">{{ $t('charts.total') }}</span>
			<span class="bgl-tip__val tabular-nums">{{ total }}</span>
		</p>

		<div v-if="stats.length" class="bgl-tip__stats flex column">
			<p v-for="(s, i) in stats" :key="i" class="bgl-tip__row flex align-items-center m-0">
				<span class="bgl-tip__name">{{ s.label }}</span>
				<span class="bgl-tip__val tabular-nums">{{ s.value }}</span>
			</p>
		</div>
	</div>
</template>

<style scoped>
.bgl-tip {
	top: 0; transform: translateX(-50%); transform-origin: center;
	background: var(--bgl-black); border-radius: 0.5rem; padding: 0.4rem 0.6rem;
	font-size: 0.75rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); min-width: 7rem;
}
.bgl-tip--above { transform: translate(-50%, calc(-100% - 0.6rem)); }
.bgl-tip__label { margin-bottom: 0.2rem; opacity: 0.7; font-size: 0.7rem; }
.bgl-tip__hero { margin-bottom: 0.2rem; font-size: 1.05rem; font-weight: 700; }
.bgl-tip__row { gap: 0.4rem; }
.bgl-tip__dot { width: 8px; height: 8px; border-radius: 2px; }
.bgl-tip__name { opacity: 0.7; }
.bgl-tip__val { margin-inline-start: auto; font-weight: 600; }
.bgl-tip__total,
.bgl-tip__stats {
	margin-top: 0.28rem; padding-top: 0.28rem;
	border-top: 1px solid color-mix(in srgb, var(--bgl-white) 18%, transparent);
}
.bgl-tip__total .bgl-tip__name { opacity: 1; font-weight: 500; }
</style>
