import type { Variants, Transition } from 'framer-motion'

// ==========================================
// TRANSITION PRESETS
// ==========================================

export const transitions = {
  // Smooth spring for most UI elements
  spring: {
    type: 'spring',
    stiffness: 400,
    damping: 30,
  } as Transition,

  // Gentle spring for cards and larger elements
  gentle: {
    type: 'spring',
    stiffness: 300,
    damping: 25,
  } as Transition,

  // Snappy for quick interactions
  snappy: {
    type: 'spring',
    stiffness: 500,
    damping: 35,
  } as Transition,

  // Smooth easing for fades
  smooth: {
    duration: 0.3,
    ease: [0.4, 0, 0.2, 1],
  } as Transition,

  // Slow for dramatic reveals
  slow: {
    duration: 0.5,
    ease: [0.4, 0, 0.2, 1],
  } as Transition,

  // Fast for microinteractions
  fast: {
    duration: 0.15,
    ease: [0.4, 0, 0.2, 1],
  } as Transition,
}

// ==========================================
// ANIMATION VARIANTS
// ==========================================

// Fade animations
export const fadeIn: Variants = {
  hidden: { opacity: 0 },
  visible: { 
    opacity: 1,
    transition: transitions.smooth,
  },
  exit: { 
    opacity: 0,
    transition: transitions.fast,
  },
}

export const fadeInUp: Variants = {
  hidden: { opacity: 0, y: 20 },
  visible: { 
    opacity: 1, 
    y: 0,
    transition: transitions.gentle,
  },
  exit: { 
    opacity: 0, 
    y: 10,
    transition: transitions.fast,
  },
}

export const fadeInDown: Variants = {
  hidden: { opacity: 0, y: -20 },
  visible: { 
    opacity: 1, 
    y: 0,
    transition: transitions.gentle,
  },
  exit: { 
    opacity: 0, 
    y: -10,
    transition: transitions.fast,
  },
}

// Table row animation for lists
export const tableRowVariants: Variants = {
  hidden: { opacity: 0, x: -10 },
  visible: { 
    opacity: 1, 
    x: 0,
    transition: transitions.gentle,
  },
  exit: { 
    opacity: 0, 
    x: 10,
    transition: transitions.fast,
  },
}

// Container variants with stagger children
export const containerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.05,
    },
  },
  exit: {
    opacity: 0,
    transition: {
      staggerChildren: 0.05,
      staggerDirection: -1,
    },
  },
}

// Item variants for staggered lists
export const itemVariants: Variants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: transitions.gentle,
  },
  exit: {
    opacity: 0,
    y: -10,
    transition: transitions.fast,
  },
}

// Pulse glow effect for buttons and highlights
export const pulseGlow: Variants = {
  initial: {
    boxShadow: '0 0 0 0 rgba(139, 92, 246, 0)',
  },
  animate: {
    boxShadow: [
      '0 0 0 0 rgba(139, 92, 246, 0.4)',
      '0 0 0 10px rgba(139, 92, 246, 0)',
      '0 0 0 0 rgba(139, 92, 246, 0)',
    ],
    transition: {
      duration: 2,
      repeat: Infinity,
      ease: 'easeInOut',
    },
  },
}

export const fadeInLeft: Variants = {
  hidden: { opacity: 0, x: -20 },
  visible: { 
    opacity: 1, 
    x: 0,
    transition: transitions.gentle,
  },
  exit: { 
    opacity: 0, 
    x: -10,
    transition: transitions.fast,
  },
}

export const fadeInRight: Variants = {
  hidden: { opacity: 0, x: 20 },
  visible: { 
    opacity: 1, 
    x: 0,
    transition: transitions.gentle,
  },
  exit: { 
    opacity: 0, 
    x: 10,
    transition: transitions.fast,
  },
}

// Scale animations
export const scaleIn: Variants = {
  hidden: { opacity: 0, scale: 0.95 },
  visible: { 
    opacity: 1, 
    scale: 1,
    transition: transitions.spring,
  },
  exit: { 
    opacity: 0, 
    scale: 0.95,
    transition: transitions.fast,
  },
}

export const scaleInBounce: Variants = {
  hidden: { opacity: 0, scale: 0.8 },
  visible: { 
    opacity: 1, 
    scale: 1,
    transition: {
      type: 'spring',
      stiffness: 500,
      damping: 25,
    },
  },
  exit: { 
    opacity: 0, 
    scale: 0.9,
    transition: transitions.fast,
  },
}

// Slide animations
export const slideInFromBottom: Variants = {
  hidden: { opacity: 0, y: '100%' },
  visible: { 
    opacity: 1, 
    y: 0,
    transition: transitions.spring,
  },
  exit: { 
    opacity: 0, 
    y: '100%',
    transition: transitions.smooth,
  },
}

