// 打卡日历的日期标记: 环形进度 (F-CL-06)
//
// 为什么是环而不是圆点:
//   旧实现是 4px 小圆点, 只按状态上色 —— 3/5 和 5/5 都是同一个绿点,
//   看不出"当天做到几成"。改成环形后 **弧长 = 当天完成比例**, 颜色仍表状态:
//     0 < actual < expected -> 弧长按比例 (部分完成 / 半填充)
//     actual >= expected    -> 整圈        (全部完成 / 实心)
//     actual = 0 且 expected > 0 -> 只有底环 (未开始 / 空心)
//   expected = 0 由父组件判断, 不渲染本组件 (当天没有应打卡项)
//
// 颜色不写在这里: 由 CSS 按 `.mv-day` 作用域上色 (各视图调色板可能不同)。
const DEFAULT_SIZE = 30
const DEFAULT_STROKE = 2.5

export default function DayRing({
  status = 'partial',
  ratio = 0,
  size = DEFAULT_SIZE,
  stroke = DEFAULT_STROKE,
}) {
  const p = Math.max(0, Math.min(1, Number(ratio) || 0))
  const r = (size - stroke) / 2
  const c = 2 * Math.PI * r
  const half = size / 2
  return (
    <svg
      className="day-ring"
      width={size}
      height={size}
      viewBox={`0 0 ${size} ${size}`}
      aria-hidden="true"
    >
      <circle
        className="day-ring-bg"
        cx={half} cy={half} r={r}
        fill="none" strokeWidth={stroke}
      />
      {p > 0 && (
        <circle
          className={'day-ring-bar ' + status}
          cx={half} cy={half} r={r}
          fill="none" strokeWidth={stroke}
          strokeDasharray={c}
          strokeDashoffset={c * (1 - p)}
          transform={`rotate(-90 ${half} ${half})`}
        />
      )}
    </svg>
  )
}