<script setup lang="ts">
/**
 * AppButton：玻璃拟态风格的按钮，支持 variant。
 */
import { computed } from 'vue';

interface Props {
  variant?: 'primary' | 'ghost' | 'danger' | 'text';
  size?: 'sm' | 'md' | 'lg';
  iconOnly?: boolean;
  disabled?: boolean;
  loading?: boolean;
  type?: 'button' | 'submit';
}
const props = withDefaults(defineProps<Props>(), {
  variant: 'ghost',
  size: 'md',
  type: 'button',
  disabled: false,
  loading: false,
  iconOnly: false
});

defineEmits<{ (e: 'click', ev: MouseEvent): void }>();

const classes = computed(() => [
  'app-btn',
  `app-btn--${props.variant}`,
  `app-btn--${props.size}`,
  props.iconOnly && 'app-btn--icon',
  props.loading && 'is-loading'
]);
</script>

<template>
  <button
    :class="classes"
    :type="type"
    :disabled="disabled || loading"
    @click="$emit('click', $event)"
  >
    <span v-if="loading" class="app-btn__spinner" />
    <slot v-else />
  </button>
</template>

<style scoped>
.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
  user-select: none;
  white-space: nowrap;
}
.app-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.app-btn:not(:disabled):active { transform: scale(0.97); }

.app-btn--sm { padding: 4px 10px; font-size: var(--font-sm); min-height: 28px; }
.app-btn--md { padding: 6px 14px; font-size: var(--font-base); min-height: 36px; }
.app-btn--lg { padding: 10px 20px; font-size: var(--font-md); min-height: 44px; }

.app-btn--icon.app-btn--sm { padding: 4px; min-width: 28px; }
.app-btn--icon.app-btn--md { padding: 6px; min-width: 36px; }
.app-btn--icon.app-btn--lg { padding: 10px; min-width: 44px; }

.app-btn--primary {
  background: var(--color-accent);
  color: white;
  box-shadow: var(--shadow-glow);
}
.app-btn--primary:hover:not(:disabled) { background: var(--color-accent-hover); }

.app-btn--ghost {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.app-btn--ghost:hover:not(:disabled) { background: var(--color-surface-strong); border-color: var(--color-border-strong); }

.app-btn--text {
  color: var(--color-text-muted);
}
.app-btn--text:hover:not(:disabled) { color: var(--color-text); background: var(--color-accent-soft); }

.app-btn--danger {
  background: transparent;
  color: var(--color-danger);
  border: 1px solid transparent;
}
.app-btn--danger:hover:not(:disabled) { background: rgba(255,118,117,.12); }

.app-btn__spinner {
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
</style>
