<script setup>
import { computed } from 'vue';

const props = defineProps({
    value: { type: Number, default: 0 }, // 0–100
    label: { type: String, default: null } // Пользовательский лейбл
});

const clampedValue = computed(() => Math.min(100, Math.max(0, Math.round(props.value))));
const ARC_LENGTH = Math.PI * 80; // ≈ 251.3
const trackPath = 'M 20 100 A 80 80 0 0 1 180 100';

const arcDash = computed(() => {
    const filled = (clampedValue.value / 100) * ARC_LENGTH;
    return `${filled} ${ARC_LENGTH}`;
});

const arcColor = computed(() => {
    const v = clampedValue.value;
    if (v >= 70) return '#EF4444';
    if (v >= 40) return '#F97316';
    return '#22C55E';
});

const displayLabel = computed(() => {
    if (props.label) return props.label;
    const v = clampedValue.value;
    if (v >= 70) return 'Высокая интенсивность';
    if (v >= 40) return 'Средняя интенсивность';
    return 'Низкая интенсивность';
});
</script>

<template>
    <div class="flex flex-col items-center">
        <svg viewBox="0 0 200 130" class="w-56 h-36">
            <!-- Background arc (track) -->
            <path :d="trackPath" fill="none" stroke="#E5E7EB" stroke-width="18" stroke-linecap="round" class="dark:stroke-surface-700" />
            <!-- Colored fill arc -->
            <path :d="trackPath" fill="none" :stroke="arcColor" stroke-width="18" stroke-linecap="round" :stroke-dasharray="arcDash" stroke-dashoffset="0" style="transition: stroke-dasharray 0.9s ease" />
            <!-- Center value -->
            <text x="100" y="105" text-anchor="middle" font-size="28" font-weight="800" :fill="arcColor">{{ clampedValue }}</text>
            <text x="100" y="122" text-anchor="middle" font-size="10" fill="#9CA3AF">из 100</text>
            <!-- Min / Max labels -->
            <text x="22" y="118" text-anchor="middle" font-size="9" fill="#9CA3AF">0</text>
            <text x="178" y="118" text-anchor="middle" font-size="9" fill="#9CA3AF">100</text>
        </svg>
        <p v-if="displayLabel" class="mt-1 text-xs font-semibold uppercase tracking-widest" :style="{ color: arcColor }">
            {{ displayLabel }}
        </p>
    </div>
</template>
