<template>
  <button 
    :class="buttonClasses" 
    :disabled="disabled"
    @click="handleClick"
  >
    <i v-if="icon" :class="icon" class="btn-icon"></i>
    <span v-if="$slots.default" class="btn-text">
      <slot />
    </span>
  </button>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  type: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'secondary', 'error', 'text'].includes(value)
  },
  size: {
    type: String,
    default: 'medium',
    validator: (value) => ['small', 'medium', 'large'].includes(value)
  },
  icon: {
    type: String,
    default: ''
  },
  iconOnly: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  block: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['click'])

const buttonClasses = computed(() => {
  return [
    'btn',
    `btn-${props.type}`,
    `btn-${props.size}`,
    {
      'btn-icon-only': props.iconOnly,
      'btn-loading': props.loading,
      'btn-block': props.block,
      'btn-with-icon': props.icon && !props.iconOnly
    }
  ]
})

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

<style scoped>
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--button-padding-y) var(--button-padding-x);
  border: var(--button-border-width) solid transparent;
  border-radius: var(--size-border-radius-button);
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--button-font-size);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-timing);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-loading {
  pointer-events: none;
}

.btn-block {
  width: 100%;
}

.btn-icon-only {
  padding: var(--button-padding-y);
  min-width: auto;
}

.btn-with-icon {
  padding-left: calc(var(--button-padding-x) - var(--spacing-xs));
}

/* 按钮类型 */
.btn-primary {
  background: var(--color-primary-gradient);
  border-color: transparent;
  color: var(--color-text-primary);
  box-shadow: 0 4px 15px var(--color-shadow-primary);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-gradient-hover);
  box-shadow: 0 6px 20px var(--color-shadow-hover);
  transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.btn-secondary {
  background: var(--color-bg-hover);
  border-color: var(--color-border-secondary);
  color: var(--color-text-secondary);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-white-rgb-15);
  color: var(--color-text-primary);
  border-color: var(--color-border-primary);
  transform: translateY(-1px);
}

.btn-secondary:active:not(:disabled) {
  transform: translateY(0);
}

.btn-error {
  background: var(--color-bg-error);
  border-color: var(--color-border-error);
  color: var(--color-error);
}

.btn-error:hover:not(:disabled) {
  background: var(--color-error-rgb-1);
  border-color: var(--color-error-rgb-3);
  transform: translateY(-1px);
}

.btn-error:active:not(:disabled) {
  transform: translateY(0);
}

.btn-text {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
}

.btn-text:hover:not(:disabled) {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

/* 按钮尺寸 */
.btn-small {
  padding: calc(var(--button-padding-y) * 0.75) calc(var(--button-padding-x) * 0.75);
  font-size: var(--font-size-sm);
  min-height: 32px;
}

.btn-medium {
  padding: var(--button-padding-y) var(--button-padding-x);
  font-size: var(--button-font-size);
  min-height: 40px;
}

.btn-large {
  padding: calc(var(--button-padding-y) * 1.25) calc(var(--button-padding-x) * 1.25);
  font-size: var(--font-size-lg);
  min-height: 48px;
}

/* 加载状态 */
.btn-loading .btn-icon,
.btn-loading .btn-text {
  opacity: 0.6;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* 图标样式 */
.btn-icon {
  font-size: 1em;
  line-height: 1;
}

.btn-text {
  line-height: 1;
}
</style>