import { fade, fadeUp, scaleIn, compose, withDuration } from '@pyreon/kinetic-presets'

// Use a preset directly
const myTransition = fadeUp
// {
//   enterStyle: { opacity: 0, transform: 'translateY(16px)' },
//   enterToStyle: { opacity: 1, transform: 'translateY(0)' },
//   enterTransition: 'all 300ms ease-out',
//   leaveStyle: { opacity: 1, transform: 'translateY(0)' },
//   leaveToStyle: { opacity: 0, transform: 'translateY(16px)' },
//   leaveTransition: 'all 200ms ease-in',
// }

// Customize timing
const slower = withDuration(fadeUp, 500, 300)

// Combine presets
const combined = compose(fade, scaleIn)

type Preset = {
  // Inline style mode:
  enterStyle?: CSSProperties // Styles at the start of enter
  enterToStyle?: CSSProperties // Styles at the end of enter
  enterTransition?: string // CSS transition for the enter phase
  leaveStyle?: CSSProperties // Styles at the start of leave
  leaveToStyle?: CSSProperties // Styles at the end of leave
  leaveTransition?: string // CSS transition for the leave phase

  // Class-based mode:
  enter?: string // Active class during enter
  enterFrom?: string // Class at start of enter
  enterTo?: string // Class at end of enter
  leave?: string // Active class during leave
  leaveFrom?: string // Class at start of leave
  leaveTo?: string // Class at end of leave
}

type CSSProperties = Record<string, string | number | undefined>

import { createFade } from '@pyreon/kinetic-presets'

// Simple opacity fade
const simpleFade = createFade()
// {
//   enterStyle: { opacity: 0 },
//   enterToStyle: { opacity: 1 },
//   enterTransition: 'all 300ms ease-out',
//   leaveStyle: { opacity: 1 },
//   leaveToStyle: { opacity: 0 },
//   leaveTransition: 'all 200ms ease-in',
// }

// Fade with upward movement
const fadeUp = createFade({ direction: 'up', distance: 24 })
// {
//   enterStyle: { opacity: 0, transform: 'translateY(24px)' },
//   enterToStyle: { opacity: 1, transform: 'translateY(0)' },
//   enterTransition: 'all 300ms ease-out',
//   leaveStyle: { opacity: 1, transform: 'translateY(0)' },
//   leaveToStyle: { opacity: 0, transform: 'translateY(24px)' },
//   leaveTransition: 'all 200ms ease-in',
// }

// Fade from the left with custom timing
const slideInLeft = createFade({
  direction: 'left',
  distance: 32,
  duration: 500,
  leaveDuration: 300,
  easing: 'ease-in-out',
  leaveEasing: 'ease-in',
})

// Subtle fade for tooltips
const tooltipFade = createFade({
  direction: 'down',
  distance: 4,
  duration: 150,
  leaveDuration: 100,
})

import { createSlide } from '@pyreon/kinetic-presets'

const slideDown = createSlide({ direction: 'down', distance: 32 })

// Menu dropdown slide
const menuSlide = createSlide({
  direction: 'down',
  distance: 8,
  duration: 200,
  leaveDuration: 150,
  easing: 'ease-out',
})

// Sidebar slide
const sidebarSlide = createSlide({
  direction: 'right',
  distance: 280,
  duration: 300,
  leaveDuration: 200,
  easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
})

import { createScale } from '@pyreon/kinetic-presets'

// Default: scale from 0.9
const scaleUp = createScale()
// {
//   enterStyle: { opacity: 0, transform: 'scale(0.9)' },
//   enterToStyle: { opacity: 1, transform: 'scale(1)' },
//   enterTransition: 'all 300ms ease-out',
//   leaveStyle: { opacity: 1, transform: 'scale(1)' },
//   leaveToStyle: { opacity: 0, transform: 'scale(0.9)' },
//   leaveTransition: 'all 200ms ease-in',
// }

// Scale from zero (dramatic pop-in)
const popIn = createScale({ from: 0, duration: 400 })

// Subtle scale for cards
const cardScale = createScale({ from: 0.95, duration: 200, leaveDuration: 150 })

// Scale up from a large size (zoom out effect)
const zoomOut = createScale({ from: 1.5 })

