/**
 * AWOOOI 動畫系統
 * ==========================
 * Phase 19.A - Terminal Animation System
 *
 * 設計原則:
 * 1. 支援 prefers-reduced-motion
 * 2. 統一動畫時長與緩動函數
 * 3. Terminal 特有的打字機 / 思考中效果
 *
 * @see ADR-031 Omni-Terminal SSE Architecture
 * @see docs/meetings/2026-03-27-phase19-omni-terminal-brainstorm.md
 *
 * @author Claude Code (首席架構師)
 * @version 1.0.0
 * @date 2026-03-28 (台北時間)
 */

// =============================================================================
// 動畫時長 (Duration)
// =============================================================================

export const DURATION = {
  /** 超快速 - 微交互 */
  INSTANT: 100,
  /** 快速 - 按鈕、hover */
  FAST: 150,
  /** 標準 - 面板切換 */
  NORMAL: 200,
  /** 中等 - 模態彈窗 */
  MEDIUM: 300,
  /** 慢速 - 大型動畫 */
  SLOW: 500,
  /** Terminal 開啟 */
  TERMINAL_OPEN: 250,
  /** Terminal 關閉 */
  TERMINAL_CLOSE: 200,
  /** 打字游標閃爍 */
  TYPING_CURSOR: 530,
  /** AI 思考點點 */
  THINKING_DOT: 400,
} as const

// =============================================================================
// 緩動函數 (Easing)
// =============================================================================

export const EASING = {
  /** 線性 */
  LINEAR: 'linear',
  /** 標準進出 */
  EASE: 'ease',
  /** 進入 (減速) */
  EASE_OUT: 'ease-out',
  /** 離開 (加速) */
  EASE_IN: 'ease-in',
  /** 進出 (兩端減速) */
  EASE_IN_OUT: 'ease-in-out',
  /** 彈性進入 - 用於 Terminal 開啟 */
  SPRING: 'cubic-bezier(0.16, 1, 0.3, 1)',
  /** 銳利進入 */
  SHARP: 'cubic-bezier(0.4, 0, 0.2, 1)',
  /** 平滑進出 */
  SMOOTH: 'cubic-bezier(0.4, 0, 0.6, 1)',
} as const

// =============================================================================
// Keyframe 動畫名稱
// =============================================================================

export const ANIMATION = {
  // Terminal 相關
  /** Terminal 開啟動畫 */
  TERMINAL_OPEN: 'terminal-open',
  /** Terminal 關閉動畫 */
  TERMINAL_CLOSE: 'terminal-close',
  /** 打字游標閃爍 */
  TYPING_CURSOR: 'typing-cursor',
  /** AI 思考中 (三點) */
  THINKING_DOT: 'thinking-dot',
  /** 訊息滑入 */
  MESSAGE_SLIDE_IN: 'message-slide-in',
  /** SSE 串流文字 */
  STREAM_CHAR: 'stream-char',

  // 通用
  /** 淡入 */
  FADE_IN: 'fade-in',
  /** 淡出 */
  FADE_OUT: 'fade-out',
  /** 脈搏呼吸 */
  BREATHE: 'breathe',
  /** 脈搏 (慢) */
  PULSE_SLOW: 'pulse-slow',
  /** 掃描線 */
  SCAN: 'scan',
  /** 微光 */
  SHIMMER: 'shimmer',
} as const

// =============================================================================
// Tailwind Animation 類名
// =============================================================================

export const TAILWIND_ANIMATION = {
  /** Terminal 開啟 */
  terminalOpen: 'animate-terminal-open',
  /** Terminal 關閉 */
  terminalClose: 'animate-terminal-close',
  /** 打字游標 */
  typingCursor: 'animate-typing-cursor',
  /** 思考點點 */
  thinkingDot: 'animate-thinking-dot',
  /** 訊息滑入 */
  messageSlideIn: 'animate-message-slide-in',
  /** SSE 字元 */
  streamChar: 'animate-stream-char',
  /** 淡入 */
  fadeIn: 'animate-fade-in',
  /** 呼吸 */
  breathe: 'animate-breathe',
  /** 脈搏慢 */
  pulseSlow: 'animate-pulse-slow',
} as const

// =============================================================================
// Keyframes 定義 (用於 tailwind.config.ts)
// =============================================================================

export const KEYFRAMES = {
  // Terminal 開啟: 從下方滑入 + 淡入
  'terminal-open': {
    '0%': {
      opacity: '0',
      transform: 'translateY(20px) scale(0.98)',
    },
    '100%': {
      opacity: '1',
      transform: 'translateY(0) scale(1)',
    },
  },

  // Terminal 關閉: 向下滑出 + 淡出
  'terminal-close': {
    '0%': {
      opacity: '1',
      transform: 'translateY(0) scale(1)',
    },
    '100%': {
      opacity: '0',
      transform: 'translateY(20px) scale(0.98)',
    },
  },

  // 打字游標閃爍
  'typing-cursor': {
    '0%, 100%': { opacity: '1' },
    '50%': { opacity: '0' },
  },

  // AI 思考中 (用於 ... 三點)
  'thinking-dot': {
    '0%, 80%, 100%': {
      opacity: '0.3',
      transform: 'scale(0.8)',
    },
    '40%': {
      opacity: '1',
      transform: 'scale(1)',
    },
  },

  // 訊息滑入
  'message-slide-in': {
    '0%': {
      opacity: '0',
      transform: 'translateX(-10px)',
    },
    '100%': {
      opacity: '1',
      transform: 'translateX(0)',
    },
  },

  // SSE 串流字元出現
  'stream-char': {
    '0%': {
      opacity: '0',
      transform: 'translateY(2px)',
    },
    '100%': {
      opacity: '1',
      transform: 'translateY(0)',
    },
  },
} as const

// =============================================================================
// Animation 定義 (用於 tailwind.config.ts)
// =============================================================================

export const ANIMATIONS = {
  'terminal-open': `terminal-open ${DURATION.TERMINAL_OPEN}ms ${EASING.SPRING}`,
  'terminal-close': `terminal-close ${DURATION.TERMINAL_CLOSE}ms ${EASING.EASE_OUT}`,
  'typing-cursor': `typing-cursor ${DURATION.TYPING_CURSOR}ms ${EASING.EASE_IN_OUT} infinite`,
  'thinking-dot': `thinking-dot ${DURATION.THINKING_DOT * 3}ms ${EASING.EASE_IN_OUT} infinite`,
  'message-slide-in': `message-slide-in ${DURATION.NORMAL}ms ${EASING.SPRING}`,
  'stream-char': `stream-char ${DURATION.INSTANT}ms ${EASING.EASE_OUT}`,
} as const

// =============================================================================
// CSS Custom Properties (用於 JS 動態控制)
// =============================================================================

export const CSS_VARS = {
  /** 動畫時長 */
  DURATION: '--animation-duration',
  /** 動畫延遲 */
  DELAY: '--animation-delay',
  /** 緩動函數 */
  EASING: '--animation-easing',
} as const

/**
 * 取得 CSS 動畫樣式
 * @example getAnimationStyle('terminal-open') // { animation: 'terminal-open 250ms cubic-bezier(...)' }
 */
export function getAnimationStyle(name: keyof typeof ANIMATIONS): { animation: string } {
  return { animation: ANIMATIONS[name] }
}

/**
 * 取得延遲動畫樣式 (用於 stagger 效果)
 * @example getStaggerStyle(2, 50) // { animationDelay: '100ms' }
 */
export function getStaggerStyle(index: number, delayMs: number = 50): { animationDelay: string } {
  return { animationDelay: `${index * delayMs}ms` }
}
