<template>
  <div class="donut-chart">
    <div class="donut-body">
      <Doughnut :data="chartData" :options="chartOptions" />
      <div class="donut-center">
        <strong>{{ centerValue }}</strong>
        <span>{{ centerLabel }}</span>
      </div>
    </div>
    <div class="donut-legend">
      <div v-for="item in items" :key="item.name" class="legend-row">
        <i :style="{ background: item.color }"></i>
        <span class="legend-name">{{ item.name }}</span>
        <span class="legend-val">{{ item.display }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Doughnut } from 'vue-chartjs'
import {
  Chart as ChartJS,
  ArcElement,
  Tooltip,
  Legend
} from 'chart.js'
import { useAnimationProgress } from '../../composables/useAnimationProgress.js'

ChartJS.register(ArcElement, Tooltip, Legend)

const props = defineProps({
  items: { type: Array, required: true },
  centerValue: { type: String, required: true },
  centerLabel: { type: String, required: true }
})

const progress = useAnimationProgress([() => props.items], 1150)

const chartData = computed(() => ({
  labels: props.items.map((i) => i.name),
  datasets: [{
    data: props.items.map((i) => Math.max(Number((i.value * progress.value).toFixed(1)), 0.001)),
    backgroundColor: props.items.map((i) => i.color),
    borderWidth: 0,
    cutout: '68%',
    spacing: 3,
    borderRadius: 4
  }]
}))

const chartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  animation: {
    animateRotate: true,
    animateScale: true,
    duration: 900,
    easing: 'easeOutQuart'
  },
  transitions: {
    active: {
      animation: {
        duration: 180
      }
    }
  },
  plugins: {
    legend: { display: false },
    tooltip: {
      backgroundColor: 'rgba(255,255,255,0.96)',
      titleColor: '#1e293b',
      bodyColor: '#64748b',
      borderColor: '#e2e8f0',
      borderWidth: 1,
      padding: 10,
      boxPadding: 4,
      cornerRadius: 6,
      usePointStyle: true,
      callbacks: {
        label: (ctx) => {
          const total = ctx.dataset.data.reduce((a, b) => a + b, 0) || 1
          const pct = ((ctx.parsed / total) * 100).toFixed(1)
          return ` ${ctx.label}: ${pct}%`
        }
      }
    }
  }
}
</script>

<style scoped>
.donut-chart {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 240px;
}

.donut-body {
  position: relative;
  width: 100%;
  height: 150px;
  margin: 0 auto;
  margin-top: 16px;
}

.donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  place-content: center;
  pointer-events: none;
  text-align: center;
  animation: donutCenterIn 620ms ease both;
  animation-delay: 360ms;
}

.donut-center strong {
  color: #1e293b;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.donut-center span {
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
}

.donut-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  animation: donutLegendIn 560ms ease both;
  animation-delay: 480ms;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-row i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: 0 0 auto;
}

.legend-name {
  color: #475569;
  font-size: 12px;
}

.legend-val {
  margin-left: auto;
  color: #94a3b8;
  font-size: 11px;
}

@keyframes donutCenterIn {
  from {
    opacity: 0;
    transform: scale(.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes donutLegendIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .donut-center,
  .donut-legend {
    animation: none;
  }
}
</style>