// Bouncy scale with spring easing
const bouncyScale = createScale({
  from: 0.5,
  duration: 500,
  easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
})

import { createRotate } from '@pyreon/kinetic-presets'

// Gentle tilt
const tilt = createRotate({ degrees: 10 })
// {
//   enterStyle: { opacity: 0, transform: 'rotate(-10deg)' },
//   enterToStyle: { opacity: 1, transform: 'rotate(0)' },
//   enterTransition: 'all 300ms ease-out',
//   leaveStyle: { opacity: 1, transform: 'rotate(0)' },
//   leaveToStyle: { opacity: 0, transform: 'rotate(10deg)' },
//   leaveTransition: 'all 200ms ease-in',
// }

// Half spin
const spin = createRotate({ degrees: 180, duration: 500 })

// Full rotation (clock hand effect)
const fullSpin = createRotate({ degrees: 360, duration: 800 })

// Subtle wobble
const wobble = createRotate({
  degrees: 5,
  duration: 200,
  easing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
})

import { createBlur } from '@pyreon/kinetic-presets'

// Simple blur
const blur = createBlur({ amount: 12 })
// {
//   enterStyle: { opacity: 0, filter: 'blur(12px)' },
//   enterToStyle: { opacity: 1, filter: 'blur(0px)' },
//   enterTransition: 'all 300ms ease-out',
//   leaveStyle: { opacity: 1, filter: 'blur(0px)' },
//   leaveToStyle: { opacity: 0, filter: 'blur(12px)' },
//   leaveTransition: 'all 200ms ease-in',
// }

// Blur with scale (glass-like effect)
const glassBlur = createBlur({ amount: 8, scale: 0.95 })
// enterStyle also includes: transform: 'scale(0.95)'

// Heavy blur for dramatic reveals
const dramaticBlur = createBlur({
  amount: 20,
  scale: 0.8,
  duration: 600,
  leaveDuration: 400,
})

// Subtle blur for overlays
const overlayBlur = createBlur({ amount: 4, duration: 200 })

import { compose, fade, scaleIn, blurIn } from '@pyreon/kinetic-presets'

// Combine fade + scale + blur
const fancy = compose(fade, scaleIn, blurIn)
// enterStyle: { opacity: 0, transform: 'scale(0.9)', filter: 'blur(8px)' }
// enterToStyle: { opacity: 1, transform: 'scale(1)', filter: 'blur(0px)' }
// enterTransition: 'all 300ms ease-out' (from blurIn, the last one)

const inlinePreset = createFade({ direction: 'up' })
const classPreset: Preset = {
  enterFrom: 'ring-2 ring-blue-500',
  enterTo: 'ring-0',
}

// Both modes merge independently
const combined = compose(inlinePreset, classPreset)
// Has both enterStyle AND enterFrom set

import { withDuration, fadeUp, scaleIn, blurIn } from '@pyreon/kinetic-presets'

// Different enter and leave durations
const slow = withDuration(fadeUp, 600, 400)
// enterTransition: 'all 600ms ease-out'
// leaveTransition: 'all 400ms ease-in'

// Symmetric duration
const symmetric = withDuration(fadeUp, 500)
// enterTransition: 'all 500ms ease-out'
// leaveTransition: 'all 500ms ease-in'

// Quick tooltip animation
const quick = withDuration(scaleIn, 150, 100)

// Slow dramatic reveal
const dramatic = withDuration(blurIn, 800, 500)

import { withEasing, scaleIn, fadeUp } from '@pyreon/kinetic-presets'

// Bouncy spring easing
const bouncy = withEasing(scaleIn, 'cubic-bezier(0.34, 1.56, 0.64, 1)')
// enterTransition: 'all 300ms cubic-bezier(0.34, 1.56, 0.64, 1)'
// leaveTransition: 'all 200ms cubic-bezier(0.34, 1.56, 0.64, 1)'

// Different enter/leave easing
const asymmetric = withEasing(
  fadeUp,
  'cubic-bezier(0.22, 1, 0.36, 1)', // Smooth deceleration for enter
  'cubic-bezier(0.55, 0, 1, 0.45)', // Quick acceleration for leave
)

// Linear for progress indicators
const linear = withEasing(fadeUp, 'linear')

import { withDelay, fadeUp, scaleIn } from '@pyreon/kinetic-presets'

