d3ro-voice/src/renderer/components/ds/MetalDial.tsx

// src/renderer/components/ds/MetalDial.tsx
// 시안 A: 메탈 다이얼 — 정밀기기 회전 노브, 동심원 그루브, 금속 광택, LED 인디케이터
// 보강: 레퍼런스의 conic-gradient 정적 라이팅 + 방향성 그림자 추가

import { Box } from '@mui/material'
import { d3roPalette, d3roFontMono, d3roTypo, d3roShadow } from '../../theme'
import { PhosphorText } from './PhosphorText'

interface MetalDialProps {
  /** 0.0 ~ 1.0 값 (다이얼 위치) */
  value?: number
  /** 라벨 텍스트 */
  label?: string
  /** 크기 (px) */
  size?: number
  /** LED 인디케이터 색상 */
  ledColor?: string
}

export function MetalDial({
  value = 0,
  label,
  size = 120,
  ledColor = d3roPalette.accent.amber,
}: MetalDialProps): React.ReactElement {
  const rotation = value * 270 - 135 // -135° ~ +135° 범위
  const knobSize = size - 12 // 웰 패딩

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1.5 }}>
      {/* 다이얼 웰 (inset well) */}
      <Box
        sx={{
          width: size,
          height: size,
          borderRadius: '50%',
          bgcolor: d3roPalette.bg.crtBezel,
          boxShadow: `
            inset 0 3px 8px rgba(0,0,0,0.8),
            inset 0 -1px 2px rgba(255,255,255,0.08),
            0 1px 1px rgba(255,255,255,0.05)
          `,
          position: 'relative',
          p: '6px',
        }}
      >
        {/* 노브 회전체 (동심원 그루브) */}
        <Box
          sx={{
            width: knobSize,
            height: knobSize,
            borderRadius: '50%',
            position: 'absolute',
            top: 6,
            left: 6,
            background: `
              repeating-radial-gradient(
                circle at 50% 50%,
                #e6e7e9 0px,
                #e6e7e9 1px,
                #b0b2b5 1.5px,
                #b0b2b5 2.5px
              )
            `,
            transform: `rotate(${rotation}deg)`,
            transition: 'transform 0.2s ease-out',
          }}
        >
          {/* 포인터 인디케이터 점 */}
          <Box
            sx={{
              position: 'absolute',
              top: 10,
              left: '50%',
              transform: 'translateX(-50%)',
              width: 8,
              height: 8,
              borderRadius: '50%',
              bgcolor: d3roPalette.bg.crtBezel,
              boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.8)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              '&::after': {
                content: '""',
                width: 4,
                height: 4,
                borderRadius: '50%',
                bgcolor: ledColor,
              },
            }}
          />
        </Box>

        {/* 정적 금속 광택 오버레이 (노브와 별개, 회전 안 함) */}
        <Box
          sx={{
            position: 'absolute',
            inset: '6px',
            borderRadius: '50%',
            pointerEvents: 'none',
            // 레퍼런스의 핵심: directional light + conic reflections
            background: `
              linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,0.6) 100%),
              conic-gradient(from 180deg at 50% 50%,
                rgba(255,255,255,0) 0deg,
                rgba(255,255,255,0.4) 45deg,
                rgba(255,255,255,0) 90deg,
                rgba(255,255,255,0.2) 180deg,
                rgba(255,255,255,0) 270deg,
                rgba(255,255,255,0.4) 315deg,
                rgba(255,255,255,0) 360deg
              )
            `,
            mixBlendMode: 'overlay',
            // 방향성 그림자: 좌상 하이라이트 + 우하 쉐이드
            boxShadow: `
              -4px -4px 8px rgba(255,255,255,0.3),
              12px 16px 20px rgba(0,0,0,0.7),
              inset 0 2px 3px rgba(255,255,255,0.8)
            `,
          }}
        />
      </Box>

      {/* 라벨 */}
      {label && (
        <PhosphorText variant="label" sx={{ color: d3roPalette.text.inactive }}>
          {label}
        </PhosphorText>
      )}
    </Box>
  )
}