<template>
    <div class="h-64">
        <Doughnut
            v-if="hasData"
            :data="chartData"
            :options="options"
        />
        <p v-else class="flex h-full items-center justify-center text-sm text-neutral-400">
            {{ emptyMessage ?? $t('reporting.empty') }}
        </p>
    </div>
</template>

<script setup lang="ts">
import { Doughnut } from 'vue-chartjs'

const props = defineProps<{
    labels: string[]
    values: number[]
    colors?: string[]
    emptyMessage?: string
}>()

const palette = [
    '#6366f1', '#10b981', '#f59e0b', '#ef4444', '#3b82f6',
    '#8b5cf6', '#ec4899', '#14b8a6', '#f97316', '#84cc16',
]

const hasData = computed(() => props.values.some(v => v > 0))

const chartData = computed(() => ({
    labels: props.labels,
    datasets: [{
        data: props.values,
        backgroundColor: props.colors ?? props.labels.map((_, i) => palette[i % palette.length]),
        borderWidth: 0,
    }],
}))

const options = {
    responsive: true,
    maintainAspectRatio: false,
    cutout: '65%',
    plugins: {
        legend: {
            position: 'bottom' as const,
            labels: {
                padding: 16,
                usePointStyle: true,
                pointStyle: 'circle',
                font: { size: 12 },
            },
        },
    },
}
</script>