// Delay enter by 150ms, no delay on leave
const delayed = withDelay(fadeUp, 150, 0)
// enterTransition: 'all 300ms 150ms ease-out'
// leaveTransition: 'all 200ms 0ms ease-in'

// Same delay for both phases
const symmetricDelay = withDelay(scaleIn, 200)
// enterTransition: 'all 300ms 200ms ease-out'
// leaveTransition: 'all 200ms 200ms ease-in'

import { withDelay, fadeUp } from '@pyreon/kinetic-presets'

// Create staggered presets for a list of items
function stagger(basePreset: Preset, count: number, delayStep: number) {
  return Array.from({ length: count }, (_, i) => withDelay(basePreset, i * delayStep, 0))
}

const staggeredFades = stagger(fadeUp, 5, 50)
// staggeredFades[0] → 0ms delay
// staggeredFades[1] → 50ms delay
// staggeredFades[2] → 100ms delay
// staggeredFades[3] → 150ms delay
// staggeredFades[4] → 200ms delay

import { reverse, fadeUp, slideLeft } from '@pyreon/kinetic-presets'

// fadeUp enters from below -- reverse enters from above
const fadeDown = reverse(fadeUp)
// enterStyle: { opacity: 1, transform: 'translateY(0)' }  (was leaveStyle)
// enterToStyle: { opacity: 0, transform: 'translateY(16px)' }  (was leaveToStyle)
// leaveStyle: { opacity: 0, transform: 'translateY(16px)' }  (was enterStyle)
// leaveToStyle: { opacity: 1, transform: 'translateY(0)' }  (was enterToStyle)

// Enter from right, leave to left (opposite of slideLeft)
const slideRight = reverse(slideLeft)

import {
  compose,
  withDuration,
  withEasing,
  withDelay,
  reverse,
  fade,
  scaleIn,
} from '@pyreon/kinetic-presets'

const custom = withDelay(
  withEasing(withDuration(compose(fade, scaleIn), 500, 300), 'cubic-bezier(0.34, 1.56, 0.64, 1)'),
  100,
  0,
)

import { fade, fadeUp, fadeLeftBig } from '@pyreon/kinetic-presets'

// fadeUp is the most commonly used -- great for modals, dropdowns, tooltips
console.log(fadeUp.enterStyle)
// { opacity: 0, transform: 'translateY(16px)' }

import { scaleIn } from '@pyreon/kinetic-presets'

// scaleIn is great for dialogs and popovers
console.log(scaleIn.enterStyle)
// { opacity: 0, transform: 'scale(0.9)' }

import { flipX } from '@pyreon/kinetic-presets'

console.log(flipX.enterStyle)
// { opacity: 0, transform: 'perspective(600px) rotateX(90deg)' }

import { newspaperIn } from '@pyreon/kinetic-presets'

// The newspaper effect: element spins in from nothing
console.log(newspaperIn.enterStyle)
// { opacity: 0, transform: 'scale(0) rotate(-720deg)' }

import { bounceIn, springIn } from '@pyreon/kinetic-presets'

// bounceIn overshoots then settles
// springIn is a subtler version

import { blurIn, puffIn } from '@pyreon/kinetic-presets'

// blurIn: element fades from blurred to sharp
// puffIn: element shrinks from large + blurry to normal + sharp

import { clipCircle, clipDiamond } from '@pyreon/kinetic-presets'

console.log(clipCircle.enterStyle)
// { clipPath: 'circle(0% at 50% 50%)' }

console.log(clipCircle.enterToStyle)
// { clipPath: 'circle(75% at 50% 50%)' }

console.log(clipDiamond.enterStyle)
// { clipPath: 'polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)' }

import { swingInTop, swirlIn, lightSpeedInLeft } from '@pyreon/kinetic-presets'

// swingInTop uses transformOrigin: 'top' for a hinge-like effect
console.log(swingInTop.enterStyle)
// { opacity: 0, transform: 'perspective(600px) rotateX(-90deg)', transformOrigin: 'top' }

// swirlIn is a dramatic 540-degree spin from nothing
console.log(swirlIn.enterStyle)
// { opacity: 0, transform: 'rotate(-540deg) scale(0)' }

import { presets } from '@pyreon/kinetic-presets'

