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

export default defineConfig({
  // Scan Rust files in component library + frontend
  content: {
    filesystem: [
      'crates/vapora-leptos-ui/src/**/*.rs',
      'crates/vapora-frontend/src/**/*.rs',
    ],
  },

  // Presets
  presets: [
    presetUno(),         // Core Tailwind-like utilities
    presetAttributify(), // Attribute syntax support
    presetIcons({
      cdn: 'https://esm.sh/',
    }),
  ],

  // Safelist critical utilities (prevent purgation)
  safelist: [
    // Layout
    'flex', 'grid', 'block', 'inline-block', 'inline-flex', 'hidden',
    'items-center', 'items-start', 'items-end',
    'justify-center', 'justify-between', 'justify-end',
    'flex-col', 'flex-row', 'flex-wrap',

    // Spacing
    'gap-2', 'gap-3', 'gap-4', 'gap-6',
    'p-2', 'p-4', 'p-6', 'px-2', 'px-2.5', 'px-3', 'px-4', 'px-6',
    'py-0.5', 'py-1.5', 'py-2', 'py-3',
    'm-2', 'm-4', 'mx-auto',

    // Sizing
    'w-4', 'w-8', 'w-12', 'w-full', 'h-4', 'h-8', 'h-12', 'h-full', 'min-h-screen',

    // Rounded
    'rounded', 'rounded-md', 'rounded-lg', 'rounded-xl', 'rounded-full',

    // Colors (glassmorphism)
    'bg-white/5', 'bg-white/8', 'bg-transparent',
    'border', 'border-2', 'border-white/20', 'border-cyan-400/70',
    'border-cyan-500/30', 'border-t-cyan-400',
    'text-xs', 'text-sm', 'text-base', 'text-lg',
    'text-white', 'text-cyan-400', 'text-purple-400', 'text-red-400',
    'placeholder-gray-400',
    'font-medium',

    // Effects
    'backdrop-blur-sm', 'backdrop-blur-md', 'backdrop-blur-lg', 'backdrop-blur-xl',
    'shadow-lg', 'shadow-cyan-500/40', 'shadow-cyan-500/50', 'shadow-purple-500/40',

    // Transitions
    'transition-all', 'duration-200', 'duration-300', 'animate-spin',

    // States
    'opacity-50', 'cursor-pointer', 'cursor-not-allowed',
    'focus:outline-none', 'focus:ring-2', 'focus:ring-cyan-500/50', 'focus:border-cyan-400/70',
    'hover:bg-white/5', 'hover:bg-white/8', 'hover:border-cyan-400/70',
    'disabled:opacity-50', 'disabled:cursor-not-allowed',

    // Gradients
    'bg-gradient-to-r',
    'from-cyan-500/90', 'from-cyan-400/90',
    'via-purple-600/90', 'via-purple-500/90',
    'to-pink-500/90', 'to-pink-400/90',
    'from-red-500/90', 'from-red-400/90',
    'to-pink-600/90',
    'hover:from-cyan-400/90', 'hover:via-purple-500/90', 'hover:to-pink-400/90',
    'hover:from-red-400/90', 'hover:to-pink-500/90',

    // Accessibility
    'sr-only',

    // Role attributes
    'role',
    'aria-label',
  ],

  // Shortcuts (design system utilities)
  shortcuts: {
    // Buttons
    'ds-btn': 'rounded-lg font-medium transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-cyan-500/50',
    'ds-btn-sm': 'px-3 py-1.5 text-sm',
    'ds-btn-md': 'px-4 py-2 text-base',
    'ds-btn-lg': 'px-6 py-3 text-lg',

    // Cards
    'ds-card': 'bg-white/5 backdrop-blur-md border border-white/20 rounded-xl shadow-lg transition-all duration-300',
    'ds-card-hover': 'hover:bg-white/8 hover:shadow-cyan-500/20',

    // Glassmorphism glass effect
    'glass-effect': 'bg-white/5 backdrop-blur-md border border-white/20',

    // Gradient backgrounds
    'gradient-primary': 'bg-gradient-to-r from-cyan-500/90 via-purple-600/90 to-pink-500/90',
    'gradient-secondary': 'bg-gradient-to-r from-cyan-400/90 via-purple-500/90 to-pink-400/90',
  },

  // Theme (CSS variables)
  theme: {
    colors: {
      'bg-primary': '#0a0118',
      'bg-glass': 'rgba(255, 255, 255, 0.05)',
      'accent-cyan': '#22d3ee',
      'accent-purple': '#a855f7',
      'accent-pink': '#ec4899',
    },
    animation: {
      keyframes: {
        fadeIn: '{from{opacity:0}to{opacity:1}}',
        scaleIn: '{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}',
      },
      durations: {
        fadeIn: '200ms',
        scaleIn: '200ms',
      },
      timingFns: {
        fadeIn: 'ease-out',
        scaleIn: 'ease-out',
      },
    },
  },
})