import { trigger, state, style, transition, animate, keyframes, query, stagger } from '@angular/animations';

export const modalAnimations = [
  // 弹窗背景遮罩动画
  trigger('backdropAnimation', [
    transition(':enter', [
      style({ opacity: 0 }),
      animate('300ms ease-out', style({ opacity: 1 }))
    ]),
    transition(':leave', [
      animate('200ms ease-in', style({ opacity: 0 }))
    ])
  ]),

  // 弹窗容器动画
  trigger('modalAnimation', [
    transition(':enter', [
      style({ 
        opacity: 0, 
        transform: 'scale(0.8) translateY(-20px)',
        filter: 'blur(4px)'
      }),
      animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)', 
        style({ 
          opacity: 1, 
          transform: 'scale(1) translateY(0)',
          filter: 'blur(0px)'
        })
      )
    ]),
    transition(':leave', [
      animate('250ms cubic-bezier(0.4, 0.0, 0.2, 1)', 
        style({ 
          opacity: 0, 
          transform: 'scale(0.9) translateY(-10px)',
          filter: 'blur(2px)'
        })
      )
    ])
  ]),

  // 成功图标动画
  trigger('successIconAnimation', [
    transition(':enter', [
      style({ 
        opacity: 0, 
        transform: 'scale(0) rotate(-180deg)' 
      }),
      animate('600ms 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55)', 
        style({ 
          opacity: 1, 
          transform: 'scale(1) rotate(0deg)' 
        })
      )
    ])
  ]),

  // 文件列表动画
  trigger('fileListAnimation', [
    transition('* => *', [
      query(':enter', [
        style({ 
          opacity: 0, 
          transform: 'translateX(-20px)' 
        }),
        stagger(100, [
          animate('300ms ease-out', 
            style({ 
              opacity: 1, 
              transform: 'translateX(0)' 
            })
          )
        ])
      ], { optional: true })
    ])
  ]),

  // 颜色分析按钮动画
  trigger('analyzeButtonAnimation', [
    state('idle', style({ transform: 'scale(1)' })),
    state('loading', style({ transform: 'scale(0.95)' })),
    transition('idle => loading', [
      animate('150ms ease-in')
    ]),
    transition('loading => idle', [
      animate('200ms ease-out')
    ]),
    transition(':enter', [
      style({ 
        opacity: 0, 
        transform: 'translateY(20px)' 
      }),
      animate('400ms 300ms ease-out', 
        style({ 
          opacity: 1, 
          transform: 'translateY(0)' 
        })
      )
    ])
  ]),

  // 颜色分析结果动画
  trigger('analysisResultAnimation', [
    transition(':enter', [
      style({ 
        opacity: 0, 
        transform: 'translateY(30px)',
        height: 0 
      }),
      animate('500ms cubic-bezier(0.25, 0.8, 0.25, 1)', 
        style({ 
          opacity: 1, 
          transform: 'translateY(0)',
          height: '*' 
        })
      )
    ]),
    transition(':leave', [
      animate('300ms ease-in', 
        style({ 
          opacity: 0, 
          transform: 'translateY(-20px)',
          height: 0 
        })
      )
    ])
  ]),

  // 颜色色块动画
  trigger('colorSwatchAnimation', [
    transition('* => *', [
      query(':enter', [
        style({ 
          opacity: 0, 
          transform: 'scale(0) rotate(45deg)' 
        }),
        stagger(50, [
          animate('300ms cubic-bezier(0.68, -0.55, 0.265, 1.55)', 
            style({ 
              opacity: 1, 
              transform: 'scale(1) rotate(0deg)' 
            })
          )
        ])
      ], { optional: true })
    ])
  ]),

  // 加载动画
  trigger('loadingAnimation', [
    transition(':enter', [
      style({ 
        opacity: 0, 
        transform: 'scale(0.8)' 
      }),
      animate('300ms ease-out', 
        style({ 
          opacity: 1, 
          transform: 'scale(1)' 
        })
      )
    ]),
    transition(':leave', [
      animate('200ms ease-in', 
        style({ 
          opacity: 0, 
          transform: 'scale(0.8)' 
        })
      )
    ])
  ]),

  // 错误提示动画
  trigger('errorAnimation', [
    transition(':enter', [
      animate('400ms ease-out', keyframes([
        style({ opacity: 0, transform: 'translateX(-100%)', offset: 0 }),
        style({ opacity: 1, transform: 'translateX(10px)', offset: 0.6 }),
        style({ opacity: 1, transform: 'translateX(0)', offset: 1 })
      ]))
    ]),
    transition(':leave', [
      animate('300ms ease-in', 
        style({ 
          opacity: 0, 
          transform: 'translateX(100%)' 
        })
      )
    ])
  ]),

  // 按钮悬停动画
  trigger('buttonHoverAnimation', [
    state('normal', style({ transform: 'translateY(0)' })),
    state('hover', style({ transform: 'translateY(-2px)' })),
    transition('normal <=> hover', [
      animate('200ms ease-out')
    ])
  ]),

  // 进度条动画
  trigger('progressAnimation', [
    transition('* => *', [
      style({ width: '0%' }),
      animate('{{ duration }}ms ease-out', style({ width: '{{ width }}%' }))
    ], { params: { duration: 1000, width: 100 } })
  ]),

  // 淡入淡出动画
  trigger('fadeInOut', [
    transition(':enter', [
      style({ opacity: 0 }),
      animate('300ms ease-in', style({ opacity: 1 }))
    ]),
    transition(':leave', [
      animate('200ms ease-out', style({ opacity: 0 }))
    ])
  ]),

  // 滑动动画
  trigger('slideInOut', [
    transition(':enter', [
      style({ transform: 'translateY(100%)', opacity: 0 }),
      animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)', 
        style({ transform: 'translateY(0)', opacity: 1 })
      )
    ]),
    transition(':leave', [
      animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)', 
        style({ transform: 'translateY(100%)', opacity: 0 })
      )
    ])
  ])
];

// 动画配置常量
export const ANIMATION_TIMINGS = {
  fast: '200ms',
  normal: '300ms',
  slow: '500ms',
  verySlow: '800ms'
};

export const ANIMATION_EASINGS = {
  easeIn: 'ease-in',
  easeOut: 'ease-out',
  easeInOut: 'ease-in-out',
  bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
  smooth: 'cubic-bezier(0.25, 0.8, 0.25, 1)'
};