// Look up a preset by name
const preset = presets['fadeUp']

// List all available preset names
const allNames = Object.keys(presets)
// ['fade', 'fadeUp', 'fadeDown', ...] (90+ entries)

// Dynamic preset selection
function getPreset(name: string): Preset | undefined {
  return presets[name as keyof typeof presets]
}

import { Transition } from '@pyreon/runtime-dom'
import { fadeUp } from '@pyreon/kinetic-presets'
import { signal } from '@pyreon/reactivity'

const visible = signal(false)

function AnimatedModal() {
  return () => (
    <Transition
      show={() => visible()}
      onBeforeEnter={(el) => {
        // Apply enter-from styles
        Object.assign(el.style, fadeUp.enterStyle)
        el.style.transition = fadeUp.enterTransition ?? ''
      }}
      onAfterEnter={(el) => {
        // Apply enter-to styles (transition will animate)
        Object.assign(el.style, fadeUp.enterToStyle)
      }}
      onBeforeLeave={(el) => {
        // Apply leave-from styles
        Object.assign(el.style, fadeUp.leaveStyle)
        el.style.transition = fadeUp.leaveTransition ?? ''
      }}
      onAfterLeave={(el) => {
        // Apply leave-to styles
        Object.assign(el.style, fadeUp.leaveToStyle)
      }}
    >
      <div class="modal">Modal content</div>
    </Transition>
  )
}

import type { Preset } from '@pyreon/kinetic-presets'

function presetToTransitionProps(preset: Preset) {
  return {
    onBeforeEnter: (el: HTMLElement) => {
      if (preset.enterStyle) Object.assign(el.style, preset.enterStyle)
      if (preset.enterTransition) el.style.transition = preset.enterTransition
    },
    onAfterEnter: (el: HTMLElement) => {
      if (preset.enterToStyle) {
        requestAnimationFrame(() => Object.assign(el.style, preset.enterToStyle))
      }
    },
    onBeforeLeave: (el: HTMLElement) => {
      if (preset.leaveStyle) Object.assign(el.style, preset.leaveStyle)
      if (preset.leaveTransition) el.style.transition = preset.leaveTransition
    },
    onAfterLeave: (el: HTMLElement) => {
      if (preset.leaveToStyle) Object.assign(el.style, preset.leaveToStyle)
    },
  }
}

// Usage:
const transitionProps = presetToTransitionProps(fadeUp)
// <Transition show={() => visible()} {...transitionProps}>
//   <div>Animated content</div>
// </Transition>

import { createFade, withDuration, withEasing } from '@pyreon/kinetic-presets'

// Smooth page transition: slide up with deceleration
const pageTransition = withEasing(
  withDuration(createFade({ direction: 'up', distance: 30 }), 400, 250),
  'cubic-bezier(0.22, 1, 0.36, 1)', // Smooth deceleration
  'cubic-bezier(0.55, 0, 1, 0.45)', // Quick acceleration out
)

import { compose, createFade, createScale, withDuration, withEasing } from '@pyreon/kinetic-presets'

// Modal: fade + scale with spring easing
const modalTransition = withEasing(
  withDuration(compose(createFade(), createScale({ from: 0.95 })), 300, 200),
  'cubic-bezier(0.34, 1.56, 0.64, 1)', // Slight overshoot on enter
  'ease-in', // Quick exit
)

// Overlay backdrop: simple fade
const backdropTransition = withDuration(createFade(), 200, 150)

import { createFade, withDuration } from '@pyreon/kinetic-presets'

// Fast, subtle animation for menus
const dropdownTransition = withDuration(createFade({ direction: 'down', distance: 8 }), 200, 150)

import { compose, createFade, createSlide, withEasing } from '@pyreon/kinetic-presets'

// Toast slides in from the right with a bounce
const toastTransition = withEasing(
  compose(createFade(), createSlide({ direction: 'right', distance: 100 })),
  'cubic-bezier(0.34, 1.56, 0.64, 1)', // Bouncy enter
  'ease-in', // Quick dismiss
)

import { createFade } from '@pyreon/kinetic-presets'

// Subtle cross-fade for tab content
const tabTransition = createFade({
  duration: 200,
  leaveDuration: 150,
  easing: 'ease-in-out',
})