export const slideInFromTop: Variants = {
  hidden: { opacity: 0, y: '-100%' },
  visible: { 
    opacity: 1, 
    y: 0,
    transition: transitions.spring,
  },
  exit: { 
    opacity: 0, 
    y: '-100%',
    transition: transitions.smooth,
  },
}

export const slideInFromLeft: Variants = {
  hidden: { opacity: 0, x: '-100%' },
  visible: { 
    opacity: 1, 
    x: 0,
    transition: transitions.spring,
  },
  exit: { 
    opacity: 0, 
    x: '-100%',
    transition: transitions.smooth,
  },
}

export const slideInFromRight: Variants = {
  hidden: { opacity: 0, x: '100%' },
  visible: { 
    opacity: 1, 
    x: 0,
    transition: transitions.spring,
  },
  exit: { 
    opacity: 0, 
    x: '100%',
    transition: transitions.smooth,
  },
}

// Container animations with staggered children
export const staggerContainer: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.05,
      delayChildren: 0.1,
    },
  },
  exit: {
    opacity: 0,
    transition: {
      staggerChildren: 0.03,
      staggerDirection: -1,
    },
  },
}

export const staggerContainerSlow: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.2,
    },
  },
  exit: {
    opacity: 0,
    transition: {
      staggerChildren: 0.05,
      staggerDirection: -1,
    },
  },
}

export const staggerItem: Variants = {
  hidden: { opacity: 0, y: 20 },
  visible: { 
    opacity: 1, 
    y: 0,
    transition: transitions.gentle,
  },
  exit: { 
    opacity: 0, 
    y: 10,
    transition: transitions.fast,
  },
}

// Card animations
export const cardHover = {
  rest: { 
    scale: 1, 
    boxShadow: '0 0 0 rgba(59, 130, 246, 0)',
  },
  hover: { 
    scale: 1.02,
    boxShadow: '0 8px 30px rgba(59, 130, 246, 0.15)',
    transition: transitions.snappy,
  },
  tap: { 
    scale: 0.98,
    transition: transitions.fast,
  },
}

export const cardReveal: Variants = {
  hidden: { 
    opacity: 0, 
    y: 30,
    scale: 0.95,
  },
  visible: { 
    opacity: 1, 
    y: 0,
    scale: 1,
    transition: {
      type: 'spring',
      stiffness: 300,
      damping: 24,
    },
  },
  exit: { 
    opacity: 0, 
    y: 20,
    scale: 0.95,
    transition: transitions.fast,
  },
}

// Modal/Dialog animations
export const modalOverlay: Variants = {
  hidden: { opacity: 0 },
  visible: { 
    opacity: 1,
    transition: { duration: 0.2 },
  },
  exit: { 
    opacity: 0,
    transition: { duration: 0.15 },
  },
}

export const modalContent: Variants = {
  hidden: { 
    opacity: 0, 
    scale: 0.95,
    y: 20,
  },
  visible: { 
    opacity: 1, 
    scale: 1,
    y: 0,
    transition: transitions.spring,
  },
  exit: { 
    opacity: 0, 
    scale: 0.95,
    y: 10,
    transition: transitions.fast,
  },
}

// Sidebar animations
export const sidebarExpand: Variants = {
  collapsed: { width: 64 },
  expanded: { 
    width: 256,
    transition: transitions.spring,
  },
}

export const sidebarItem: Variants = {
  collapsed: { 
    opacity: 0,
    x: -10,
    transition: transitions.fast,
  },
  expanded: { 
    opacity: 1,
    x: 0,
    transition: transitions.smooth,
  },
}

// Navigation animations
export const navItemActive = {
  inactive: {
    backgroundColor: 'transparent',
    color: 'var(--sidebar-foreground)',
  },
  active: {
    backgroundColor: 'var(--sidebar-primary)',
    color: 'var(--sidebar-primary-foreground)',
    transition: transitions.snappy,
  },
}

// Progress/Loading animations
export const progressBar: Variants = {
  hidden: { scaleX: 0, originX: 0 },
  visible: (custom: number) => ({
    scaleX: custom / 100,
    transition: {
      duration: 0.5,
      ease: [0.4, 0, 0.2, 1],
    },
  }),
}

export const shimmer: Variants = {
  hidden: { x: '-100%' },
  visible: {
    x: '100%',
    transition: {
      repeat: Infinity,
      duration: 1.5,
      ease: 'linear',
    },
  },
}

// Stat counter animation
export const countUp = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { duration: 0.3 },
  },
}

// Chart animations
export const chartFadeIn: Variants = {
  hidden: { opacity: 0, scale: 0.9 },
  visible: { 
    opacity: 1, 
    scale: 1,
    transition: {
      duration: 0.5,
      ease: [0.4, 0, 0.2, 1],
    },
  },
}

