공간·멀티모달 인터페이스

// tokens/spatial.ts
export const spatialTokens = {
  depth: {
    near: '0.5m',       // 오버레이, 툴팁
    default: '1.0m',    // 주요 콘텐츠 기본 배치
    far: '2.0m',        // 배경 정보, 보조 패널
    overlay: '0.3m',    // 밀착 오버레이 (알림 등)
  },
  volume: {
    small: { width: '0.3m', height: '0.3m', depth: '0.05m' },   // 위젯
    medium: { width: '0.6m', height: '0.4m', depth: '0.05m' },  // 패널
    large: { width: '1.0m', height: '0.6m', depth: '0.1m' },    // 앱 윈도우
    immersive: { width: '2.0m', height: '1.2m', depth: '0.2m' },
  },
  spatialLayout: {
    anchor: {
      wall: { surface: 'wall', offset: '0.02m' },
      table: { surface: 'table', offset: '0.01m' },
      floating: { surface: 'none', offset: '0m' },
    },
    gazeBias: '-5deg',        // 시선보다 약간 아래 (인체공학 최적)
    minTargetSize: '60px',    // 최소 상호작용 영역
  },
} as const

// tokens/voice.ts
export const voiceTokens = {
  feedback: {
    confirmation: { tone: 'positive', duration: 'short', haptic: 'light' },
    error: { tone: 'alert', duration: 'medium', haptic: 'strong' },
    processing: { tone: 'neutral', duration: 'loop', haptic: 'none' },
    waiting: { tone: 'subtle', duration: 'short', haptic: 'none' },
  },
  timing: {
    listenTimeout: '5000ms',     // 음성 입력 대기
    responseDelay: '200ms',      // 응답 전 최소 지연
    interruptWindow: '500ms',    // 끼어들기 허용 구간
    sessionTimeout: '30000ms',   // 대화 세션 유지
  },
  personality: {
    tone: 'professional-friendly',
    verbosity: 'concise',
    confirmationLevel: 'destructive-only',
  },
} as const

// components/voice-feedback.tsx
interface VoiceFeedbackProps {
  state: 'idle' | 'listening' | 'processing' | 'responding' | 'error'
}

/**
 * 음성 상태를 시각적으로 표현하는 컴포넌트
 * @ai-hint 음성 인터랙션 시 시각 피드백 필수 제공
 */
export function VoiceFeedback({ state }: VoiceFeedbackProps) {
  const visualMap = {
    idle: { icon: 'mic', color: '{colors.muted}', animation: 'none' },
    listening: { icon: 'mic-active', color: '{colors.primary}', animation: 'pulse' },
    processing: { icon: 'loader', color: '{colors.primary}', animation: 'spin' },
    responding: { icon: 'speaker', color: '{colors.success}', animation: 'wave' },
    error: { icon: 'mic-off', color: '{colors.destructive}', animation: 'shake' },
  }
  return <FeedbackIndicator {...visualMap[state]} />
}

// lib/modality-resolver.ts
type Modality = 'spatial' | 'voice' | 'touch' | 'text'

interface ModalityCapabilities {
  spatial: boolean   // WebXR / visionOS 지원 여부
  voice: boolean     // 마이크 접근 + 저소음 환경
  touch: boolean     // 터치스크린 존재
  text: boolean      // 항상 true (최종 폴백)
}

/** 폴백 체인: spatial → voice → touch → text */
export function resolveModality(
  capabilities: ModalityCapabilities,
  preference?: Modality
): Modality {
  if (preference && capabilities[preference]) return preference
  const chain: Modality[] = ['spatial', 'voice', 'touch', 'text']
  return chain.find((m) => capabilities[m]) ?? 'text'
}

// components/adaptive-button.tsx
interface AdaptiveButtonSpec {
  label: string
  action: () => void
  variant: 'primary' | 'secondary' | 'destructive'
  voiceAlias?: string[]
  gestureType?: 'tap' | 'pinch' | 'grab'
}

/**
 * 모달리티에 따라 자동으로 렌더링 방식 결정
 * - screen → Button, voice → VoiceCommand, spatial → SpatialButton
 */
export function AdaptiveButton(spec: AdaptiveButtonSpec) {
  const modality = useModality()

  switch (modality) {
    case 'spatial':
      return (
        <SpatialButton
          label={spec.label}
          onGesture={spec.gestureType ?? 'tap'}
          onActivate={spec.action}
          depth={spatialTokens.depth.default}
        />
      )
    case 'voice':
      return (
        <VoiceCommand
          trigger={[spec.label, ...(spec.voiceAlias ?? [])]}
          onActivate={spec.action}
          visualHint={<Button variant={spec.variant}>{spec.label}</Button>}
        />
      )
    default:
      return (
        <Button variant={spec.variant} onClick={spec.action}>
          {spec.label}
        </Button>
      )
  }
}