<script setup lang="ts">
/**
 * <Progress :value="68" />                      // linear bar
 * <Progress :value="68" color="green" label />  // with % label
 * <Progress :value="90" ring :size="86" color="pink">{{ v }}%</Progress>  // ring/donut
 *
 * Covers both the dashboard "track + fill" bar and the conic-gradient ring/donut
 * that views previously hand-rolled. Animates fill on value change; the ring
 * center is a free-form slot.
 */
defineOptions({ name: 'BglProgress' })
import type { ThemeType } from '@bagelink/vue'
import { computed } from 'vue'

const props = withDefaults(defineProps<{
	/** 0–100. */
	value?: number
	color?: ThemeType
	/** Render as a circular ring/donut instead of a bar. */
	ring?: boolean
	/** Bar thickness (px) or ring diameter (px). */
	size?: number
	/** Ring stroke width (px). Ignored for bars. */
	thickness?: number
	/** Show a trailing % label (bar only, when no default slot). */
	label?: boolean
}>(), { value: 0, color: 'primary', size: undefined, thickness: 9 })

const pct = computed(() => Math.max(0, Math.min(100, props.value)))
const accent = computed(() => `var(--bgl-${props.color})`)
const ringSize = computed(() => props.size ?? 86)
const barHeight = computed(() => props.size ?? 8)
</script>

<template>
	<!-- RING / DONUT -->
	<div
		v-if="ring"
		class="bgl-progress-ring grid place-items-center"
		:style="{
			width: `${ringSize}px`,
			height: `${ringSize}px`,
			'--bgl-progress-pct': `${pct}`,
			background: `conic-gradient(${accent} calc(var(--bgl-progress-pct) * 1%), var(--bgl-progress-track, var(--bgl-border-color)) 0)`,
		}"
	>
		<div
			class="bgl-progress-ring-hole grid place-items-center txt-center"
			:style="{ width: `calc(100% - ${thickness * 2}px)`, height: `calc(100% - ${thickness * 2}px)` }"
		>
			<slot />
		</div>
	</div>

	<!-- LINEAR BAR -->
	<div v-else class="flex gap-075 align-items-center">
		<div class="bgl-progress-track flex-grow" :style="{ height: `${barHeight}px` }">
			<div class="bgl-progress-fill" :style="{ width: `${pct}%`, background: accent }" />
		</div>
		<span v-if="label && !$slots.default" class="txt12 opacity-6 bgl-progress-label">{{ Math.round(pct) }}%</span>
		<slot />
	</div>
</template>

<style scoped>
.bgl-progress-ring { border-radius: 50%; }
.bgl-progress-ring-hole { border-radius: 50%; background: var(--bgl-box-bg); }

.bgl-progress-track {
	border-radius: 100px;
	background: var(--bgl-progress-track, var(--bgl-border-color));
	overflow: hidden;
}
.bgl-progress-fill {
	height: 100%;
	border-radius: 100px;
	transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.bgl-progress-label { font-variant-numeric: tabular-nums; min-width: 2.5em; text-align: end; }
</style>