export const chartBarGrow: Variants = {
  hidden: { scaleY: 0, originY: 1 },
  visible: (i: number) => ({
    scaleY: 1,
    transition: {
      delay: i * 0.05,
      duration: 0.4,
      ease: [0.4, 0, 0.2, 1],
    },
  }),
}

// Page transitions
export const pageTransition: Variants = {
  initial: { 
    opacity: 0,
    y: 20,
  },
  animate: { 
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.3,
      ease: [0.4, 0, 0.2, 1],
    },
  },
  exit: { 
    opacity: 0,
    y: -10,
    transition: {
      duration: 0.2,
      ease: [0.4, 0, 0.2, 1],
    },
  },
}

// Tab content transitions
export const tabContent: Variants = {
  hidden: { 
    opacity: 0, 
    x: 20,
  },
  visible: { 
    opacity: 1, 
    x: 0,
    transition: transitions.gentle,
  },
  exit: { 
    opacity: 0, 
    x: -20,
    transition: transitions.fast,
  },
}

// Badge/pill animations
export const badgePop: Variants = {
  hidden: { scale: 0, opacity: 0 },
  visible: { 
    scale: 1, 
    opacity: 1,
    transition: {
      type: 'spring',
      stiffness: 500,
      damping: 20,
    },
  },
  exit: { 
    scale: 0, 
    opacity: 0,
    transition: transitions.fast,
  },
}

// Notification animations
export const notificationSlide: Variants = {
  hidden: { 
    opacity: 0, 
    x: 100,
    scale: 0.9,
  },
  visible: { 
    opacity: 1, 
    x: 0,
    scale: 1,
    transition: transitions.spring,
  },
  exit: { 
    opacity: 0, 
    x: 100,
    scale: 0.9,
    transition: transitions.smooth,
  },
}

// Button animations
export const buttonTap = {
  tap: { scale: 0.97 },
  hover: { scale: 1.02 },
}

export const buttonGlow = {
  rest: {
    boxShadow: '0 0 0 0 rgba(59, 130, 246, 0)',
  },
  hover: {
    boxShadow: '0 0 20px 2px rgba(59, 130, 246, 0.4)',
    transition: transitions.smooth,
  },
}

// List item animations
export const listItem: Variants = {
  hidden: { opacity: 0, x: -20 },
  visible: (i: number) => ({
    opacity: 1,
    x: 0,
    transition: {
      delay: i * 0.05,
      ...transitions.gentle,
    },
  }),
  exit: { 
    opacity: 0, 
    x: 20,
    transition: transitions.fast,
  },
}

// Accordion animations
export const accordionContent: Variants = {
  collapsed: { 
    height: 0, 
    opacity: 0,
    transition: {
      height: { duration: 0.2 },
      opacity: { duration: 0.15 },
    },
  },
  expanded: { 
    height: 'auto', 
    opacity: 1,
    transition: {
      height: { duration: 0.3 },
      opacity: { duration: 0.2, delay: 0.1 },
    },
  },
}

// Glow effect animation
export const glowPulse: Variants = {
  initial: {
    boxShadow: '0 0 0 0 rgba(59, 130, 246, 0.4)',
  },
  animate: {
    boxShadow: [
      '0 0 0 0 rgba(59, 130, 246, 0.4)',
      '0 0 20px 5px rgba(59, 130, 246, 0.2)',
      '0 0 0 0 rgba(59, 130, 246, 0.4)',
    ],
    transition: {
      duration: 2,
      repeat: Infinity,
      ease: 'easeInOut',
    },
  },
}

// Skeleton loading animation
export const skeletonPulse: Variants = {
  initial: { opacity: 0.5 },
  animate: {
    opacity: [0.5, 0.8, 0.5],
    transition: {
      duration: 1.5,
      repeat: Infinity,
      ease: 'easeInOut',
    },
  },
}

// ==========================================
// UTILITY FUNCTIONS
// ==========================================

/**
 * Create staggered delay for children
 */
export function staggerDelay(index: number, baseDelay = 0.05): number {
  return index * baseDelay
}

/**
 * Create custom fade in up with delay
 */
export function fadeInUpWithDelay(delay: number): Variants {
  return {
    hidden: { opacity: 0, y: 20 },
    visible: { 
      opacity: 1, 
      y: 0,
      transition: {
        ...transitions.gentle,
        delay,
      },
    },
  }
}

/**
 * Create viewport animation props
 */
export function viewportAnimation(once = true, amount = 0.3) {
  return {
    initial: 'hidden',
    whileInView: 'visible',
    viewport: { once, amount },
  }
}