/**
 * theme.css 扩展动效：入场 / 装饰 / 脉冲 / 布局过渡变量与工具类
 * 事实源；由 tokens.js generateCSSVars 拼入 @tfdesign/b-end/theme.css
 */

import { MOTION_EASING_TRANSITION } from './motion-easing.js';

/** 三圆点 requesting：单圈周期；交错 delay = loop / MOTION_DOT_PULSE_STAGGER_DIVISOR */
export const MOTION_DOT_PULSE = {
  loop: '1.2s',
};

/** delay-1 = loop/8，delay-2 = 2×loop/8（原 150ms @ 1.2s 基线） */
export const MOTION_DOT_PULSE_STAGGER_DIVISOR = 8;

export const MOTION_DECOR = {
  catBlink: '3.6s',
};

export const MOTION_ENTER = {
  bubble: '240ms',
  easing: MOTION_EASING_TRANSITION,
};

/** Button loading 等行内 border spinner（小于 Icon 渐变环，周期更短） */
export const MOTION_INLINE_SPIN = {
  loop: '1s',
};

/** Token 页关键帧补充（入场 / 装饰 / 脉冲） */
export const MOTION_EXTRA_KEYFRAMES = [
  { name: 'tfds-ai-dot-bounce', usedBy: 'ChatMessage · requesting 三圆点', property: 'opacity, transform', preview: 'ai-dot-bounce', kind: 'loop', durationVar: '--motion-dot-pulse-loop' },
  {
    name: 'tfds-message-bubble-pop',
    usedBy: '气泡',
    property: 'opacity, transform',
    preview: 'message-bubble-pop',
    kind: 'enter',
    durationVar: '--motion-enter-bubble',
    directionNote: '发出 --outgoing（自右）· 收到 --incoming（自左）',
  },
  { name: 'tfds-cat-blink', usedBy: 'ChatInput · 猫头眨眼', property: 'transform', preview: 'cat-blink', kind: 'loop', durationVar: '--motion-decor-cat-blink' },
];

/** 固定语义变量 — 不参与 speed 六档，Token 页单独展示 */
export const MOTION_SEMANTIC_BINDINGS = [
  {
    runtime: '--motion-dot-pulse-loop',
    label: '三圆点 · requesting',
    value: MOTION_DOT_PULSE.loop,
    usedBy: 'ChatMessage · tfds-ai-dot-bounce',
    derived: `delay-1/2 = loop ÷ ${MOTION_DOT_PULSE_STAGGER_DIVISOR}`,
    preview: 'ai-dot-bounce',
    kind: 'loop',
    keyframe: 'tfds-ai-dot-bounce',
    easingVar: '--motion-loop-easing',
  },
  {
    runtime: '--motion-enter-bubble',
    label: '气泡入场',
    value: MOTION_ENTER.bubble,
    usedBy: '气泡 · tfds-message-bubble-pop',
    derived: '方向 --outgoing 自右 · --incoming 自左',
    preview: 'message-bubble-pop',
    kind: 'enter',
    keyframe: 'tfds-message-bubble-pop',
    easingVar: '--motion-transition-easing',
  },
  {
    runtime: '--motion-decor-cat-blink',
    label: '猫头眨眼周期',
    value: MOTION_DECOR.catBlink,
    usedBy: 'ChatInput · tfds-cat-blink',
    preview: 'cat-blink',
    kind: 'loop',
    keyframe: 'tfds-cat-blink',
    easingVar: '--motion-loop-easing',
  },
  {
    runtime: '--motion-inline-spin-loop',
    label: 'Button 行内 spinner',
    value: MOTION_INLINE_SPIN.loop,
    usedBy: 'Button loading · tfds-inline-spin（不随 speed 档）',
    preview: 'inline-spin',
    kind: 'loop',
    keyframe: 'tfds-icon-rotate',
    easingVar: 'linear',
  },
];

/** @theme 内额外 CSS 变量行（拼在 motion 区块） */
export function buildMotionExtraCssVarLines() {
  return [
    `  --motion-dot-pulse-loop: ${MOTION_DOT_PULSE.loop};`,
    `  --motion-decor-cat-blink: ${MOTION_DECOR.catBlink};`,
    `  --motion-enter-bubble: ${MOTION_ENTER.bubble};`,
    `  --motion-inline-spin-loop: ${MOTION_INLINE_SPIN.loop};`,
  ];
}

