<template>
  <div class="star-rating" :class="`star-rating--${size}`" role="img" :aria-label="ariaLabel">
    <div class="star-rating__track" aria-hidden="true">★★★★★</div>
    <div class="star-rating__fill" :style="{ width: `${fillPercent}%` }" aria-hidden="true">★★★★★</div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { scoreToStars } from './articleReadingModel'

/**
 * 还原 enspeak 的两种星级口径（`OverallReport.tsx:19` / `ArticleDetailedReport.tsx:12`）：
 * 总评用 0.5 步进（避免 88 和 96 都落到 5 星），段落卡用整星。
 * `exact` 是本组件原有的连续填充，班级面板继续用它。
 */
const props = withDefaults(defineProps<{
  score: number | null
  size?: 'xs' | 'sm' | 'md' | 'lg'
  step?: 'exact' | 'half' | 'full'
}>(), { size: 'md', step: 'exact' })

const stars = computed(() => {
  const raw = scoreToStars(props.score)
  if (props.step === 'half') return Math.round(raw * 2) / 2
  if (props.step === 'full') return Math.round(raw)
  return raw
})

const fillPercent = computed(() => (stars.value / 5) * 100)
const ariaLabel = computed(() => `${stars.value} out of 5 stars`)
</script>

<style lang="scss" scoped>
.star-rating {
  position: relative;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 1px;

  &--xs { font-size: 11px; }
  &--sm { font-size: 14px; }
  &--md { font-size: 16px; }
  &--lg { font-size: 18px; }
}

// 空星 gray-200 / 实星 amber-400，取自 enspeak StarRating（#E5E7EB / #FBBF24）
.star-rating__track {
  color: #e5e7eb;
}

// 覆盖层按比例截断，得到小数星
.star-rating__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #fbbf24;
}
</style>
