<template>
  <button
    v-motion
    :initial="animated ? { scale: 0.95, opacity: 0 } : {}"
    :enter="animated ? { scale: 1, opacity: 1 } : {}"
    :hovered="hoverable ? { scale: 1.05 } : {}"
    :tapped="{ scale: 0.95 }"
    :delay="delay"
    class="monaco-button"
    :class="[
      `monaco-button--${variant}`,
      `monaco-button--${size}`,
      {
        'monaco-button--block': block,
        'monaco-button--loading': loading,
        'monaco-button--icon-only': !$slots.default && icon
      }
    ]"
    :disabled="disabled || loading"
    @click="$emit('click', $event)"
  >
    <span v-if="loading" class="monaco-button__spinner">
      <svg class="monaco-button__spinner-svg" viewBox="0 0 24 24">
        <circle
          class="monaco-button__spinner-circle"
          cx="12"
          cy="12"
          r="10"
          stroke-width="3"
          fill="none"
        />
      </svg>
    </span>
    
    <Icon 
      v-if="icon && !loading" 
      :name="icon" 
      class="monaco-button__icon"
      :class="{ 'monaco-button__icon--left': $slots.default }"
    />
    
    <span v-if="$slots.default" class="monaco-button__content">
      <slot />
    </span>
    
    <Icon 
      v-if="rightIcon && !loading" 
      :name="rightIcon" 
      class="monaco-button__icon monaco-button__icon--right"
    />
  </button>
</template>

<script setup lang="ts">
import Icon from '~/components/ui/Icon.vue'

interface Props {
  variant?: 'primary' | 'secondary' | 'glass' | 'gradient' | 'outline' | 'ghost'
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  icon?: string
  rightIcon?: string
  block?: boolean
  disabled?: boolean
  loading?: boolean
  hoverable?: boolean
  animated?: boolean
  delay?: number
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
  size: 'md',
  block: false,
  disabled: false,
  loading: false,
  hoverable: true,
  animated: true,
  delay: 0
})

defineEmits<{
  click: [event: MouseEvent]
}>()
</script>

<style scoped lang="scss">
.monaco-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  border: none;
  overflow: hidden;
  
  // Create shimmer effect for gradient variant
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent
    );
    transition: left 0.5s;
  }
  
  &:hover::before {
    left: 100%;
  }
  
  // Variants
  &--primary {
    background: #dc2626;
    color: white;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
    
    &:hover:not(:disabled) {
      background: #b91c1c;
      box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
      transform: translateY(-2px);
    }
    
    &:active:not(:disabled) {
      transform: translateY(0);
    }
  }
  
  &--secondary {
    background: white;
    color: #dc2626;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    
    &:hover:not(:disabled) {
      background: #fef2f2;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
      transform: translateY(-2px);
    }
  }
  
  &--glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #dc2626;
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
    
    &:hover:not(:disabled) {
      background: rgba(255, 255, 255, 0.8);
      border-color: rgba(220, 38, 38, 0.2);
      box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
      transform: translateY(-2px);
    }
  }
  
  &--gradient {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
    
    &:hover:not(:disabled) {
      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
      box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
      transform: translateY(-2px);
    }
  }
  
  &--outline {
    background: transparent;
    color: #dc2626;
    border: 2px solid #dc2626;
    
    &:hover:not(:disabled) {
      background: rgba(220, 38, 38, 0.1);
      border-color: #b91c1c;
      transform: translateY(-2px);
    }
  }
  
  &--ghost {
    background: transparent;
    color: #dc2626;
    
    &:hover:not(:disabled) {
      background: rgba(220, 38, 38, 0.1);
      transform: translateY(-2px);
    }
  }
  
  // Sizes
  &--xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 8px;
  }
  
  &--sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 10px;
  }
  
  &--md {
    padding: 0.5rem 1rem;
    font-size: 1rem;
  }
  
  &--lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
    border-radius: 14px;
  }
  
  &--xl {
    padding: 1rem 2rem;
    font-size: 1.25rem;
    border-radius: 16px;
  }
  
  // States
  &--block {
    width: 100%;
  }
  
  &--icon-only {
    aspect-ratio: 1;
    padding: 0;
    
    &.monaco-button--xs { width: 1.75rem; }
    &.monaco-button--sm { width: 2rem; }
    &.monaco-button--md { width: 2.5rem; }
    &.monaco-button--lg { width: 3rem; }
    &.monaco-button--xl { width: 3.5rem; }
  }
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  &--loading {
    color: transparent;
    pointer-events: none;
  }
  
  // Icons
  &__icon {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    
    &--left {
      margin-right: 0.25rem;
    }
    
    &--right {
      margin-left: 0.25rem;
    }
  }
  
  // Spinner
  &__spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  &__spinner-svg {
    width: 1.5em;
    height: 1.5em;
    animation: spin 1s linear infinite;
  }
  
  &__spinner-circle {
    stroke: currentColor;
    stroke-linecap: round;
    stroke-dasharray: 64;
    stroke-dashoffset: 64;
    animation: dash 1.5s ease-in-out infinite;
  }
}

// Animations
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes dash {
  0% { stroke-dashoffset: 64; }
  50% { stroke-dashoffset: 16; }
  100% { stroke-dashoffset: 64; }
}

// Dark mode support
@media (prefers-color-scheme: dark) {
  .monaco-button {
    &--secondary {
      background: #27272a;
      color: #dc2626;
      
      &:hover:not(:disabled) {
        background: #3f3f46;
      }
    }
    
    &--glass {
      background: rgba(30, 30, 30, 0.7);
      border-color: rgba(255, 255, 255, 0.1);
    }
  }
}
</style>