import { compose, createFade, createSlide, withDuration } from '@pyreon/kinetic-presets'

// Sidebar slides in from the left
const sidebarTransition = withDuration(
  compose(createFade(), createSlide({ direction: 'left', distance: 280 })),
  300,
  200,
)

import { compose, createScale, createBlur, withDuration } from '@pyreon/kinetic-presets'

// Full-size image zoom with blur
const galleryTransition = withDuration(
  compose(createScale({ from: 0.8 }), createBlur({ amount: 4 })),
  400,
  250,
)

import { compose, createFade, createScale, withDuration } from '@pyreon/kinetic-presets'

// Quick preview card animation
const previewCard = withDuration(compose(createFade(), createScale({ from: 0.98 })), 150, 100)

import type { Preset } from '@pyreon/kinetic-presets'

// Custom "grow from left edge" preset
const growFromLeft: Preset = {
  enterStyle: {
    opacity: 0,
    transform: 'scaleX(0)',
    transformOrigin: 'left center',
  },
  enterToStyle: {
    opacity: 1,
    transform: 'scaleX(1)',
    transformOrigin: 'left center',
  },
  enterTransition: 'all 400ms cubic-bezier(0.22, 1, 0.36, 1)',
  leaveStyle: {
    opacity: 1,
    transform: 'scaleX(1)',
    transformOrigin: 'left center',
  },
  leaveToStyle: {
    opacity: 0,
    transform: 'scaleX(0)',
    transformOrigin: 'left center',
  },
  leaveTransition: 'all 250ms ease-in',
}

import type { Preset } from '@pyreon/kinetic-presets'

interface ShakeOptions {
  distance?: number
  duration?: number
  axis?: 'x' | 'y'
}

function createShakeIn({ distance = 10, duration = 400, axis = 'x' }: ShakeOptions = {}): Preset {
  const translate = axis === 'x' ? 'translateX' : 'translateY'
  return {
    enterStyle: {
      opacity: 0,
      transform: `${translate}(${distance}px)`,
    },
    enterToStyle: {
      opacity: 1,
      transform: `${translate}(0)`,
    },
    enterTransition: `all ${duration}ms cubic-bezier(0.68, -0.55, 0.265, 1.55)`,
    leaveStyle: {
      opacity: 1,
      transform: `${translate}(0)`,
    },
    leaveToStyle: {
      opacity: 0,
      transform: `${translate}(-${distance}px)`,
    },
    leaveTransition: `all ${duration * 0.6}ms ease-in`,
  }
}

import { createFade, createScale, compose, withDuration, withEasing } from '@pyreon/kinetic-presets'
import type { Preset } from '@pyreon/kinetic-presets'

// Define your app's animation system
export const animations = {
  // UI elements
  tooltip: withDuration(createFade({ direction: 'down', distance: 4 }), 150, 100),
  dropdown: withDuration(createFade({ direction: 'down', distance: 8 }), 200, 150),
  popover: withDuration(compose(createFade(), createScale({ from: 0.95 })), 250, 180),

  // Modals
  modal: withEasing(
    withDuration(compose(createFade(), createScale({ from: 0.95 })), 300, 200),
    'cubic-bezier(0.34, 1.56, 0.64, 1)',
  ),
  drawer: withDuration(createFade({ direction: 'right', distance: 320 }), 300, 200),

  // Page transitions
  pageForward: createFade({ direction: 'left', distance: 30, duration: 350, leaveDuration: 200 }),
  pageBack: createFade({ direction: 'right', distance: 30, duration: 350, leaveDuration: 200 }),

  // Feedback
  success: withEasing(createScale({ from: 0.3 }), 'cubic-bezier(0.34, 1.56, 0.64, 1)'),
  error: withEasing(
    createFade({ direction: 'down', distance: 8 }),
    'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
  ),
} satisfies Record<string, Preset>

onBeforeEnter: (el) => {
  el.style.willChange = 'opacity, transform'
},
onAfterEnter: (el) => {
  el.style.willChange = ''
},

import { fade, type Preset } from '@pyreon/kinetic-presets'

const prefersReducedMotion =
  typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches

// Use a simple fade (or no animation) for reduced motion
function safePreset(preset: Preset): Preset {
  if (prefersReducedMotion) return fade // or return {} for no animation
  return preset
}