<script lang="ts" setup>
import { computed } from 'vue'

interface Props {
  label: string
  value: number
  color?: string
  size?: number
}

const props = withDefaults(defineProps<Props>(), {
  color: 'primary',
  size: 120,
})

const radius = computed<number>(() => (props.size - 12) / 2)
const circumference = computed<number>(() => 2 * Math.PI * radius.value)
const offset = computed<number>(() => {
  const clamped = Math.max(0, Math.min(100, props.value))
  return circumference.value - (clamped / 100) * circumference.value
})
const center = computed<number>(() => props.size / 2)

const gaugeColor = computed<string>(() => {
  if (props.value >= 90) return 'error'
  if (props.value >= 70) return 'warning'
  return props.color
})
</script>

<template>
  <div class="resource-gauge text-center">
    <svg :width="size" :height="size" class="gauge-svg">
      <!-- Background circle -->
      <circle
        :cx="center"
        :cy="center"
        :r="radius"
        fill="none"
        stroke="rgba(var(--v-border-color), 0.2)"
        stroke-width="8"
      />
      <!-- Progress circle -->
      <circle
        :cx="center"
        :cy="center"
        :r="radius"
        fill="none"
        :stroke="`rgb(var(--v-theme-${gaugeColor}))`"
        stroke-width="8"
        stroke-linecap="round"
        :stroke-dasharray="circumference"
        :stroke-dashoffset="offset"
        class="gauge-progress"
        transform="rotate(-90)"
        :transform-origin="`${center} ${center}`"
      />
      <!-- Value text -->
      <text
        :x="center"
        :y="center - 4"
        text-anchor="middle"
        dominant-baseline="middle"
        class="gauge-value"
        :fill="`rgb(var(--v-theme-on-surface))`"
      >
        {{ Math.round(value) }}%
      </text>
      <text
        :x="center"
        :y="center + 16"
        text-anchor="middle"
        dominant-baseline="middle"
        class="gauge-label"
        fill="rgba(var(--v-theme-on-surface), 0.6)"
      >
        {{ label }}
      </text>
    </svg>
  </div>
</template>

<style scoped>
.gauge-progress {
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.gauge-value {
  font-size: 1.25rem;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.gauge-label {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
</style>
