import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
      warn: true,
    }),
  ],
  // Include Element Plus compatibility by safelisting common component classes
  safelist: [
    // Layout components
    'el-main',
    'el-header',
    'el-footer',
    'el-aside',
    'el-container',
    // Card
    'el-card',
    'el-card__header',
    // Buttons
    'el-button',
    'el-button--primary',
    'el-button--success',
    'el-button--warning',
    'el-button--info',
    'el-button--text',
    // Forms
    'el-form',
    'el-form-item',
    'el-form-item__label',
    'el-input',
    'el-select',
    'el-select__input',
    // Tables
    'el-table',
    'el-table__header',
    'el-table__body',
    'el-table-column',
    // Dialogs
    'el-dialog',
    'el-dialog__header',
    'el-dialog__body',
    'el-dialog__footer',
    // Drawer
    'el-drawer',
    // Menu
    'el-menu',
    'el-menu-item',
    'el-sub-menu',
    'el-sub-menu__title',
    // Dropdown
    'el-dropdown',
    'el-dropdown-menu',
    'el-dropdown-item',
    // Avatar
    'el-avatar',
    // Tags
    'el-tag',
    // Icons
    'el-icon',
    // Grid
    'el-row',
    'el-col',
    // Input number
    'el-input-number',
    // Message
    'el-message',
    // Notification
    'el-notification',
  ],
  theme: {
    extend: {
      colors: {
        // Preserve Element Plus color compatibility
        primary: '#409eff',
        success: '#67c23a',
        warning: '#e6a23c',
        danger: '#f56c6c',
        info: '#909399',
      },
      spacing: {
        // Custom spacing scale based on existing CSS usage
        1: '0.25rem',
        2: '0.5rem',
        3: '0.75rem',
        4: '1rem',
        5: '1.25rem',
        6: '1.5rem',
        8: '2rem',
        10: '2.5rem',
        12: '3rem',
        16: '4rem',
        20: '5rem',
        24: '6rem',
      },
      transitionDuration: {
        '0': '0ms',
        '75': '75ms',
        '100': '100ms',
        '150': '150ms',
        '200': '200ms',
        '300': '300ms',
        '400': '400ms',
        '500': '500ms',
        '600': '600ms',
        '700': '700ms',
        '800': '800ms',
        '900': '900ms',
        '1000': '1000ms',
      },
      transitionTimingFunction: {
        'ease-linear': 'linear',
        'ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
        'ease-out': 'cubic-bezier(0, 0, 0.2, 1)',
        'ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
      },
      keyframes: {
        'fade-in': {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        'fade-out': {
          '0%': { opacity: '1' },
          '100%': { opacity: '0' },
        },
        'slide-up': {
          '0%': { transform: 'translateY(20px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        'slide-down': {
          '0%': { transform: 'translateY(-20px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        'slide-left': {
          '0%': { transform: 'translateX(20px)', opacity: '0' },
          '100%': { transform: 'translateX(0)', opacity: '1' },
        },
        'slide-right': {
          '0%': { transform: 'translateX(-20px)', opacity: '0' },
          '100%': { transform: 'translateX(0)', opacity: '1' },
        },
        'zoom-in': {
          '0%': { transform: 'scale(0.9)', opacity: '0' },
          '100%': { transform: 'scale(1)', opacity: '1' },
        },
        'zoom-out': {
          '0%': { transform: 'scale(1.1)', opacity: '0' },
          '100%': { transform: 'scale(1)', opacity: '1' },
        },
        'bounce-in': {
          '0%': { transform: 'scale(0.3)', opacity: '0' },
          '50%': { transform: 'scale(1.05)' },
          '70%': { transform: 'scale(0.9)' },
          '100%': { transform: 'scale(1)', opacity: '1' },
        },
      },
    },
  },
  shortcuts: {
    // Transition utilities
    'transition-base': 'transition-all duration-300 ease-in-out',
    'transition-fast': 'transition-all duration-150 ease-in-out',
    'transition-slow': 'transition-all duration-500 ease-in-out',
    'transition-none': 'transition-none',
    
    // Fade utilities
    'fade-enter': 'animate-fade-in',
    'fade-exit': 'animate-fade-out',
    
    // Slide utilities
    'slide-up-enter': 'animate-slide-up',
    'slide-down-enter': 'animate-slide-down',
    'slide-left-enter': 'animate-slide-left',
    'slide-right-enter': 'animate-slide-right',
    
    // Zoom utilities
    'zoom-enter': 'animate-zoom-in',
    'zoom-exit': 'animate-zoom-out',
    
    // Bounce
    'bounce-enter': 'animate-bounce-in',
    
    // Staggered animations for lists
    'stagger-1': 'transition-all duration-300 delay-100',
    'stagger-2': 'transition-all duration-300 delay-200',
    'stagger-3': 'transition-all duration-300 delay-300',
    'stagger-4': 'transition-all duration-300 delay-400',
    'stagger-5': 'transition-all duration-300 delay-500',
  },
  rules: [
    // Custom transition classes that can be applied conditionally
    ['enter-active', { transition: 'all 0.3s ease-out' }],
    ['leave-active', { transition: 'all 0.3s ease-in' }],
    ['enter-from', { opacity: '0', transform: 'translateY(10px)' }],
    ['leave-to', { opacity: '0', transform: 'translateY(-10px)' }],
  ],
})