import { defineConfig, presetWind4, presetIcons } from 'unocss'

export const theme = {
  colors: {
    bg: '#fafafa',
    surface: '#ffffff',
    text: '#18181b',
    muted: '#71717a',
    border: '#e4e4e7',
    accent: '#10b981',
    success: '#10b981',
    warning: '#f59e0b',
    danger: '#ef4444',
  },
  fontFamily: {
    sans: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
    mono: '"SF Mono", "JetBrains Mono", "Fira Code", Consolas, monospace',
  },
}

export const shortcuts = {
  // Buttons
  'btn': 'inline-flex items-center justify-center gap-2 px-4 py-2 text-xs font-medium border border-border transition-all duration-150 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed',
  'btn-primary': 'btn bg-text text-bg border-text hover:bg-zinc-800',
  'btn-secondary': 'btn bg-bg text-text hover:border-muted',
  'btn-danger': 'btn text-danger border-danger hover:bg-danger hover:text-white hover:border-danger',
  'btn-ghost': 'btn border-transparent hover:bg-border',
  'btn-accent': 'btn bg-accent text-white border-accent hover:opacity-90',

  // Inputs
  'input': 'w-full px-3 py-2 text-sm bg-bg border border-border font-sans focus:outline-none focus:border-muted transition-colors placeholder:text-muted/60',
  'textarea': 'input resize-none',

  // Labels
  'label': 'block text-xs text-muted font-medium mb-1',

  // Cards
  'card': 'bg-surface border border-border p-6',
  'section': 'card',

  // Navigation
  'nav-item': 'relative flex items-center gap-2.5 px-2.5 py-2 text-[13px] font-[450] text-muted transition-all duration-150 hover:text-text hover:bg-black/4',
  'nav-item-active': 'relative flex items-center gap-2.5 px-2.5 py-2 text-[13px] font-[450] text-text bg-black/4 before:content-[""] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-[3px] before:h-4 before:bg-accent before:rounded-r-sm',
  'nav-section': 'text-[10px] uppercase tracking-[0.06em] text-muted font-semibold px-2.5 pt-3 pb-1.5',

  // Badges
  'badge': 'inline-flex items-center text-xs px-2 py-0.5 border',
  'badge-draft': 'badge text-warning border-warning/40 bg-warning/10',
  'badge-published': 'badge text-success border-success/40 bg-success/10',

  // Page structure
  'page-header': 'flex items-center justify-between mb-6',
  'page-title': 'text-base font-medium text-text',
}

export default defineConfig({
  presets: [
    presetWind4(),
    presetIcons({
      scale: 1.2,
      cdn: 'https://esm.sh/',
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
      },
    }),
  ],
  theme,
  shortcuts,
})