<template>
  <button
    ref="buttonRef"
    :class="['animated-button', btnClass, { 'is-loading': loading, 'is-success': success, 'is-disabled': disabled || loading }]"
    :disabled="disabled || loading"
    @click="handleClick"
    @mousedown="createRipple"
  >
    <div class="button-content" :class="{ 'opacity-0': loading || success }">
      <slot></slot>
    </div>

    <!-- Loading State -->
    <div v-if="loading" class="button-overlay">
      <LottiePlayer 
        path="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/79a4fc375bae.json" 
        width="40px" 
        height="40px" 
        :loop="true" 
      />
    </div>

    <!-- Success State -->
    <div v-if="success" class="button-overlay">
      <LottiePlayer 
        path="https://cdn.jsdelivr.net/gh/telemagnadon/obj-vault-3a@v2026.05.14-vendor-2/a/11999b7bb57c.json" 
        width="30px" 
        height="30px" 
        :loop="false" 
      />
    </div>
    
    <span v-for="ripple in ripples" :key="ripple.id" class="ripple" :style="ripple.style"></span>
  </button>
</template>

<script setup>
import { ref, reactive } from 'vue';
import LottiePlayer from './LottiePlayer.vue';

const props = defineProps({
  btnClass: { type: String, default: 'btn btn-primary' },
  loading: { type: Boolean, default: false },
  success: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false }
});

const emit = defineEmits(['click']);
const buttonRef = ref(null);
const ripples = reactive([]);

const handleClick = (e) => {
  if (props.loading || props.success || props.disabled) return;
  emit('click', e);
};

const createRipple = (event) => {
  if (props.disabled || props.loading || props.success) return;

  const button = buttonRef.value;
  if (!button) return;
  
  const rect = button.getBoundingClientRect();
  const size = Math.max(rect.width, rect.height);
  const x = event.clientX - rect.left - size / 2;
  const y = event.clientY - rect.top - size / 2;

  const id = Date.now();
  ripples.push({
    id,
    style: {
      width: `${size}px`,
      height: `${size}px`,
      top: `${y}px`,
      left: `${x}px`
    }
  });

  setTimeout(() => {
    const index = ripples.findIndex(r => r.id === id);
    if (index > -1) ripples.splice(index, 1);
  }, 600);
};
</script>

<style scoped>
.animated-button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: none;
  outline: none;
}

.button-content {
  transition: opacity 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.button-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ripple {
  position: absolute;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.is-loading, .is-success {
  pointer-events: none;
}

.opacity-0 {
  opacity: 0;
}

/* Base button styles if not provided by framework */
.btn {
    padding: 0.6rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
}
</style>