/** theme.css 工具类与 @keyframes（接在 TextShimmer 块之后） */
export function buildMotionUtilityCssLines() {
  const lines = [];

  lines.push('');
  lines.push('/* ── ChatMessage · requesting 三圆点 ── */');
  lines.push('@keyframes tfds-ai-dot-bounce {');
  lines.push('  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }');
  lines.push('  40% { opacity: 1; transform: translateY(-2px); }');
  lines.push('}');
  lines.push('.tfds-ai-dot-bounce {');
  lines.push('  animation: tfds-ai-dot-bounce var(--motion-dot-pulse-loop) var(--motion-loop-easing) infinite;');
  lines.push('}');
  lines.push(`.tfds-ai-dot-bounce--delay-1 { animation-delay: calc(var(--motion-dot-pulse-loop) / ${MOTION_DOT_PULSE_STAGGER_DIVISOR}); }`);
  lines.push(`.tfds-ai-dot-bounce--delay-2 { animation-delay: calc(2 * var(--motion-dot-pulse-loop) / ${MOTION_DOT_PULSE_STAGGER_DIVISOR}); }`);

  lines.push('');
  lines.push('/* ── 气泡入场（主动挂载的新消息 · ChatMessage / ChatBubble / IM）── */');
  lines.push('@keyframes tfds-message-bubble-pop {');
  lines.push('  0% { opacity: 0; transform: translate(var(--tfds-bubble-pop-x, 28px), -8px) scale(0.98); }');
  lines.push('  100% { opacity: 1; transform: translate(0, 0) scale(1); }');
  lines.push('}');
  lines.push('.tfds-message-bubble-pop {');
  lines.push('  animation: tfds-message-bubble-pop var(--motion-enter-bubble) var(--motion-transition-easing) both;');
  lines.push('}');
  lines.push('.tfds-message-bubble-pop--outgoing {');
  lines.push('  transform-origin: right center;');
  lines.push('  --tfds-bubble-pop-x: 28px;');
  lines.push('}');
  lines.push('.tfds-message-bubble-pop--incoming {');
  lines.push('  transform-origin: left center;');
  lines.push('  --tfds-bubble-pop-x: -28px;');
  lines.push('}');

  lines.push('');
  lines.push('/* ── ChatInput · 猫头眨眼装饰动效 ── */');
  lines.push('@keyframes tfds-cat-blink {');
  lines.push('  0%, 90%, 100% { transform: scaleY(0); }');
  lines.push('  94% { transform: scaleY(1); }');
  lines.push('  98% { transform: scaleY(0); }');
  lines.push('}');
  lines.push('.tfds-cat-eyelid {');
  lines.push('  transform: scaleY(0);');
  lines.push('  animation: tfds-cat-blink var(--motion-decor-cat-blink) var(--motion-loop-easing) infinite;');
  lines.push('}');
  lines.push('.tfds-cat-eyelid--right { transform-origin: 17.5px 8.6px; }');
  lines.push('.tfds-cat-eyelid--left { transform-origin: 7.5px 8.6px; }');

  lines.push('');
  lines.push('/* ── Button loading · 行内 border spinner（快于 Icon 渐变环）── */');
  lines.push('.tfds-inline-spin {');
  lines.push('  display: inline-block;');
  lines.push('  border-radius: 9999px;');
  lines.push('  border: 2px solid currentColor;');
  lines.push('  border-top-color: transparent;');
  lines.push('  animation: tfds-icon-rotate var(--motion-inline-spin-loop, 1s) linear infinite;');
  lines.push('}');

  lines.push('');
  lines.push('/* ── prefers-reduced-motion：循环 / 入场 / 装饰 ── */');
  lines.push('@media (prefers-reduced-motion: reduce) {');
  lines.push('  .tfds-text-shimmer:not(.tfds-text-shimmer--static),');
  lines.push('  .tfds-icon-spin,');
  lines.push('  .tfds-inline-spin,');
  lines.push('  .tfds-skeleton:not(.tfds-skeleton--static),');
  lines.push('  .tfds-ai-dot-bounce,');
  lines.push('  .tfds-cat-eyelid,');
  lines.push('  .tfds-message-bubble-pop,');
  lines.push('  [data-tfds-component="Dropdown.Panel"] {');
  lines.push('    animation: none !important;');
  lines.push('  }');
  lines.push('  [data-tfds-component="Dropdown.Panel"] {');
  lines.push('    transition: none !important;');
  lines.push('    transform: none !important;');
  lines.push('  }');
  lines.push('  .tfds-text-shimmer:not(.tfds-text-shimmer--static) {');
  lines.push('    background-image: none;');
  lines.push('    -webkit-text-fill-color: unset;');
  lines.push('    color: var(--motion-text-shimmer-source);');
  lines.push('  }');
  lines.push('  .tfds-skeleton:not(.tfds-skeleton--static) {');
  lines.push('    background-image: none;');
  lines.push('  }');
  lines.push('}');

  return lines;
}
