<template>
  <button
    :type="type"
    :disabled="disabled || loading"
    class="enhanced-button"
    :class="buttonClasses"
    @click="handleClick"
  >
    <span v-if="loading" class="loading-spinner">
      <svg class="animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
      </svg>
    </span>
    
    <span v-if="icon && !loading" class="button-icon">
      <component :is="icon" class="w-5 h-5" />
    </span>
    
    <span class="button-text">
      <slot></slot>
    </span>

    <span v-if="success" class="success-indicator">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
      </svg>
    </span>
  </button>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  variant?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'ghost' | 'outline'
  size?: 'xs' | 'sm' | 'md' | 'lg'
  type?: 'button' | 'submit' | 'reset'
  disabled?: boolean
  loading?: boolean
  success?: boolean
  icon?: any
  fullWidth?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
  size: 'md',
  type: 'button',
  disabled: false,
  loading: false,
  success: false,
  fullWidth: false
})

const emit = defineEmits<{
  click: [event: MouseEvent]
}>()

const buttonClasses = computed(() => {
  const classes = ['btn']
  
  // Variant
  classes.push(`btn-${props.variant}`)
  
  // Size
  classes.push(`btn-${props.size}`)
  
  // States
  if (props.loading) classes.push('loading-state')
  if (props.success) classes.push('success-state')
  if (props.fullWidth) classes.push('w-full')
  
  return classes
})

const handleClick = (event: MouseEvent) => {
  if (!props.disabled && !props.loading) {
    emit('click', event)
  }
}
</script>

<style scoped>
.enhanced-button {
  @apply relative overflow-hidden transition-all duration-200;
  @apply flex items-center justify-center gap-2;
}

.enhanced-button:not(:disabled):hover {
  @apply transform scale-105;
}

.enhanced-button:not(:disabled):active {
  @apply transform scale-95;
}

.enhanced-button:disabled {
  @apply opacity-50 cursor-not-allowed;
}

.loading-spinner {
  @apply w-5 h-5;
}

.button-icon {
  @apply flex items-center justify-center;
}

.button-text {
  @apply font-medium;
}

.success-indicator {
  @apply absolute inset-0 flex items-center justify-center bg-success text-success-content;
  animation: successPop 0.3s ease-out;
}

@keyframes successPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.loading-state {
  @apply pointer-events-none;
}

.success-state .button-text,
.success-state .button-icon {
  @apply opacity-0;
}

/* Ripple effect */
.enhanced-button::before {
  content: '';
  @apply absolute inset-0 bg-white opacity-0;
  @apply transition-opacity duration-300;
  border-radius: inherit;
}

.enhanced-button:not(:disabled):active::before {
  @apply opacity-20;
  animation: ripple 0.6s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.3;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
</style>
