'use client'

// src/renderer/components/ds/StatRing.tsx
// v2 신규: 컬러 그라디언트 링 아이콘 — 스탯 타일의 원형 링 (레퍼런스 4타일 패턴)

import { Box } from '@mui/material'
import { d3roPalette } from '../../theme'

type RingColor = 'blue' | 'purple' | 'green' | 'orange' | 'red' | 'accent'

const RING_COLORS: Record<RingColor, { from: string; to: string; glow: string; icon: string }> = {
  blue:   { from: 'var(--d3-gradient-wave1)', to: 'var(--d3-gradient-wave2)', glow: d3roPalette.tag.blueBg, icon: d3roPalette.tag.blue },
  purple: { from: 'var(--d3-gradient-wave3)', to: 'var(--d3-gradient-wave4)', glow: d3roPalette.tag.purpleBg, icon: d3roPalette.tag.purple },
  green:  { from: d3roPalette.tag.green, to: d3roPalette.tag.green, glow: d3roPalette.tag.greenGlow, icon: d3roPalette.tag.green },
  orange: { from: d3roPalette.tag.orange, to: d3roPalette.tag.orange, glow: d3roPalette.tag.orangeGlow, icon: d3roPalette.tag.orange },
  red:    { from: d3roPalette.tag.red, to: d3roPalette.tag.red, glow: d3roPalette.tag.redGlow, icon: d3roPalette.tag.red },
  accent: { from: 'var(--d3-accent-light)', to: 'var(--d3-accent-dark)', glow: 'var(--d3-accent-dim)', icon: d3roPalette.accent.light },
}

interface StatRingProps {
  /** 링 색 (기본 blue) */
  color?: RingColor
  /** 외경 px (기본 56) */
  size?: number
  /** 링 두께 px (기본 2) */
  thickness?: number
  /** 중앙 아이콘/콘텐츠 */
  children?: React.ReactNode
}

export function StatRing({
  color = 'blue',
  size = 56,
  thickness = 2,
  children,
}: StatRingProps): React.ReactElement {
  const c = RING_COLORS[color]
  return (
    <Box
      sx={{
        width: size,
        height: size,
        borderRadius: '50%',
        p: `${thickness}px`,
        background: `conic-gradient(from 210deg, ${c.from}, ${c.to}, ${c.from})`,
        boxShadow: `0 0 ${size / 3.5}px ${c.glow}`,
        flexShrink: 0,
      }}
    >
      <Box
        sx={{
          width: '100%',
          height: '100%',
          borderRadius: '50%',
          bgcolor: d3roPalette.bg.crtGlass,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: c.icon,
        }}
      >
        {children}
      </Box>
    </Box>
  )
}