/* =====================================================================
   AuraLayer — 내담자 뒤 호흡하는 광배(aura)
   §4.4: 광배 펄스 opacity ±0.04~0.08, 5~6s. speaking 때만 오디오 동기(미세).
   §4.5: 정서별 색조(세이지/청회색/차가운 청/중립 회색).
   transform/opacity 만 애니메이션. radial-gradient 로 은은하게.

   ── Rive 2차 교체 지점 ── 광배는 SVG/CSS 로 유지해도 무방(배경 레이어).
   ===================================================================== */

import type { AvatarState } from "./persona";

interface AuraLayerProps {
  /** 광배 색조 (CSS 색) */
  hue: string;
  /** 기본 opacity */
  opacity: number;
  /** 채도 가중(연령대 생기) */
  saturation: number;
  state: AvatarState;
  /** speaking 시 입 열림(0~1) — 광배 미세 약동 동기 */
  mouth: number;
  /** reduced-motion 이면 펄스 정지 */
  reduced: boolean;
}

export function AuraLayer({ hue, opacity, saturation, state, mouth, reduced }: AuraLayerProps) {
  // speaking 일 때만 입 열림에 미세 동기(0.04~0.12 범위 추가). 그 외엔 CSS 호흡 펄스.
  const speakBoost = state === "speaking" ? mouth * 0.06 : 0;
  const finalOpacity = Math.min(0.16, (opacity + speakBoost) * saturation);

  return (
    <span
      className={"vg-avatar__aura" + (reduced ? " is-reduced" : "")}
      aria-hidden="true"
      style={{
        // 색 면적은 작게(68% 안쪽에서 사라짐) — 산만 방지
        background: `radial-gradient(circle, color-mix(in srgb, ${hue} ${Math.round(
          finalOpacity * 100,
        )}%, transparent) 0%, transparent 68%)`,
        // speaking 일 때 호흡 펄스를 살짝 빠르게(발화 리듬감)
        animationDuration: state === "speaking" ? "5s" : "6s",
      }}
    />
  );
}